2 files changed, 69 insertions, 2 deletions
diff --git a/resources/js/game.js b/resources/js/game.js
index 3e7a4c8..1fdde7d 100644
--- a/resources/js/game.js
+++ b/resources/js/game.js
@@ -961,10 +961,18 @@ const Game = {
     caughtMonster.level = Memory.state.opponent.activeMonster.level;
     caughtMonster.hp = Memory.state.opponent.activeMonster.hp;
 
-    Memory.state.player.monsters.push(caughtMonster);
-
     Game.log(`Caught ${caughtMonster.name}!`);
 
+    if (Memory.state.player.monsters.length < 6) {
+      Memory.state.player.monsters.push(caughtMonster);
+
+      Game.log(`Added ${caughtMonster.name} to Party!`);
+    } else {
+      Memory.state.monsters.push(caughtMonster);
+
+      Game.log(`Transfered ${caughtMonster.name} to Box!`, 1);
+    }
+
     await Game.encounterWildMonster();
 
     Memory.saveToLocalStorage();
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);
   },