fix(nds): remove all top baselines

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

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();

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

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();

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 () => {

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

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,
+      );
     }
   };
 

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