area progress

19 files changed, 381 insertions, 79 deletions

diff --git a/db/_generated/areas/paper-town.json b/db/_generated/areas/paper-town.json
new file mode 100644
index 0000000..c569938
--- /dev/null
+++ b/db/_generated/areas/paper-town.json
@@ -0,0 +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
diff --git a/db/_generated/areas/route1.json b/db/_generated/areas/route1.json
new file mode 100644
index 0000000..11eaf46
--- /dev/null
+++ b/db/_generated/areas/route1.json
@@ -0,0 +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","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
diff --git a/db/_generated/areas/route2.json b/db/_generated/areas/route2.json
new file mode 100644
index 0000000..2b4a00f
--- /dev/null
+++ b/db/_generated/areas/route2.json
@@ -0,0 +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
diff --git a/db/_generated/areas/route3.json b/db/_generated/areas/route3.json
new file mode 100644
index 0000000..45a32f0
--- /dev/null
+++ b/db/_generated/areas/route3.json
@@ -0,0 +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
diff --git a/db/areas.php b/db/areas.php
new file mode 100644
index 0000000..55b2177
--- /dev/null
+++ b/db/areas.php
@@ -0,0 +1,17 @@
+<?php
+
+foreach (scandir(__DIR__ . '/areas') as $file) {
+  if (in_array($file, ['.', '..'])) continue;
+
+  $filePath = __DIR__ . '/areas/' . $file;
+  $fileName = pathinfo($file, PATHINFO_FILENAME);
+
+  $area = json_decode(file_get_contents($filePath), true);
+  $encounters = json_decode(@file_get_contents(dirname(__DIR__) . "/modules/tuxemon/mods/tuxemon/db/encounter/$area[encounter_slug].json") ?? '', true);
+  $environment = json_decode(file_get_contents(dirname(__DIR__) . "/modules/tuxemon/mods/tuxemon/db/environment/$area[environment_slug].json"), true);
+
+  array_push($area['encounters'], ...$encounters['monsters'] ?? []);
+  $area['environment'] = $environment;
+
+  file_put_contents(__DIR__ . "/_generated/areas/$fileName.json", json_encode($area));
+}
diff --git a/db/areas/paper-town.json b/db/areas/paper-town.json
new file mode 100644
index 0000000..b18e17e
--- /dev/null
+++ b/db/areas/paper-town.json
@@ -0,0 +1,20 @@
+{
+  "encounter_slug": "",
+
+  "encounters": [],
+
+  "requiredEncounters": 0,
+
+  "trainers": [
+    {
+      "name": "Rival",
+      "monsters": [],
+      "inventory": []
+    }
+  ],
+
+  "environment_slug": "interior",
+
+  "previousArea": "",
+  "nextArea": "route1"
+}
diff --git a/db/areas/route1.json b/db/areas/route1.json
new file mode 100644
index 0000000..54cc345
--- /dev/null
+++ b/db/areas/route1.json
@@ -0,0 +1,34 @@
+{
+  "encounter_slug": "route1",
+
+  "encounters": [],
+
+  "requiredEncounters": 10,
+
+  "trainers": [
+    {
+      "name": "Bruder Mikki",
+      "monsters": [
+        {
+          "slug": "memnomnom",
+          "level": 5
+        },
+        {
+          "slug": "jelillow",
+          "level": 5
+        }
+      ],
+      "inventory": [
+        {
+          "slug": "potion",
+          "quantity": 2
+        }
+      ]
+    }
+  ],
+
+  "environment_slug": "forest",
+
+  "previousArea": "paper-town",
+  "nextArea": "route2"
+}
diff --git a/db/areas/route2.json b/db/areas/route2.json
new file mode 100644
index 0000000..f4fc9bb
--- /dev/null
+++ b/db/areas/route2.json
@@ -0,0 +1,14 @@
+{
+  "encounter_slug": "route2",
+
+  "encounters": [],
+
+  "requiredEncounters": 10,
+
+  "trainers": [],
+
+  "environment_slug": "forest",
+
+  "previousArea": "route1",
+  "nextArea": "route3"
+}
diff --git a/db/areas/route3.json b/db/areas/route3.json
new file mode 100644
index 0000000..e9242fb
--- /dev/null
+++ b/db/areas/route3.json
@@ -0,0 +1,14 @@
+{
+  "encounter_slug": "route3",
+
+  "encounters": [],
+
+  "requiredEncounters": 10,
+
+  "trainers": [],
+
+  "environment_slug": "forest",
+
+  "previousArea": "route2",
+  "nextArea": "route4"
+}
diff --git a/index.html b/index.html
index 9fb5422..ae14db0 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,13 @@
       <div id="techniques"></div>
 
       <div id="status">
