reorder and player defeated logic

1 files changed, 100 insertions, 40 deletions

diff --git a/resources/js/ui.js b/resources/js/ui.js
index c67e2f0..820a49c 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -350,6 +350,20 @@ const UI = {
   },
 
   /**
+   * @returns {HTMLElement}
+   */
+  createPlayerDefeatedMonsterSelection () {
+    const monsterSelectionNode = UI.createMonsterSelection(Memory.state.player.monsters.filter((monster) => monster.hp > 0));
+
+    monsterSelectionNode.addEventListener('monster:selected', (event) => {
+      Game.setActivePlayerMonster(event.detail.monster);
+      Game.playerIsChoosingNextMonster = false;
+    });
+
+    return monsterSelectionNode;
+  },
+
+  /**
    * @param {HTMLElement} battleMonsterNode
    */
   drawOpponentMonster () {
@@ -454,6 +468,20 @@ const UI = {
     UI.drawStatus();
   },
 
+  /**
+   * @param {HTMLElement} monsterSelectionNode
+   */
+  openPlayerDefeatedMonsterSelection (monsterSelectionNode) {
+    const popup = UI.createPopup().cloneNode(true); // remove event listeners
+
+    monsterSelectionNode.addEventListener('monster:selected', () => {
+      popup.remove();
+    });
+
+    popup.querySelector('[data-template-slot="content"]').appendChild(monsterSelectionNode);
+    UI.drawPopup(popup);
+  },
+
 
   /* Battle - Action Feedback */
 
@@ -572,6 +600,52 @@ const UI = {
   inventorySelectionMode: 'use',
 
 
+  /**
+   * @param {Monster[]} monsters
+   *
+   * @returns {HTMLElement}
+   */
+  createMonsterSelection (monsters) {
+    const template = document.createElement('div');
+    template.classList.add('monster-selection');
+
+    for (const monster of monsters) {
+      const monsterNode = UI.createMonsterSelectionMonster(monster);
+
+      monsterNode.addEventListener('monster:selected', (event) => {
+        template.dispatchEvent(new CustomEvent('monster:selected', {
+          detail: {
+            node: monsterNode,
+            monster: event.detail.monster,
+          },
+        }));
+      });
+
+      template.appendChild(monsterNode);
+    }
+
+    return template;
+  },
+
+  /**
+   * @param {Monster} monster
+   *
+   * @returns {HTMLElement}
+   */
+  createMonsterSelectionMonster (monster) {
+    const template = UI.createPartyMonster(monster);
+
+    template.addEventListener('click', () => {
+      template.dispatchEvent(new CustomEvent('monster:selected', {
+        detail: {
+          monster: monster,
+        },
+      }));
+    });
+
+    return template;
+  },
+
   drawStatus () {
     const currentArea = Memory.state.currentArea;
 
@@ -618,13 +692,8 @@ const UI = {
         }
 
         if (UI.partySelectionMode === 'select') {
-          Memory.state.player.activeMonster = monster;
-          Memory.state.activeTechnique = Memory.state.player.activeMonster.activeTechniques[0];
-
-          UI.drawActiveMonster();
-          UI.drawActiveTechniques();
+          Game.setActivePlayerMonster(monster);
 
-          Game.playerIsChoosingNextMonster = false;
           popup.remove();
         }
         else if (UI.partySelectionMode === 'stats') {
@@ -998,7 +1067,7 @@ const UI = {
     const inventoryItemNode = UI.createTemplate(Template.inventoryItem);
 
     inventoryItemNode.title = item.description;
-    inventoryItemNode.dataset.templateItem = item.slug;
+    inventoryItemNode.dataset.inventoryItem = item.slug;
 
     inventoryItemNode.querySelector('[data-template-slot="sprite"]').src = `/modules/tuxemon/mods/tuxemon/${item.sprite}`;
     inventoryItemNode.querySelector('[data-template-slot="name"]').textContent = item.name;
@@ -1026,7 +1095,7 @@ const UI = {
    * @param {InventoryItem} item
    */
   redrawInventoryItem (item) {
-    const itemNode = document.querySelector(`#inventory *[data-template-item="${item.slug}"]`);
+    const itemNode = document.querySelector(`#inventory *[data-inventory-item="${item.slug}"]`);
     if (item.quantity === 0) {
       itemNode.remove();
     }
@@ -1042,47 +1111,38 @@ const UI = {
    * @returns {HTMLElement}
    */
   createItemMonsterSelection (item, monsters) {
-    const template = document.createElement('div');
+    const template = UI.createMonsterSelection(
+      monsters.filter((monster) => Game.canUseItem(item, monster))
+    );
 
-    /**
-     * @param {Monster} monster
-     *
-     * @returns {(HTMLElement|null)}
-     */
-    const createMonsterNode = (monster) => {
-      if (!Game.canUseItem(item, monster)) {
-        return null;
-      }
+    const onMonsterSelectd = async (event) => {
+      const monster = event.detail.monster;
+      const monsterNode = event.detail.node || event.target;
+
+      await Game.useItem(item, monster);
 
-      const monsterNode = UI.createPartyMonster(monster);
+      if (item.quantity === 0) {
+        Game.removeItemFromInventory(Memory.state.player.inventory, item);
+        template.dispatchEvent(new Event('item:isExhausted'));
+      }
 
-      monsterNode.addEventListener('click', async () => {
-        await Game.useItem(item, monster);
+      else {
+        const canStillUseItem = Game.canUseItem(item, monster);
+        if (canStillUseItem) {
+          const replacingMonsterNode = UI.createMonsterSelectionMonster(monster);
+          replacingMonsterNode.addEventListener('monster:selected', onMonsterSelectd);
 
-        if (item.quantity === 0) {
-          Game.removeItemFromInventory(Memory.state.player.inventory, item);
-          template.dispatchEvent(new Event('item:isExhausted'));
+          monsterNode.replaceWith(replacingMonsterNode);
         } else {
-          const replacingMonsterNode = createMonsterNode(monster);
-          if (replacingMonsterNode) {
-            monsterNode.replaceWith(replacingMonsterNode);
-          } else {
-            monsterNode.remove();
-            template.dispatchEvent(new Event('monster:lostCondition'));
-          }
+          monsterNode.remove();
+          template.dispatchEvent(new Event('monster:lostCondition'));
         }
+      }
 
-        UI.redrawInventoryItem(item);
-      });
-
-      return monsterNode;
+      UI.redrawInventoryItem(item);
     };
 
-    for (const monster of monsters) {
-      const monsterNode = createMonsterNode(monster);
-
-      monsterNode && template.appendChild(monsterNode);
-    }
+    template.addEventListener('monster:selected', onMonsterSelectd);
 
     return template;
   },