feat(settings/options/language): implement language selection menu

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>