feat(home): intro + outro animations

app/components/Home/TopScreen/Background.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+const store = useHomeStore();
+
 const backgroundImage = useTemplateRef("backgroundImage");
 
 useRender((ctx) => {
   if (!backgroundImage.value) return;
 
+  ctx.globalAlpha = store.intro.stage1Opacity;
+
   ctx.drawImage(backgroundImage.value, 0, 0);
 });
 </script>

app/components/Home/TopScreen/Calendar.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 // NOTE: calendar background is handled by TopScreenBackground
+const store = useHomeStore();
 
 const lastRowImage = useTemplateRef("lastRowImage");
 const daySelectorImage = useTemplateRef("daySelectorImage");
+const calendarImage = useTemplateRef("calendarImage");
 
 useRender((ctx) => {
-  if (!lastRowImage.value || !daySelectorImage.value) return;
+  if (!calendarImage.value || !lastRowImage.value || !daySelectorImage.value)
+    return;
 
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
@@ -24,11 +27,19 @@ useRender((ctx) => {
   const firstDay = new Date(year, month, 1).getDay();
   const daysInMonth = new Date(year, month + 1, 0).getDate();
 
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage1Opacity;
+  ctx.drawImage(calendarImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
+
   const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
   if (extraRow) {
     ctx.drawImage(lastRowImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
   }
 
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage2Opacity;
   for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {
     for (let row = 0; row < CALENDAR_COLS; row += 1) {
       const cellIndex = col * CALENDAR_COLS + row;
@@ -70,6 +81,11 @@ useRender((ctx) => {
 </script>
 
 <template>
+  <img
+    ref="calendarImage"
+    src="/assets/images/home/top-screen/calendar/calendar.png"
+    hidden
+  />
   <img
     ref="lastRowImage"
     src="/assets/images/home/top-screen/calendar/last-row.png"

app/components/Home/TopScreen/Clock.vue

@@ -2,6 +2,10 @@
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
+const store = useHomeStore();
+
+const clockImage = useTemplateRef("clockImage");
+
 function drawLine(
   ctx: CanvasRenderingContext2D,
   x0: number,
@@ -48,6 +52,16 @@ function drawLine(
 }
 
 useRender((ctx) => {
+  if (!clockImage.value) return;
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage1Opacity;
+  ctx.drawImage(clockImage.value, 13, 45);
+
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage2Opacity;
   const now = new Date();
 
   const renderHand = (
@@ -75,8 +89,8 @@ useRender((ctx) => {
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
 });
-
-defineOptions({
-  render: () => null,
-});
 </script>
+
+<template>
+  <img ref="clockImage" src="/assets/images/home/top-screen/clock.png" hidden />
+</template>

app/components/Home/TopScreen/StatusBar.vue

@@ -1,14 +1,30 @@
 <script setup lang="ts">
+const store = useHomeStore();
+
+const statusBarImage = useTemplateRef("statusBarImage");
 const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
 const startupModeImage = useTemplateRef("startupModeImage");
 const batteryImage = useTemplateRef("batteryImage");
 
+// TODO: don't call it here
+callOnce("intro", () => store.animateIntro());
+
 useRender((ctx) => {
-  if (!gbaDisplayImage.value || !startupModeImage.value || !batteryImage.value)
+  if (
+    !statusBarImage.value ||
+    !gbaDisplayImage.value ||
+    !startupModeImage.value ||
+    !batteryImage.value
+  )
     return;
 
   const TEXT_Y = 11;
 
+  ctx.translate(0, store.intro.statusBarY);
+
+  ctx.globalAlpha = store.outro.stage2Opacity;
+  ctx.drawImage(statusBarImage.value, 0, 0);
+
   ctx.fillStyle = "#ffffff";
   ctx.font = "7px NDS7";
 
@@ -44,6 +60,11 @@ useRender((ctx) => {
 </script>
 
 <template>
+  <img
+    ref="statusBarImage"
+    src="/assets/images/home/top-screen/status-bar/status-bar.png"
+    hidden
+  />
   <img
     ref="gbaDisplayImage"
     src="/assets/images/home/top-screen/status-bar/gba-display.png"