fix(i18n): fix some issues

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

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

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

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.font = "10px NDS10";
-  ctx.textBaseline = "top";
   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,
     );
   }

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>

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

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

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>
 

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

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 + 12);
-  ctx.fillText(text, x + 1, y + 1);
+  ctx.fillText(text, x + 1, y + 1 + 12);
-  ctx.fillText(text, x, y + 1);
+  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),

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 + 13 + 0);
-  ctx.fillText(text, x + 1, y + 1);
+  ctx.fillText(text, x + 1, y + 13 + 1);
-  ctx.fillText(text, x + 0, y + 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];

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, $t("settings.user.color.choose"), 177, 69 + 7, 62);
-  fillTextHCentered(ctx, "Choose color", 177, 69, 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);

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) {
+  for (let i = 0; i < lines.length; i += 1, y += lineHeight) {
-    fillTextHCentered(ctx, lines[i]!, 0, y, width);
+    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();
 };

i18n/locales/en.json

@@ -142,7 +142,8 @@
       "color": {
         "title": "Color",
         "description": "Select your favorite color.",
-        "confirmation": "Color setting saved."
+        "confirmation": "Color setting saved.",
+        "choose": "Choose color"
       },
       "birthday": {
         "title": "Birthday",

i18n/locales/fr.json

@@ -112,10 +112,10 @@
     },
     "clock": {
       "title": "Horloge",
-      "description": "Changer la date, l'heure et les\nparamètres de succès.",
+      "description": "Voir la date, l'heure et les\nparamètres de succès.",
       "achievements": {
         "title": "Succès",
-        "description": "Gérer vos succès.",
+        "description": "Gérez vos succès.",
         "resetButton": "Réinitialiser les succès",
         "resetConfirmation": "Réinitialiser tous les succès ?",
         "viewAll": "Tout voir",
@@ -124,14 +124,14 @@
       },
       "date": {
         "title": "Date",
-        "description": "Date d'aujourd'hui.",
+        "description": "La date du jour.",
         "month": "Mois",
         "day": "Jour",
         "year": "Année"
       },
       "time": {
         "title": "Heure",
-        "description": "Heure actuelle.",
+        "description": "L'heure actuelle.",
         "hour": "Heure",
         "minute": "Minute"
       }
@@ -142,7 +142,8 @@
       "color": {
         "title": "Couleur",
         "description": "Sélectionnez votre\ncouleur favorite.",
-        "confirmation": "La couleur a été sauvegardée."
+        "confirmation": "La couleur a été sauvegardée.",
+        "choose": "Couleur"
       },
       "birthday": {
         "title": "Anniversaire",
@@ -166,7 +167,7 @@
         "description": "Glissez ou utilisez les flèches\npour vous déplacer.\nNe vous mordez pas la queue !",
         "score": "Score : {score}",
         "best": "Meilleur : {best}",
-        "startPrompt": "\n\n\n  Appuyez sur icon_a\n    pour démarrer",
+        "startPrompt": "\n\n\n    icon_a pour\n   démarrer",
         "quitConfirmation": "Quitter la partie ?",
         "restartConfirmation": "Recommencer la partie ?"
       }