-        <div>Money: <span id="money"></span></div>
+        <div>
+          Money: <span data-template-slot="money"></span>
+          Monster Progress: <span data-template-slot="monster-progress"></span>
+          Trainer Progress: <span data-template-slot="trainer-progress"></span>
+          <button data-template-slot="next-trainer">&rArr; Next Trainer</button>
+          <button data-template-slot="next-area">&rArr; Next Area</button>
+        </div>
       </div>
 
       <div id="menu">
@@ -281,6 +287,7 @@
     <script type="text/javascript" src="/resources/js/classes/StatusEffect.js"></script>
     <script type="text/javascript" src="/resources/js/classes/Item.js"></script>
     <script type="text/javascript" src="/resources/js/classes/InventoryItem.js"></script>
+    <script type="text/javascript" src="/resources/js/classes/Area.js"></script>
     <script type="text/javascript" src="/resources/js/classes/State.js"></script>
     <script type="text/javascript" src="/resources/js/db.js"></script>
     <script type="text/javascript" src="/resources/js/formula.js"></script>
diff --git a/resources/css/menu.css b/resources/css/menu.css
index e198d64..38f4189 100644
--- a/resources/css/menu.css
+++ b/resources/css/menu.css
@@ -111,6 +111,11 @@
 }
 
 
+#menu__catch[disabled] {
+  filter: grayscale(100%);
+}
+
+
 
 .inventory {}
 
