From 5ba3fa6447de335acff08eca7c1e34e554e9705c Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sun, 8 Feb 2026 22:58:18 +0100
Subject: [PATCH] feat(settings): improve button animations

---
 .../BottomScreen/Menus/Clock/Achievements.vue |  2 +-
 .../Settings/BottomScreen/Menus/Menus.vue     | 20 ++++++-------------
 .../BottomScreen/Menus/Options/2048.vue       |  2 +-
 .../BottomScreen/Menus/TouchScreen/TapTap.vue |  2 +-
 .../BottomScreen/Menus/User/Snake.vue         |  2 +-
 .../Settings/BottomScreen/NumberInput.vue     |  2 +-
 app/stores/confirmationModal.ts               |  4 ++--
 7 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
index ce7a76b..2b2d4db 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
@@ -38,7 +38,7 @@ const isAnimating = ref(true);
 const SLIDE_OFFSET = 96;
 const SLIDE_DURATION = 0.25;
 const ARROW_SLIDE_DELAY = 0.15;
-const ARROW_SLIDE_DURATION = 0.15;
+const ARROW_SLIDE_DURATION = 0.167;
 const VIEW_ALL_OFFSET = -20;
 
 const animation = reactive({
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index 2958416..6de9be0 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -233,12 +233,12 @@ const selectorXOffset = computed(() => {
 
 const handleActivateB = () => {
   if (settingsStore.isIntro || settingsStore.isOutro) return;
-  settingsStore.animateOutro();
-};
 
-const handleActivateA = () => {
-  if (settingsStore.isIntro || settingsStore.isOutro) return;
-  select(getParentMenu(selected.value));
+  if (isSubmenuSelected.value) {
+    select(getParentMenu(selected.value));
+  } else {
+    settingsStore.animateOutro();
+  }
 };
 </script>
 
@@ -275,16 +275,8 @@ const handleActivateA = () => {
     />
 
     <CommonButtons
-      v-if="isSubmenuSelected"
       :y-offset="settingsStore.barOffsetY"
-      :b-label="$t('common.goBack')"
-      :a-label="$t('common.select')"
-      @activate-b="handleActivateA()"
-    />
-    <CommonButtons
-      v-else
-      :y-offset="settingsStore.barOffsetY"
-      :b-label="$t('common.quit')"
+      :b-label="isSubmenuSelected ? $t('common.goBack') : $t('common.quit')"
       :a-label="$t('common.select')"
       @activate-b="handleActivateB()"
     />
diff --git a/app/components/Settings/BottomScreen/Menus/Options/2048.vue b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
index 4b393b5..34b43fc 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
@@ -70,7 +70,7 @@ const BOARD_SIZE = 4;
 const SLIDE_OFFSET = 96;
 const SLIDE_DURATION = 0.25;
 const SCORE_OFFSET = -20;
-const SCORE_DURATION = 0.15;
+const SCORE_DURATION = 0.167;
 
 const isAnimating = ref(true);
 
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
index 6c22077..e57a90d 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
@@ -70,7 +70,7 @@ const isAnimating = ref(true);
 
 const AREA_FADE_DURATION = 0.2;
 const SCORE_OFFSET = -20;
-const SCORE_DURATION = 0.15;
+const SCORE_DURATION = 0.167;
 
 const animation = reactive({
   areaOpacity: 0,
diff --git a/app/components/Settings/BottomScreen/Menus/User/Snake.vue b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
index 1c34b60..26faa4f 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Snake.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
@@ -17,7 +17,7 @@ const BOARD_SLIDE_OFFSET = 96;
 const BOARD_SLIDE_DURATION = 0.25;
 const TEXT_FADE_DURATION = 0.15;
 const SCORE_OFFSET = -20;
-const SCORE_DURATION = 0.15;
+const SCORE_DURATION = 0.167;
 
 const isAnimating = ref(true);
 
diff --git a/app/components/Settings/BottomScreen/NumberInput.vue b/app/components/Settings/BottomScreen/NumberInput.vue
index f4ec9ce..0bc4864 100644
--- a/app/components/Settings/BottomScreen/NumberInput.vue
+++ b/app/components/Settings/BottomScreen/NumberInput.vue
@@ -83,7 +83,7 @@ const squareWidth = computed(() => upImage.value.rect.width);
 const SLIDE_OFFSET = 96;
 const SLIDE_DURATION = 0.25;
 const ARROW_SLIDE_DELAY = 0.15;
-const ARROW_SLIDE_DURATION = 0.15;
+const ARROW_SLIDE_DURATION = 0.167;
 
 const isAnimating = ref(true);
 
diff --git a/app/stores/confirmationModal.ts b/app/stores/confirmationModal.ts
index 655bd57..2a7f92b 100644
--- a/app/stores/confirmationModal.ts
+++ b/app/stores/confirmationModal.ts
@@ -2,8 +2,8 @@ import gsap from "gsap";
 
 const MODAL_MAX_Y_OFFSET = 106;
 const BUTTONS_MAX_Y_OFFSET = 20;
-const BUTTONS_TIME = 0.1;
-const MODAL_TIME = 0.225;
+const BUTTONS_TIME = 0.167;
+const MODAL_TIME = 0.25;
 
 export const useConfirmationModal = defineStore("confirmationModal", {
   state: () => ({