map highlight

3 files changed, 55 insertions, 8 deletions

diff --git a/index.html b/index.html
index 1c147fc..d8a8f37 100644
--- a/index.html
+++ b/index.html
@@ -175,6 +175,10 @@
       </div>
     </template>
 
+    <template id="tpl___map">
+      <div class="map"></div>
+    </template>
+
     <template id="tpl___healing-center">
       <div class="healing-center">
         <div>Price for Full Heal per Tuxemon: <span data-template-slot="price"></span></div>
diff --git a/resources/css/menu.css b/resources/css/menu.css
index 82ba18e..c79eebc 100644
--- a/resources/css/menu.css
+++ b/resources/css/menu.css
@@ -145,6 +145,14 @@
 
 
 
+.map {
+  width: 100vw;
+  max-width: 750px;
+}
+
+
+
+
 #menu {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -345,7 +353,9 @@
 }
 
 .setting-highlight {
-  border: 2px solid yellow;
+  border: 2px solid yellow !important;
+}
+.setting-highlight--map svg [data-location] {
   stroke: yellow;
   stroke-width: 2px;
 }
diff --git a/resources/js/ui.js b/resources/js/ui.js
index 77b5b54..a19db2e 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -14,6 +14,8 @@ const Template = {
   techniques: document.querySelector('#tpl___techniques'),
   technique: document.querySelector('#tpl___technique'),
 
+  map: document.querySelector('#tpl___map'),
+
   healingCenter: document.querySelector('#tpl___healing-center'),
   shop: document.querySelector('#tpl___shop'),
   shopItem: document.querySelector('#tpl___shop__item'),
@@ -349,6 +351,9 @@ const UI = {
     battleMonsterNode.querySelector('[data-template-slot="sprite"]').addEventListener('click', () => {
       UI.openStatsMenu(Memory.state.player.activeMonster);
     });
+    if (UI.isHighlighting) {
+      battleMonsterNode.querySelector('[data-template-slot="sprite"]').classList.add(UI.highlightClassName);
+    }
 
     return battleMonsterNode;
   },
@@ -686,12 +691,10 @@ const UI = {
    * @returns {HTMLElement}
    */
   createMap () {
-    const template = document.createElement('div');
+    const template = UI.createTemplate(Template.map);
     const currentArea = Memory.state.currentArea;
 
     template.innerHTML = currentArea.map;
-    template.style.width = '100vw';
-    template.style.maxWidth = '750px';
 
     if (currentArea.locations) {
       for (const locationId of Object.keys(currentArea.locations)) {
@@ -723,7 +726,10 @@ const UI = {
     template.querySelector('[data-template-slot="price"]').innerHTML = formatPrice(price);
 
     template.querySelector('[data-template-slot="heal"]').addEventListener('click', () => {
-      const applicableMonsters = Memory.state.player.monsters.filter((monster) => monster.hp < monster.stats.hp || monster.statusEffect);
+      const applicableMonsters = Memory.state.player.monsters.filter((monster) => {
+        return monster.hp < monster.stats.hp || (monster.statusEffect && monster.statusEffect.category === 'negative')
+      });
+
       if (applicableMonsters.length === 0) {
         alert(translate('ui:no_applicable_monsters', true));
         return;
@@ -805,6 +811,7 @@ const UI = {
   partySelectionMode: 'select',
   inventorySelectionMode: 'use',
   isHighlighting: false,
+  highlightClassName: 'setting-highlight',
 
 
   /**
@@ -1298,7 +1305,6 @@ const UI = {
         UI.elements.battleOpponent,
         UI.elements.battlePlayer.querySelector('[data-template-slot="sprite"]'),
         UI.elements.techniques,
-        ...UI.elements.sceneTown.querySelectorAll('[data-location]'),
         UI.elements.showMap,
         UI.elements.nextTrainer,
         UI.elements.changeArea,
@@ -1308,13 +1314,40 @@ const UI = {
         UI.elements.menuLog,
         UI.elements.menuJournal,
         UI.elements.menuSettings,
+
+        Template.technique.content.firstElementChild,
+        Template.healingCenter.content.querySelector('[data-template-slot="heal"]'),
+        Template.shopItem.content.firstElementChild,
+        ...Template.monsterStats.content.querySelectorAll('button'),
+        Template.movesetItem.content.firstElementChild,
+        Template.tabHeading.content.querySelector('[data-template-slot="label"]'),
+        ...Template.party.content.querySelectorAll('[data-template-slot="modes"] button'),
+        Template.partyMonster.content.firstElementChild,
+        Template.inventoryItem.content.firstElementChild,
+        ...Template.inventory.content.querySelectorAll('[data-template-slot="modes"] button'),
+        ...Template.menuSettings.content.querySelectorAll('select, button'),
+
+        ...document.querySelector('.menu__settings').querySelectorAll('select, button'),
       ];
 
       for (const element of elements) {
         if (UI.isHighlighting) {
-          element.classList.add('setting-highlight');
+          element.classList.add(UI.highlightClassName);
+        } else {
+          element.classList.remove(UI.highlightClassName);
+        }
+      }
+
+      // map
+      const mapElements = [
+        UI.elements.sceneTown.querySelector('[data-template-slot="map"]').firstElementChild,
+        Template.map.content.firstElementChild,
+      ];
+      for (const element of mapElements) {
+        if (UI.isHighlighting) {
+          element.classList.add(`${UI.highlightClassName}--map`);
         } else {
-          element.classList.remove('setting-highlight');
+          element.classList.remove(`${UI.highlightClassName}--map`);
         }
       }
     });