diff --git a/resources/css/page.css b/resources/css/page.css
index 96cefdf..813b361 100644
--- a/resources/css/page.css
+++ b/resources/css/page.css
@@ -8,6 +8,7 @@ html {
 
 body {
   margin: 0;
+  background-color: #000;
 }
 
 img {
diff --git a/resources/js/classes/Area.js b/resources/js/classes/Area.js
new file mode 100644
index 0000000..3451757
--- /dev/null
+++ b/resources/js/classes/Area.js
@@ -0,0 +1,37 @@
+class Area {
+  slug = '';
+
+  monsterProgress = 0;
+  trainerProgress = 0;
+  isCompleted = false;
+
+  constructor (slug) {
+    this.slug = slug;
+  }
+
+  async initialize () {}
+
+  get encounters () {
+    return DB.areas[this.slug].encounters;
+  }
+
+  get requiredEncounters () {
+    return DB.areas[this.slug].requiredEncounters;
+  }
+
+  get trainers () {
+    return DB.areas[this.slug].trainers;
+  }
+
+  get environment () {
+    return DB.areas[this.slug].environment;
+  }
+
+  get previousArea () {
+    return DB.areas[this.slug].previousArea;
+  }
+
+  get nextArea () {
+    return DB.areas[this.slug].nextArea;
+  }
+}
diff --git a/resources/js/classes/State.js b/resources/js/classes/State.js
index 4b209e2..5d3cfff 100644
--- a/resources/js/classes/State.js
+++ b/resources/js/classes/State.js
@@ -5,6 +5,16 @@ class State {
   language = 'en_US';
 
   /**
+   * @type {Object.<string, Area>}
+   */
+  areaProgress = {};
+
+  /**
+   * @type {Area}
+   */
+  currentArea = null;
+
+  /**
    * @type {number}
    */
   turn = 0;
@@ -30,6 +40,11 @@ class State {
   opponent = null;
 
   /**
+   * @type {Monster}
+   */
+  rivalMonster = null;
+
+  /**
    * @type {Technique}
    */
   activeTechnique = null;
diff --git a/resources/js/classes/Trainer.js b/resources/js/classes/Trainer.js
index 668c92b..f2c2df9 100644
--- a/resources/js/classes/Trainer.js
+++ b/resources/js/classes/Trainer.js
@@ -1,4 +1,12 @@
 class Trainer {
+  #monsters = [];
+  #inventory = [];
+
+  /**
+   * @type {('trainer' | 'monster')}
+   */
+  type = 'trainer';
+
   /**
    * @type {Monster[]}
    */
@@ -13,4 +21,29 @@ class Trainer {
    * @type {Monster}
    */
   activeMonster = [];
+
+  constructor (monsters, inventory = []) {
+    this.#monsters = monsters;
+    this.#inventory = inventory;
+  }
+
+  async initialize () {
+    for (const monsterData of this.#monsters) {
+      const monster = await fetchMonster(monsterData.slug);
+
+      monster.level = monsterData.level || monster.level;
+
+      this.monsters.push(monster);
+    }
+
+    this.activeMonster = this.monsters[0];
+
+    for (const itemData of this.#inventory) {
+      const item = new InventoryItem(await fetchItem(itemData.slug));
+
+      item.amount = itemData.amount || 1;
+
+      this.inventory.push(item);
+    }
+  }
 }
diff --git a/resources/js/db.js b/resources/js/db.js
index e084818..aaf5423 100644
--- a/resources/js/db.js
+++ b/resources/js/db.js
@@ -69,6 +69,8 @@ const DB = {
   items: {},
 
   translations: {},
+
+  areas: {},
 };
 
 async function initializeDB () {
@@ -152,3 +154,19 @@ async function fetchTranslation (locale) {
 
   return DB.translations[locale];
 }
+
+/**
+ * @param {string} slug
+ *
+ * @returns {Promise<Area>}
+ */
+async function fetchArea (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 1a95ce4..1a91f06 100644
--- a/resources/js/game.js
+++ b/resources/js/game.js
@@ -5,6 +5,7 @@ const Game = {
     postAction: [],
   },
 
+  isInBattle: false,
   didTechniqueHit: false,
 
   async progressTurn () {
@@ -41,14 +42,21 @@ const Game = {
         await Game.evolveMonster(Memory.state.player.activeMonster);
       }
 
-      await Game.spawnOpponentMonster();
-    }
+      Game.isInBattle = false;
 
-    UI.drawOpponentMonster();
-    UI.drawActiveMonster();
-    UI.drawActiveTechniques();
+      if (Memory.state.opponent.type === 'monster') {
+        Memory.state.currentArea.monsterProgress++;
+        await Game.encounterWildMonster();
+      } else if (Memory.state.opponent.type === 'trainer') {
+        if (Memory.state.opponent.activeMonster === Memory.state.opponent.monsters[Memory.state.opponent.monsters.length - 1]) {
+          await Game.progressToArea(await fetchArea(Memory.state.currentArea.nextArea));
+        } else {
+          await Game.encounterNextTrainerMonster();
+        }
+      }
+    }
 
-    UI.elements.money.textContent = `${Memory.state.money} €`;
+    UI.progressTurn();
   },
 
   /**
@@ -301,27 +309,10 @@ const Game = {
   },
 
   /**
-   * @param {Monster} monster
-   */
-  async evolveMonster (monster) {
-    await fetchMonster(monster.evolutions[0].monster_slug);
-    monster.evolve(monster.evolutions[0]);
-  },
-
-  async spawnOpponentMonster () {
-    Memory.state.opponent.activeMonster = await fetchMonster(DB.allMonsters[Math.floor(Math.random() * DB.allMonsters.length)]);
-    Memory.state.opponent.activeMonster.level = Math.ceil(Math.random() * Memory.state.player.activeMonster.level);
-
-    // Memory.state.opponent.activeMonster.experienceModifier = Memory.state.opponent.activeMonster.level;
-    Memory.state.opponent.activeMonster.moneyModifier = Memory.state.opponent.activeMonster.level;
-
-    UI.drawOpponentMonster();
-  },
-
-  /**
    * @param {MouseEvent} event
    */
   async battleClick (event) {
+    Game.isInBattle = true;
     UI.battleClickEvent = event;
 
     await Game.tryUseTechnique(Memory.state.activeTechnique, Memory.state.player.activeMonster, Memory.state.opponent.activeMonster);
@@ -357,18 +348,110 @@ const Game = {
     }));
   },
 
-  catchMonster () {
+  /**
+   * @param {InventoryItem}
+   */
+  async useItem (item) {
+    for (const itemEffectCode of item.effects) {
+      const itemEffect = new ItemEffect(itemEffectCode);
+
+      if (itemEffect.type === 'evolve') {
+        const evolution = Memory.state.player.activeMonster.getPossibleEvolutions('item')[0];
+        if (evolution) {
+          await fetchMonster(evolution.monster_slug);
+          Memory.state.player.activeMonster.evolve(evolution);
+          UI.drawActiveMonster();
+        }
+      }
+    }
+  },
+
+  /**
+   * @param {Monster} monster
+   */
+  async evolveMonster (monster) {
+    await fetchMonster(monster.evolutions[0].monster_slug);
+    monster.evolve(monster.evolutions[0]);
+  },
+
+  async catchMonster () {
+    if (Memory.state.opponent.type === 'trainer') {
+      return;
+    }
+
     const caughtMonster = new Monster(Memory.state.opponent.activeMonster.slug);
     caughtMonster.initialize();
     caughtMonster.level = Memory.state.opponent.activeMonster.level;
 
     Memory.state.player.monsters.push(caughtMonster);
 
-    Game.spawnOpponentMonster();
+    await Game.encounterWildMonster();
+    await Game.progressTurn();
+  },
+
+  getStageOfDaySimple () {
+    const hours = (new Date()).getHours();
+    if (hours >= 6 && hours < 18) {
+      return 'day';
+    } else {
+      return 'night';
+    }
+  },
+
+  /**
+   * @param {Area} area
+   */
+  async progressToArea (area) {
+    Memory.state.currentArea = area;
+
+    UI.drawArea(area);
+    UI.drawStatus();
+
+    if (area.encounters.length > 0) {
+      await Game.encounterWildMonster();
+    } else {
+      await Game.encounterTrainer();
+    }
+  },
+
+  async encounterWildMonster () {
+    const randomMonster = Memory.state.currentArea.encounters[Math.floor(Math.random() * Memory.state.currentArea.encounters.length)];
+    const randomLevel = Math.floor(Math.random() * (randomMonster.level_range[1] - randomMonster.level_range[0]) + randomMonster.level_range[0]);
+
+    const monster = await fetchMonster(randomMonster.monster);
+    monster.level = randomLevel;
+
+    const wildMonster = new Trainer([monster]);
+    wildMonster.type = 'monster';
+    await wildMonster.initialize();
+    Memory.state.opponent = wildMonster;
+
+    UI.drawOpponentMonster();
+  },
+
+  async encounterTrainer () {
+    const nextTrainer = Memory.state.currentArea.trainers[Memory.state.currentArea.trainerProgress];
+
+    const trainer = new Trainer(nextTrainer.monsters, nextTrainer.inventory);
+    if (nextTrainer.name === 'Rival') {
+      trainer.monsters.push(Memory.state.rivalMonster);
+    }
+    await trainer.initialize()
+    Memory.state.opponent = trainer;
+
+    UI.drawOpponentMonster();
+  },
+
+  async encounterNextTrainerMonster () {
+    const activeMonsterIdx = Memory.state.opponent.monsters.indexOf(Memory.state.opponent.activeMonster);
+    Memory.state.opponent.activeMonster = Memory.state.opponent.monsters[activeMonsterIdx + 1];
+
+    UI.drawOpponentMonster();
   },
 };
 
 // Game click bindings
+UI.elements.status.querySelector('[data-template-slot="next-trainer"]').addEventListener('click', Game.encounterTrainer);
 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 12d1475..815d734 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -1,51 +1,27 @@
 (async function () {
   await initializeDB();
 
+  // Start Game
   const possibleStarterMonsters = ['budaye', 'dollfin', 'grintot', 'ignibus', 'memnomnom'];
 
-  Memory.state.opponent = new Trainer();
-  Memory.state.opponent.monsters = [
-    await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))])
-  ];
+  Memory.state.player = new Trainer(
+    [
+      await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))]),
+    ],
+    [
+      new InventoryItem(await fetchItem('tuxeball')),
+      new InventoryItem(await fetchItem('potion')),
+    ]
+  );
+  await Memory.state.player.initialize();
 
