feat(home): update projects button text and image

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";

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,

i18n/locales/en.json

@@ -1,5 +1,6 @@
 {
   "home": {
+    "projectsAndExperiences": "Projects and\nExperiences",
     "greeting": "Welcome to my website!",
     "photoGallery": "Photo Gallery"
   },