feat(projects): click based navigation

app/components/Projects/BottomScreen/Projects.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// TODO: handle mouse wheel and clicking on other projects
+// TODO: handle mouse wheel
 
 import gsap from "gsap";
 import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.png";
@@ -16,12 +16,27 @@ const [selectorImage, projectSquareImage, ...projectThumbnails] = useImages(
 
 const offsetX = ref(0);
 
-useRender((ctx) => {
+const getBounds = () => ({
-  const startIndex = Math.max(store.currentProject - 3, 0);
+  startIndex: Math.max(store.currentProject - 3, 0),
-  const endIndex = Math.min(
+  endIndex: Math.min(store.currentProject + 3 + 1, store.projects.length),
-    store.currentProject + 3 + 1,
+});
-    store.projects.length,
+
+const animateScrolling = (offset: number) => {
+  gsap.fromTo(
+    offsetX,
+    {
+      value: offset,
+    },
+    {
+      value: 0,
+      duration: 0.075,
+      ease: "none",
+    },
   );
+};
+
+useRender((ctx) => {
+  const { startIndex, endIndex } = getBounds();
 
   for (let i = startIndex; i < endIndex; i += 1) {
     const offsetFromCenter = i - store.currentProject;
@@ -45,30 +60,20 @@ useRender((ctx) => {
 
 useKeyDown((key) => {
   // scrolling
-  let from = 0;
+  let offset = 0;
   if (
     key === "ArrowRight" &&
     store.currentProject < store.projects.length - 1
   ) {
     store.currentProject += 1;
-    from = 69;
+    offset = 69;
   } else if (key === "ArrowLeft" && store.currentProject > 0) {
     store.currentProject -= 1;
-    from = -69;
+    offset = -69;
   }
 
-  if (from != 0) {
+  if (offset != 0) {
-    gsap.fromTo(
+    animateScrolling(offset);
-      offsetX,
-      {
-        value: from,
-      },
-      {
-        value: 0,
-        duration: 0.075,
-        ease: "none",
-      },
-    );
   }
 
   if (key === "Enter" || key === " ") {
@@ -76,6 +81,25 @@ useKeyDown((key) => {
   }
 });
 
+useScreenClick((x, y) => {
+  const { startIndex, endIndex } = getBounds();
+
+  for (let i = startIndex; i < endIndex; i += 1) {
+    const offsetFromCenter = i - store.currentProject;
+    const rectX = 101 + 69 * offsetFromCenter + offsetX.value;
+
+    if (rectContains([rectX, 81, 54, 54], [x, y])) {
+      if (i === store.currentProject) {
+        store.visitProject();
+      } else {
+        animateScrolling((i - store.currentProject) * 69);
+        store.currentProject = i;
+        break;
+      }
+    }
+  }
+});
+
 defineOptions({
   render: () => null,
 });