diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/css/menu.css | 48 | ||||
| -rw-r--r-- | resources/css/town.css | 12 | ||||
| -rw-r--r-- | resources/js/classes/Area.js | 12 | ||||
| -rw-r--r-- | resources/js/game.js | 3 | ||||
| -rw-r--r-- | resources/js/helpers.js | 8 | ||||
| -rw-r--r-- | resources/js/ui.js | 54 |
6 files changed, 125 insertions, 12 deletions
diff --git a/resources/css/menu.css b/resources/css/menu.css index 84c6c77..8b0cb0b 100644 --- a/resources/css/menu.css +++ b/resources/css/menu.css @@ -97,23 +97,39 @@ color: #fff; background-color: #000; padding: 0.5rem; + font-size: 1.25rem; +} + +#status > div + div { + margin-top: 0.25rem; +} +.status__area > span { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; - - font-size: 1.25rem; +} +.status__area > span > span { + margin: 0 0.5rem; } -#status > span { +.status__numbers { + display: flex; + justify-content: space-between; +} +.status__numbers > span { display: flex; align-items: center; } -#status > span > span { +.status__numbers > span > span { margin-left: 0.5rem; } -#status .menu-button:hover { +.status__actions { + display: flex; + justify-content: space-between; +} +.status__actions .menu-button:hover { background-color: rgba(255, 255, 255, 0.5); } @@ -200,6 +216,26 @@ +.area-selection { + padding: 1rem; +} + +.area-selection__item { + display: grid; + grid-template-columns: 2.5rem 1fr; +} + +.area-selection__item + .area-selection__item { + margin-top: 1rem; +} + +.area-selection__item > span { + text-align: center; +} + + + + .inventory__popup { align-items: start; } diff --git a/resources/css/town.css b/resources/css/town.css index 4dd8195..b8be144 100644 --- a/resources/css/town.css +++ b/resources/css/town.css @@ -1,3 +1,11 @@ -#scene__town { - background-color: #fff; +#scene__town {} + +#scene__town svg { + width: 100%; + height: 100%; + display: block; +} + +svg [data-location] { + cursor: pointer; } diff --git a/resources/js/classes/Area.js b/resources/js/classes/Area.js index b2af3ea..b0bd710 100644 --- a/resources/js/classes/Area.js +++ b/resources/js/classes/Area.js @@ -11,6 +11,10 @@ class Area { async initialize () {} + get name () { + return DB.areas[this.slug].name; + } + get encounters () { return DB.areas[this.slug].encounters; } @@ -27,6 +31,14 @@ class Area { return DB.areas[this.slug].environment; } + get map () { + return DB.areas[this.slug].map; + } + + get locations () { + return DB.areas[this.slug].locations; + } + get events () { return DB.areas[this.slug].events; } diff --git a/resources/js/game.js b/resources/js/game.js index 7b40015..9370382 100644 --- a/resources/js/game.js +++ b/resources/js/game.js @@ -111,6 +111,7 @@ const Game = { } else if (Memory.state.opponent.type === 'trainer') { if (Memory.state.opponent.activeMonster === Memory.state.opponent.monsters[Memory.state.opponent.monsters.length - 1]) { Memory.state.currentArea.trainerProgress++; + Memory.state.currentArea.monsterProgress = 0; if (Memory.state.currentArea.encounters.length > 0) { await Game.encounterWildMonster(); } else { @@ -708,6 +709,8 @@ const Game = { if (Game.isTown(Memory.state.currentArea)) { UI.elements.sceneBattle.classList.add('hidden'); UI.elements.sceneTown.classList.remove('hidden'); + + UI.drawTown(); } else { UI.elements.sceneTown.classList.add('hidden'); UI.elements.sceneBattle.classList.remove('hidden'); diff --git a/resources/js/helpers.js b/resources/js/helpers.js index 2395878..e9cb37d 100644 --- a/resources/js/helpers.js +++ b/resources/js/helpers.js @@ -4,7 +4,13 @@ * @returns {(string|MonsterSlug|TechniqueSlug)} */ function slugToName (slug) { - return slug.split('_').map((item) => item.charAt(0).toUpperCase() + item.slice(1)).join(' '); + const ucfirst = (str) => { + return str.charAt(0).toUpperCase() + str.slice(1); + }; + + return slug + .split('_').map((item) => ucfirst(item)).join(' ') + .split('-').map((item) => ucfirst(item)).join(' '); } /** diff --git a/resources/js/ui.js b/resources/js/ui.js index a40550b..3940574 100644 --- a/resources/js/ui.js +++ b/resources/js/ui.js @@ -22,6 +22,9 @@ const Template = { movesetList: document.querySelector('#tpl___moveset__list'), movesetItem: document.querySelector('#tpl___moveset__item'), + areaSelection: document.querySelector('#tpl___area-selection'), + areaSelectionItem: document.querySelector('#tpl___area-selection__item'), + inventory: document.querySelector('#tpl___inventory'), inventoryItem: document.querySelector('#tpl___inventory__item'), @@ -628,6 +631,49 @@ const UI = { }, + /* Town */ + + async drawTown () { + const currentArea = Memory.state.currentArea; + + UI.elements.sceneTown.innerHTML = Memory.state.currentArea.map; + + for (const locationId of Object.keys(currentArea.locations)) { + const location = currentArea.locations[locationId]; + + UI.elements.sceneTown.querySelector(`[data-location="${locationId}"]`).addEventListener('click', () => { + if (location.type === 'healingCenter') { + UI.openHealingCenter(location); + } + + else if (location.type === 'shop') { + UI.openShop(location); + } + }); + } + }, + + openHealingCenter (healingCenter) {}, + + async openShop (shop) { + const popup = UI.createPopup(); + const template = document.createElement('div'); + + for (const itemData of shop.items) { + const item = await fetchItem(itemData.item_name); + const itemNode = document.createElement('div'); + + itemNode.innerHTML = `<img src="/modules/tuxemon/mods/tuxemon/${item.sprite}" />`; + itemNode.innerHTML += `${item.name}`; + itemNode.innerHTML += `${itemData.price} ${DB.currencies.map[Memory.state.Settings.currency].symbol}`; + + template.appendChild(itemNode); + } + + popup.querySelector('.popup').appendChild(template); + UI.drawPopup(popup); + }, + /* Menu */ @@ -688,6 +734,7 @@ const UI = { `${Memory.state.money.toFixed(DB.currencies.map[Memory.state.Settings.currency].decimals)}` + ' ' + `${DB.currencies.map[Memory.state.Settings.currency].symbol}`; + UI.elements.status.querySelector('[data-template-slot="area"]').textContent = currentArea.name; UI.elements.status.querySelector('[data-template-slot="monsterProgress"]').textContent = `${currentArea.monsterProgress} / ${currentArea.requiredEncounters}`; UI.elements.status.querySelector('[data-template-slot="trainerProgress"]').textContent = `${currentArea.trainerProgress} / ${currentArea.trainers.length}`; @@ -705,14 +752,14 @@ const UI = { openAreaSelection () { const popup = UI.createPopup(); - const template = document.createElement('div'); + const template = UI.createTemplate(Template.areaSelection); const currentArea = Memory.state.currentArea; for (const connectionSlug in currentArea.connections) { const connection = currentArea.connections[connectionSlug]; - const connectionNode = document.createElement('div'); + const connectionNode = UI.createTemplate(Template.areaSelectionItem); - connectionNode.textContent = slugToName(connectionSlug); + connectionNode.querySelector('[data-template-slot="text"]').textContent = connection.name; let canGo = true; for (const condition of connection.conditions) { @@ -1020,6 +1067,7 @@ const UI = { const exchangedMoney = baseRateMoney * newCurrency.rate; Memory.state.money = Number(exchangedMoney.toFixed(newCurrency.decimals)); + UI.drawTown(); UI.drawStatus(); }); |