fix(nds): remove all top baselines

2026-02-27 02:03:48 +01:00
parent ed7397b46f
commit f3a6928cd7
20 changed files with 57 additions and 71 deletions
--- a/app/components/Achievements/BottomScreen.vue
+++ b/app/components/Achievements/BottomScreen.vue
@@ -55,7 +55,6 @@ onRender((ctx) => {
      ? store.outro.stage1Opacity
      : 1;
  ctx.font = "7px NDS7";
-  ctx.textBaseline = "top";
  for (
    let i = ACHIEVEMENTS.length - 1;
    i >= ACHIEVEMENTS_TOP_SCREEN_COUNT;
@@ -83,7 +82,7 @@ onRender((ctx) => {
        ? "???"
        : $t(`achievements.${achievement.id}`).replace("\n", " "),
      ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
-      y,
+      y + 7,
    );
  }

--- a/app/components/Achievements/Notification.vue
+++ b/app/components/Achievements/Notification.vue
@@ -87,7 +87,6 @@ onRender((ctx) => {

  // text (1 or 2 lines)
  ctx.font = "7px NDS7";
-  ctx.textBaseline = "top";
  ctx.fillStyle = "#282828";

  const lines = $t(`achievements.${currentAchievement.value}`).split("\n");
@@ -95,7 +94,11 @@ onRender((ctx) => {
    lines.length === 1 ? NOTIF_Y + PADDING + 4 : NOTIF_Y + PADDING + 1;

  for (let i = 0; i < lines.length; i++) {
-    ctx.fillText(lines[i]!, x.value + TEXT_X_OFFSET, textY + i * LINE_HEIGHT);
+    ctx.fillText(
+      lines[i]!,
+      x.value + TEXT_X_OFFSET,
+      textY + i * LINE_HEIGHT + 7,
+    );
  }
 }, 200);

--- a/app/components/Achievements/TopScreen.vue
+++ b/app/components/Achievements/TopScreen.vue
@@ -24,7 +24,6 @@ onRender((ctx) => {
      ? store.outro.stage2Opacity
      : 1;
  ctx.fillStyle = "#ffffff";
-  ctx.textBaseline = "top";

  // title
  ctx.font = "10px NDS10";
@@ -32,7 +31,7 @@ onRender((ctx) => {
    ctx,
    $t("achievementsScreen.title"),
    0,
-    ACHIEVEMENTS_HEADER_Y,
+    ACHIEVEMENTS_HEADER_Y + 9,
    LOGICAL_WIDTH,
  );

@@ -45,7 +44,7 @@ onRender((ctx) => {
    ctx,
    `${unlockedCount}/${totalCount}`,
    0,
-    ACHIEVEMENTS_HEADER_Y + 13,
+    ACHIEVEMENTS_HEADER_Y + 13 + 7,
    LOGICAL_WIDTH,
  );

@@ -105,7 +104,7 @@ onRender((ctx) => {
        ? "???"
        : $t(`achievements.${achievement.id}`).replace("\n", " "),
      ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
-      y,
+      y + 7,
    );
  }
 });
--- a/app/components/Common/ConfirmationModal.vue
+++ b/app/components/Common/ConfirmationModal.vue
@@ -38,8 +38,7 @@ onRender((ctx) => {

  assets.images.common.confirmationModal.draw(ctx, BG_X, BG_Y);

-  ctx.font = "16px Pokemon DP Pro";
-  ctx.textBaseline = "top";
+  ctx.font = "10px NDS10";
  ctx.fillStyle = "#ffffff";

  const rawText =
@@ -55,7 +54,7 @@ onRender((ctx) => {
      ctx,
      lines[i]!,
      BG_X,
-      textStartY + i * LINE_HEIGHT,
+      textStartY + i * LINE_HEIGHT + 13,
      BG_WIDTH,
    );
  }
--- a/app/components/Contact/BottomScreen/Buttons.vue
+++ b/app/components/Contact/BottomScreen/Buttons.vue
@@ -116,7 +116,6 @@ onRender((ctx) => {
    ? store.intro.stage3Opacity
    : store.outro.stage1Opacity;

-  ctx.textBaseline = "top";
  ctx.font = "10px NDS10";
  ctx.fillStyle = "#515151";

@@ -135,7 +134,7 @@ onRender((ctx) => {
    const pressedKey: `${typeof selected.value}Pressed` = `${button}Pressed`;
    assets[isPressed ? pressedKey : button].draw(ctx, x + 1, y + 1);

-    ctx.fillText(text, x + 36, y + 11);
+    ctx.fillText(text, x + 36, y + 11 + 9);
  }
 });
 </script>
--- a/app/components/Credits/BottomScreen.vue
+++ b/app/components/Credits/BottomScreen.vue
@@ -53,7 +53,6 @@ onRender((ctx) => {
    : store.isOutro
      ? store.outro.stage1Opacity
      : 1;
-  ctx.textBaseline = "top";

  for (let i = CREDITS.length - 1; i >= CREDITS_TOP_SCREEN_COUNT; i--) {
    const id = CREDITS[i]!;
@@ -74,7 +73,7 @@ onRender((ctx) => {
      ctx,
      $t(`creditsScreen.${id}.label`),
      0,
-      y,
+      y + 7,
      LOGICAL_WIDTH,
    );

@@ -84,7 +83,7 @@ onRender((ctx) => {
      ctx,
      $t(`creditsScreen.${id}.author`),
      0,
-      y + CREDITS_LINE_HEIGHT,
+      y + CREDITS_LINE_HEIGHT + 9,
      LOGICAL_WIDTH,
    );

@@ -94,7 +93,7 @@ onRender((ctx) => {
      ctx,
      $t(`creditsScreen.${id}.url`),
      0,
-      y + CREDITS_LINE_HEIGHT * 2,
+      y + CREDITS_LINE_HEIGHT * 2 + 7,
      LOGICAL_WIDTH,
    );
  }
--- a/app/components/Credits/TopScreen.vue
+++ b/app/components/Credits/TopScreen.vue
@@ -17,7 +17,6 @@ onRender((ctx) => {
      ? store.outro.stage2Opacity
      : 1;
  ctx.fillStyle = "#ffffff";
-  ctx.textBaseline = "top";

  // title
  ctx.font = "10px NDS10";
@@ -25,7 +24,7 @@ onRender((ctx) => {
    ctx,
    $t("creditsScreen.title"),
    0,
-    CREDITS_HEADER_Y,
+    CREDITS_HEADER_Y + 9,
    LOGICAL_WIDTH,
  );

@@ -53,7 +52,7 @@ onRender((ctx) => {
      ctx,
      $t(`creditsScreen.${id}.label`),
      0,
-      y,
+      y + 7,
      LOGICAL_WIDTH,
    );

@@ -63,7 +62,7 @@ onRender((ctx) => {
      ctx,
      $t(`creditsScreen.${id}.author`),
      0,
-      y + CREDITS_LINE_HEIGHT,
+      y + CREDITS_LINE_HEIGHT + 9,
      LOGICAL_WIDTH,
    );

@@ -73,7 +72,7 @@ onRender((ctx) => {
      ctx,
      $t(`creditsScreen.${id}.url`),
      0,
-      y + CREDITS_LINE_HEIGHT * 2,
+      y + CREDITS_LINE_HEIGHT * 2 + 7,
      LOGICAL_WIDTH,
    );
  }
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -101,14 +101,12 @@ onRender((ctx) => {
  const projectsText = $t("home.projectsAndExperiences");
  const lines = projectsText.split("\n");

-  ctx.textBaseline = "top";
-
  if (lines.length == 1) {
    fillTextHCentered(
      ctx,
      projectsText,
      79,
-      42 + getButtonOffset("projects"),
+      42 + getButtonOffset("projects") + 9,
      140,
    );
  } else {
@@ -116,23 +114,21 @@ onRender((ctx) => {
      ctx,
      lines[0]!,
      82,
-      36 + getButtonOffset("projects"),
+      36 + getButtonOffset("projects") + 9,
      140,
    );
    fillTextHCentered(
      ctx,
      lines[1]!,
      82,
-      36 + getButtonOffset("projects") + 13,
+      36 + getButtonOffset("projects") + 13 + 9,
      140,
    );
  }
-  ctx.textBaseline = "top";

  // gba thing
-  ctx.font = "10px NDS10";
  ctx.fillStyle = "#a2a2a2";
-  fillTextHCentered(ctx, $t("home.greeting"), 79, 137, 140);
+  fillTextHCentered(ctx, $t("home.greeting"), 79, 137 + 9, 140);
 });
 </script>

--- a/app/components/Intro/BottomScreen/BottomScreen.vue
+++ b/app/components/Intro/BottomScreen/BottomScreen.vue
@@ -24,8 +24,6 @@ store.$subscribe((_, state) => {
 });

 onRender((ctx) => {
-  ctx.textBaseline = "top";
-
  ctx.fillStyle = "#fbfbfb";
  ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);

@@ -49,7 +47,7 @@ onRender((ctx) => {
      : 1;

  assets.images.intro.warning.draw(ctx, logoX, TITLE_Y - 1);
-  ctx.fillText($t("intro.copyright"), logoX + logoWidth + 3, TITLE_Y);
+  ctx.fillText($t("intro.copyright"), logoX + logoWidth + 3, TITLE_Y + 12);

  ctx.letterSpacing = "0px";

@@ -57,7 +55,7 @@ onRender((ctx) => {
  ctx.font = "10px NDS10";
  const lines = $t("intro.text").split("\n");
  for (let i = 0, y = TEXT_Y; i < lines.length; i += 1, y += 18)
-    fillTextHCentered(ctx, lines[i]!, 0, y, LOGICAL_WIDTH);
+    fillTextHCentered(ctx, lines[i]!, 0, y + 9, LOGICAL_WIDTH);

  // hint
  ctx.font = "10px NDS10";
@@ -66,7 +64,7 @@ onRender((ctx) => {
    : store.isOutro
      ? store.outro.textOpacity
      : hintTextOpacity.value;
-  fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y, LOGICAL_WIDTH);
+  fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y + 9, LOGICAL_WIDTH);

  ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
  assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
--- a/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
+++ b/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
@@ -117,11 +117,11 @@ const drawTextWithShadow = (
  y: number,
 ) => {
  ctx.fillStyle = "#a2a2aa";
-  ctx.fillText(text, x + 1, y);
-  ctx.fillText(text, x + 1, y + 1);
-  ctx.fillText(text, x, y + 1);
+  ctx.fillText(text, x + 1, y + 12);
+  ctx.fillText(text, x + 1, y + 1 + 12);
+  ctx.fillText(text, x, y + 1 + 12);
  ctx.fillStyle = "#515159";
-  ctx.fillText(text, x, y);
+  ctx.fillText(text, x, y + 12);
 };

 onRender((ctx) => {
@@ -135,7 +135,6 @@ onRender((ctx) => {
  // text
  assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146);
  ctx.font = "16px Pokemon DP Pro";
-  ctx.textBaseline = "top";
  const displayedText = text.value.slice(
    0,
    Math.floor(textProgress.value * text.value.length),
--- a/app/components/Projects/TopScreen/Project.vue
+++ b/app/components/Projects/TopScreen/Project.vue
@@ -12,12 +12,12 @@ const drawTextWithShadow = (
  y: number,
 ) => {
  ctx.fillStyle = color === "white" ? "#505050" : "#a8b8b8";
-  ctx.fillText(text, x + 1, y + 0);
-  ctx.fillText(text, x + 1, y + 1);
-  ctx.fillText(text, x + 0, y + 1);
+  ctx.fillText(text, x + 1, y + 13 + 0);
+  ctx.fillText(text, x + 1, y + 13 + 1);
+  ctx.fillText(text, x + 0, y + 13 + 1);

  ctx.fillStyle = color === "white" ? "#f8f8f8" : "#101820";
-  ctx.fillText(text, x, y);
+  ctx.fillText(text, x, y + 13);
 };

 const drawTextWithShadow2Lines = (
@@ -58,7 +58,6 @@ const drawTextWithShadow2Lines = (
 onRender((ctx) => {
  assets.images.projects.topScreen.background.draw(ctx, 0, 0);

-  ctx.textBaseline = "top";
  ctx.font = "16px Pokemon DP Pro";

  const project = store.projects[store.currentProject];
--- a/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
@@ -154,7 +154,6 @@ onRender((ctx) => {
  // slash divider
  ctx.globalAlpha = animation.opacity;
  ctx.translate(0, animation.offsetY);
-  ctx.textBaseline = "top";
  ctx.fillStyle = "#515151";
  ctx.fillRect(7 * 16 - 1, 4 * 16 - 1, 16 * 3 + 1, 16 * 3 + 1);
  ctx.fillStyle = achievements.allObtained ? app.color.hex : "#797979";
@@ -164,7 +163,7 @@ onRender((ctx) => {
  ctx.fillStyle = achievements.allObtained
    ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
    : "#fbfbfb";
-  ctx.fillText("/", 7 * 16 + 3, 4 * 16 + 4);
+  ctx.fillText("/", 7 * 16 + 3, 4 * 16 + 4 + 39);
 });

 onRender((ctx) => {
@@ -174,7 +173,6 @@ onRender((ctx) => {
  achievementAssets.smallTrophy.draw(ctx, 131, 6);

  ctx.font = "10px NDS10";
-  ctx.textBaseline = "top";
  ctx.fillStyle = "#010101";

  const label = `${ICONS.X} ${$t("settings.clock.achievements.viewAll")}`;
@@ -182,7 +180,7 @@ onRender((ctx) => {
    ctx,
    label,
    145,
-    7,
+    7 + 9,
    achievementAssets.viewAllButton.rect.width - 18,
  );
 }, 1000);
--- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
@@ -234,8 +234,6 @@ onMounted(() => {
 });

 onRender((ctx) => {
-  ctx.textBaseline = "top";
-
  ctx.save();
  ctx.globalAlpha = intro.frameOpacity;
  ctx.translate(BOARD_X, BOARD_Y + intro.frameOffsetY);
@@ -281,7 +279,7 @@ onRender((ctx) => {
      ctx,
      tile.value.toString(),
      tile.x + 1,
-      tile.y + (tile.value <= 2048 ? 9 : 10),
+      tile.y + (tile.value <= 2048 ? 9 + 9 : 10 + 7),
      TILE_SIZE,
    );
    ctx.restore();
--- a/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
@@ -134,7 +134,6 @@ const handleActivateA = () => {

 onRender((ctx) => {
  ctx.font = "10px NDS10";
-  ctx.textBaseline = "top";

  const drawButton = (
    title: string,
@@ -162,7 +161,7 @@ onRender((ctx) => {
    ctx.fillStyle = "#282828";
    const descKey = key === "_3dMode" ? "3dDescription" : "2dDescription";
    const text = $t(`settings.options.renderingMode.${descKey}`);
-    fillTextHCenteredMultiline(ctx, text, 0, y, buttonWidth, 15);
+    fillTextHCenteredMultiline(ctx, text, 0, 20 + 9, buttonWidth, 15);

    ctx.translate(0, animation[key].headerOffsetY);
    headerImg.draw(ctx, 0, 0, colorOpts);
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
@@ -361,7 +361,6 @@ onRender((ctx, deltaTime) => {
    ctx.save();
    ctx.globalAlpha = animation.areaOpacity;
    ctx.fillStyle = "#fbfbfb";
-    ctx.textBaseline = "top";
    ctx.fillRect(32, 112, 191, 31);

    ctx.fillStyle = "#797979";
@@ -370,7 +369,7 @@ onRender((ctx, deltaTime) => {
      ctx,
      $t("settings.touchScreen.tapTap.startPrompt"),
      32,
-      123,
+      123 + 9,
      191,
    );
    ctx.restore();
--- a/app/components/Settings/BottomScreen/Menus/User/Color.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Color.vue
@@ -269,8 +269,7 @@ onRender((ctx, deltaTime) => {
  ctx.globalAlpha = animation.textOpacity;
  ctx.font = "7px NDS7";
  ctx.fillStyle = "#000000";
-  ctx.textBaseline = "top";
-  fillTextHCentered(ctx, "Choose color", 177, 69, 62);
+  fillTextHCentered(ctx, "Choose color", 177, 69 + 7, 62);
 });

 const handleActivateB = async () => {
--- a/app/components/Settings/BottomScreen/Menus/User/Snake.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
@@ -267,7 +267,6 @@ onRender((ctx) => {
  ctx.globalAlpha = intro.boardOpacity;
  ctx.translate(0, intro.boardOffsetY);

-  ctx.textBaseline = "top";
  ctx.font = "10px NDS10";

  // board
@@ -285,7 +284,7 @@ onRender((ctx) => {
        y += 16;
        i += 1;
      }
-      ctx.fillText(text[i]!, x + 20, y);
+      ctx.fillText(text[i]!, x + 20, y + 9);
    }
  } else {
    // food
--- a/app/components/Settings/BottomScreen/Menus/User/UserName.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/UserName.vue
@@ -99,7 +99,6 @@ const handleActivateA = async () => {

 onRender((ctx) => {
  ctx.font = "10px NDS10";
-  ctx.textBaseline = "top";

  assets.background.draw(ctx, 0, 0);

@@ -112,7 +111,7 @@ onRender((ctx) => {
    // title
    ctx.fillStyle = "#282828";
    assets.user.nameTitle.draw(ctx, x + 12, y);
-    fillTextHCentered(ctx, title, x + 12, y + 4, 169);
+    fillTextHCentered(ctx, title, x + 12, y + 4 + 9, 169);

    // field
    ctx.fillStyle = "#fbfbfb";
@@ -123,7 +122,11 @@ onRender((ctx) => {
    );

    for (let i = 0; i < text.length; i += 1, x += 16) {
-      ctx.fillText(text[i]!, x + 20, y + assets.user.nameTitle.rect.height + 3);
+      ctx.fillText(
+        text[i]!,
+        x + 20,
+        y + assets.user.nameTitle.rect.height + 3 + 9,
+      );
    }
  };

--- a/app/components/Settings/BottomScreen/NumberInput.vue
+++ b/app/components/Settings/BottomScreen/NumberInput.vue
@@ -170,14 +170,13 @@ onRender((ctx) => {
  // value
  ctx.font = "39px NDS39";
  ctx.letterSpacing = "2px";
-  ctx.textBaseline = "top";
  ctx.fillStyle = props.selected
    ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
    : "#fbfbfb";
  ctx.fillText(
    value.value.toString().padStart(props.digits, "0"),
    props.x + (props.digits === 2 ? 3 : 4),
-    Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2),
+    Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2) + 39,
  );

  // arrow down (clipped to area below the number square)
@@ -205,7 +204,7 @@ onRender((ctx) => {
    ctx,
    props.title,
    props.x + 1,
-    Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT + 3,
+    Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT + 3 + 9,
    downImage.value.rect.width,
  );
 }, 10);
--- a/app/utils/canvas.ts
+++ b/app/utils/canvas.ts
@@ -72,7 +72,11 @@ export const fillImageTextHCentered = (
  const groupX = Math.floor(x + width / 2 - totalWidth / 2);

  image.draw(ctx, groupX, y);
-  ctx.fillText(text, groupX + gap + image.rect.width, y);
+  ctx.fillText(
+    text,
+    groupX + gap + image.rect.width,
+    y + (ctx.font === "10px NDS10" ? 9 : 7),
+  );
 };

 export const fillTextHCentered = (
@@ -96,8 +100,8 @@ export const fillTextHCenteredMultiline = (
  lineHeight: number,
 ) => {
  const lines = text.split("\n");
-  for (let i = 0, y = 20; i < lines.length; i += 1, y += lineHeight) {
-    fillTextHCentered(ctx, lines[i]!, 0, y, width);
+  for (let i = 0; i < lines.length; i += 1, y += lineHeight) {
+    fillTextHCentered(ctx, lines[i]!, x, y, width);
  }
 };

@@ -237,11 +241,10 @@ export const drawButton = (
    0,
  );

-  ctx.textBaseline = "top";
  ctx.font = "10px NDS10";
  ctx.fillStyle = "#494118";

-  fillTextHCentered(ctx, text, 1, 4, width);
+  fillTextHCentered(ctx, text, 1, 4 + 9, width);

  ctx.restore();
 };