From f8998206c12ea95f19089f06613662e5be65eae1 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Mon, 9 Feb 2026 17:00:16 +0100
Subject: [PATCH] feat(settings): animate transition to submenu (background and
 sliding)

---
 .../BottomScreen/Menus/Clock/Achievements.vue |  2 -
 .../BottomScreen/Menus/Clock/Date.vue         |  6 --
 .../BottomScreen/Menus/Clock/Menu.vue         | 30 ++++++--
 .../BottomScreen/Menus/Clock/Time.vue         |  2 -
 .../Settings/BottomScreen/Menus/Menus.vue     | 72 ++++++++++++++++---
 .../BottomScreen/Menus/Options/2048.vue       |  1 -
 .../BottomScreen/Menus/Options/Menu.vue       | 30 ++++++--
 .../Menus/Options/RenderingMode.vue           |  2 -
 .../BottomScreen/Menus/TouchScreen/Menu.vue   | 15 ++--
 .../BottomScreen/Menus/TouchScreen/TapTap.vue |  3 -
 .../Settings/BottomScreen/Menus/User/Menu.vue | 32 ++++++---
 app/stores/settings.ts                        | 55 +++++++++++++-
 12 files changed, 198 insertions(+), 52 deletions(-)

diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
index 2b2d4db..7ab17cb 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
@@ -135,8 +135,6 @@ useKeyDown((key) => {
 });
 
 onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-
   // slash divider
   ctx.globalAlpha = animation.opacity;
   ctx.translate(0, animation.offsetY);
diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue b/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
index 0f7ade2..1557cea 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
@@ -3,8 +3,6 @@ import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
 import { useIntervalFn } from "@vueuse/core";
 
 const store = useSettingsStore();
-const { assets } = useAssets();
-const { onRender } = useScreen();
 
 const now = ref(new Date());
 
@@ -53,10 +51,6 @@ const handleConfirm = async () => {
   store.closeSubMenu();
 };
 
-onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-});
-
 defineOptions({ render: () => null });
 </script>
 
diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue b/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
index 77bd5c3..3e81bd4 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    y: number;
+    opacity?: number;
+  }>(),
+  {
+    opacity: 1,
+  },
+);
 
 const { onRender } = useScreen();
 
@@ -10,6 +16,7 @@ const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
   selectedSubmenuParent: ComputedRef<string | null>;
+  selectedSubmenuExtraOffsetY: ComputedRef<number>;
 }>("menusContext")!;
 
 const { assets } = useAssets();
