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

app/components/Common/ButtonSelector.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CORNER_IMAGE from "/assets/images/home/bottom-screen/buttons/corner.png";
+
 const props = withDefaults(
   defineProps<{
     rect: [x: number, y: number, width: number, height: number];
@@ -9,15 +11,13 @@ const props = withDefaults(
   },
 );
 
-const cornerImage = useTemplateRef("cornerImage");
+const [cornerImage] = useImages(CORNER_IMAGE);
 
 const ANIMATION_SPEED = 0.25;
 
 let [currentX, currentY, currentWidth, currentHeight] = props.rect;
 
 useRender((ctx) => {
-  if (!cornerImage.value) return;
-
   const [targetX, targetY, targetWidth, targetHeight] = props.rect;
   const dx = targetX - currentX;
   const dy = targetY - currentY;
@@ -45,29 +45,25 @@ useRender((ctx) => {
 
   ctx.globalAlpha = props.opacity;
 
-  ctx.drawImage(cornerImage.value, x, y);
+  ctx.drawImage(cornerImage!, x, y);
 
   ctx.save();
   ctx.scale(-1, 1);
-  ctx.drawImage(cornerImage.value, -(x + w), y);
+  ctx.drawImage(cornerImage!, -(x + w), y);
   ctx.restore();
 
   ctx.save();
   ctx.scale(1, -1);
-  ctx.drawImage(cornerImage.value, x, -(y + h));
+  ctx.drawImage(cornerImage!, x, -(y + h));
   ctx.restore();
 
   ctx.save();
   ctx.scale(-1, -1);
-  ctx.drawImage(cornerImage.value, -(x + w), -(y + h));
+  ctx.drawImage(cornerImage!, -(x + w), -(y + h));
   ctx.restore();
 });
-</script>
 
-<template>
-  <img
-    ref="cornerImage"
-    src="/assets/images/home/bottom-screen/buttons/corner.png"
-    hidden
-  />
-</template>
+defineOptions({
+  render: () => null,
+});
+</script>