From d78abd59c9c3402a8a48e35ae875db1c95eb4ed5 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Wed, 14 Jan 2026 21:20:22 +0100
Subject: [PATCH] feat(settings/options/language): implement language selection
 menu

---
 .../BottomScreen/Menus/Options/Language.vue   | 111 +++++++++++++++++-
 i18n/locales/de.json                          |   1 +
 i18n/locales/en.json                          |   3 +-
 i18n/locales/es.json                          |   1 +
 i18n/locales/fr.json                          |   1 +
 i18n/locales/it.json                          |   1 +
 i18n/locales/ja.json                          |   1 +
 nuxt.config.ts                                |   9 +-
 .../options/language-button-active.webp       | Bin 0 -> 1628 bytes
 .../options/language-button.webp              | Bin 0 -> 120 bytes
 10 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 i18n/locales/de.json
 create mode 100644 i18n/locales/es.json
 create mode 100644 i18n/locales/fr.json
 create mode 100644 i18n/locales/it.json
 create mode 100644 i18n/locales/ja.json
 create mode 100644 public/nds/images/settings/bottom-screen/options/language-button-active.webp
 create mode 100644 public/nds/images/settings/bottom-screen/options/language-button.webp

diff --git a/app/components/Settings/BottomScreen/Menus/Options/Language.vue b/app/components/Settings/BottomScreen/Menus/Options/Language.vue
index 0116bf4..f90f6f7 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/Language.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/Language.vue
@@ -1,13 +1,120 @@
 <script setup lang="ts">
+const { locales, locale, setLocale } = useI18n();
+const store = useSettingsStore();
+const confirmationModal = useConfirmationModal();
+const { assets } = useAssets();
 const { onRender } = useScreen();
 
+const BUTTON_KEYS = [
+  "english",
+  "german",
+  "french",
+  "spanish",
+  "italian",
+  "japanese",
+] as const;
+
+const BUTTON_POSITIONS = [
+  [15, 32],
+  [143, 32],
+  [15, 80],
+  [143, 80],
+  [15, 128],
+  [143, 128],
+] as const;
+
+const { selected, selectorPosition } = useButtonNavigation({
+  buttons: {
+    english: [10, 27, 106, 41],
+    german: [138, 27, 106, 41],
+    french: [10, 75, 106, 41],
+    spanish: [138, 75, 106, 41],
+    italian: [10, 123, 106, 41],
+    japanese: [138, 123, 106, 41],
+  },
+  initialButton:
+    BUTTON_KEYS[locales.value.findIndex((l) => l.code === locale.value)] ??
+    BUTTON_KEYS[0]!,
+  navigation: {
+    english: {
+      right: "german",
+      down: "french",
+    },
+    german: {
+      left: "english",
+      down: "spanish",
+    },
+    french: {
+      up: "english",
+      right: "spanish",
+      down: "italian",
+    },
+    spanish: {
+      up: "german",
+      left: "french",
+      down: "japanese",
+    },
+    italian: {
+      up: "french",
+      right: "japanese",
+    },
+    japanese: {
+      up: "spanish",
+      left: "italian",
+    },
+  },
+});
+
+const handleCancel = () => {
+  store.closeSubMenu();
+};
+
+const handleConfirm = () => {
+  const selectedLocale = locales.value[BUTTON_KEYS.indexOf(selected.value)]!;
+
+  setLocale(selectedLocale.code);
+
+  confirmationModal.open({
+    text: $t(
+      "settings.options.language.confirmation",
+      {},
+      { locale: selectedLocale.code },
+    ),
+    onClosed: () => store.closeSubMenu(),
+  });
+  // TODO: add "timeout" to confirmationModal.open
+  setTimeout(() => confirmationModal.close(), 2000);
+};
+
 onRender((ctx) => {
   ctx.font = "10px NDS10";
-  ctx.fillStyle = "#000000";
-  ctx.fillText("Language", 10, 20);
+  ctx.fillStyle = "#010101";
+
+  for (let i = 0; i < locales.value.length; i += 1) {
+    const [x, y] = BUTTON_POSITIONS[i]!;
+    const isSelected = selected.value === BUTTON_KEYS[i];
+    const buttonImage = isSelected
+      ? assets.images.settings.bottomScreen.options.languageButtonActive
+      : assets.images.settings.bottomScreen.options.languageButton;
+
+    buttonImage.draw(ctx, x, y, isSelected ? { colored: true } : undefined);
+    fillTextHCentered(ctx, locales.value[i].name, x, y + 20, 96);
+  }
 });
 
 defineOptions({
   render: () => null,
 });
 </script>
+
+<template>
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleCancel"
+    @activate-a="handleConfirm"
+  />
+
+  <CommonButtonSelector :rect="selectorPosition" />
+</template>
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/i18n/locales/de.json
@@ -0,0 +1 @@
+{}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index d5b5d6e..1905289 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -23,7 +23,8 @@
       },
       "language": {
         "title": "Language",
-        "description": "Select the language to use."
+        "description": "Select the language to use.",
+        "confirmation": "Language set to English."
       },
       "gbaMode": {
         "title": "GBA Mode",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/i18n/locales/es.json
@@ -0,0 +1 @@
+{}
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/i18n/locales/fr.json
@@ -0,0 +1 @@
+{}
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/i18n/locales/it.json
@@ -0,0 +1 @@
+{}
diff --git a/i18n/locales/ja.json b/i18n/locales/ja.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/i18n/locales/ja.json
@@ -0,0 +1 @@
+{}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 53fe23c..7737fc6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -20,7 +20,14 @@ export default defineNuxtConfig({
   },
   i18n: {
     strategy: "no_prefix",
-    locales: [{ code: "en", language: "en-US", file: "en.json" }],
+    locales: [
+      { code: "en", language: "en-US", name: "English", file: "en.json" },
+      { code: "de", language: "de-DE", name: "Deutsch", file: "de.json" },
+      { code: "fr", language: "fr-FR", name: "Français", file: "fr.json" },
+      { code: "es", language: "es-ES", name: "Español", file: "es.json" },
+      { code: "it", language: "it-IT", name: "Italiano", file: "it.json" },
+      { code: "ja", language: "ja-JP", name: "日本語", file: "ja.json" },
+    ],
     defaultLocale: "en",
   },
   image: {
diff --git a/public/nds/images/settings/bottom-screen/options/language-button-active.webp b/public/nds/images/settings/bottom-screen/options/language-button-active.webp
new file mode 100644
index 0000000000000000000000000000000000000000..211ee388cbf0b09eaa77bcfc1a25d77c8e747094
GIT binary patch
literal 1628
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
J@n)Ts`xo(M7y|$R

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/options/language-button.webp b/public/nds/images/settings/bottom-screen/options/language-button.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7302dd98ee99993cad7730ff44560eeeba0cb5c8
GIT binary patch
literal 120
zcmV-;0EholNk&F+00012MM6+kP&iCu0000lUw{Vy1=~oH8pX$_PX=rTtaq4N>}w~Y
z{|1w`Syqp6@*PP#`vs026Sd6rzP-5rr!f&YQRMdS;?Nds8Hn8$*BP5b+&`Rzi2}A)
a0NqY=9&O>Z%yj0(b{9xzw{Y5-(+>ay^E71u

literal 0
HcmV?d00001