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

app/components/Contact/BottomScreen/Background.vue

@@ -1,30 +1,24 @@
 <script setup lang="ts">
+import HOME_BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.png";
+import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/bottom-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/bottom-screen/background.png"
-    hidden
-  />
-  <img
-    ref="contactBackgroundImage"
-    src="/assets/images/contact/bottom-screen/background.png"
-    hidden
-  />
-</template>

app/components/Contact/BottomScreen/Bars.vue

@@ -1,50 +1,39 @@
 <script setup lang="ts">
+import TOP_BAR_IMAGE from "/assets/images/contact/bottom-screen/top-bar.png";
+import BOTTOM_BAR_IMAGE from "/assets/images/contact/bottom-screen/bottom-bar.png";
+import BOTTOM_BAR_OK_IMAGE from "/assets/images/contact/bottom-screen/ok-button.png";
+
 const props = defineProps<{
   okLabel: "Copy" | "Open";
 }>();
 
 const store = useContactStore();
 
-const topBarImage = useTemplateRef("topBarImage");
-const bottomBarImage = useTemplateRef("bottomBarImage");
-const bottomBarOkImage = useTemplateRef("bottomBarOkImage");
+const [topBarImage, bottomBarImage, bottomBarOkImage] = useImages(
+  TOP_BAR_IMAGE,
+  BOTTOM_BAR_IMAGE,
+  BOTTOM_BAR_OK_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!topBarImage.value || !bottomBarImage.value || !bottomBarOkImage.value)
-    return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage3Opacity
     : store.outro.stage2Opacity;
 
   // top bar
-  ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);
+  ctx.drawImage(topBarImage!, 0, store.isIntro ? store.intro.topBarY : 0);
 
   // bottom bar
   ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
-  ctx.drawImage(bottomBarImage.value, 0, 0);
+  ctx.drawImage(bottomBarImage!, 0, 0);
 
-  ctx.drawImage(bottomBarOkImage.value, 144, 4);
+  ctx.drawImage(bottomBarOkImage!, 144, 4);
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#000000";
   ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
 });
-</script>
 
-<template>
-  <img
-    ref="topBarImage"
-    src="/assets/images/contact/bottom-screen/top-bar.png"
-    hidden
-  />
-  <img
-    ref="bottomBarImage"
-    src="/assets/images/contact/bottom-screen/bottom-bar.png"
-    hidden
-  />
-  <img
-    ref="bottomBarOkImage"
-    src="/assets/images/contact/bottom-screen/ok-button.png"
-    hidden
-  />
-</template>
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Contact/BottomScreen/Buttons.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
+import BUTTONS_IMAGE from "/assets/images/contact/bottom-screen/buttons.png";
+
 const store = useContactStore();
 
-const buttonsImage = useTemplateRef("buttonsImage");
+const [buttonsImage] = useImages(BUTTONS_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonsImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage3Opacity
     : store.outro.stage1Opacity;
-  ctx.drawImage(buttonsImage.value, 31, 32);
+  ctx.drawImage(buttonsImage!, 31, 32);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonsImage"
-    src="/assets/images/contact/bottom-screen/buttons.png"
-    hidden
-  />
-</template>