fix(settings): synchronize button animation with arrows of number input

app/components/Common/Buttons.vue

@@ -77,6 +77,16 @@ watch(
     ),
 );
 
+const forceAnimateBLabel = () => {
+  animateLabelChange(
+    (v) => (bButtonOffsetY = v),
+    (l) => (displayedBLabel = l),
+    props.bLabel,
+  );
+};
+
+defineExpose({ forceAnimateBLabel });
+
 onRender((ctx) => {
   ctx.globalAlpha = props.opacity ?? 1;
   ctx.font = "10px NDS10";

app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue

@@ -35,6 +35,9 @@ const confirmationModal = useConfirmationModal();
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const SLIDE_OFFSET = 96;
 const SLIDE_DURATION = 0.25;
 const ARROW_SLIDE_DELAY = 0.15;
@@ -60,6 +63,14 @@ const animateIntro = async () => {
       .timeline()
       .to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
       .to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
+      .call(
+        () => {
+          bLabel.value = $t("common.cancel");
+          aLabel.value = $t("common.reset");
+        },
+        [],
+        SUBMENU_LABEL_CHANGE_DELAY,
+      )
       .to(
         animation,
         { viewAllOffsetY: 0, duration: ARROW_SLIDE_DURATION, ease: "none" },
@@ -197,8 +208,8 @@ onRender((ctx) => {
 
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.reset')"
+    :a-label="aLabel"
     @activate-b="handleActivateB()"
     @activate-a="handleReset()"
   />

app/components/Settings/BottomScreen/Menus/Clock/Date.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
 import { useIntervalFn } from "@vueuse/core";
+import gsap from "gsap";
 
 const store = useSettingsStore();
 
@@ -12,6 +13,9 @@ useIntervalFn(() => {
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
 const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
 const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
@@ -22,6 +26,14 @@ const animateIntro = async () => {
     monthRef.value?.animateIntro(),
     dayRef.value?.animateIntro(),
     yearRef.value?.animateIntro(),
+    gsap.timeline().call(
+      () => {
+        bLabel.value = $t("common.cancel");
+        aLabel.value = $t("common.confirm");
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
+    ),
   ]);
   isAnimating.value = false;
 };
@@ -80,8 +92,8 @@ defineOptions({ render: () => null });
 
   <CommonButtons
     :y-offset="store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.confirm')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />

app/components/Settings/BottomScreen/Menus/Clock/Time.vue

@@ -23,6 +23,9 @@ const animation = reactive({
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const hourRef = useTemplateRef<InstanceType<typeof NumberInput>>("hour");
 const minuteRef = useTemplateRef<InstanceType<typeof NumberInput>>("minute");
 
@@ -34,7 +37,15 @@ const animateIntro = async () => {
     gsap
       .timeline()
       .to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
-      .to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0),
+      .to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
+      .call(
+        () => {
+          bLabel.value = $t("common.cancel");
+          aLabel.value = $t("common.confirm");
+        },
+        [],
+        SUBMENU_LABEL_CHANGE_DELAY,
+      ),
   ]);
   isAnimating.value = false;
 };
@@ -98,8 +109,8 @@ defineOptions({ render: () => null });
 
   <CommonButtons
     :y-offset="store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.confirm')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />

app/components/Settings/BottomScreen/Menus/Options/2048.vue

@@ -77,6 +77,9 @@ const SCORE_DURATION = 0.167;
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const intro = reactive({
   frameOffsetY: SLIDE_OFFSET,
   frameOpacity: 0,
@@ -148,7 +151,11 @@ const animateIntro = async () => {
   buildTilesFromBoard();
 
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(intro, { frameOffsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
     .to(intro, { frameOpacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
     .call(
@@ -163,14 +170,25 @@ const animateIntro = async () => {
       intro,
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       SLIDE_DURATION,
+    )
+    .call(
+      () => {
+        bLabel.value = $t("common.quit");
+        aLabel.value = $t("common.restart");
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
     );
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
   isAnimating.value = true;
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       intro,
       { frameOffsetY: SLIDE_OFFSET, duration: SLIDE_DURATION, ease: "none" },
@@ -581,8 +599,8 @@ useKeyDown(({ key }) => {
 <template>
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.quit')"
+    :b-label="bLabel"
-    :a-label="$t('common.restart')"
+    :a-label="aLabel"
     @activate-b="handleActivateB()"
     @activate-a="handleActivateA()"
   />

app/components/Settings/BottomScreen/Menus/Options/Language.vue

@@ -28,6 +28,9 @@ const BUTTON_POSITIONS = [
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const { selected, selectorPosition } = useButtonNavigation({
   buttons: {
     english: [10, 27, 106, 41],
@@ -95,7 +98,11 @@ const animation = reactive({
 
 const animateIntro = async () => {
   isAnimating.value = true;
-  const timeline = gsap.timeline();
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+    },
+  });
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
       .to(
@@ -109,13 +116,24 @@ const animateIntro = async () => {
         i * ROW_STAGGER,
       );
   }
+  timeline.call(
+    () => {
+      bLabel.value = $t("common.cancel");
+      aLabel.value = $t("common.confirm");
+    },
+    [],
+    SUBMENU_LABEL_CHANGE_DELAY,
+  );
   await timeline;
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
   isAnimating.value = true;
-  const timeline = gsap.timeline();
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+    },
+  });
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
       .to(
@@ -205,8 +223,8 @@ defineOptions({
 <template>
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.confirm')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
   />
 

app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue

@@ -18,6 +18,9 @@ const SLIDE_DURATION = 0.25;
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const animation = reactive({
   _3dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
   _2dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
@@ -48,6 +51,14 @@ const animateIntro = async () => {
         ease: "none",
       },
       BUTTON_STAGGER,
+    )
+    .call(
+      () => {
+        bLabel.value = $t("common.cancel");
+        aLabel.value = $t("common.confirm");
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
     );
   isAnimating.value = false;
 };
@@ -183,8 +194,8 @@ onRender((ctx) => {
 <template>
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.confirm')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
   />
 

app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue

@@ -68,6 +68,17 @@ let isNewBest = false;
 
 const isAnimating = ref(true);
 
+const labelsReady = ref(false);
+const bLabel = $t("common.quit");
+const aLabel = computed(() => {
+  if (!labelsReady.value) return $t("common.select");
+  return state.value === "waiting" ? $t("common.start") : $t("common.restart");
+});
+
+const buttonsRef = useTemplateRef<{ forceAnimateBLabel: () => void }>(
+  "buttons",
+);
+
 const AREA_FADE_DURATION = 0.2;
 const SCORE_OFFSET = -20;
 const SCORE_DURATION = 0.167;
@@ -81,7 +92,11 @@ const animation = reactive({
 const animateIntro = async () => {
   isAnimating.value = true;
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       animation,
       { areaOpacity: 1, duration: AREA_FADE_DURATION, ease: "none" },
@@ -91,8 +106,15 @@ const animateIntro = async () => {
       animation,
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       AREA_FADE_DURATION,
+    )
+    .call(
+      () => {
+        labelsReady.value = true;
+        buttonsRef.value?.forceAnimateBLabel();
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
     );
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
@@ -101,7 +123,11 @@ const animateOutro = async () => {
   targetY = LOGICAL_HEIGHT * 2 - 20;
 
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       animation,
       { areaOpacity: 0, duration: AREA_FADE_DURATION, ease: "none" },
@@ -418,9 +444,10 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
+    ref="buttons"
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.quit')"
+    :b-label="bLabel"
-    :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />

app/components/Settings/BottomScreen/Menus/User/Birthday.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
+import gsap from "gsap";
 
 const store = useSettingsStore();
 const confirmationModal = useConfirmationModal();
@@ -10,6 +11,9 @@ const BIRTHDAY_YEAR = 2002;
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
 const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
 const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
@@ -20,6 +24,14 @@ const animateIntro = async () => {
     monthRef.value?.animateIntro(),
     dayRef.value?.animateIntro(),
     yearRef.value?.animateIntro(),
+    gsap.timeline().call(
+      () => {
+        bLabel.value = $t("common.cancel");
+        aLabel.value = $t("common.confirm");
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
+    ),
   ]);
   isAnimating.value = false;
 };
@@ -113,8 +125,8 @@ defineOptions({ render: () => null });
 
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.confirm')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />

app/components/Settings/BottomScreen/Menus/User/Color.vue

@@ -23,6 +23,9 @@ const CELL_ANIMATION_STAGGER = 0.02;
 
 const SNAIL_ORDER = [0, 1, 2, 3, 7, 11, 15, 14, 13, 12, 8, 4, 5, 6, 10, 9];
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 // animation state
 const animation = reactive({
   cellVisibility: Array(16).fill(0) as number[],
@@ -74,6 +77,15 @@ const animateIntro = (): gsap.core.Timeline => {
     );
   }
 
+  timeline.call(
+    () => {
+      bLabel.value = $t("common.cancel");
+      aLabel.value = $t("common.confirm");
+    },
+    [],
+    SUBMENU_LABEL_CHANGE_DELAY,
+  );
+
   return timeline;
 };
 
@@ -287,8 +299,8 @@ const handleActivateA = () => {
 <template>
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.confirm')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />

app/components/Settings/BottomScreen/Menus/User/Snake.vue

@@ -20,6 +20,16 @@ const SCORE_OFFSET = -20;
 const SCORE_DURATION = 0.167;
 
 const isAnimating = ref(true);
+const state = ref<"waiting" | "alive" | "pause" | "dead">("waiting");
+
+const labelsReady = ref(false);
+const bLabel = computed(() =>
+  labelsReady.value ? $t("common.quit") : $t("common.goBack"),
+);
+const aLabel = computed(() => {
+  if (!labelsReady.value) return $t("common.select");
+  return state.value === "waiting" ? $t("common.start") : $t("common.restart");
+});
 
 const intro = reactive({
   boardOffsetY: BOARD_SLIDE_OFFSET,
@@ -31,7 +41,11 @@ const intro = reactive({
 const animateIntro = async () => {
   isAnimating.value = true;
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       intro,
       { boardOffsetY: 0, duration: BOARD_SLIDE_DURATION, ease: "none" },
@@ -51,14 +65,24 @@ const animateIntro = async () => {
       intro,
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       BOARD_SLIDE_DURATION + TEXT_FADE_DURATION,
+    )
+    .call(
+      () => {
+        labelsReady.value = true;
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
     );
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
   isAnimating.value = true;
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       intro,
       {
@@ -160,7 +184,6 @@ const tail: THREE.Vector2[] = [];
 const food = new THREE.Vector2();
 
 let score = 0;
-const state = ref<"waiting" | "alive" | "pause" | "dead">("waiting");
 
 const randomFoodPos = (): THREE.Vector2 => {
   // can't spawn on the head or tail
@@ -337,8 +360,8 @@ defineOptions({ render: () => null });
 <template>
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.quit')"
+    :b-label="bLabel"
-    :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />

app/components/Settings/BottomScreen/Menus/User/UserName.vue

@@ -19,6 +19,9 @@ const ROW_COUNT = 2;
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const animation = reactive({
   rowOffsetY: new Array<number>(ROW_COUNT).fill(SLIDE_OFFSET),
   rowOpacity: new Array<number>(ROW_COUNT).fill(0),
@@ -26,7 +29,11 @@ const animation = reactive({
 
 const animateIntro = async () => {
   isAnimating.value = true;
-  const timeline = gsap.timeline();
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+    },
+  });
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
       .to(
@@ -40,13 +47,24 @@ const animateIntro = async () => {
         i * ROW_STAGGER,
       );
   }
+  timeline.call(
+    () => {
+      bLabel.value = $t("common.cancel");
+      aLabel.value = $t("common.confirm");
+    },
+    [],
+    SUBMENU_LABEL_CHANGE_DELAY,
+  );
   await timeline;
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
   isAnimating.value = true;
-  const timeline = gsap.timeline();
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+    },
+  });
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
       .to(
@@ -128,8 +146,8 @@ defineOptions({ render: () => null });
 <template>
   <CommonButtons
     :y-offset="store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
+    :b-label="bLabel"
-    :a-label="$t('common.confirm')"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />

app/stores/settings.ts

@@ -1,5 +1,8 @@
 import gsap from "gsap";
 
+// not sure how i came up with it last night
+export const SUBMENU_LABEL_CHANGE_DELAY = 0.25 + 0.15 - (0.167 + 0.08);
+
 export const SETTINGS_MENUS = [
   "options",
   "clock",
@@ -80,23 +83,9 @@ export const useSettingsStore = defineStore("settings", {
           { offsetY: 0, opacity: 1, duration: 0.25, ease: "none" },
           "+=0.05",
         )
-        .to(this, {
-          submenuButtonsOffsetY: 24,
-          duration: 0.167,
-          ease: "none",
-        })
         .call(() => {
           this.currentSubMenu = submenu;
-        })
+        });
-        .to(
-          this,
-          {
-            submenuButtonsOffsetY: 0,
-            duration: 0.167,
-            ease: "none",
-          },
-          "+=0.05",
-        );
 
       const achievements = useAchievementsStore();
       if (!achievements.advancement.visitedSettings.includes(submenu)) {