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

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