feat(settings): intro and outro animation

app/components/Settings/BottomScreen/BottomScreen.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import Menus from "./Menus/Menus.vue";
+
+const store = useSettingsStore();
 </script>
 
 <template>
   <Background />
-  <CommonBars />
+  <CommonBars :y-offset="store.barOffsetY" />
   <Menus />
   <CommonConfirmationModal />
   <AchievementsFadeToBlack />

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

@@ -21,6 +21,10 @@ import Selector from "~/components/Common/ButtonSelector.vue";
 const app = useAppStore();
 const settingsStore = useSettingsStore();
 
+if (app.previousScreen === "home") {
+  settingsStore.selectedButton = "options";
+}
+
 const isMainMenu = (button: string): button is SettingsMenu =>
   SETTINGS_MENUS.includes(button as SettingsMenu);
 
@@ -195,30 +199,78 @@ const viewComponents: Record<string, Component> = {
 
   touchScreenTapTap: TouchScreenTapTap,
 };
+
+const selectorXOffset = computed(() => {
+  const menu = isMainMenu(selected.value)
+    ? selected.value
+    : getParentMenu(selected.value);
+
+  switch (menu) {
+    case "clock":
+      return Math.min(0, settingsStore.menuOffsets[1]);
+    case "user":
+      return Math.min(
+        0,
+        settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2],
+      );
+    case "touchScreen":
+      return Math.min(
+        0,
+        settingsStore.menuOffsets[1] +
+          settingsStore.menuOffsets[2] +
+          settingsStore.menuOffsets[3],
+      );
+    default:
+      return 0;
+  }
+});
 </script>
 
 <template>
   <template v-if="!settingsStore.currentSubMenu">
-    <OptionsMenu :x="33" :y="121" />
-    <ClockMenu :x="81" :y="121" />
-    <UserMenu :x="129" :y="121" />
-    <TouchScreenMenu :x="177" :y="121" :opacity="1" />
+    <TouchScreenMenu
+      :x="
+        177 +
+        settingsStore.menuOffsets[1] +
+        settingsStore.menuOffsets[2] +
+        settingsStore.menuOffsets[3]
+      "
+      :y="121 + settingsStore.menuYOffset"
+      :opacity="1"
+    />
+    <UserMenu
+      :x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
+      :y="121 + settingsStore.menuYOffset"
+    />
+    <ClockMenu
+      :x="81 + settingsStore.menuOffsets[1]"
+      :y="121 + settingsStore.menuYOffset"
+    />
+    <OptionsMenu :x="33" :y="121 + settingsStore.menuYOffset" />
 
-    <Selector :rect="selectorPosition" :opacity="1" />
+    <Selector
+      :rect="[
+        selectorPosition[0] + selectorXOffset,
+        selectorPosition[1] + settingsStore.menuYOffset,
+        selectorPosition[2],
+        selectorPosition[3],
+      ]"
+      :opacity="1"
+    />
 
     <CommonButtons
       v-if="isSubmenuSelected"
-      :y-offset="0"
+      :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.goBack')"
       :a-label="$t('common.select')"
       @activate-b="select(getParentMenu(selected))"
     />
     <CommonButtons
       v-else
-      :y-offset="0"
+      :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.quit')"
       :a-label="$t('common.select')"
-      @activate-b="app.navigateTo('home')"
+      @activate-b="settingsStore.animateOutro()"
     />
   </template>
   <component :is="viewComponents[settingsStore.currentSubMenu]" v-else />

app/components/Settings/TopScreen/Calendar.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
 
