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 5353b4b..315b0db 100644 Binary files a/public/nds/images/home/bottom-screen/buttons/game.webp and b/public/nds/images/home/bottom-screen/buttons/game.webp differ