feat(i18n): i18nize everything

app/components/Settings/BottomScreen/Menus/Options/2048.vue

@@ -19,7 +19,7 @@ const handleActivateA = () => {
   }
   let confirmed = false;
   confirmationModal.open({
-    text: "Restart game?",
+    text: $t("settings.options.2048.restartConfirmation"),
     onConfirm: () => {
       confirmed = true;
     },
@@ -95,7 +95,7 @@ let animating = false;
 const showRestartModal = () => {
   let confirmed = false;
   confirmationModal.open({
-    text: "Game Over!\nRestart?",
+    text: $t("settings.options.2048.gameOver"),
     onConfirm: () => {
       confirmed = true;
     },
@@ -179,11 +179,15 @@ onRender((ctx) => {
   ctx.fillStyle = "#010101";
 
   // score
-  ctx.fillText("Score:", SCORE_X, SCORE_Y);
+  ctx.fillText(`${$t("settings.options.2048.score")}:`, SCORE_X, SCORE_Y);
   ctx.fillText(score.toString(), SCORE_X, SCORE_Y + 16);
 
   // high score
-  ctx.fillText("High:", SCORE_X, HIGH_SCORE_Y);
+  ctx.fillText(
+    `${$t("settings.options.2048.highScore")}:`,
+    SCORE_X,
+    HIGH_SCORE_Y,
+  );
   ctx.fillText(
     savedState.value.highScore.toString(),
     SCORE_X,
@@ -500,8 +504,8 @@ useKeyDown((key) => {
 <template>
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset"
-    b-label="Cancel"
-    a-label="Restart"
+    :b-label="$t('common.quit')"
+    :a-label="$t('common.restart')"
     @activate-b="handleActivateB()"
     @activate-a="handleActivateA()"
   />

app/components/Settings/BottomScreen/Menus/Options/Language.vue

@@ -126,8 +126,8 @@ defineOptions({
 <template>
   <CommonButtons
     :y-offset="0"
-    b-label="Cancel"
-    a-label="Confirm"
+    :b-label="$t('common.cancel')"
+    :a-label="$t('common.confirm')"
     @activate-b="handleCancel"
     @activate-a="handleConfirm"
   />

app/components/Settings/BottomScreen/Menus/Options/StartUp.vue

@@ -35,7 +35,10 @@ const handleConfirm = () => {
 
   const showConfirmation = () => {
     confirmationModal.open({
-      text: `Rendering mode set to ${mode === "3d" ? "3D" : "2D"}`,
+      text:
+        mode === "3d"
+          ? $t("settings.options.startUp.confirmation3d")
+          : $t("settings.options.startUp.confirmation2d"),
       onClosed: () => {
         store.closeSubMenu();
       },
@@ -75,21 +78,20 @@ onRender((ctx) => {
     fillImageTextHCentered(ctx, logo, title, 0, 4, buttonWidth, 4);
 
     ctx.fillStyle = "#282828";
-    const text =
-      "The Main Menu will appear\nautomatically when you turn\nthe power on.";
+    const text = $t("settings.options.startUp.autoStart");
     fillTextHCenteredMultiline(ctx, text, 0, y, buttonWidth, 15);
 
     ctx.restore();
   };
 
   drawButton(
-    "3D Mode",
+    $t("settings.options.startUp.3dMode"),
     renderingModeAssets._3dMode,
     32,
     selected.value === "_3dMode",
   );
   drawButton(
-    "2D Mode",
+    $t("settings.options.startUp.2dMode"),
     renderingModeAssets._2dMode,
     96,
     selected.value === "_2dMode",
@@ -100,8 +102,8 @@ onRender((ctx) => {
 <template>
   <CommonButtons
     :y-offset="confirmationModal.buttonsYOffset"
-    b-label="Cancel"
-    a-label="Confirm"
+    :b-label="$t('common.cancel')"
+    :a-label="$t('common.confirm')"
     @activate-b="handleCancel"
     @activate-a="handleConfirm"
   />