feat(projects): move data to store and render thumbnails

app/components/Projects/BottomScreen/Projects.vue

@@ -1,40 +1,50 @@
 <script setup lang="ts">
 import gsap from "gsap";
+import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.png";
+import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.png";
 
-const selectorImage = useTemplateRef("selectorImage");
-const projectSquareImage = useTemplateRef("projectSquareImage");
+const store = useProjectsStore();
+
+const [selectorImage, projectSquareImage] = useImages(
+  SELECTOR_IMAGE,
+  PROJECT_SQUARE_IMAGE,
+);
+const projectThumbnails = useImages(...store.projects.map((x) => x.thumbnail));
 
-const projects = ["a", "b", "c", "d", "e", "f", "g", "h"];
-let currentProject = 0;
 const offsetX = ref(0);
 
 useRender((ctx) => {
-  if (!selectorImage.value || !projectSquareImage.value) return;
-
-  const startIndex = Math.max(currentProject - 3, 0);
-  const endIndex = Math.min(currentProject + 3 + 1, projects.length);
+  const startIndex = Math.max(store.currentProject - 3, 0);
+  const endIndex = Math.min(
+    store.currentProject + 3 + 1,
+    store.projects.length,
+  );
 
   for (let i = startIndex; i < endIndex; i += 1) {
-    const offsetFromCenter = i - currentProject;
+    const offsetFromCenter = i - store.currentProject;
     const x = 101 + 69 * offsetFromCenter + offsetX.value;
 
-    ctx.drawImage(projectSquareImage.value, x, 81);
+    ctx.drawImage(projectSquareImage!, x, 81);
+    ctx.drawImage(projectThumbnails[i]!, x + 7, 88);
   }
 
-  ctx.drawImage(selectorImage.value, 96, 76);
+  ctx.drawImage(selectorImage!, 96, 76);
 
   ctx.font = "10px NDS10";
-  ctx.fillText(projects[currentProject]!, 20, 20);
+  ctx.fillText(store.projects[store.currentProject]!.description, 20, 20);
 });
 
 const handleKeyDown = (e: KeyboardEvent) => {
   let from = 0;
-  if (e.key === "ArrowRight" && currentProject < projects.length - 1) {
-    currentProject += 1;
+  if (
+    e.key === "ArrowRight" &&
+    store.currentProject < store.projects.length - 1
+  ) {
+    store.currentProject += 1;
     from = 69;
   }
-  if (e.key === "ArrowLeft" && currentProject > 0) {
-    currentProject -= 1;
+  if (e.key === "ArrowLeft" && store.currentProject > 0) {
+    store.currentProject -= 1;
     from = -69;
   }
 
@@ -56,16 +66,3 @@ const handleKeyDown = (e: KeyboardEvent) => {
 onMounted(() => window.addEventListener("keydown", handleKeyDown));
 onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
 </script>
-
-<template>
-  <img
-    ref="selectorImage"
-    src="/assets/images/projects/bottom-screen/selector.png"
-    hidden
-  />
-  <img
-    ref="projectSquareImage"
-    src="/assets/images/projects/bottom-screen/project-square.png"
-    hidden
-  />
-</template>