profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 5 Projects 2 Releases Packages Wiki Activity Actions

Attention grabber on saves manager when active save isn't synced

Browse source
This commit is contained in:
thepaperpilot 2024-02-17 16:50:39 -06:00
parent 7a6f249f58
commit af4229ebdd
1 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/Nav.vue
View file

@ -36,7 +36,7 @@
</div>
<div @click="savesManager?.open()">
<Tooltip display="Saves" :direction="Direction.Down" xoffset="-20px">
<span class="material-icons">library_books</span>
<span class="material-icons" :class="{ needsSync }">library_books</span>
</Tooltip>
</div>
<div @click="options?.open()">
@ -53,7 +53,7 @@
</div>
<div @click="savesManager?.open()">
<Tooltip display="Saves" :direction="Direction.Right">
<span class="material-icons">library_books</span>
<span class="material-icons" :class="{ needsSync }">library_books</span>
</Tooltip>
</div>
<div @click="options?.open()">
@ -98,9 +98,11 @@
import Changelog from "data/Changelog.vue";
import projInfo from "data/projInfo.json";
import Tooltip from "features/tooltips/Tooltip.vue";
import settings from "game/settings";
import { Direction } from "util/common";
import { galaxy, syncedSaves } from "util/galaxy";
import type { ComponentPublicInstance } from "vue";
import { ref } from "vue";
import { computed, ref } from "vue";
import Info from "./Info.vue";
import Options from "./Options.vue";
import SavesManager from "./saves/SavesManager.vue";
@ -117,6 +119,10 @@ const { useHeader, banner, title, discordName, discordLink, versionNumber } = pr
function openDiscord() {
window.open(discordLink, "mywindow");
}
const needsSync = computed(
() => galaxy.value?.loggedIn && !syncedSaves.value.includes(settings.active)
);
</script>
<style scoped>
@ -264,4 +270,32 @@ function openDiscord() {
color: var(--foreground);
text-shadow: none;
}
.needsSync {
color: var(--danger);
animation: 4s wiggle ease infinite;
}
@keyframes wiggle {
0% {
transform: rotate(-3deg);
box-shadow: 0 2px 2px #0003;
}
5% {
transform: rotate(20deg);
}
10% {
transform: rotate(-15deg);
}
15% {
transform: rotate(5deg);
}
20% {
transform: rotate(-1deg);
}
25% {
transform: rotate(0);
box-shadow: 0 2px 2px #0003;
}
}
</style>