From 6a219d84d09b5aa823cb90a437bd67d4eb1efad1 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Thu, 27 Nov 2025 19:38:42 +0100
Subject: [PATCH] refactor(projects): load previews directly

---
 .../Projects/TopScreen/Previews.vue           | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/app/components/Projects/TopScreen/Previews.vue b/app/components/Projects/TopScreen/Previews.vue
index 8db475b..d2591a9 100644
--- a/app/components/Projects/TopScreen/Previews.vue
+++ b/app/components/Projects/TopScreen/Previews.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const store = useProjectsStore();
 
-const projectPreviews = ref<HTMLImageElement[]>([]);
-
-onMounted(() => {
-  console.log(store.projects);
-  projectPreviews.value = useImages(...store.projects.map((x) => x.preview));
-});
+const projectPreviews = useImages(...store.projects.map((x) => x.preview));
 
 const getBounds = () => ({
   startIndex: Math.max(store.currentProject - 1, 0),
@@ -70,21 +65,20 @@ useRender((ctx) => {
   const { startIndex, endIndex } = getBounds();
 
   for (let i = startIndex; i < endIndex; i += 1) {
-    const preview = projectPreviews.value[i];
-    if (!preview) continue;
+    const previewImage = projectPreviews[i]!;
 
     const offsetFromCenter = i - store.currentProject;
-    const baseX = (256 - preview.width) / 2;
+    const baseX = (256 - previewImage.width) / 2;
     const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
-    const y = (192 - preview.height) / 2 + 10;
+    const y = (192 - previewImage.height) / 2 + 10;
 
     ctx.save();
     ctx.translate(x, y);
 
     ctx.fillStyle = "#a6a6a6";
-    ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
+    ctx.fillRect(0, 0, previewImage.width + 2, previewImage.height + 2);
     ctx.fillStyle = "#000000";
-    ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
+    ctx.fillRect(-1, -1, previewImage.width + 2, previewImage.height + 2);
 
     ctx.save();
     ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
@@ -92,13 +86,13 @@ useRender((ctx) => {
     ctx.shadowOffsetX = 2;
     ctx.shadowOffsetY = 2;
 
-    ctx.drawImage(preview, 0, 0);
+    ctx.drawImage(previewImage, 0, 0);
     ctx.restore();
 
     const project = store.projects[i]!;
     if (project.technologies && project.technologies.length > 0) {
-      const badgeY = preview.height - BADGE_HEIGHT - BADGE_MARGIN;
-      const badgeX = preview.width - BADGE_MARGIN;
+      const badgeY = previewImage.height - BADGE_HEIGHT - BADGE_MARGIN;
+      const badgeX = previewImage.width - BADGE_MARGIN;
       drawTechBadges(ctx, project.technologies, badgeX, badgeY);
     }