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

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')"
-    :a-label="$t('common.restart')"
+    :b-label="bLabel"
+    :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')"
-    :a-label="$t('common.confirm')"
+    :b-label="bLabel"
+    :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')"
-    :a-label="$t('common.confirm')"
+    :b-label="bLabel"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
   />