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

app/components/Home/BottomScreen/Background.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/home/bottom-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/bottom-screen/background.png"
-    hidden
-  />
-</template>

app/components/Home/BottomScreen/Buttons/ContactButton.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
+import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/contact.png";
+
 const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
 }>();
 
-const buttonImage = useTemplateRef("buttonImage");
+const [buttonImage] = useImages(BUTTON_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonImage.value) return;
-
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(buttonImage.value, props.x, props.y);
+  ctx.drawImage(buttonImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonImage"
-    src="/assets/images/home/bottom-screen/buttons/contact.png"
-    hidden
-  />
-</template>

app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
+import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/downloadPlay.png";
+
 const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
 }>();
 
-const buttonImage = useTemplateRef("buttonImage");
+const [buttonImage] = useImages(BUTTON_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonImage.value) return;
-
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(buttonImage.value, props.x, props.y);
+  ctx.drawImage(buttonImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonImage"
-    src="/assets/images/home/bottom-screen/buttons/downloadPlay.png"
-    hidden
-  />
-</template>

app/components/Home/BottomScreen/Buttons/GameButton.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
+import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/game.png";
+
 const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
 }>();
 
-const buttonImage = useTemplateRef("buttonImage");
+const [buttonImage] = useImages(BUTTON_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonImage.value) return;
-
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(buttonImage.value, props.x, props.y);
+  ctx.drawImage(buttonImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonImage"
-    src="/assets/images/home/bottom-screen/buttons/game.png"
-    hidden
-  />
-</template>