From 1cf4bfcc8f6abfac521e97bc8db1e0bb206ee654 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Wed, 7 Jan 2026 11:20:17 +0100
Subject: [PATCH] feat(home): update projects button text and image

---
 app/components/Home/BottomScreen/Buttons.vue  |  34 ++++++++++++++++++
 app/utils/canvas.ts                           |  12 +++++++
 i18n/locales/en.json                          |   1 +
 .../home/bottom-screen/buttons/game.webp      | Bin 296 -> 264 bytes
 4 files changed, 47 insertions(+)

diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue
index 764401b..7533248 100644
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -82,6 +82,40 @@ onRender((ctx) => {
     87,
   );
 
+  // game
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#282828";
+  const projectsText = $t("home.projectsAndExperiences");
+  const lines = projectsText.split("\n");
+
+  ctx.textBaseline = "top";
+
+  if (lines.length == 1) {
+    fillTextHCentered(
+      ctx,
+      projectsText,
+      79,
+      42 + getButtonOffset("projects"),
+      140,
+    );
+  } else {
+    fillTextHCentered(
+      ctx,
+      lines[0]!,
+      82,
+      36 + getButtonOffset("projects"),
+      140,
+    );
+    fillTextHCentered(
+      ctx,
+      lines[1]!,
+      82,
+      36 + getButtonOffset("projects") + 13,
+      140,
+    );
+  }
+  ctx.textBaseline = "alphabetic";
+
   // gba thing
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#a2a2a2";
diff --git a/app/utils/canvas.ts b/app/utils/canvas.ts
index 2fa4deb..90c338c 100644
--- a/app/utils/canvas.ts
+++ b/app/utils/canvas.ts
@@ -13,6 +13,18 @@ export const fillTextCentered = (
   return measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent + 1;
 };
 
+export const fillTextHCentered = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+) => {
+  const measure = ctx.measureText(text);
+  const textX = Math.floor(x + width / 2 - measure.actualBoundingBoxRight / 2);
+  ctx.fillText(text, textX, y);
+};
+
 export const fillTextWordWrapped = (
   ctx: CanvasRenderingContext2D,
   text: string,
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index c24aa80..a0475a1 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,5 +1,6 @@
 {
   "home": {
+    "projectsAndExperiences": "Projects and\nExperiences",
     "greeting": "Welcome to my website!",
     "photoGallery": "Photo Gallery"
   },
diff --git a/public/nds/images/home/bottom-screen/buttons/game.webp b/public/nds/images/home/bottom-screen/buttons/game.webp
index 5353b4b5047a0d243ad2fc3569e2a7d6cefb0628..315b0db1e2c6499c6a8840d3044094f52aabfbfb 100644
GIT binary patch
literal 264
zcmV+j0r&n=Nk&Eh0RRA3MM6+kP&iEU0000lyZ{RTg{#<h<Hp2Gr&J8V5Viuy9?e*C
zYAKV~^&_JH4%|jkq$-V<kNJM!z?YEMI=4HP+9#!a@urkw+Y_>_>vHL?>$Xwb6Ov1L
zT)L&?{EUG$csUtZNDNhd#CSg$xCV%V!94FLai|(3vXF>XeZ+tYwP%2h$nE@;dw2#>
z6bz~mIcm<}AUGj9T922bFBtd;Ro$05PKZ@Vh}%Q=g;Wq&gb-ncYY;9P%tCFT(Y&U0
z1tC3;(dLw3(HG!!AL`((*1k6)!-uL<H+U8jzN(KH{~>s;0is|q4<>913Cq0yfcY2F
OK5+j3MgPw`_BsH+$a+%%

literal 296
zcmV+@0oVRgNk&E>0RRA3MM6+kP&iB!0RR9myZ{RTf1svqBdGidc03C2c)HL~)3y;*
z{scQ7g?Bt%)U<5`l|R9bN8ue$m-!D#1(5td0O0QIE&u=k$V{0jBG_ht8(Z75=x+gc
zmyn1K7&?FgTnm5>7&?F!$lO_peRF7G-6h<4zkmLBHG1BN{tHNw0>^0F4~BWK-0dZk
z6YBMQMlZ`103D?=Sz}KpBVhnK>a?21-tI0w5r^GG9g5?T5qU9_<?`~4QWm;gSsuBd
z-Zx4^Jai3tW5g6RgDJjIR-hZK@Wuu8eh(Z8-QkgNVl7^pwY-0y9E0ZY7;Mnd{|G1W
u(VgIf5nIq)Z1GRRPUtRn^1%i5SfMg2)cOJF_l#baI=N(WLJNj@udyHhiG(2l