feat(projects): visit projects

app/components/Projects/BottomScreen/Background.vue

@@ -1,10 +1,31 @@
 <script setup lang="ts">
 import BACKGROUND_IMAGE from "/assets/images/projects/bottom-screen/background.png";
+import VISIT_DISABLED_IMAGE from "/assets/images/projects/bottom-screen/visit-disabled.png";
 
-const [backgroundImage] = useImages(BACKGROUND_IMAGE);
+const store = useProjectsStore();
+
+const [backgroundImage, visitDisabledImage] = useImages(
+  BACKGROUND_IMAGE,
+  VISIT_DISABLED_IMAGE,
+);
 
 useRender((ctx) => {
   ctx.drawImage(backgroundImage!, 0, 0);
+
+  if (store.projects[store.currentProject]!.url === null) {
+    ctx.drawImage(visitDisabledImage!, 144, 172);
+  }
+});
+
+const QUIT_BUTTON: Rect = [31, 172, 80, 18];
+const OK_BUTTON: Rect = [144, 172, 80, 18];
+
+useScreenClick((x, y) => {
+  if (rectContains(QUIT_BUTTON, [x, y])) {
+    // TODO: outro
+  } else if (rectContains(OK_BUTTON, [x, y])) {
+    store.visitProject();
+  }
 });
 
 defineOptions({

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,