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

app/components/Contact/TopScreen/Background.vue

@@ -1,30 +1,24 @@
 <script setup lang="ts">
+import HOME_BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.png";
+import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/top-screen/background.png";
+
 const store = useContactStore();
 
-const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
-const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
+const [homeBackgroundImage, contactBackgroundImage] = useImages(
+  HOME_BACKGROUND_IMAGE,
+  CONTACT_BACKGROUND_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
-
-  ctx.drawImage(homeBackgroundImage.value, 0, 0);
+  ctx.drawImage(homeBackgroundImage!, 0, 0);
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage2Opacity
     : store.outro.stage3Opacity;
 
-  ctx.drawImage(contactBackgroundImage.value, 0, 0);
+  ctx.drawImage(contactBackgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="homeBackgroundImage"
-    src="/assets/images/home/top-screen/background.png"
-    hidden
-  />
-  <img
-    ref="contactBackgroundImage"
-    src="/assets/images/contact/top-screen/background.png"
-    hidden
-  />
-</template>

app/components/Contact/TopScreen/LeftBar.vue

@@ -1,33 +1,27 @@
 <script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/contact/top-screen/left-bar.png";
+import THINGS_IMAGE from "/assets/images/contact/top-screen/left-bar-things.png";
+
 const store = useContactStore();
 
-const backgroundImage = useTemplateRef("backgroundImage");
-const thingsImage = useTemplateRef("thingsImage");
+const [backgroundImage, thingsImage] = useImages(
+  BACKGROUND_IMAGE,
+  THINGS_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!backgroundImage.value || !thingsImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
     : store.outro.stage2Opacity;
-  ctx.drawImage(backgroundImage.value, 0, 0);
+  ctx.drawImage(backgroundImage!, 0, 0);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage3Opacity
     : store.outro.stage1Opacity;
-  ctx.drawImage(thingsImage.value, 0, 0);
+  ctx.drawImage(thingsImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/contact/top-screen/left-bar.png"
-    hidden
-  />
-  <img
-    ref="thingsImage"
-    src="/assets/images/contact/top-screen/left-bar-things.png"
-    hidden
-  />
-</template>

app/components/Contact/TopScreen/Notifications.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import NOTIFICATION_IMAGE from "/assets/images/contact/bottom-screen/notification.png";
+import TITLE_IMAGE from "/assets/images/contact/top-screen/title.png";
+
 // text color:
 const store = useContactStore();
 
-const notificationImage = useTemplateRef("notificationImage");
-const titleImage = useTemplateRef("titleImage");
+const [notificationImage, titleImage] = useImages(
+  NOTIFICATION_IMAGE,
+  TITLE_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!notificationImage.value || !titleImage.value) return;
-
   ctx.globalAlpha = store.outro.stage2Opacity;
   ctx.font = "10px NDS10";
 
@@ -17,7 +20,7 @@ useRender((ctx) => {
     const y = 169 - 24 * index + store.notificationsYOffset;
     if (y < -24) break;
 
-    ctx.drawImage(notificationImage.value, 21, y);
+    ctx.drawImage(notificationImage!, 21, y);
 
     const content = store.notifications[i]!;
     ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
@@ -29,7 +32,7 @@ useRender((ctx) => {
     ? store.intro.stage1Opacity
     : store.outro.stage2Opacity;
   ctx.drawImage(
-    titleImage.value,
+    titleImage!,
     21,
     store.isIntro
       ? store.intro.titleY
@@ -70,17 +73,8 @@ useRender((ctx) => {
     }
   }
 });
-</script>
 
-<template>
-  <img
-    ref="notificationImage"
-    src="/assets/images/contact/bottom-screen/notification.png"
-    hidden
-  />
-  <img
-    ref="titleImage"
-    src="/assets/images/contact/top-screen/title.png"
-    hidden
-  />
-</template>
+defineOptions({
+  render: () => null,
+});
+</script>