1 files changed, 51 insertions, 3 deletions

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