feat: use useImages composable instead of <img> + useTemplateRef

app/components/Home/TopScreen/Background.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.png";
+
 const store = useHomeStore();
 const app = useAppStore();
 
-const backgroundImage = useTemplateRef("backgroundImage");
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
 
 useRender((ctx) => {
-  if (!backgroundImage.value) return;
-
   ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
-  ctx.drawImage(backgroundImage.value, 0, 0);
+  ctx.drawImage(backgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/home/top-screen/background.png"
-    hidden
-  />
-</template>

app/components/Home/TopScreen/Calendar.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import CALENDAR_IMAGE from "/assets/images/home/top-screen/calendar/calendar.png";
+import LAST_ROW_IMAGE from "/assets/images/home/top-screen/calendar/last-row.png";
+import DAY_SELECTOR_IMAGE from "/assets/images/home/top-screen/calendar/day-selector.png";
+
 // NOTE: calendar background is handled by TopScreenBackground
 const store = useHomeStore();
 
-const lastRowImage = useTemplateRef("lastRowImage");
-const daySelectorImage = useTemplateRef("daySelectorImage");
-const calendarImage = useTemplateRef("calendarImage");
+const [calendarImage, lastRowImage, daySelectorImage] = useImages(
+  CALENDAR_IMAGE,
+  LAST_ROW_IMAGE,
+  DAY_SELECTOR_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!calendarImage.value || !lastRowImage.value || !daySelectorImage.value)
-    return;
-
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 
@@ -32,11 +35,11 @@ useRender((ctx) => {
     : store.isOutro
       ? store.outro.stage1Opacity
       : 1;
-  ctx.drawImage(calendarImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
+  ctx.drawImage(calendarImage!, 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.drawImage(lastRowImage!, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
   }
 
   ctx.globalAlpha = store.isIntro
@@ -57,7 +60,7 @@ useRender((ctx) => {
         const cellTop = CALENDAR_TOP + col * 16;
 
         if (now.getDate() === day) {
-          ctx.drawImage(daySelectorImage.value, cellLeft, cellTop);
+          ctx.drawImage(daySelectorImage!, cellLeft, cellTop);
         }
 
         ctx.fillText(
@@ -82,22 +85,8 @@ useRender((ctx) => {
     CALENDAR_TOP - 20,
   );
 });
-</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"
-    hidden
-  />
-  <img
-    ref="daySelectorImage"
-    src="/assets/images/home/top-screen/calendar/day-selector.png"
-    hidden
-  />
-</template>
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Home/TopScreen/Clock.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import CLOCK_IMAGE from "/assets/images/home/top-screen/clock.png";
+
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
 const store = useHomeStore();
 
-const clockImage = useTemplateRef("clockImage");
+const [clockImage] = useImages(CLOCK_IMAGE);
 
 function drawLine(
   ctx: CanvasRenderingContext2D,
@@ -52,14 +54,12 @@ function drawLine(
 }
 
 useRender((ctx) => {
-  if (!clockImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
     : store.isOutro
       ? store.outro.stage1Opacity
       : 1;
-  ctx.drawImage(clockImage.value, 13, 45);
+  ctx.drawImage(clockImage!, 13, 45);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
@@ -93,8 +93,8 @@ useRender((ctx) => {
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
 });
-</script>
 
-<template>
-  <img ref="clockImage" src="/assets/images/home/top-screen/clock.png" hidden />
-</template>
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Home/TopScreen/StatusBar.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
+import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.png";
+import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.png";
+import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.png";
+import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.png";
+
 const store = useHomeStore();
 
-const statusBarImage = useTemplateRef("statusBarImage");
-const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
-const startupModeImage = useTemplateRef("startupModeImage");
-const batteryImage = useTemplateRef("batteryImage");
+const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
+  useImages(
+    STATUS_BAR_IMAGE,
+    GBA_DISPLAY_IMAGE,
+    STARTUP_MODE_IMAGE,
+    BATTERY_IMAGE,
+  );
 
 useRender((ctx) => {
-  if (
-    !statusBarImage.value ||
-    !gbaDisplayImage.value ||
-    !startupModeImage.value ||
-    !batteryImage.value
-  )
-    return;
-
   const TEXT_Y = 11;
 
   ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
 
   ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
-  ctx.drawImage(statusBarImage.value, 0, 0);
+  ctx.drawImage(statusBarImage!, 0, 0);
 
   ctx.fillStyle = "#ffffff";
   ctx.font = "7px NDS7";
@@ -50,31 +50,12 @@ useRender((ctx) => {
   fillNumberCell(now.getMonth() + 1, 12, -1);
 
   // icons
-  ctx.drawImage(gbaDisplayImage.value, 210, 2);
-  ctx.drawImage(startupModeImage.value, 226, 2);
-  ctx.drawImage(batteryImage.value, 242, 4);
+  ctx.drawImage(gbaDisplayImage!, 210, 2);
+  ctx.drawImage(startupModeImage!, 226, 2);
+  ctx.drawImage(batteryImage!, 242, 4);
+});
+
+defineOptions({
+  render: () => null,
 });
 </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"
-    hidden
-  />
-  <img
-    ref="startupModeImage"
-    src="/assets/images/home/top-screen/status-bar/startup-mode.png"
-    hidden
-  />
-  <img
-    ref="batteryImage"
-    src="/assets/images/home/top-screen/status-bar/battery.png"
-    hidden
-  />
-</template>