From af4229ebdde8bafed7b3d0afe9396acbd82e59ec Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 17 Feb 2024 16:50:39 -0600
Subject: [PATCH] Attention grabber on saves manager when active save isn't
 synced

---
 src/components/Nav.vue | 40 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 641dfee..e7a5a04 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -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>