feat(settings): animate buttons

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

@@ -192,7 +192,7 @@ onRender((ctx) => {
   />
 
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.reset')"
     @activate-b="handleCancel()"

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

@@ -79,7 +79,7 @@ defineOptions({ render: () => null });
   />
 
   <CommonButtons
-    :y-offset="0"
+    :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"

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

@@ -97,7 +97,7 @@ defineOptions({ render: () => null });
   />
 
   <CommonButtons
-    :y-offset="0"
+    :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"

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

@@ -331,7 +331,7 @@ const handleActivateB = () => {
     />
 
     <CommonButtons
-      :y-offset="settingsStore.barOffsetY"
+      :y-offset="settingsStore.barOffsetY + settingsStore.submenuButtonsOffsetY"
       :b-label="isSubmenuSelected ? $t('common.goBack') : $t('common.quit')"
       :a-label="$t('common.select')"
       @activate-b="handleActivateB()"

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

@@ -19,6 +19,7 @@ const handleActivateB = () => {
         store.closeSubMenu();
       }
     },
+    keepButtonsDown: (choice) => choice === "confirm",
   });
 };
 
@@ -565,7 +566,7 @@ useKeyDown((key) => {
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.quit')"
     :a-label="$t('common.restart')"
     @activate-b="handleActivateB()"

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

@@ -164,6 +164,7 @@ const handleConfirm = () => {
       await animateOutro();
       store.closeSubMenu();
     },
+    keepButtonsDown: true,
     timeout: 2000,
   });
 };
@@ -202,7 +203,7 @@ defineOptions({
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"

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

@@ -110,6 +110,7 @@ const handleConfirm = () => {
         await animateOutro();
         store.closeSubMenu();
       },
+      keepButtonsDown: true,
       timeout: 2000,
     });
   };
@@ -179,7 +180,7 @@ onRender((ctx) => {
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"

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

@@ -138,6 +138,7 @@ const handleActivateB = () => {
           state.value = "playing";
         }
       },
+      keepButtonsDown: (choice) => choice === "confirm",
     });
   } else {
     animateOutro().then(() => store.closeSubMenu());
@@ -238,6 +239,7 @@ const showDeathScreen = () => {
         store.closeSubMenu();
       }
     },
+    keepButtonsDown: (choice) => choice === "cancel",
   });
 };
 
@@ -412,7 +414,7 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.quit')"
     :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
     @activate-b="handleActivateB"

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

@@ -78,6 +78,7 @@ const handleActivateA = () => {
       await animateOutro();
       store.closeSubMenu();
     },
+    keepButtonsDown: true,
     timeout: 2000,
   });
 };
@@ -111,7 +112,7 @@ defineOptions({ render: () => null });
   />
 
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleActivateB"

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

@@ -278,6 +278,7 @@ const handleActivateA = () => {
       await animateOutro();
       store.closeSubMenu();
     },
+    keepButtonsDown: true,
     timeout: 2000,
   });
 };
@@ -285,7 +286,7 @@ const handleActivateA = () => {
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleActivateB"

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

@@ -101,6 +101,7 @@ const handleCancel = async () => {
         onCancel: () => {
           state.value = "alive";
         },
+        keepButtonsDown: (choice) => choice === "confirm",
       });
       break;
     }
@@ -327,7 +328,7 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
-    :y-offset="confirmationModal.buttonsYOffset"
+    :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.quit')"
     :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
     @activate-b="handleCancel"

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

@@ -127,7 +127,7 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
-    :y-offset="0"
+    :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
     @activate-b="handleCancel"