1 files changed, 59 insertions, 0 deletions
diff --git a/resources/js/ui.js b/resources/js/ui.js
index e69fd83..3275835 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -788,6 +788,65 @@ const UI = {
       UI.drawPopup(monsterSelectionPopup);
     }));
 
+    template.querySelector('[data-template-slot="box.withdraw"]').addEventListener('click', UI.wrapCallback(() => {
+      if (Memory.state.monsters.length === 0) {
+        alert('No Tuxemon to withdraw in Box!');
+        return;
+      }
+      if (Memory.state.player.monsters.length === 6) {
+        alert('Not enough space in party!');
+        return;
+      }
+
+      const boxPopup = UI.createPopup();
+      const monsterSelection = UI.createMonsterSelection(Memory.state.monsters);
+      monsterSelection.addEventListener('monster:selected', UI.wrapCallback((event) => {
+        Memory.state.player.monsters.push(event.detail.monster);
+        Memory.state.monsters.splice(Memory.state.monsters.findIndex((monster) => monster === event.detail.monster), 1);
+        event.detail.node.remove();
+
+        if (Memory.state.player.monsters.length === 6) {
+          boxPopup.remove();
+        }
+      }))
+
+      boxPopup.querySelector('.popup').appendChild(monsterSelection);
+      UI.drawPopup(boxPopup);
+    }));
+
+    template.querySelector('[data-template-slot="box.deposit"]').addEventListener('click', UI.wrapCallback(() => {
+      if (Memory.state.player.monsters.length === 1) {
+        alert('Can\'t deposit last Tuxemon!');
+        return;
+      }
+
+      const boxPopup = UI.createPopup();
+      const monsterSelection = UI.createMonsterSelection(Memory.state.player.monsters);
+      monsterSelection.addEventListener('monster:selected', UI.wrapCallback((event) => {
+        Memory.state.monsters.push(event.detail.monster);
+        Memory.state.player.monsters.splice(Memory.state.player.monsters.findIndex((monster) => monster === event.detail.monster), 1);
+        event.detail.node.remove();
+
+        if (Memory.state.player.monsters.length === 1) {
+          boxPopup.remove();
+        }
+      }))
+
+      boxPopup.querySelector('.popup').appendChild(monsterSelection);
+      UI.drawPopup(boxPopup);
+    }));
+
+    template.querySelector('[data-template-slot="box.view"]').addEventListener('click', UI.wrapCallback(() => {
+      const boxPopup = UI.createPopup();
+      const monsterSelection = UI.createMonsterSelection(Memory.state.monsters);
+      monsterSelection.addEventListener('monster:selected', UI.wrapCallback((event) => {
+        UI.openStatsMenu(event.detail.monster);
+      }))
+
+      boxPopup.querySelector('.popup').appendChild(monsterSelection);
+      UI.drawPopup(boxPopup);
+    }));
+
     popup.querySelector('.popup').appendChild(template);
     UI.drawPopup(popup);
   },