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.currentProject = i;
+        store.scrollToProject(i);
         break;
       }
     }