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 store = useProjectsStore();
-const projectSquareImage = useTemplateRef("projectSquareImage");
+
+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(store.currentProject - 3, 0);
-
+  const endIndex = Math.min(
-  const startIndex = Math.max(currentProject - 3, 0);
+    store.currentProject + 3 + 1,
-  const endIndex = Math.min(currentProject + 3 + 1, projects.length);
+    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) {
+  if (
-    currentProject += 1;
+    e.key === "ArrowRight" &&
+    store.currentProject < store.projects.length - 1
+  ) {
+    store.currentProject += 1;
     from = 69;
   }
-  if (e.key === "ArrowLeft" && currentProject > 0) {
+  if (e.key === "ArrowLeft" && store.currentProject > 0) {
-    currentProject -= 1;
+    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>

app/stores/projects.ts

@@ -0,0 +1,59 @@
+import PIHKAAL_ME_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.png";
+import TLOCK_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/tlock.png";
+import SIMPLE_QR_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/simple-qr.png";
+import LILOU_CAT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lilou.cat.png";
+import LBF_BOT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lbf-bot.png";
+import RAYLIB_SPEENDRUNS_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.png";
+import SP3WEB_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/s3pweb.png";
+import BIOBLEUD_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/biobleud.png";
+
+export const useProjectsStore = defineStore("projects", {
+  state: () => ({
+    // prettier-ignore
+    projects: [
+      {
+        description: "pihkaal.me - my personal website",
+        thumbnail: PIHKAAL_ME_THUMBNAIL,
+      },
+      {
+        description: "tlock - fully customizable and cross-platform terminal based clock",
+        thumbnail: TLOCK_THUMBNAIL,
+      },
+      {
+        description: "Simple QR - Simple QR code generator with straightforward API",
+        thumbnail: SIMPLE_QR_THUMBNAIL,
+      },
+      {
+        description: "lilou.cat - My cat's website",
+        thumbnail: LILOU_CAT_THUMBNAIL
+      },
+      {
+        description: "LBF Bot - Custom Discord bot for a gaming group",
+        thumbnail: LBF_BOT_THUMBNAIL,
+      },
+      {
+        description: "Raylib Speedruns - Collection of simple Raylib setups in multiple languages",
+        thumbnail: RAYLIB_SPEENDRUNS_THUMBNAIL,
+      },
+      {
+        description: "S3P Map Editor - Web based map editor specialized for trucks",
+        thumbnail: SP3WEB_THUMBNAIL,
+      },
+      {
+        description: "S3P Eramba Visualizer - Eramba asset visualization",
+        thumbnail: SP3WEB_THUMBNAIL,
+      },
+      {
+        description: "S3P Incident Engine - Automated alerts to Jira",
+        thumbnail: SP3WEB_THUMBNAIL,
+      },
+      {
+        description: "Biobleud - Automated Excel imports for an ERP system",
+        thumbnail: BIOBLEUD_THUMBNAIL,
+      },
+    ],
+    currentProject: 0,
+  }),
+
+  actions: {},
+});