areas and town/shop setup

23 files changed, 305 insertions, 74 deletions

diff --git a/db/_generated/areas/city-park.json b/db/_generated/areas/city-park.json
new file mode 100644
index 0000000..41fe761
--- /dev/null
+++ b/db/_generated/areas/city-park.json
@@ -0,0 +1 @@
+{"encounter_slug":"citypark","encounters":[{"monster":"cardiling","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[5,8]},{"monster":"cardiwing","encounter_rate":1,"daytime":true,"exp_req_mod":1,"level_range":[8,11]},{"monster":"cataspike","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[6,9]},{"monster":"eyenemy","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[5,8]},{"monster":"axylightl","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[8,12]},{"monster":"tourbidi","encounter_rate":1,"daytime":false,"exp_req_mod":1,"level_range":[8,12]},{"monster":"squabbit","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[8,12]},{"monster":"puparmor","encounter_rate":1,"daytime":false,"exp_req_mod":1,"level_range":[9,14]}],"requiredEncounters":10,"trainers":[{"name":"Frances","sprite":"florist.png","monsters":[{"slug":"shybulb","level":8},{"slug":"shybulb","level":8}],"inventory":[]}],"environment_slug":"forest","connections":{"route2":{"conditions":[]},"leather-town":{"conditions":["encounters","trainers"]}},"environment":{"slug":"forest","battle_graphics":{"island_back":"woodland_island.png","island_front":"woodland_island.png","background":"forest_background.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
diff --git a/db/_generated/areas/cotton-town.json b/db/_generated/areas/cotton-town.json
new file mode 100644
index 0000000..3956bc8
--- /dev/null
+++ b/db/_generated/areas/cotton-town.json
@@ -0,0 +1 @@
+{"encounter_slug":"","encounters":[],"requiredEncounters":0,"trainers":[],"environment_slug":"interior","events":{"dryads-grove":false},"connections":{"route1":{"conditions":[]},"route2":{"conditions":[]},"dryads-grove":{"conditions":["event.dryads-grove"]}},"environment":{"slug":"interior","battle_graphics":{"island_back":"paper_back_island.png","island_front":"paper_front_island.png","background":"battle_bg03.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
diff --git a/db/_generated/areas/leather-town.json b/db/_generated/areas/leather-town.json
new file mode 100644
index 0000000..cf191d6
--- /dev/null
+++ b/db/_generated/areas/leather-town.json
@@ -0,0 +1 @@
+{"encounter_slug":"","encounters":[],"requiredEncounters":0,"trainers":[],"environment_slug":"interior","connections":{"city-park":{"conditions":[]},"route3":{"conditions":[]}},"environment":{"slug":"interior","battle_graphics":{"island_back":"paper_back_island.png","island_front":"paper_front_island.png","background":"battle_bg03.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
diff --git a/db/_generated/areas/paper-town.json b/db/_generated/areas/paper-town.json
index c569938..8c0f0d4 100644
--- a/db/_generated/areas/paper-town.json
+++ b/db/_generated/areas/paper-town.json
@@ -1 +1 @@
-{"encounter_slug":"","encounters":[],"requiredEncounters":0,"trainers":[{"name":"Rival","monsters":[],"inventory":[]}],"environment_slug":"interior","previousArea":"","nextArea":"route1","environment":{"slug":"interior","battle_graphics":{"island_back":"paper_back_island.png","island_front":"paper_front_island.png","background":"battle_bg03.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
+{"encounter_slug":"","encounters":[],"requiredEncounters":0,"trainers":[{"name":"Rival","monsters":[{"slug":"STARTER","level":2}],"inventory":[]}],"environment_slug":"interior","connections":{"route1":{"conditions":["encounters","trainers"]}},"environment":{"slug":"interior","battle_graphics":{"island_back":"paper_back_island.png","island_front":"paper_front_island.png","background":"battle_bg03.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
diff --git a/db/_generated/areas/route1.json b/db/_generated/areas/route1.json
index 3956a3c..a7c9987 100644
--- a/db/_generated/areas/route1.json
+++ b/db/_generated/areas/route1.json
@@ -1 +1 @@
-{"encounter_slug":"route1","encounters":[{"monster":"pairagrin","encounter_rate":3.5,"daytime":true,"exp_req_mod":1,"level_range":[2,4]},{"monster":"aardorn","encounter_rate":3.5,"daytime":true,"exp_req_mod":1,"level_range":[2,4]},{"monster":"cataspike","encounter_rate":3.5,"daytime":true,"exp_req_mod":1,"level_range":[2,4]},{"monster":"pairagrin","encounter_rate":3.5,"daytime":false,"exp_req_mod":1,"level_range":[3,5]},{"monster":"aardorn","encounter_rate":3.5,"daytime":false,"exp_req_mod":1,"level_range":[3,5]},{"monster":"cataspike","encounter_rate":3.5,"daytime":false,"exp_req_mod":1,"level_range":[3,5]}],"requiredEncounters":10,"trainers":[{"name":"Bruder Mikki","sprite":"dragonrider.png","monsters":[{"slug":"memnomnom","level":5},{"slug":"jelillow","level":5}],"inventory":[{"slug":"potion","quantity":2}]}],"environment_slug":"forest","previousArea":"paper-town","nextArea":"route2","environment":{"slug":"forest","battle_graphics":{"island_back":"woodland_island.png","island_front":"woodland_island.png","background":"forest_background.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
+{"encounter_slug":"route1","encounters":[{"monster":"pairagrin","encounter_rate":3.5,"daytime":true,"exp_req_mod":1,"level_range":[2,4]},{"monster":"aardorn","encounter_rate":3.5,"daytime":true,"exp_req_mod":1,"level_range":[2,4]},{"monster":"cataspike","encounter_rate":3.5,"daytime":true,"exp_req_mod":1,"level_range":[2,4]},{"monster":"pairagrin","encounter_rate":3.5,"daytime":false,"exp_req_mod":1,"level_range":[3,5]},{"monster":"aardorn","encounter_rate":3.5,"daytime":false,"exp_req_mod":1,"level_range":[3,5]},{"monster":"cataspike","encounter_rate":3.5,"daytime":false,"exp_req_mod":1,"level_range":[3,5]}],"requiredEncounters":10,"trainers":[{"name":"Bruder Mikki","sprite":"dragonrider.png","monsters":[{"slug":"memnomnom","level":5},{"slug":"jelillow","level":5}],"inventory":[{"slug":"potion","quantity":2}]}],"environment_slug":"forest","connections":{"paper-town":{"conditions":[]},"cotton-town":{"conditions":["encounters","trainers"]}},"environment":{"slug":"forest","battle_graphics":{"island_back":"woodland_island.png","island_front":"woodland_island.png","background":"forest_background.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
diff --git a/db/_generated/areas/route2.json b/db/_generated/areas/route2.json
index 2b4a00f..719fc7a 100644
--- a/db/_generated/areas/route2.json
+++ b/db/_generated/areas/route2.json
@@ -1 +1 @@
-{"encounter_slug":"route2","encounters":[{"monster":"cardiling","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"aardorn","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"eyenemy","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"axylightl","encounter_rate":1,"daytime":true,"exp_req_mod":1,"level_range":[4,7]},{"monster":"cataspike","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"cardiling","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[3,6]},{"monster":"aardorn","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[4,8]},{"monster":"eyenemy","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[4,8]},{"monster":"axylightl","encounter_rate":1,"daytime":false,"exp_req_mod":1,"level_range":[5,8]},{"monster":"cataspike","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[4,8]}],"requiredEncounters":10,"trainers":[],"environment_slug":"forest","previousArea":"route1","nextArea":"route3","environment":{"slug":"forest","battle_graphics":{"island_back":"woodland_island.png","island_front":"woodland_island.png","background":"forest_background.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
+{"encounter_slug":"route2","encounters":[{"monster":"cardiling","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"aardorn","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"eyenemy","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"axylightl","encounter_rate":1,"daytime":true,"exp_req_mod":1,"level_range":[4,7]},{"monster":"cataspike","encounter_rate":2.5,"daytime":true,"exp_req_mod":1,"level_range":[3,6]},{"monster":"cardiling","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[3,6]},{"monster":"aardorn","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[4,8]},{"monster":"eyenemy","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[4,8]},{"monster":"axylightl","encounter_rate":1,"daytime":false,"exp_req_mod":1,"level_range":[5,8]},{"monster":"cataspike","encounter_rate":2.5,"daytime":false,"exp_req_mod":1,"level_range":[4,8]}],"requiredEncounters":10,"trainers":[{"name":"Rival","monsters":[{"slug":"cardiling","level":3},{"slug":"eyenemy","level":6},{"slug":"STARTER","level":6}],"inventory":[]}],"environment_slug":"forest","connections":{"cotton-town":{"conditions":[]},"city-park":{"conditions":["encounters","trainers"]}},"environment":{"slug":"forest","battle_graphics":{"island_back":"woodland_island.png","island_front":"woodland_island.png","background":"forest_background.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
diff --git a/db/_generated/areas/route3.json b/db/_generated/areas/route3.json
index 45a32f0..6d248cc 100644
--- a/db/_generated/areas/route3.json
+++ b/db/_generated/areas/route3.json
@@ -1 +1 @@
-{"encounter_slug":"route3","encounters":[{"monster":"cardiling","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[7,10]},{"monster":"elofly","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[7,10]},{"monster":"squabbit","encounter_rate":1,"daytime":true,"exp_req_mod":1,"level_range":[8,11]},{"monster":"shybulb","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[7,10]},{"monster":"cardiling","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[9,12]},{"monster":"elofly","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[9,12]},{"monster":"squabbit","encounter_rate":1,"daytime":false,"exp_req_mod":1,"level_range":[9,12]},{"monster":"shybulb","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[9,12]}],"requiredEncounters":10,"trainers":[],"environment_slug":"forest","previousArea":"route2","nextArea":"route4","environment":{"slug":"forest","battle_graphics":{"island_back":"woodland_island.png","island_front":"woodland_island.png","background":"forest_background.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
+{"encounter_slug":"route3","encounters":[{"monster":"cardiling","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[7,10]},{"monster":"elofly","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[7,10]},{"monster":"squabbit","encounter_rate":1,"daytime":true,"exp_req_mod":1,"level_range":[8,11]},{"monster":"shybulb","encounter_rate":3,"daytime":true,"exp_req_mod":1,"level_range":[7,10]},{"monster":"cardiling","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[9,12]},{"monster":"elofly","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[9,12]},{"monster":"squabbit","encounter_rate":1,"daytime":false,"exp_req_mod":1,"level_range":[9,12]},{"monster":"shybulb","encounter_rate":3,"daytime":false,"exp_req_mod":1,"level_range":[9,12]}],"requiredEncounters":10,"trainers":[{"name":"Miner Roxby","sprite":"miner.png","monsters":[{"slug":"rockitten","level":13},{"slug":"ignibus","level":13}]}],"environment_slug":"forest","connections":{"leather-town":{"conditions":[]}},"environment":{"slug":"forest","battle_graphics":{"island_back":"woodland_island.png","island_front":"woodland_island.png","background":"forest_background.png"},"battle_music":"music_battle_loop"}}
\ No newline at end of file
diff --git a/db/areas/city-park.json b/db/areas/city-park.json
new file mode 100644
index 0000000..113cf51
--- /dev/null
+++ b/db/areas/city-park.json
@@ -0,0 +1,40 @@
+{
+  "encounter_slug": "citypark",
+
+  "encounters": [],
+
+  "requiredEncounters": 10,
+
+  "trainers": [
+    {
+      "name": "Frances",
+      "sprite": "florist.png",
+      "monsters": [
+        {
+          "slug": "shybulb",
+          "level": 8
+        },
+        {
+          "slug": "shybulb",
+          "level": 8
+        }
+      ],
+      "inventory": []
+    }
+  ],
+
+  "environment_slug": "forest",
+
+  "connections": {
+    "route2": {
+      "conditions": []
+    },
+
+    "leather-town": {
+      "conditions": [
+        "encounters",
+        "trainers"
+      ]
+    }
+  }
+}
diff --git a/db/areas/cotton-town.json b/db/areas/cotton-town.json
new file mode 100644
index 0000000..dfd73e5
--- /dev/null
+++ b/db/areas/cotton-town.json
@@ -0,0 +1,31 @@
+{
+  "encounter_slug": "",
+
+  "encounters": [],
+
+  "requiredEncounters": 0,
+
+  "trainers": [],
+
+  "environment_slug": "interior",
+
+  "events": {
+    "dryads-grove": false
+  },
+
+  "connections": {
+    "route1": {
+      "conditions": []
+    },
+
+    "route2": {
+      "conditions": []
+    },
+
+    "dryads-grove": {
+      "conditions": [
+        "event.dryads-grove"
+      ]
+    }
+  }
+}
diff --git a/db/areas/leather-town.json b/db/areas/leather-town.json
new file mode 100644
index 0000000..7815dfd
--- /dev/null
+++ b/db/areas/leather-town.json
@@ -0,0 +1,21 @@
+{
+  "encounter_slug": "",
+
+  "encounters": [],
+
+  "requiredEncounters": 0,
+
+  "trainers": [],
+
+  "environment_slug": "interior",
+
+  "connections": {
+    "city-park": {
+      "conditions": []
+    },
+
+    "route3": {
+      "conditions": []
+    }
+  }
+}
diff --git a/db/areas/paper-town.json b/db/areas/paper-town.json
index b18e17e..7020252 100644
--- a/db/areas/paper-town.json
+++ b/db/areas/paper-town.json
@@ -8,13 +8,24 @@
   "trainers": [
     {
       "name": "Rival",
-      "monsters": [],
+      "monsters": [
+        {
+          "slug": "STARTER",
+          "level": 2
+        }
+      ],
       "inventory": []
     }
   ],
 
   "environment_slug": "interior",
 
-  "previousArea": "",
-  "nextArea": "route1"
+  "connections": {
+    "route1": {
+      "conditions": [
+        "encounters",
+        "trainers"
+      ]
+    }
+  }
 }
diff --git a/db/areas/route1.json b/db/areas/route1.json
index 3d1cf23..1615772 100644
--- a/db/areas/route1.json
+++ b/db/areas/route1.json
@@ -30,6 +30,16 @@
 
   "environment_slug": "forest",
 
-  "previousArea": "paper-town",
-  "nextArea": "route2"
+  "connections": {
+    "paper-town": {
+      "conditions": []
+    },
+
+    "cotton-town": {
+      "conditions": [
+        "encounters",
+        "trainers"
+      ]
+    }
+  }
 }
diff --git a/db/areas/route2.json b/db/areas/route2.json
index f4fc9bb..e4c6d2a 100644
--- a/db/areas/route2.json
+++ b/db/areas/route2.json
@@ -5,10 +5,39 @@
 
   "requiredEncounters": 10,
 
-  "trainers": [],
+  "trainers": [
+    {
+      "name": "Rival",
+      "monsters": [
+        {
+          "slug": "cardiling",
+          "level": 3
+        },
+        {
+          "slug": "eyenemy",
+          "level": 6
+        },
+        {
+          "slug": "STARTER",
+          "level": 6
+        }
+      ],
+      "inventory": []
+    }
+  ],
 
   "environment_slug": "forest",
 
-  "previousArea": "route1",
-  "nextArea": "route3"
+  "connections": {
+    "cotton-town": {
+      "conditions": []
+    },
+
+    "city-park": {
+      "conditions": [
+        "encounters",
+        "trainers"
+      ]
+    }
+  }
 }
diff --git a/db/areas/route3.json b/db/areas/route3.json
index e9242fb..3fa7c2f 100644
--- a/db/areas/route3.json
+++ b/db/areas/route3.json
@@ -5,10 +5,28 @@
 
   "requiredEncounters": 10,
 
-  "trainers": [],
+  "trainers": [
+    {
+      "name": "Miner Roxby",
+      "sprite": "miner.png",
+      "monsters": [
+        {
+          "slug": "rockitten",
+          "level": 13
+        },
+        {
+          "slug": "ignibus",
+          "level": 13
+        }
+      ]
+    }
+  ],
 
   "environment_slug": "forest",
 
-  "previousArea": "route2",
-  "nextArea": "route4"
+  "connections": {
+    "leather-town": {
+      "conditions": []
+    }
+  }
 }
diff --git a/index.html b/index.html
index e575ec8..0cd65fe 100644
--- a/index.html
+++ b/index.html
@@ -7,20 +7,30 @@
     <link rel="stylesheet" href="/resources/css/variables.css" />
     <link rel="stylesheet" href="/resources/css/page.css" />
     <link rel="stylesheet" href="/resources/css/battle.css" />
+    <link rel="stylesheet" href="/resources/css/town.css" />
     <link rel="stylesheet" href="/resources/css/menu.css" />
   </head>
 
   <body>
     <div class="wrap">
-      <div id="battle">
-        <div id="battle__opponent">
-          <img class="battle__technique-animation" src="" draggable="false" />
+      <div id="scene__battle">
+        <div id="battle">
+          <div id="battle__opponent">
+            <img class="battle__technique-animation" src="" draggable="false" />
+          </div>
+
+          <div id="battle__player"></div>
         </div>
 
-        <div id="battle__player"></div>
+        <div id="techniques"></div>
       </div>
 
-      <div id="techniques"></div>
+      <div id="scene__town" class="hidden">
+        <div id="shop">
+          Shop
+          Potion x1
+        </div>
+      </div>
 
       <div id="log"></div>
 
@@ -29,7 +39,7 @@
         <span><img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/tuxemon.png" title="Monster Progress" /> <span data-template-slot="monsterProgress"></span></span>
         <span><img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/player.png" title="Trainer Progress" style="filter: invert(1);" /> <span data-template-slot="trainerProgress"></span></span>
         <button data-template-slot="nextTrainer" class="menu-button">&rArr; Next Trainer</button>
-        <button data-template-slot="nextArea" class="menu-button">&rArr; Next Area</button>
+        <button data-template-slot="changeArea" class="menu-button">&rArr; Change Area</button>
       </div>
 
       <div id="menu">
diff --git a/resources/css/page.css b/resources/css/page.css
index 813b361..57c46a5 100644
--- a/resources/css/page.css
+++ b/resources/css/page.css
@@ -23,3 +23,7 @@ img {
   width: 100vw;
   height: 100vh;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/resources/css/town.css b/resources/css/town.css
new file mode 100644
index 0000000..4dd8195
--- /dev/null
+++ b/resources/css/town.css
@@ -0,0 +1,3 @@
+#scene__town {
+  background-color: #fff;
+}
diff --git a/resources/js/classes/Area.js b/resources/js/classes/Area.js
index 3451757..b2af3ea 100644
--- a/resources/js/classes/Area.js
+++ b/resources/js/classes/Area.js
@@ -27,11 +27,11 @@ class Area {
     return DB.areas[this.slug].environment;
   }
 
-  get previousArea () {
-    return DB.areas[this.slug].previousArea;
+  get events () {
+    return DB.areas[this.slug].events;
   }
 
-  get nextArea () {
-    return DB.areas[this.slug].nextArea;
+  get connections () {
+    return DB.areas[this.slug].connections;
   }
 }
diff --git a/resources/js/classes/State.js b/resources/js/classes/State.js
index 9a72a8f..085d1c7 100644
--- a/resources/js/classes/State.js
+++ b/resources/js/classes/State.js
@@ -51,9 +51,9 @@ class State {
   opponent = null;
 
   /**
-   * @type {Monster}
+   * @type {MonsterSlug}
    */
-  rivalMonster = null;
+  rivalMonster = '';
 
   /**
    * @type {Technique}
diff --git a/resources/js/db.js b/resources/js/db.js
index ede65aa..f5cff6c 100644
--- a/resources/js/db.js
+++ b/resources/js/db.js
@@ -165,12 +165,15 @@ async function fetchTranslation (locale) {
  * @returns {Promise<Area>}
  */
 async function fetchArea (slug) {
+  if (Memory.state.areaProgress[slug]) {
+    return Memory.state.areaProgress[slug];
+  }
+
   if (! DB.areas[slug]) {
     DB.areas[slug] = await fetch(`/db/_generated/areas/${slug}.json`).then((response) => response.json());
   }
 
   const area = new Area(slug);
 
-
   return area;
 }
diff --git a/resources/js/game.js b/resources/js/game.js
index 5a31c39..7b40015 100644
--- a/resources/js/game.js
+++ b/resources/js/game.js
@@ -114,7 +114,7 @@ const Game = {
           if (Memory.state.currentArea.encounters.length > 0) {
             await Game.encounterWildMonster();
           } else {
-            await Game.progressToNextArea();
+            await Game.encounterTrainer();
           }
         } else {
           await Game.encounterNextTrainerMonster();
@@ -662,12 +662,21 @@ const Game = {
   async encounterTrainer () {
     Game.clearCurrentTurn();
 
-    const nextTrainer = Memory.state.currentArea.trainers[Memory.state.currentArea.trainerProgress];
+    let nextTrainerIdx = Memory.state.currentArea.trainerProgress;
+    while (nextTrainerIdx > Memory.state.currentArea.trainers.length - 1) {
+      nextTrainerIdx -= Memory.state.currentArea.trainers.length;
+    }
 
-    const trainer = new Trainer(nextTrainer);
+    const nextTrainer = Memory.state.currentArea.trainers[nextTrainerIdx];
     if (nextTrainer.name === 'Rival') {
-      trainer.monsters.push(Memory.state.rivalMonster);
+      for (const idx in nextTrainer.monsters) {
+        if (nextTrainer.monsters[idx].slug === 'STARTER') {
+          nextTrainer.monsters[idx].slug = Memory.state.rivalMonster;
+        }
+      }
     }
+
+    const trainer = new Trainer(nextTrainer);
     await trainer.initialize()
     Memory.state.opponent = trainer;
 
@@ -682,40 +691,39 @@ const Game = {
     UI.drawOpponentMonster();
   },
 
-  async progressToNextArea () {
+  /**
+   * @param {string} areaSlug
+   */
+  async goToArea (areaSlug) {
     Game.isLoadingArea = true;
     Game.clearCurrentTurn();
 
-    const currentArea = Memory.state.currentArea;
-    const nextArea = await fetchArea(currentArea.nextArea);
+    if (Memory.state.currentArea) {
+      Memory.state.areaProgress[Memory.state.currentArea.slug] = Memory.state.currentArea;
+    }
 
-    await Game.jumpToArea(nextArea);
+    Memory.state.currentArea = await fetchArea(areaSlug);
+    UI.drawArea();
 
-    if (nextArea.encounters.length > 0) {
-      await Game.encounterWildMonster();
+    if (Game.isTown(Memory.state.currentArea)) {
+      UI.elements.sceneBattle.classList.add('hidden');
+      UI.elements.sceneTown.classList.remove('hidden');
     } else {
-      await Game.encounterTrainer();
+      UI.elements.sceneTown.classList.add('hidden');
+      UI.elements.sceneBattle.classList.remove('hidden');
+      if (Memory.state.currentArea.encounters.length > 0) {
+        await Game.encounterWildMonster();
+      } else if (Memory.state.currentArea.trainers.length > 0) {
+        await Game.encounterTrainer();
+      }
     }
 
     UI.drawStatus();
+    UI.drawActiveBall();
 
     Game.isLoadingArea = false;
   },
 
-  /**
-   * @param {Area} area
-   */
-  async jumpToArea (area) {
-    Game.clearCurrentTurn();
-
-    if (Memory.state.currentArea) {
-      Memory.state.areaProgress[Memory.state.currentArea.slug] = Memory.state.currentArea;
-    }
-    Memory.state.currentArea = area;
-
-    UI.drawArea(area);
-  },
-
 
   /* Menu - Inventory */
 
@@ -806,7 +814,7 @@ const Game = {
    * @returns {boolean}
    */
   canCatchMonster () {
-    return Game.isBattleType('monster') && Memory.state.activeBall;
+    return !Game.isTown(Memory.state.currentArea) && Game.isBattleType('monster') && Memory.state.activeBall;
   },
 
   async catchMonster () {
@@ -866,6 +874,13 @@ const Game = {
     return Memory.state.opponent.type === type;
   },
 
+  /**
+   * @param {Area} area
+   */
+  isTown (area) {
+    return area.encounters.length === 0 && area.trainers.length === 0;
+  },
+
   getStageOfDaySimple () {
     const hours = (new Date()).getHours();
     if (hours >= 6 && hours < 18) {
@@ -878,7 +893,6 @@ const Game = {
 
 // Game click bindings
 UI.elements.nextTrainer.addEventListener('click', Game.encounterTrainer);
-UI.elements.nextArea.addEventListener('click', Game.progressToNextArea);
 UI.elements.battleOpponent.addEventListener('click', Game.battleClick);
 UI.elements.techniques.addEventListener('click', Game.techniqueClick);
 UI.elements.menuCatch.addEventListener('click', Game.catchMonster);
diff --git a/resources/js/main.js b/resources/js/main.js
index 4fd9c62..24eafec 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -18,12 +18,9 @@
   Game.setActivePlayerMonster(Memory.state.player.monsters[0]);
   Memory.state.activeBall = Memory.state.player.inventory[0]; // tuxeball
 
-  Memory.state.rivalMonster = await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))]);
+  Memory.state.rivalMonster = possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))];
 
-  const area = await fetchArea('paper-town');
-  await Game.jumpToArea(area);
-  await Game.encounterTrainer();
-  UI.drawStatus();
+  await Game.goToArea('paper-town');
 
   UI.drawActiveMonster();
   UI.drawActiveTechniques();
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);