settings menu with language selection

6 files changed, 133 insertions, 25 deletions

diff --git a/index.html b/index.html
index afbf93d..9fb5422 100644
--- a/index.html
+++ b/index.html
@@ -31,17 +31,21 @@
           <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/tuxemon.png" title="Tuxemon" width="64" height="64" />
         </div>
 
-        <div id="menu__inventory">
-          <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/item/backpack.png" title="Inventory" width="64" height="64" />
-        </div>
-
         <div id="menu__catch">
           <img src="/modules/tuxemon/mods/tuxemon/gfx/items/tuxeball.png" title="Catch" width="64" height="64" />
         </div>
 
+        <div id="menu__inventory">
+          <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/item/backpack.png" title="Inventory" width="64" height="64" />
+        </div>
+
         <div id="menu__journal">
           <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/journal.png" title="Journal" width="64" height="64" />
         </div>
+
+        <div id="menu__settings">
+          <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/settings.png" title="Settings" width="64" height="64" />
+        </div>
       </div>
     </div>
 
@@ -176,24 +180,24 @@
         <div>
           <table>
             <tr>
-              <th>Melee</th>
-              <td data-template-slot="stats.melee"></td>
+              <th data-template-slot="stats.melee.name">Melee</th>
+              <td data-template-slot="stats.melee.value"></td>
             </tr>
             <tr>
-              <th>Armour</th>
-              <td data-template-slot="stats.armour"></td>
+              <th data-template-slot="stats.armour.name">Armour</th>
+              <td data-template-slot="stats.armour.value"></td>
             </tr>
             <tr>
-              <th>Ranged</th>
-              <td data-template-slot="stats.ranged"></td>
+              <th data-template-slot="stats.ranged.name">Ranged</th>
+              <td data-template-slot="stats.ranged.value"></td>
             </tr>
             <tr>
-              <th>Dodge</th>
-              <td data-template-slot="stats.dodge"></td>
+              <th data-template-slot="stats.dodge.name">Dodge</th>
+              <td data-template-slot="stats.dodge.value"></td>
             </tr>
             <tr>
-              <th>Speed</th>
-              <td data-template-slot="stats.speed"></td>
+              <th data-template-slot="stats.speed.name">Speed</th>
+              <td data-template-slot="stats.speed.value"></td>
             </tr>
           </table>
         </div>
@@ -231,8 +235,14 @@
 
     <template id="tpl___menu__journal">
       <div class="menu__journal">
-        <button data-template-slot="save" class="menu-button">Save</button>
-        <button data-template-slot="load" class="menu-button">Load</button>
+        <button data-template-slot="save" class="menu-button">
+          <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/save.png" title="Save" />
+          Save
+        </button>
+        <button data-template-slot="load" class="menu-button">
+          <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/load.png" title="Load" />
+          Load
+        </button>
       </div>
     </template>
 
@@ -250,6 +260,15 @@
       </div>
     </template>
 
+    <template id="tpl___menu__settings">
+      <div class="menu__settings">
+        <label>
+          Language
+          <select data-template-slot="language"></select>
+        </label>
+      </div>
+    </template>
+
 
     <script type="text/javascript" src="/resources/js/definitions.js"></script>
     <script type="text/javascript" src="/resources/js/helpers.js"></script>
diff --git a/resources/css/menu.css b/resources/css/menu.css
index d87e6c8..e198d64 100644
--- a/resources/css/menu.css
+++ b/resources/css/menu.css
@@ -98,7 +98,7 @@
 
 #menu {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   text-align: center;
   background-color: beige;
 }
@@ -146,6 +146,16 @@
   margin: 0.5em;
   font-size: 5rem;
   padding: 1em 1em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu__journal button img {
+  margin-right: 0.25em;
+  width: 1em;
+  height: 1em;
 }
 
 
@@ -217,3 +227,15 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.monster-stats table {
+  width: 100%;
+}
+
+.monster-stats table th {
+  text-align: left;
+}
+
+.monster-stats table td {
+  text-align: right;
+}
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);