From 05c89563cbaa00b14ed3ba81c9339ee5dcef2431 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Wed, 19 Nov 2025 00:28:45 +0100
Subject: [PATCH] feat(projects): visit projects

---
 .../projects/bottom-screen/visit-disabled.png | Bin 0 -> 5976 bytes
 .../Projects/BottomScreen/Background.vue      |  23 +++++++++-
 .../Projects/BottomScreen/Projects.vue        |  30 ++++++++-----
 app/stores/projects.ts                        |  41 +++++++++++++-----
 4 files changed, 72 insertions(+), 22 deletions(-)
 create mode 100644 app/assets/images/projects/bottom-screen/visit-disabled.png

diff --git a/app/assets/images/projects/bottom-screen/visit-disabled.png b/app/assets/images/projects/bottom-screen/visit-disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..696041c4e1c64a4a4648ee4c6042eef634442257
GIT binary patch
literal 5976
zcmeHL&r2IY6n-nIR--+5Fwj%6P^1*eL3${Kq9__cu~H-j50+R;K~b<RC8D*V26`&u
zrH6PZr6_^{ukByZqTn?b&rN$(4=ULGM!(HuvYV_LB~S-8Z{GKQ&YRhp$$lK@?{28O
zStlY5k)F;$n-17d<MnD0>qqkCu+3OggWVlg=I6b4HWPT!-q$X&{wa9)?3&HriuDZk
ziNx=S%zY5qx1qV;BCo?De?~+ed=?2!roKOZXbWm5d!9~-wBE*Jz5Vv+jSbekiu85W
zWP^=OH(Kw0SsxQ=N=G`|pG0e|uT8^Q%T|$aID7<JtXWVRA0Jmbu~<x&mX-?oJ3Bj~
z6lZ5=i#by=rC3tSR<P_)PJRfD#_)=<e^lsnI_)S@;6_#Gp`oDySv($BSTdO`kQD<0
z5Qah_PaR#xAwbz2MlcvuK71F)Gom2~^!D~jeSN(F+e^zH@@a?L($XTXL*~%n6hqS&
zN<rik05gYH<(3`mW6~2_SHfCbewTx*7Z*@X3hG#it*x!?cutU<TPe+?xz^|B=Vf|&
zT8U4)5KNyY&*e;9EgB@pIikRercx;x9UT=?+Hs+AUBKQA^YZJ3t0~4dXJ+nYaM5^m
zwS81*t?V0v=KI{;t*tF9Ff%hFo12^Gc6LDyj+`~<H-P@4Se805on7-RyQf!NZiFg9
zzw2*eV#4u<w|HS;!QttH)DhSn*y*~u%<S*(?&d)%!91h{!$5kn#6XD?E8(s{%v~X`
zf`0ZudSU|Lz3lX@hIU@Ml$(_L*4o<I(ZRuiDfi@~(WsIwFE0z%AOPSiD=Ui97(5&0
z<h>}TIGfGN>guYf1oc2(hL?r!@8j+(f<zY=7jsA5WhGE54mWC2wNYa)tfVTI8bqbY
z6NyA_hBr1gJYUL6Nw`w-zz&F;AX=4~6wiTjP#k<-kDGt!>Nt5)<f_ZTLxu*tn4W3p
zm#1%?qR*CBK)+7?=;_A|&pc8DhurkTa}qe@x;|`(qfn+j<ALf$rQKPnnIn1lLvsp<
zbB||VxhMjl2=J#<;Anp19Bb$F!P6i5^iQ1k0Kfi=>AA^>Azr~v3pX7cf#;>XGjL@f
znBH*D*xTDHh(kM2<^enAL)`r1&l?)`%0>0q^r?@-IfXNsj5Iel>$0o9M+LUGw*{Yg
za0)xGFlUhWn=6|8V{X=hwL*P;e_{2QjQ<+O2ZhZ2vG>28|2;$@B3=ER>5h@aKl}`s
A-2eap

literal 0
HcmV?d00001

diff --git a/app/components/Projects/BottomScreen/Background.vue b/app/components/Projects/BottomScreen/Background.vue
index c56c8af..229d636 100644
--- a/app/components/Projects/BottomScreen/Background.vue
+++ b/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({
diff --git a/app/components/Projects/BottomScreen/Projects.vue b/app/components/Projects/BottomScreen/Projects.vue
index 6d10556..75564b0 100644
--- a/app/components/Projects/BottomScreen/Projects.vue
+++ b/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,
diff --git a/app/stores/projects.ts b/app/stores/projects.ts
index 90f5543..1a6aebb 100644
--- a/app/stores/projects.ts
+++ b/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" } });
+    },
+  },
 });