+const store = useSettingsStore();
 const { assets } = useAssets();
 
 onRender((ctx) => {
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 
-  ctx.translate(0, -16);
+  ctx.translate(0, -16 + store.notificationYOffset / 3);
 
   const CALENDAR_COLS = 7;
   const CALENDAR_ROWS = 5;

app/components/Settings/TopScreen/Clock.vue

@@ -2,6 +2,7 @@
 const { onRender } = useScreen();
 
 const app = useAppStore();
+const store = useSettingsStore();
 const { assets } = useAssets();
 
 const CENTER_X = 63;
@@ -53,7 +54,7 @@ function drawLine(
 }
 
 onRender((ctx) => {
-  ctx.translate(0, -16);
+  ctx.translate(0, -16 + store.notificationYOffset / 3);
 
   assets.images.home.topScreen.clock.draw(ctx, 13, 45);
 

app/components/Settings/TopScreen/Notifications.vue

@@ -1,9 +1,21 @@
 <script setup lang="ts">
-const { onRender } = useScreen();
+import gsap from "gsap";
 
+const { onRender } = useScreen();
 const store = useSettingsStore();
 const { assets } = useAssets();
 
+type NotificationData = {
+  image: AtlasImage;
+  title: string;
+  description: string;
+};
+
+const menuYOffset = ref(0);
+const submenuYOffset = ref(0);
+const visibleMenuNotification = ref<NotificationData | null>(null);
+const visibleSubmenuNotification = ref<NotificationData | null>(null);
+
 const renderNotification = (
   ctx: CanvasRenderingContext2D,
   image: AtlasImage,
@@ -83,13 +95,62 @@ const submenuNotification = computed(() => {
   };
 });
 
+const animateNotification = (
+  curr: NotificationData | null,
+  prev: NotificationData | null,
+  visibleRef: Ref<NotificationData | null>,
+  offsetRef: Ref<number>,
+) => {
+  if (prev !== null && curr === null) {
+    // slide down
+    visibleRef.value = prev;
+    gsap.fromTo(
+      offsetRef,
+      { value: 0 },
+      {
+        value: 48,
+        duration: 0.2,
+        ease: "none",
+        onComplete: () => {
+          visibleRef.value = null;
+        },
+      },
+    );
+  } else if (prev === null && curr !== null) {
+    // slide up
+    visibleRef.value = curr;
+    gsap.fromTo(
+      offsetRef,
+      { value: 48 },
+      { value: 0, duration: 0.2, ease: "none" },
+    );
+  }
+};
+
+watch(menuNotification, (curr, prev) => {
+  animateNotification(curr, prev, visibleMenuNotification, menuYOffset);
+});
+
+watch(submenuNotification, (curr, prev) => {
+  animateNotification(curr, prev, visibleSubmenuNotification, submenuYOffset);
+});
+
 onRender((ctx) => {
-  let count = 1;
-  if (menuNotification.value) count++;
-  if (submenuNotification.value) count++;
-
-  ctx.translate(0, 144 - (count - 1) * 16);
+  const submenuY = 144 + submenuYOffset.value;
+  const menuY = visibleSubmenuNotification.value
+    ? Math.min(144, submenuY - 16) + menuYOffset.value
+    : 144 + menuYOffset.value;
+  const nextY = visibleMenuNotification.value
+    ? menuY
+    : visibleSubmenuNotification.value
+      ? submenuY
+      : null;
+  const mainY =
+    nextY !== null
+      ? Math.min(144, nextY - 16) + store.notificationYOffset
+      : 144 + store.notificationYOffset;
 
+  ctx.translate(0, mainY);
   renderNotification(
     ctx,
     mainNotification.value.image,
@@ -97,23 +158,24 @@ onRender((ctx) => {
     mainNotification.value.description,
   );
 
-  if (menuNotification.value) {
-    ctx.translate(0, 16);
+  if (visibleMenuNotification.value) {
+    ctx.translate(0, menuY - mainY);
     renderNotification(
       ctx,
-      menuNotification.value.image,
-      menuNotification.value.title,
-      menuNotification.value.description,
+      visibleMenuNotification.value.image,
+      visibleMenuNotification.value.title,
+      visibleMenuNotification.value.description,
     );
   }
 
-  if (submenuNotification.value) {
-    ctx.translate(0, 16);
+  if (visibleSubmenuNotification.value) {
+    const prevY = visibleMenuNotification.value ? menuY : mainY;
+    ctx.translate(0, submenuY - prevY);
     renderNotification(
       ctx,
-      submenuNotification.value.image,
-      submenuNotification.value.title,
-      submenuNotification.value.description,
+      visibleSubmenuNotification.value.image,
+      visibleSubmenuNotification.value.title,
+      visibleSubmenuNotification.value.description,
     );
   }
 });

app/components/Settings/TopScreen/TopScreen.vue

@@ -4,6 +4,12 @@ import Calendar from "./Calendar.vue";
 import Clock from "./Clock.vue";
 import StatusBar from "./StatusBar.vue";
 import Notifications from "./Notifications.vue";
+
+const store = useSettingsStore();
+
+onMounted(() => {
+  store.animateIntro();
+});
 </script>
 
 <template>