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()"
   />