@@ -29,24 +36,33 @@ const isAnyOtherMenuOpen = computed(() => {
 
 const animation = useMenuAnimation("clock", isOpen);
 
+const submenuExtraOffset = (submenu: string) =>
+  settingsStore.selectedButton === submenu
+    ? menusContext.selectedSubmenuExtraOffsetY.value
+    : 0;
+
 onRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {
     assets.images.settings.topScreen.clock.time.draw(
       ctx,
       48 - animation.stage2Offset,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("clockTime"),
     );
     assets.images.settings.topScreen.clock.date.draw(
       ctx,
       0,
-      -96 + animation.stage2Offset + animation.stage1Offset,
+      -96 +
+        animation.stage2Offset +
+        animation.stage1Offset +
+        submenuExtraOffset("clockDate"),
     );
     assets.images.settings.topScreen.clock.achievements.draw(
       ctx,
       0,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("clockAchievements"),
     );
 
     assets.images.settings.topScreen.clock.clockActive.draw(ctx, 0, 0);
diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Time.vue b/app/components/Settings/BottomScreen/Menus/Clock/Time.vue
index 2882711..dd66764 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Time.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Time.vue
@@ -72,8 +72,6 @@ const handleConfirm = async () => {
 };
 
 onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-
   ctx.globalAlpha = animation.opacity;
   ctx.translate(0, animation.offsetY);
   assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 112, 63);
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index 6de9be0..c84adf0 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -20,6 +20,16 @@ import Selector from "~/components/Common/ButtonSelector.vue";
 
 const app = useAppStore();
 const settingsStore = useSettingsStore();
+const { assets } = useAssets();
+const { onRender } = useScreen();
+
+onRender((ctx) => {
+  if (settingsStore.submenuBackground.opacity > 0) {
+    ctx.globalAlpha = settingsStore.submenuBackground.opacity;
+    ctx.translate(0, settingsStore.submenuBackground.offsetY);
+    assets.images.home.topScreen.background.draw(ctx, 0, 0);
+  }
+});
 
 if (app.previousScreen === "home") {
   settingsStore.selectedButton = "options";
@@ -150,6 +160,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
   disabled: computed(
     () =>
       settingsStore.currentSubMenu !== null ||
+      settingsStore.submenuTransition.opacity < 1 ||
       settingsStore.isIntro ||
       settingsStore.isOutro ||
       settingsStore.animatingNotification,
@@ -165,9 +176,16 @@ const selectedSubmenuParent = computed(() =>
   isSubmenuSelected.value ? getParentMenu(selected.value) : null,
 );
 
+const selectedSubmenuExtraOffsetY = computed(
+  () =>
+    settingsStore.submenuTransition.selectorOffsetY -
+    settingsStore.submenuTransition.offsetY,
+);
+
 provide("menusContext", {
   isSubmenuSelected,
   selectedSubmenuParent,
+  selectedSubmenuExtraOffsetY,
 });
 
 watch(
@@ -231,8 +249,20 @@ const selectorXOffset = computed(() => {
   }
 });
 
+const selectorTransitionOffsetY = computed(() => {
+  if (isSubmenuSelected.value || selected.value === "touchScreen") {
+    return settingsStore.submenuTransition.selectorOffsetY;
+  }
+  return settingsStore.submenuTransition.offsetY;
+});
+
 const handleActivateB = () => {
-  if (settingsStore.isIntro || settingsStore.isOutro) return;
+  if (
+    settingsStore.isIntro ||
+    settingsStore.isOutro ||
+    settingsStore.submenuTransition.opacity < 1
+  )
+    return;
 
   if (isSubmenuSelected.value) {
     select(getParentMenu(selected.value));
@@ -251,27 +281,53 @@ const handleActivateB = () => {
         settingsStore.menuOffsets[2] +
         settingsStore.menuOffsets[3]
       "
-      :y="121 + settingsStore.menuYOffset"
-      :opacity="1"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        (selected === 'touchScreen'
+          ? settingsStore.submenuTransition.selectorOffsetY
+          : settingsStore.submenuTransition.offsetY)
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
     />
     <UserMenu
       :x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
-      :y="121 + settingsStore.menuYOffset"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        settingsStore.submenuTransition.offsetY
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
     />
     <ClockMenu
       :x="81 + settingsStore.menuOffsets[1]"
-      :y="121 + settingsStore.menuYOffset"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        settingsStore.submenuTransition.offsetY
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
+    />
+    <OptionsMenu
+      :x="33"
+      :y="
+        121 +
+        settingsStore.menuYOffset +
+        settingsStore.submenuTransition.offsetY
+      "
+      :opacity="settingsStore.submenuTransition.opacity"
     />
-    <OptionsMenu :x="33" :y="121 + settingsStore.menuYOffset" />
 
     <Selector
       :rect="[
         selectorPosition[0] + selectorXOffset,
-        selectorPosition[1] + settingsStore.menuYOffset,
+        selectorPosition[1] +
+          settingsStore.menuYOffset +
+          selectorTransitionOffsetY,
         selectorPosition[2],
         selectorPosition[3],
       ]"
-      :opacity="1"
+      :opacity="settingsStore.submenuTransition.opacity"
     />
 
     <CommonButtons
diff --git a/app/components/Settings/BottomScreen/Menus/Options/2048.vue b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
index 34b43fc..c42e6e9 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
@@ -186,7 +186,6 @@ onMounted(() => {
 });
 
 onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
   ctx.textBaseline = "top";
 
   ctx.save();
diff --git a/app/components/Settings/BottomScreen/Menus/Options/Menu.vue b/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
index c40ff15..c07385a 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    y: number;
+    opacity?: number;
+  }>(),
+  {
+    opacity: 1,
+  },
+);
 
 const { onRender } = useScreen();
 
@@ -10,6 +16,7 @@ const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
   selectedSubmenuParent: ComputedRef<string | null>;
+  selectedSubmenuExtraOffsetY: ComputedRef<number>;
 }>("menusContext")!;
 
 const { assets } = useAssets();
@@ -29,24 +36,33 @@ const isAnyOtherMenuOpen = computed(() => {
 
 const animation = useMenuAnimation("options", isOpen);
 
+const submenuExtraOffset = (submenu: string) =>
+  settingsStore.selectedButton === submenu
+    ? menusContext.selectedSubmenuExtraOffsetY.value
+    : 0;
+
 onRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {
     assets.images.settings.topScreen.options._2048.draw(
       ctx,
       48 - animation.stage2Offset,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("options2048"),
     );
     assets.images.settings.topScreen.options.renderingMode.draw(
       ctx,
       0,
-      -96 + animation.stage2Offset + animation.stage1Offset,
+      -96 +
+        animation.stage2Offset +
+        animation.stage1Offset +
+        submenuExtraOffset("optionsRenderingMode"),
     );
     assets.images.settings.topScreen.options.language.draw(
       ctx,
       0,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("optionsLanguage"),
     );
 
     assets.images.settings.topScreen.options.optionsActive.draw(ctx, 0, 0);
diff --git a/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue b/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
index d2557f7..7f8a03b 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
@@ -120,8 +120,6 @@ const handleConfirm = () => {
 };
 
 onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-
   ctx.font = "10px NDS10";
   ctx.textBaseline = "top";
 
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
index fd7351b..56c4646 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    y: number;
+    opacity?: number;
+  }>(),
+  {
+    opacity: 1,
+  },
+);
 
 const { onRender } = useScreen();
 
@@ -26,6 +32,7 @@ const isAnyOtherMenuOpen = computed(() => {
 });
 
 onRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
   if (isAnyOtherMenuOpen.value) {
     assets.images.settings.topScreen.touchScreen.touchScreenDisabled.draw(
       ctx,
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
index e57a90d..40d6da4 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
@@ -7,7 +7,6 @@ const achievements = useAchievementsStore();
 const confirmationModal = useConfirmationModal();
 
 const { onRender, onClick } = useScreen();
-const { assets } = useAssets();
 
 const BAR_HEIGHT = 24;
 const MAX_RADIUS = 27;
@@ -276,8 +275,6 @@ onClick((mx, my) => {
 });
 
 onRender((ctx) => {
-  assets.images.home.topScreen.background.draw(ctx, 0, 0);
-
   // update crosshair position in all modes except paused
   if (state.value !== "paused") {
     if (horizontalFirst) {
diff --git a/app/components/Settings/BottomScreen/Menus/User/Menu.vue b/app/components/Settings/BottomScreen/Menus/User/Menu.vue
index 2ae4b23..ec7848f 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Menu.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-}>();
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    y: number;
+    opacity?: number;
+  }>(),
+  {
+    opacity: 1,
+  },
+);
 
 const { onRender } = useScreen();
 
@@ -10,6 +16,7 @@ const settingsStore = useSettingsStore();
 const menusContext = inject<{
   isSubmenuSelected: ComputedRef<boolean>;
   selectedSubmenuParent: ComputedRef<string | null>;
+  selectedSubmenuExtraOffsetY: ComputedRef<number>;
 }>("menusContext")!;
 
 const { assets } = useAssets();
@@ -29,29 +36,38 @@ const isAnyOtherMenuOpen = computed(() => {
 
 const animation = useMenuAnimation("user", isOpen);
 
+const submenuExtraOffset = (submenu: string) =>
+  settingsStore.selectedButton === submenu
+    ? menusContext.selectedSubmenuExtraOffsetY.value
+    : 0;
+
 onRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
   ctx.translate(props.x, props.y);
 
   if (isOpen.value || animation.playing) {
     assets.images.settings.topScreen.user.birthday.draw(
       ctx,
       -48 + animation.stage2Offset,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("userBirthday"),
     );
     assets.images.settings.topScreen.user.snake.draw(
       ctx,
       48 - animation.stage2Offset,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("userSnake"),
     );
     assets.images.settings.topScreen.user.color.draw(
       ctx,
       0,
-      -96 + animation.stage2Offset + animation.stage1Offset,
+      -96 +
+        animation.stage2Offset +
+        animation.stage1Offset +
+        submenuExtraOffset("userColor"),
     );
     assets.images.settings.topScreen.user.userName.draw(
       ctx,
       0,
-      -48 + animation.stage1Offset,
+      -48 + animation.stage1Offset + submenuExtraOffset("userUserName"),
     );
 
     assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);
diff --git a/app/stores/settings.ts b/app/stores/settings.ts
index 722f1b7..f1ec168 100644
--- a/app/stores/settings.ts
+++ b/app/stores/settings.ts
@@ -38,6 +38,17 @@ export const useSettingsStore = defineStore("settings", {
     menuOffsets: [0, -48, -48, -48] as [number, number, number, number],
     menuYOffset: 72,
 
+    submenuTransition: {
+      offsetY: 0,
+      selectorOffsetY: 0,
+      opacity: 1,
+    },
+
+    submenuBackground: {
+      offsetY: 16,
+      opacity: 0,
+    },
+
     animatingNotification: false,
 
     isIntro: true,
@@ -51,7 +62,23 @@ export const useSettingsStore = defineStore("settings", {
       this.currentSubMenu = null;
     },
 
-    openSubMenu(submenu: SettingsSubMenu) {
+    async openSubMenu(submenu: SettingsSubMenu) {
+      await gsap
+        .timeline()
+        .to(this.submenuTransition, {
+          offsetY: -48,
+          selectorOffsetY: -140,
+          opacity: 0,
+          duration: 0.25,
+          ease: "none",
+        })
+        .fromTo(
+          this.submenuBackground,
+          { offsetY: 16, opacity: 0 },
+          { offsetY: 0, opacity: 1, duration: 0.25, ease: "none" },
+          "+=0.05",
+        );
+
       this.currentSubMenu = submenu;
 
       const achievements = useAchievementsStore();
@@ -66,8 +93,32 @@ export const useSettingsStore = defineStore("settings", {
       }
     },
 
-    closeSubMenu() {
+    async closeSubMenu() {
       this.currentSubMenu = null;
+
+      await gsap
+        .timeline()
+        .fromTo(
+          this.submenuBackground,
+          { offsetY: 0, opacity: 1 },
+          { offsetY: 16, opacity: 0, duration: 0.25, ease: "none" },
+        )
+        .fromTo(
+          this.submenuTransition,
+          {
+            offsetY: -48,
+            selectorOffsetY: -140,
+            opacity: 0,
+          },
+          {
+            offsetY: 0,
+            selectorOffsetY: 0,
+            opacity: 1,
+            duration: 0.25,
+            ease: "none",
+          },
+          "+=0.05",
+        );
     },
 
     animateIntro() {