-  Memory.state.player = new Trainer();
-  Memory.state.player.monsters = [
-    await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))]),
-    await fetchMonster('corvix'),
-    await fetchMonster('lunight'),
-    await fetchMonster('prophetoise'),
-    await fetchMonster('drashimi'),
-    await fetchMonster('glombroc'),
-    await fetchMonster('uneye'),
-    await fetchMonster('nostray'),
-    await fetchMonster('dragarbor'),
-    await fetchMonster('mk01_omega'),
-    await fetchMonster('jelillow'),
-    await fetchMonster('picc'),
-  ];
+  Memory.state.activeTechnique = Memory.state.player.activeMonster.activeTechniques[0];
 
-  Memory.state.player.inventory = [
-    new InventoryItem(await fetchItem('tuxeball')),
-    new InventoryItem(await fetchItem('ancient_egg')),
-    new InventoryItem(await fetchItem('sweet_sand')),
-    new InventoryItem(await fetchItem('tectonic_drill')),
-    new InventoryItem(await fetchItem('surfboard')),
-    new InventoryItem(await fetchItem('sledgehammer')),
-    new InventoryItem(await fetchItem('raise_melee')),
-    new InventoryItem(await fetchItem('raise_speed')),
-    new InventoryItem(await fetchItem('mm_fire')),
-    new InventoryItem(await fetchItem('mm_water')),
-    new InventoryItem(await fetchItem('cureall')),
-    new InventoryItem(await fetchItem('potion')),
-    new InventoryItem(await fetchItem('super_potion')),
-    new InventoryItem(await fetchItem('revive')),
-  ];
+  Memory.state.rivalMonster = await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))]);
 
