feat(projects): projects scrolling animation

app/components/Projects/TopScreen/Project.vue

@@ -63,16 +63,39 @@ useRender((ctx) => {
   const project = store.projects[store.currentProject];
   if (!project) return;
 
-  // image
-  const projectImage =
+  const thumbnailCenterX = 52;
+  const thumbnailCenterY = 104;
+  const thumbnailSpacing = 104;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(0, 56, 104, 101);
+  ctx.clip();
+
+  // draw previous - current - next
+  for (let i = store.currentProject - 1; i <= store.currentProject + 1; i++) {
+    if (i < 0 || i >= store.projects.length) continue;
+
+    const offsetFromCurrent = i - store.currentProject;
+    // TODO: project.id should be typed from useAssets, shouldn't be just a string
+    const thumbnailImage =
       assets.projects.pokemons[
-      project.id as keyof typeof assets.projects.pokemons
-    ];
+        store.projects[i]!.id as keyof typeof assets.projects.pokemons
+      ]!;
+
     ctx.drawImage(
-    projectImage,
-    Math.floor(52 - projectImage.width / 2),
-    Math.floor(104 - projectImage.height / 2),
+      thumbnailImage,
+      Math.floor(
+        thumbnailCenterX +
+          offsetFromCurrent * thumbnailSpacing -
+          thumbnailImage.width / 2 +
+          store.offsetX,
+      ),
+      Math.floor(thumbnailCenterY - thumbnailImage.height / 2),
     );
+  }
+
+  ctx.restore();
 
   // text
   drawTextWithShadow(ctx, "white", project.title.toUpperCase(), 23, 25);

app/stores/projects.ts

@@ -72,10 +72,10 @@ export const useProjectsStore = defineStore("projects", {
         this.currentProject < this.projects.length - 1
       ) {
         this.currentProject += 1;
-        offset = 69;
+        offset = 104;
       } else if (direction === "left" && this.currentProject > 0) {
         this.currentProject -= 1;
-        offset = -69;
+        offset = -104;
       }
 
       if (offset !== 0) {