settings menu with language selection

4 files changed, 75 insertions, 8 deletions

diff --git a/resources/js/classes/State.js b/resources/js/classes/State.js
index 44afa96..4b209e2 100644
--- a/resources/js/classes/State.js
+++ b/resources/js/classes/State.js
@@ -2,7 +2,7 @@ class State {
   /**
    * @type {string}
    */
-  language = 'ja';
+  language = 'en_US';
 
   /**
    * @type {number}
diff --git a/resources/js/main.js b/resources/js/main.js
index a3568bf..12d1475 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -10,7 +10,6 @@
 
   Memory.state.player = new Trainer();
   Memory.state.player.monsters = [
-    await fetchMonster('dollfin'),
     await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))]),
     await fetchMonster('corvix'),
     await fetchMonster('lunight'),
diff --git a/resources/js/memory.js b/resources/js/memory.js
index 81acf89..1732472 100644
--- a/resources/js/memory.js
+++ b/resources/js/memory.js
@@ -131,6 +131,9 @@ const Memory = {
      */
     const loadedState = JSON.parse(atob(saveData));
 
+    Memory.state.language = loadedState.language;
+    await fetchTranslation(Memory.state.language);
+
     Memory.state.turn = loadedState.turn;
     Memory.state.money = loadedState.money;
     Memory.state.monsters = await Promise.all(loadedState.monsters.map(async (monsterData) => await loadMonster(monsterData)));
diff --git a/resources/js/ui.js b/resources/js/ui.js
index f6c490f..a623f9d 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -28,6 +28,8 @@ const Template = {
   menuJournal:  document.querySelector('#tpl___menu__journal'),
   dialogSave:  document.querySelector('#tpl___dialog__save'),
   dialogLoad:  document.querySelector('#tpl___dialog__load'),
+
+  menuSettings: document.querySelector('#tpl___menu__settings'),
 };
 
 const UI = {
@@ -45,6 +47,7 @@ const UI = {
     menuInventory: document.querySelector('#menu__inventory'),
     menuCatch: document.querySelector('#menu__catch'),
     menuJournal: document.querySelector('#menu__journal'),
+    menuSettings: document.querySelector('#menu__settings'),
   },
 
   events: document.createElement('div'),
@@ -328,7 +331,7 @@ const UI = {
       techniqueNode.querySelector('[data-template-slot="name"]').textContent = technique.name;
       techniqueNode.querySelector('[data-template-slot="recharge"]').textContent = technique.rechargeLength;
       techniqueNode.querySelector('[data-template-slot="types"]').innerHTML = technique.types.map((type) => UI.createElementTypeIcon(type).outerHTML).join('');
-      techniqueNode.querySelector('[data-template-slot="range"]').textContent = technique.range;
+      techniqueNode.querySelector('[data-template-slot="range"]').textContent = translate(technique.range) || slugToName(technique.range);
       techniqueNode.querySelector('[data-template-slot="power"]').textContent = technique.power;
       techniqueNode.querySelector('[data-template-slot="accuracy"]').textContent = technique.accuracy;
 
@@ -759,6 +762,61 @@ const UI = {
     UI.drawPopup(popup);
   },
 
+  openSettingsMenu () {
+    const popup = UI.createPopup();
+    const template = UI.createTemplate(Template.menuSettings);
+
+
+    /* Language */
+
+    const languageSelectNode = template.querySelector('[data-template-slot="language"]');
+
+    const languages = {
+      'cs_CZ': 'Czech (Czech Republic)',
+      'de_DE': 'German (Germany)',
+      'en_US': 'English (United States)',
+      'eo': 'Esperanto',
+      'es_ES': 'Spanish (Spain)',
+      'es_MX': 'Spanish (Mexico)',
+      'fi': 'Finnish',
+      'fr_FR': 'French (France)',
+      'it_IT': 'Italian (Italy)',
+      'ja': 'Japanese',
+      'nb_NO': 'Norwegian Bokmål (Norway)',
+      'pl': 'Polish',
+      'pt_BR': 'Portuguese (Brazil)',
+      'zh_CN': 'Chinese (China)',
+    };
+
+    for (const languageCode of Object.keys(languages)) {
+      const languageName = languages[languageCode];
+      const languageOptionNode = document.createElement('option');
+
+      languageOptionNode.value = languageCode;
+      languageOptionNode.textContent = languageName;
+
+      if (languageCode === Memory.state.language) {
+        languageOptionNode.selected = true;
+      }
+
+      languageSelectNode.appendChild(languageOptionNode);
+    }
+
+    languageSelectNode.addEventListener('change', async () => {
+      const selected = [...languageSelectNode.children].find((node) => node.selected === true);
+      Memory.state.language = selected.value;
+
+      await fetchTranslation(Memory.state.language);
+      UI.drawOpponentMonster();
+      UI.drawActiveMonster();
+      UI.drawActiveTechniques();
+    });
+
+
+    popup.querySelector('.popup').appendChild(template);
+    UI.drawPopup(popup);
+  },
+
 
   /* Menu - Monster */
 
@@ -775,11 +833,17 @@ const UI = {
     template.querySelector('[data-template-slot="level"]').textContent = monster.level;
     template.querySelector('[data-template-slot="types"]').innerHTML = monster.types.map((type) => UI.createElementTypeIcon(type).outerHTML).join('');
 
-    template.querySelector('[data-template-slot="stats.melee"]').textContent = monster.stats.melee;
-    template.querySelector('[data-template-slot="stats.armour"]').textContent = monster.stats.armour;
-    template.querySelector('[data-template-slot="stats.ranged"]').textContent = monster.stats.ranged;
-    template.querySelector('[data-template-slot="stats.dodge"]').textContent = monster.stats.dodge;
-    template.querySelector('[data-template-slot="stats.speed"]').textContent = monster.stats.speed;
+    template.querySelector('[data-template-slot="stats.melee.name"]').textContent = translate(StatType.melee) || slugToName(StatType.melee);
+    template.querySelector('[data-template-slot="stats.armour.name"]').textContent = translate(StatType.armour) || slugToName(StatType.armour);
+    template.querySelector('[data-template-slot="stats.ranged.name"]').textContent = translate(StatType.ranged) || slugToName(StatType.ranged);
+    template.querySelector('[data-template-slot="stats.dodge.name"]').textContent = translate(StatType.dodge) || slugToName(StatType.dodge);
+    template.querySelector('[data-template-slot="stats.speed.name"]').textContent = translate(StatType.speed) || slugToName(StatType.speed);
+
+    template.querySelector('[data-template-slot="stats.melee.value"]').textContent = monster.stats.melee;
+    template.querySelector('[data-template-slot="stats.armour.value"]').textContent = monster.stats.armour;
+    template.querySelector('[data-template-slot="stats.ranged.value"]').textContent = monster.stats.ranged;
+    template.querySelector('[data-template-slot="stats.dodge.value"]').textContent = monster.stats.dodge;
+    template.querySelector('[data-template-slot="stats.speed.value"]').textContent = monster.stats.speed;
 
     template.querySelector('[data-template-slot="techniques"]').addEventListener('click', () => UI.openMovesetSelection(monster));
 
@@ -878,3 +942,4 @@ const UI = {
 UI.elements.menuParty.addEventListener('click', UI.openPartyMenu);
 UI.elements.menuInventory.addEventListener('click', UI.openInventoryMenu);
 UI.elements.menuJournal.addEventListener('click', UI.openJournalMenu);
+UI.elements.menuSettings.addEventListener('click', UI.openSettingsMenu);