-  Memory.state.opponent.activeMonster = Memory.state.opponent.monsters[0];
-  Memory.state.player.activeMonster = Memory.state.player.monsters[0];
-  Memory.state.activeTechnique = Memory.state.player.activeMonster.activeTechniques[0];
+  const area = await fetchArea('paper-town');
+  await Game.progressToArea(area);
 
-  UI.drawOpponentMonster();
   UI.drawActiveMonster();
   UI.drawActiveTechniques();
 })();
diff --git a/resources/js/ui.js b/resources/js/ui.js
index a623f9d..0d6a8f9 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -34,6 +34,7 @@ const Template = {
 
 const UI = {
   elements: {
+    battle: document.querySelector('#battle'),
     battleOpponent: document.querySelector('#battle__opponent'),
     battleOpponentSprite: null,
     battleOpponentAnimation: document.querySelector('.battle__monster-sprite__animation'),
@@ -41,7 +42,7 @@ const UI = {
 
     techniques: document.querySelector('#techniques'),
 
-    money: document.querySelector('#money'),
+    status: document.querySelector('#status'),
 
     menuParty: document.querySelector('#menu__party'),
     menuInventory: document.querySelector('#menu__inventory'),
@@ -354,6 +355,13 @@ const UI = {
     UI.elements.battleOpponentSprite = battleMonsterNode.querySelector('[data-template-slot="sprite"]');
     UI.elements.battleOpponentSprite.style.transitionDuration = `${UI.damageHighlightClickDuration}s`;
 
+    // en/disable catch
+    if (Memory.state.opponent.type === 'trainer') {
+      UI.elements.menuCatch.setAttribute('disabled', true);
+    } else {
+      UI.elements.menuCatch.removeAttribute('disabled');
+    }
+
     const previousBattleMonsterNode = UI.elements.battleOpponent.querySelector('.battle__monster');
     if (previousBattleMonsterNode) {
       UI.elements.battleOpponentSprite.classList = previousBattleMonsterNode.querySelector('[data-template-slot="sprite"]').classList;
@@ -427,6 +435,20 @@ const UI = {
     requestAnimationFrame(techniqueAnimationLoop);
   },
 
+  /**
+   * @param {Area} area
+   */
+  drawArea (area) {
+    UI.elements.battle.style.backgroundImage = `url(/modules/tuxemon/mods/tuxemon/gfx/ui/combat/${area.environment.battle_graphics.background})`;
+  },
+
+  progressTurn () {
+    UI.drawOpponentMonster();
+    UI.drawActiveMonster();
+    UI.drawActiveTechniques();
+    UI.drawStatus();
+  },
+
 
   /* Battle - Action Feedback */
 
@@ -544,6 +566,19 @@ const UI = {
   partySelectionMode: 'select',
 
 
+  drawStatus () {
+    UI.elements.status.querySelector('[data-template-slot="money"]').textContent = `${Memory.state.money} €`;
+    UI.elements.status.querySelector('[data-template-slot="monster-progress"]').textContent = `${Memory.state.currentArea.monsterProgress} / ${'10'}`;
+    UI.elements.status.querySelector('[data-template-slot="trainer-progress"]').textContent = `${Memory.state.currentArea.trainerProgress} / ${Memory.state.currentArea.trainers.length}`;
+
+    const nextTrainerButton = UI.elements.status.querySelector('[data-template-slot="next-trainer"]');
+    if (Memory.state.currentArea.monsterProgress >= Memory.state.currentArea.requiredEncounters) {
+      nextTrainerButton.disabled = false;
+    } else {
+      nextTrainerButton.disabled = true;
+    }
+  },
+
   openPartyMenu () {
     const popup = UI.createPopup();
 
@@ -654,18 +689,7 @@ const UI = {
       inventoryItemNode.querySelector('[data-template-slot="quantity"]').textContent = item.quantity;
 
       inventoryItemNode.addEventListener('click', async () => {
-        for (const itemEffectCode of item.effects) {
-          const itemEffect = new ItemEffect(itemEffectCode);
-
-          if (itemEffect.type === 'evolve') {
-            const evolution = Memory.state.player.activeMonster.getPossibleEvolutions('item')[0];
-            if (evolution) {
-              await fetchMonster(evolution.monster_slug);
-              Memory.state.player.activeMonster.evolve(evolution);
-              UI.drawActiveMonster();
-            }
-          }
-        }
+        Game.useItem(item);
       });
 
       if (['potion', 'revive'].includes(item.category)) {