feat(home): intro + outro animations

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"