feat(projects): visit projects

app/components/Projects/BottomScreen/Projects.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
+// TODO: handle mouse wheel and clicking on other projects
+
 import gsap from "gsap";
 import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.png";
 import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.png";
+import { useKeyDown } from "~/composables/useKeyDown";
 
 const store = useProjectsStore();
 
-const [selectorImage, projectSquareImage] = useImages(
+const [selectorImage, projectSquareImage, ...projectThumbnails] = useImages(
   SELECTOR_IMAGE,
   PROJECT_SQUARE_IMAGE,
+  ...store.projects.map((x) => x.thumbnail),
 );
-const projectThumbnails = useImages(...store.projects.map((x) => x.thumbnail));
 
 const offsetX = ref(0);
 
@@ -31,19 +34,25 @@ useRender((ctx) => {
   ctx.drawImage(selectorImage!, 96, 76);
 
   ctx.font = "10px NDS10";
-  ctx.fillText(store.projects[store.currentProject]!.description, 20, 20);
+
+  const lines = store.projects[store.currentProject]!.description.split("\n");
+  const textY = lines.length === 1 ? 35 : 28;
+  for (let i = 0; i < lines.length; i += 1) {
+    const { actualBoundingBoxRight: width } = ctx.measureText(lines[i]!);
+    ctx.fillText(lines[i]!, Math.floor(128 - width / 2), textY + 15 * i);
+  }
 });
 
-const handleKeyDown = (e: KeyboardEvent) => {
+useKeyDown((key) => {
+  // scrolling
   let from = 0;
   if (
-    e.key === "ArrowRight" &&
+    key === "ArrowRight" &&
     store.currentProject < store.projects.length - 1
   ) {
     store.currentProject += 1;
     from = 69;
-  }
-  if (e.key === "ArrowLeft" && store.currentProject > 0) {
+  } else if (key === "ArrowLeft" && store.currentProject > 0) {
     store.currentProject -= 1;
     from = -69;
   }
@@ -61,10 +70,11 @@ const handleKeyDown = (e: KeyboardEvent) => {
       },
     );
   }
-};
 
-onMounted(() => window.addEventListener("keydown", handleKeyDown));
-onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
+  if (key === "Enter" || key === " ") {
+    store.visitProject();
+  }
+});
 
 defineOptions({
   render: () => null,