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;
-  }
+  } else if (key === "ArrowLeft" && store.currentProject > 0) {
-  if (e.key === "ArrowLeft" && store.currentProject > 0) {
     store.currentProject -= 1;
     from = -69;
   }
@@ -61,10 +70,11 @@ const handleKeyDown = (e: KeyboardEvent) => {
       },
     );
   }
-};
 
-onMounted(() => window.addEventListener("keydown", handleKeyDown));
+  if (key === "Enter" || key === " ") {
-onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
+    store.visitProject();
+  }
+});
 
 defineOptions({
   render: () => null,

app/stores/projects.ts

@@ -14,46 +14,65 @@ export const useProjectsStore = defineStore("projects", {
       {
         description: "pihkaal.me - my personal website",
         thumbnail: PIHKAAL_ME_THUMBNAIL,
+        url: "https://pihkaal.me",
       },
       {
-        description: "tlock - fully customizable and cross-platform terminal based clock",
+        description: "tlock - fully customizable and cross-\nplatform terminal based clock",
         thumbnail: TLOCK_THUMBNAIL,
+        url: "https://github.com/pihkaal/tlock",
       },
       {
-        description: "Simple QR - Simple QR code generator with straightforward API",
+        description: "Simple QR - Simple QR code generator\nwith straightforward API",
         thumbnail: SIMPLE_QR_THUMBNAIL,
+        url: "https://simple-qr.com",
       },
       {
         description: "lilou.cat - My cat's website",
-        thumbnail: LILOU_CAT_THUMBNAIL
+        thumbnail: LILOU_CAT_THUMBNAIL,
+        url: "https://lilou.cat",
       },
       {
-        description: "LBF Bot - Custom Discord bot for a gaming group",
+        description: "LBF Bot - Custom Discord bot for\na gaming group",
         thumbnail: LBF_BOT_THUMBNAIL,
+        url: "https://github.com/pihkaal/lbf-bot",
       },
       {
-        description: "Raylib Speedruns - Collection of simple Raylib setups in multiple languages",
+        description: "Raylib Speedruns - Collection of simple\nRaylib setups in multiple languages",
         thumbnail: RAYLIB_SPEENDRUNS_THUMBNAIL,
+        url: "https://github.com/pihkaal/raylib-speedruns",
       },
       {
-        description: "S3P Map Editor - Web based map editor specialized for trucks",
+        description: "S3P Map Editor - Web based map editor\nspecialized for trucks",
         thumbnail: SP3WEB_THUMBNAIL,
+        url: null,
       },
       {
-        description: "S3P Eramba Visualizer - Eramba asset visualization",
+        description: "S3P Eramba Visualizer - Eramba\nasset visualization",
         thumbnail: SP3WEB_THUMBNAIL,
+        url: null,
       },
       {
-        description: "S3P Incident Engine - Automated alerts to Jira",
+        description: "S3P Incident Engine - Automated\nalerts to Jira",
         thumbnail: SP3WEB_THUMBNAIL,
+        url: null,
       },
       {
-        description: "Biobleud - Automated Excel imports for an ERP system",
+        description: "Biobleud - Automated Excel imports\nfor an ERP system",
         thumbnail: BIOBLEUD_THUMBNAIL,
+        url: null,
       },
-    ],
+    ] satisfies {
+      description: string;
+      thumbnail: string;
+      url: string | null;
+    }[],
     currentProject: 0,
   }),
 
-  actions: {},
+  actions: {
+    visitProject() {
+      const url = this.projects[this.currentProject]!.url;
+      if (url) navigateTo(url, { external: true, open: { target: "_blank" } });
+    },
+  },
 });