1 files changed, 51 insertions, 14 deletions

diff --git a/resources/js/ui.js b/resources/js/ui.js
index 92ca313..a40550b 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -34,6 +34,9 @@ const Template = {
 
 const UI = {
   elements: {
+    sceneBattle: document.querySelector('#scene__battle'),
+    sceneTown: document.querySelector('#scene__town'),
+
     battle: document.querySelector('#battle'),
     battleOpponent: document.querySelector('#battle__opponent'),
     battleOpponentSprite: null,
@@ -46,7 +49,7 @@ const UI = {
 
     status: document.querySelector('#status'),
     nextTrainer: document.querySelector('#status [data-template-slot="nextTrainer"]'),
-    nextArea: document.querySelector('#status [data-template-slot="nextArea"]'),
+    changeArea: document.querySelector('#status [data-template-slot="changeArea"]'),
 
     menuParty: document.querySelector('#menu__party'),
     menuInventory: document.querySelector('#menu__inventory'),
@@ -489,11 +492,8 @@ const UI = {
     UI.elements.log.classList.toggle('log--is-hidden');
   },
 
-  /**
-   * @param {Area} area
-   */
-  drawArea (area) {
-    UI.elements.battle.style.backgroundImage = `url(/modules/tuxemon/mods/tuxemon/gfx/ui/combat/${area.environment.battle_graphics.background})`;
+  drawArea () {
+    UI.elements.battle.style.backgroundImage = `url(/modules/tuxemon/mods/tuxemon/gfx/ui/combat/${Memory.state.currentArea.environment.battle_graphics.background})`;
   },
 
   progressTurn () {
@@ -701,16 +701,52 @@ const UI = {
     } else {
       nextTrainerButton.disabled = true;
     }
+  },
 
-    const nextAreaButton = UI.elements.nextArea;
-    if (
-      currentArea.monsterProgress >= currentArea.requiredEncounters &&
-      currentArea.trainerProgress === currentArea.trainers.length
-    ) {
-      nextAreaButton.disabled = false;
-    } else {
-      nextAreaButton.disabled = true;
+  openAreaSelection () {
+    const popup = UI.createPopup();
+    const template = document.createElement('div');
+    const currentArea = Memory.state.currentArea;
+
+    for (const connectionSlug in currentArea.connections) {
+      const connection = currentArea.connections[connectionSlug];
+      const connectionNode = document.createElement('div');
+
+      connectionNode.textContent = slugToName(connectionSlug);
+
+      let canGo = true;
+      for (const condition of connection.conditions) {
+        if (condition === 'encounters') {
+          canGo = canGo && currentArea.monsterProgress >= currentArea.requiredEncounters;
+        }
+
+        else if (condition === 'trainers') {
+          canGo = canGo && currentArea.trainerProgress >= currentArea.trainers.length;
+        }
+
+        else if (condition.startsWith('event.')) {
+          canGo = false;
+        }
+      }
+
+      if (!canGo) {
+        connectionNode.setAttribute('disabled', true);
+      }
+
+      connectionNode.addEventListener('click', () => {
+        if (canGo) {
+          Game.goToArea(connectionSlug);
+          popup.remove();
+        } else {
+          alert("Can\'t go there yet!");
+        }
+      });
+
+      template.appendChild(connectionNode);
     }
+
+    popup.querySelector('.popup').appendChild(template);
+    UI.drawPopup(popup);
   },
 
   openPartyMenu () {
@@ -1305,6 +1341,7 @@ const UI = {
 };
 
 // UI element click bindings
+UI.elements.changeArea.addEventListener('click', UI.openAreaSelection);
 UI.elements.menuParty.addEventListener('click', UI.openPartyMenu);
 UI.elements.menuInventory.addEventListener('click', UI.openInventoryMenu);
 UI.elements.menuLog.addEventListener('click', UI.toggleLog);