From 1a3489d4026656f83504a0154c294a5b6cf76a61 Mon Sep 17 00:00:00 2001 From: Daniel Weipert Date: Sat, 19 Aug 2023 21:04:02 +0200 Subject: settings menu with language selection --- resources/css/menu.css | 24 +++++++++++++- resources/js/classes/State.js | 2 +- resources/js/main.js | 1 - resources/js/memory.js | 3 ++ resources/js/ui.js | 77 +++++++++++++++++++++++++++++++++++++++---- 5 files changed, 98 insertions(+), 9 deletions(-) (limited to 'resources') 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); -- cgit v1.2.3