more areas!

8 files changed, 128 insertions, 38 deletions

diff --git a/resources/css/menu.css b/resources/css/menu.css
index c79eebc..eb718f8 100644
--- a/resources/css/menu.css
+++ b/resources/css/menu.css
@@ -148,6 +148,7 @@
 .map {
   width: 100vw;
   max-width: 750px;
+  background-color: #000;
 }
 
 
@@ -289,6 +290,10 @@
   grid-template-columns: 1fr 1fr 1fr;
 }
 
+.item-info {
+  padding: 1rem;
+}
+
 
 
 
@@ -355,7 +360,10 @@
 .setting-highlight {
   border: 2px solid yellow !important;
 }
-.setting-highlight--map svg [data-location] {
+
+.setting-highlight--map svg [data-location],
+.setting-highlight--map svg [data-area],
+.setting-highlight--map svg [data-encounter] {
   stroke: yellow;
   stroke-width: 2px;
 }
diff --git a/resources/css/page.css b/resources/css/page.css
index 635a160..d16e542 100644
--- a/resources/css/page.css
+++ b/resources/css/page.css
@@ -34,6 +34,8 @@ svg {
   display: block;
 }
 
-svg [data-location] {
+svg [data-location],
+svg [data-area],
+svg [data-encounter] {
   cursor: pointer;
 }
diff --git a/resources/css/town.css b/resources/css/town.css
index 75a95d0..06f6f02 100644
--- a/resources/css/town.css
+++ b/resources/css/town.css
@@ -10,18 +10,21 @@
 
 
 
-.shop {
-  padding: 1rem;
-}
+.shop {}
 
 .shop__items {
   display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 1rem;
+  padding: 1rem;
 }
 
 .shop__item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  text-align: center;
   cursor: pointer;
 }
+
+.shop__selection-modes {
+  padding: 1rem;
+  padding-top: 0;
+}
diff --git a/resources/js/classes/Area.js b/resources/js/classes/Area.js
index f518f22..5a3a062 100644
--- a/resources/js/classes/Area.js
+++ b/resources/js/classes/Area.js
@@ -3,7 +3,6 @@ class Area {
 
   monsterProgress = 0;
   trainerProgress = 0;
-  isCompleted = false;
 
   constructor (slug) {
     this.slug = slug;
@@ -15,14 +14,25 @@ class Area {
     return translate(this.alternateSlug) || slugToName(this.slug);
   }
 
+  get isCompleted () {
+    return this.monsterProgress >= this.requiredEncounters && this.trainerProgress >= this.trainers.length;
+  }
+
   get alternateSlug () {
     return DB.areas[this.slug]['modules/tuxemon.slug'];
   }
 
+  /**
+   * @returns {Object[]}
+   */
   get encounters () {
     return DB.areas[this.slug].encounters;
   }
 
+  get encounterPercentTotal () {
+    return DB.areas[this.slug].encounter_percent_total;
+  }
+
   get requiredEncounters () {
     return DB.areas[this.slug].requiredEncounters;
   }
diff --git a/resources/js/db.js b/resources/js/db.js
index a04d32e..54fc751 100644
--- a/resources/js/db.js
+++ b/resources/js/db.js
@@ -76,20 +76,35 @@ const DB = {
 };
 
 async function initializeDB () {
-  DB.allMonsters = await fetch('/db/_generated/all-monsters.json').then((response) => response.json());
-  DB.allAnimations = await fetch('/db/_generated/animations.json').then((response) => response.json());
-  DB.allItems = await fetch('/db/_generated/all-items.json').then((response) => response.json());
+  DB.allMonsters = await fetchDBData('/db/_generated/all-monsters.json').then((response) => response.json());
+  DB.allAnimations = await fetchDBData('/db/_generated/animations.json').then((response) => response.json());
+  DB.allItems = await fetchDBData('/db/_generated/all-items.json').then((response) => response.json());
 
-  DB.shapes = await fetch('/modules/tuxemon/mods/tuxemon/db/shape/shapes.json').then((response) => response.json());
+  DB.shapes = await fetchDBData('/modules/tuxemon/mods/tuxemon/db/shape/shapes.json').then((response) => response.json());
 
   for (const element of Object.keys(ElementType)) {
-    DB.elements[element] = await fetch(`/modules/tuxemon/mods/tuxemon/db/element/${element}.json`).then((response) => response.json());
+    DB.elements[element] = await fetchDBData(`/modules/tuxemon/mods/tuxemon/db/element/${element}.json`).then((response) => response.json());
   }
 
   await fetchTranslation(Memory.state.Settings.language);
   applyTranslation();
 
-  DB.currencies = await fetch('/db/_generated/currencies.json').then((response) => response.json());
+  DB.currencies = await fetchDBData('/db/_generated/currencies.json').then((response) => response.json());
+}
+
+/**
+ * @param arguments
+ *
+ * @returns {Promise<Response>}
+ */
+async function fetchDBData (...arguments) {
+  const response = await fetch(...arguments);
+
+  if (!response.ok) {
+    throw new Error(`"${response.url}": ${response.statusText}`);
+  }
+
+  return response;
 }
 
 /**
@@ -99,7 +114,7 @@ async function initializeDB () {
  */
 async function fetchMonster (slug) {
   if (! DB.monsters[slug]) {
-    DB.monsters[slug] = await fetch(`/modules/tuxemon/mods/tuxemon/db/monster/${slug}.json`).then((response) => response.json());
+    DB.monsters[slug] = await fetchDBData(`/modules/tuxemon/mods/tuxemon/db/monster/${slug}.json`).then((response) => response.json());
   }
 
   const monster = new Monster(slug);
@@ -115,7 +130,7 @@ async function fetchMonster (slug) {
  */
 async function fetchTechnique (slug) {
   if (! DB.techniques[slug]) {
-    DB.techniques[slug] = await fetch(`/modules/tuxemon/mods/tuxemon/db/technique/${slug}.json`).then((response) => response.json());
+    DB.techniques[slug] = await fetchDBData(`/modules/tuxemon/mods/tuxemon/db/technique/${slug}.json`).then((response) => response.json());
   }
 
   return new Technique(slug);
@@ -128,7 +143,7 @@ async function fetchTechnique (slug) {
  */
 async function fetchStatusEffect (slug) {
   if (! DB.statusEffects[slug]) {
-    DB.statusEffects[slug] = await fetch(`/modules/tuxemon/mods/tuxemon/db/technique/status_${slug}.json`).then((response) => response.json());
+    DB.statusEffects[slug] = await fetchDBData(`/modules/tuxemon/mods/tuxemon/db/technique/status_${slug}.json`).then((response) => response.json());
   }
 
   return new StatusEffect(slug);
@@ -141,7 +156,7 @@ async function fetchStatusEffect (slug) {
  */
 async function fetchItem (slug) {
   if (! DB.items[slug]) {
-    DB.items[slug] = await fetch(`/modules/tuxemon/mods/tuxemon/db/item/${slug}.json`).then((response) => response.json());
+    DB.items[slug] = await fetchDBData(`/modules/tuxemon/mods/tuxemon/db/item/${slug}.json`).then((response) => response.json());
   }
 
   return new Item(slug);
@@ -154,7 +169,7 @@ async function fetchItem (slug) {
  */
 async function fetchTranslation (locale) {
   if (! DB.translations[locale]) {
-    DB.translations[locale] = await fetch(`/db/_generated/i18n/${locale}.json`).then((response) => response.json());
+    DB.translations[locale] = await fetchDBData(`/db/_generated/i18n/${locale}.json`).then((response) => response.json());
   }
 
   return DB.translations[locale];
@@ -171,7 +186,7 @@ async function fetchArea (slug) {
   }
 
   if (! DB.areas[slug]) {
-    DB.areas[slug] = await fetch(`/db/_generated/areas/${slug}.json`).then((response) => response.json());
+    DB.areas[slug] = await fetchDBData(`/db/_generated/areas/${slug}.json`).then((response) => response.json());
   }
 
   const area = new Area(slug);
diff --git a/resources/js/game.js b/resources/js/game.js
index c463ab8..3e7a4c8 100644
--- a/resources/js/game.js
+++ b/resources/js/game.js
@@ -593,11 +593,11 @@ const Game = {
 
         Game.opponentActionTimeout = null;
       }), Math.max(levelDifference < 10 ? 500 : 50, Math.min(2000 - (speedDifference * 10) - (levelDifference * 100), 3000)));
-      console.log(
+      /* console.log(
         'Opponent Attack Timeout',
         Memory.state.opponent.activeMonster.stats.speed, Memory.state.player.activeMonster.stats.speed,
         2000 - (speedDifference * 10) - (levelDifference * 100)
-      );
+      ); */
     }
   },
 
@@ -680,16 +680,36 @@ const Game = {
   /* Progression */
 
   async encounterWildMonster () {
-    const randomMonster = Memory.state.currentArea.encounters[Math.floor(Math.random() * Memory.state.currentArea.encounters.length)];
+    let randomMonster = null;
+    const randomNumber = Math.random() * Memory.state.currentArea.encounterPercentTotal;
+    let accumulator = 0;
+    for (const encounter of Memory.state.currentArea.encounters) {
+      const lowerBounds = accumulator;
+      accumulator += encounter.encounter_percent;
+      const upperBounds = accumulator;
+
+      if (randomNumber >= lowerBounds && randomNumber <= upperBounds) {
+        randomMonster = encounter;
+        break;
+      }
+    }
+
     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({ monsters: [monster] });
-    wildMonster.type = 'monster';
-    await wildMonster.initialize();
-    Memory.state.opponent = wildMonster;
+    Game.encounterMonster(monster);
+  },
+
+  /**
+   * @param {Monster} monster
+   */
+  async encounterMonster (monster) {
+    const encounterMonster = new Trainer({ monsters: [monster] });
+    encounterMonster.type = 'monster';
+    await encounterMonster.initialize();
+    Memory.state.opponent = encounterMonster;
 
     UI.drawOpponentMonster();
   },
diff --git a/resources/js/memory.js b/resources/js/memory.js
index 1511c25..709a084 100644
--- a/resources/js/memory.js
+++ b/resources/js/memory.js
@@ -89,7 +89,6 @@ const Memory = {
 
       area.monsterProgress = areaData.monsterProgress;
       area.trainerProgress = areaData.trainerProgress;
-      area.isCompleted = areaData.isCompleted;
 
       return area;
     };
diff --git a/resources/js/ui.js b/resources/js/ui.js
index 089a3c3..e69fd83 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -531,7 +531,7 @@ const UI = {
 
   drawArea () {
     if (Game.isTown(Memory.state.currentArea)) {
-      UI.elements.sceneTown.querySelector('[data-template-slot="map"]').replaceChildren(UI.createMap());
+      UI.drawTown();
 
       UI.closeLog();
 
@@ -689,7 +689,9 @@ const UI = {
 
   /* Town */
 
-  drawTown () {},
+  drawTown () {
+      UI.elements.sceneTown.querySelector('[data-template-slot="map"]').replaceChildren(UI.createMap());
+  },
 
 
   /* Map */
@@ -721,6 +723,23 @@ const UI = {
       }
     }
 
+    template.querySelectorAll('[data-area]').forEach((node) => node.addEventListener('click', UI.wrapCallback(async () => {
+      await Game.goToArea(node.dataset.area);
+      UI.closeAllPopups();
+    })));
+
+    template.querySelectorAll('[data-encounter]').forEach((node) => node.addEventListener('click', UI.wrapCallback(async () => {
+      if (!Memory.state.Game.isInBattle) {
+        const monster = await fetchMonster(node.dataset.encounter);
+        monster.level = parseInt(node.dataset.encounterLevel);
+
+        Game.encounterMonster(monster);
+        Memory.state.Game.isInBattle = true;
+
+        UI.closeAllPopups();
+      }
+    })));
+
     return template;
   },
 
@@ -973,7 +992,7 @@ const UI = {
     if (!Game.isTown(currentArea)) {
       if (
         Memory.state.Game.isInBattle ||
-          (Memory.state.opponent && Memory.state.opponent.type === 'trainer')
+        (Memory.state.opponent && Memory.state.opponent.type === 'trainer' && Memory.state.opponent.activeMonster !== Memory.state.opponent.monsters[0])
       ) {
         changeAreaButton.disabled = true;
       } else {
@@ -1027,11 +1046,9 @@ const UI = {
       return;
     }
 
-    const popup = UI.createPopup();
-    const template = UI.createMap();
-
-    popup.querySelector('.popup').appendChild(template);
-    UI.drawPopup(popup);
+    UI.drawTown();
+    UI.elements.sceneBattle.classList.toggle('hidden');
+    UI.elements.sceneTown.classList.toggle('hidden');
   },
 
   openAreaSelection () {
@@ -1057,7 +1074,22 @@ const UI = {
         }
 
         else if (condition.startsWith('area.')) {
-          canGo = Memory.state.areaProgress.hasOwnProperty(condition.replace('area.', ''));
+          const areaCondition = condition.replace('area.', '');
+          const areaSlug = areaCondition.split('.')[0];
+          const area = Memory.state.areaProgress[areaSlug] || null;
+
+          if (!area) {
+            canGo = false;
+            continue;
+          }
+
+          if (areaCondition.includes('completed')) {
+            canGo = canGo && area.isCompleted;
+          }
+
+          else { // doesn't have any extra properties and exists in progress => visited
+            canGo = canGo && true;
+          }
         }
 
         else if (condition.startsWith('event.')) {
@@ -1679,6 +1711,7 @@ const UI = {
     const popup = UI.createPopup();
     const template = document.createElement('div');
 
+    template.classList.add('item-info');
     template.textContent = item.description;
 
     popup.querySelector('.popup').appendChild(template);