feat(settings): animate transition to submenu (background and sliding)

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);

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>
 

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

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+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);

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);

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"
+      :y="
-      :opacity="1"
+        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

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();

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

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+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);

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";
 

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

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+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,

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) {

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

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+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);

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() {