area connections and town maps

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();
     });