feat(projects): synchronize previews with thumbnails scrolling

app/components/Projects/BottomScreen/Projects.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import gsap from "gsap";
 import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.webp";
 import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.webp";
 
@@ -11,51 +10,17 @@ const [selectorImage, projectSquareImage, ...projectThumbnails] = useImages(
   ...store.projects.map((x) => x.thumbnail),
 );
 
-const offsetX = ref(0);
-
 const getBounds = () => ({
   startIndex: Math.max(store.currentProject - 3, 0),
   endIndex: Math.min(store.currentProject + 3 + 1, store.projects.length),
 });
 
-const animateScrolling = (offset: number) => {
-  gsap.fromTo(
-    offsetX,
-    {
-      value: offset,
-    },
-    {
-      value: 0,
-      duration: 0.075,
-      ease: "none",
-    },
-  );
-};
-
-const scrollProjects = (direction: "left" | "right") => {
-  let offset = 0;
-  if (
-    direction === "right" &&
-    store.currentProject < store.projects.length - 1
-  ) {
-    store.currentProject += 1;
-    offset = 69;
-  } else if (direction === "left" && store.currentProject > 0) {
-    store.currentProject -= 1;
-    offset = -69;
-  }
-
-  if (offset != 0) {
-    animateScrolling(offset);
-  }
-};
-
 useRender((ctx) => {
   const { startIndex, endIndex } = getBounds();
 
   for (let i = startIndex; i < endIndex; i += 1) {
     const offsetFromCenter = i - store.currentProject;
-    const x = 101 + 69 * offsetFromCenter + offsetX.value;
+    const x = 101 + 69 * offsetFromCenter + store.offsetX;
 
     ctx.drawImage(projectSquareImage!, x, 81);
     ctx.drawImage(projectThumbnails[i]!, x + 7, 88);
@@ -76,10 +41,10 @@ useRender((ctx) => {
 useKeyDown((key) => {
   switch (key) {
     case "ArrowLeft":
-      scrollProjects("left");
+      store.scrollProjects("left");
       break;
     case "ArrowRight":
-      scrollProjects("right");
+      store.scrollProjects("right");
       break;
     case "Enter":
     case " ":
@@ -90,9 +55,9 @@ useKeyDown((key) => {
 
 useScreenMouseWheel((dy) => {
   if (dy > 0) {
-    scrollProjects("right");
+    store.scrollProjects("right");
   } else if (dy < 0) {
-    scrollProjects("left");
+    store.scrollProjects("left");
   }
 });
 
@@ -101,14 +66,13 @@ useScreenClick((x, y) => {
 
   for (let i = startIndex; i < endIndex; i += 1) {
     const offsetFromCenter = i - store.currentProject;
-    const rectX = 101 + 69 * offsetFromCenter + offsetX.value;
+    const rectX = 101 + 69 * offsetFromCenter + store.offsetX;
 
     if (rectContains([rectX, 81, 54, 54], [x, y])) {
       if (i === store.currentProject) {
         store.visitProject();
       } else {
-        animateScrolling((i - store.currentProject) * 69);
+        store.scrollToProject(i);
-        store.currentProject = i;
         break;
       }
     }

app/components/Projects/TopScreen/Previews.vue

@@ -8,6 +8,11 @@ onMounted(() => {
   projectPreviews.value = useImages(...store.projects.map((x) => x.preview));
 });
 
+const getBounds = () => ({
+  startIndex: Math.max(store.currentProject - 1, 0),
+  endIndex: Math.min(store.currentProject + 1 + 1, store.projects.length),
+});
+
 useRender((ctx) => {
   const project = store.projects[store.currentProject];
   if (!project) return;
@@ -15,24 +20,33 @@ useRender((ctx) => {
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#000000";
 
-  const preview = projectPreviews.value[store.currentProject];
+  const { startIndex, endIndex } = getBounds();
-  if (!preview) return;
 
-  const x = (256 - preview.width) / 2;
+  for (let i = startIndex; i < endIndex; i += 1) {
-  const y = (192 - preview.height) / 2 + 10;
+    const preview = projectPreviews.value[i];
-  ctx.translate(x, y);
+    if (!preview) continue;
 
-  ctx.fillStyle = "#a6a6a6";
+    const offsetFromCenter = i - store.currentProject;
-  ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
+    const baseX = (256 - preview.width) / 2;
-  ctx.fillStyle = "#000000";
+    const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
-  ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
+    const y = (192 - preview.height) / 2 + 10;
 
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+    ctx.save();
-  ctx.shadowBlur = 10;
+    ctx.translate(x, y);
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
 
-  ctx.drawImage(preview, 0, 0);
+    ctx.fillStyle = "#a6a6a6";
+    ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
+
+    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+    ctx.shadowBlur = 10;
+    ctx.shadowOffsetX = 2;
+    ctx.shadowOffsetY = 2;
+
+    ctx.drawImage(preview, 0, 0);
+    ctx.restore();
+  }
 });
 
 defineOptions({

app/stores/projects.ts

@@ -1,4 +1,5 @@
 import type { MarkdownRoot } from "@nuxt/content";
+import gsap from "gsap";
 
 type MarkdownBody = (
   | {
@@ -68,6 +69,7 @@ export const useProjectsStore = defineStore("projects", {
     }[],
     currentProject: 0,
     loading: true,
+    offsetX: 0,
   }),
 
   actions: {
@@ -99,5 +101,49 @@ export const useProjectsStore = defineStore("projects", {
       const url = this.projects[this.currentProject]!.url;
       if (url) navigateTo(url, { external: true, open: { target: "_blank" } });
     },
+
+    scrollProjects(direction: "left" | "right") {
+      let offset = 0;
+
+      if (
+        direction === "right" &&
+        this.currentProject < this.projects.length - 1
+      ) {
+        this.currentProject += 1;
+        offset = 69;
+      } else if (direction === "left" && this.currentProject > 0) {
+        this.currentProject -= 1;
+        offset = -69;
+      }
+
+      if (offset !== 0) {
+        gsap.fromTo(
+          this,
+          { offsetX: offset },
+          {
+            offsetX: 0,
+            duration: 0.1,
+            ease: "none",
+          },
+        );
+      }
+    },
+
+    scrollToProject(index: number) {
+      if (index === this.currentProject) return;
+
+      const offset = (index - this.currentProject) * 69;
+      this.currentProject = index;
+
+      gsap.fromTo(
+        this,
+        { offsetX: offset },
+        {
+          offsetX: 0,
+          duration: 0.1,
+          ease: "none",
+        },
+      );
+    },
   },
 });