refactor: enemy -> opponent, State.monsters~ -> State.Trainer.monsters

author: Daniel Weipert <code@drogueronin.de> 2023-08-19 13:18:54 +0200
committer: Daniel Weipert <code@drogueronin.de> 2023-08-19 13:18:54 +0200
commit: 218da95a4b387ee5ac25f168d1529419039f2e54 (patch)
tree: 21375d6aae287da413cbfc1002c2c8eeb7bba1ed
parent: 91d048ef0f994446aaee91e3afcbd99788e439d7 (diff)
10 files changed, 290 insertions, 242 deletions
diff --git a/index.html b/index.html
index e59faa5..2a8cb9a 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
   <body>
     <div class="wrap">
       <div id="battle">
-        <div id="battle__enemy">
+        <div id="battle__opponent">
           <img class="battle__monster-sprite__animation" src="" draggable="false" />
         </div>
 
@@ -256,6 +256,7 @@
     <script type="text/javascript" src="/resources/js/classes/utility/TechniqueEffect.js"></script>
     <script type="text/javascript" src="/resources/js/classes/utility/ItemCondition.js"></script>
     <script type="text/javascript" src="/resources/js/classes/utility/ItemEffect.js"></script>
+    <script type="text/javascript" src="/resources/js/classes/Trainer.js"></script>
     <script type="text/javascript" src="/resources/js/classes/Monster.js"></script>
     <script type="text/javascript" src="/resources/js/classes/Technique.js"></script>
     <script type="text/javascript" src="/resources/js/classes/StatusEffect.js"></script>
@@ -264,6 +265,7 @@
     <script type="text/javascript" src="/resources/js/classes/State.js"></script>
     <script type="text/javascript" src="/resources/js/db.js"></script>
     <script type="text/javascript" src="/resources/js/formula.js"></script>
+    <script type="text/javascript" src="/resources/js/memory.js"></script>
     <script type="text/javascript" src="/resources/js/ui.js"></script>
     <script type="text/javascript" src="/resources/js/game.js"></script>
     <script type="text/javascript" src="/resources/js/main.js"></script>
diff --git a/resources/css/battle.css b/resources/css/battle.css
index 099142b..57f5417 100644
--- a/resources/css/battle.css
+++ b/resources/css/battle.css
@@ -11,7 +11,7 @@
   background-size: cover;
 }
 
-#battle__enemy {
+#battle__opponent {
   position: relative;
   cursor: pointer;
   flex-grow: 1;
@@ -104,8 +104,8 @@
 .battle__monster--player {
   flex-direction: row-reverse;
 }
-.battle__monster--enemy .battle__monster-info-exp,
-.battle__monster--enemy .battle__monster-technique {
+.battle__monster--opponent .battle__monster-info-exp,
+.battle__monster--opponent .battle__monster-technique {
   display: none;
 }
 
diff --git a/resources/js/classes/State.js b/resources/js/classes/State.js
index c0065d1..99a642c 100644
--- a/resources/js/classes/State.js
+++ b/resources/js/classes/State.js
@@ -2,37 +2,30 @@ class State {
   /**
    * @type {number}
    */
-  money = 0;
+  turn = 0;
 
   /**
-   * @type {Monster[]}
+   * @type {number}
    */
-  monsters = [];
+  money = 0;
 
   /**
-   * @type {InventoryItem[]}
+   * @type {Monster[]}
    */
-  inventory = [];
+  monsters = [];
 
   /**
-   * @type {Monster[]}
+   * @type {Trainer}
    */
-  partyMonsters = [];
+  player = null;
 
   /**
-   * @type {Monster}
+   * @type {Trainer}
    */
-  activeMonster = null;
+  opponent = null;
 
   /**
    * @type {Technique}
    */
   activeTechnique = null;
-
-  enemy = {
-    /**
-     * @type {Monster}
-     */
-    monster: null,
-  };
 };
diff --git a/resources/js/classes/Technique.js b/resources/js/classes/Technique.js
index 39028be..74783a2 100644
--- a/resources/js/classes/Technique.js
+++ b/resources/js/classes/Technique.js
@@ -33,6 +33,10 @@ class Technique {
     return DB.techniques[this.slug].sfx;
   }
 
+  get healingPower() {
+    return DB.techniques[this.slug].healing_power;
+  }
+
   /**
    * @returns {string[]}
    */
@@ -45,15 +49,15 @@ class Technique {
   }
 
   isRecharging () {
-    if (this.turnLastUse >= Game.turn) {
+    if (this.turnLastUse >= Memory.state.turn) {
       return false;
     }
 
-    return this.rechargeLength > Game.turn - this.turnLastUse;
+    return this.rechargeLength > Memory.state.turn - this.turnLastUse;
   }
 
   use () {
-    this.turnLastUse = Game.turn;
+    this.turnLastUse = Memory.state.turn;
   }
 
   get accuracy () {
diff --git a/resources/js/classes/Trainer.js b/resources/js/classes/Trainer.js
new file mode 100644
index 0000000..668c92b
--- /dev/null
+++ b/resources/js/classes/Trainer.js
@@ -0,0 +1,16 @@
+class Trainer {
+  /**
+   * @type {Monster[]}
+   */
+  monsters = [];
+
+  /**
+   * @type {InventoryItem[]}
+   */
+  inventory = [];
+
+  /**
+   * @type {Monster}
+   */
+  activeMonster = [];
+}
diff --git a/resources/js/classes/utility/TechniqueEffect.js b/resources/js/classes/utility/TechniqueEffect.js
index 10e9399..852efad 100644
--- a/resources/js/classes/utility/TechniqueEffect.js
+++ b/resources/js/classes/utility/TechniqueEffect.js
@@ -5,11 +5,16 @@ class TechniqueEffect {
   type = '';
 
   /**
-   * @type {(('user' | 'target')|Monster)}
+   * @type {('user' | 'target')}
    */
   recipient = null;
 
   /**
+   * @type {Monster[]}
+   */
+  recipients = [];
+
+  /**
    * @type {('give' | 'remove')}
    */
   application = '';
@@ -56,8 +61,8 @@ class TechniqueEffect {
    * @type {Monster}
    */
   setUser (user) {
-    if (this.recipient === 'user') {
-      this.recipient = user;
+    if (['user', 'both'].includes(this.recipient)) {
+      this.recipients.push(user);
     }
   }
 
@@ -65,8 +70,8 @@ class TechniqueEffect {
    * @type {Monster}
    */
   setTarget (target) {
-    if (this.recipient === 'target') {
-      this.recipient = target;
+    if (['target', 'both'].includes(this.recipient)) {
+      this.recipients.push(target);
     }
   }
 }
diff --git a/resources/js/game.js b/resources/js/game.js
index f68e2fb..833265e 100644
--- a/resources/js/game.js
+++ b/resources/js/game.js
@@ -1,6 +1,3 @@
-const state = new State();
-
-
 const Game = {
   phases: {
     preAction: [],
@@ -9,140 +6,12 @@ const Game = {
   },
 
   didTechniqueHit: false,
-  turn: 0,
-
-
-  /**
-   * @returns {string}
-   */
-  save () {
-    const saveMonster = (monsterData, monsterState) => {
-      monsterData.level = monsterState.level;
-      monsterData.hp = monsterState.hp;
-
-      if (monsterData.statusEffect && monsterData.statusEffect.slug === 'lifeleech') {
-        monsterData.statusEffect = null;
-      }
-
-      return monsterData;
-    };
-
-    const saveData = JSON.parse(JSON.stringify(state));
-
-    for (const idx in saveData.monsters) {
-      saveData.monsters[idx] = saveMonster(saveData.monsters[idx], state.monsters[idx]);
-    }
-
-    for (const idx in saveData.partyMonsters) {
-      saveData.partyMonsters[idx] = saveMonster(saveData.partyMonsters[idx], state.partyMonsters[idx]);
-    }
-
-    saveData.activeMonsterIdx = state.partyMonsters.indexOf(state.activeMonster);
-
-    saveData.enemy.monster = saveMonster(saveData.enemy.monster, state.enemy.monster);
-
-    return btoa(JSON.stringify(saveData));
-  },
-
-  /**
-   * @param {string} saveData
-   */
-  async load (saveData) {
-    /**
-     * @param {Monster} monsterData
-     */
-    const loadMonster = async (monsterData) => {
-      const monster = await fetchMonster(monsterData.slug);
-
-      monster.level = monsterData.level;
-      monster.hp = monsterData.hp;
-      monster.exp = monsterData.exp;
-      monster.tasteWarm = monsterData.tasteWarm;
-      monster.tasteCold = monsterData.tasteCold;
-      monster.gender = monsterData.gender;
-      monster.heldItem = await loadItem(monsterData.heldItem);
-      monster.statusEffect = await loadStatusEffect(monsterData.statusEffect);
-      monster.statModifiers = monsterData.statModifiers;
-      monster.experienceModifier = monsterData.experienceModifier;
-      monster.moneyModifier = monsterData.moneyModifier;
-      monster.activeTechniques = await Promise.all(monsterData.activeTechniques.map(async (technique) => {
-        return loadTechnique(technique);
-      }));
-
-      return monster;
-    };
-
-    /**
-     * @param {InventoryItem} inventoryItemData
-     */
-    const loadInventoryItem = async (inventoryItemData) => {
-      const inventoryItem = new InventoryItem(await fetchItem(inventoryItemData.item.slug));
-
-      inventoryItem.quantity = inventoryItemData.quantity;
-
-      return inventoryItem;
-    };
-
-    /**
-     * @param {Item} itemData
-     */
-    const loadItem = async (itemData) => {
-      if (!itemData) {
-        return null;
-      }
-
-      const item = await fetchItem(itemData.slug);
-
-      return item;
-    };
-
-    /**
-     * @param {StatusEffect} statusEffectData
-     */
-    const loadStatusEffect = async (statusEffectData) => {
-      if (!statusEffectData) {
-        return null;
-      }
-
-      const statusEffect = await fetchStatusEffect(statusEffectData.slug);
-
-      statusEffect.turnsLeft = statusEffectData.turnsLeft;
-
-      return statusEffect;
-    };
-
-    /**
-     * @param {Technique} techniqueData
-     */
-    const loadTechnique = async (techniqueData) => {
-      const technique = await fetchTechnique(techniqueData.slug);
-
-      return technique;
-    };
-
-    /**
-     * @type {State}
-     */
-    const loadedState = JSON.parse(atob(saveData));
-
-    state.money = loadedState.money;
-    state.monsters = await Promise.all(loadedState.monsters.map(async (monsterData) => await loadMonster(monsterData)));
-    state.inventory = await Promise.all(loadedState.inventory.map(async (itemData) => await loadInventoryItem(itemData)));
-    state.partyMonsters = await Promise.all(loadedState.partyMonsters.map(async (monsterData) => await loadMonster(monsterData)));
-    state.activeMonster = state.partyMonsters[loadedState.activeMonsterIdx];
-    state.activeTechnique = await loadTechnique(loadedState.activeTechnique);
-    state.enemy.monster = await loadMonster(loadedState.enemy.monster);
-
-    UI.drawEnemyMonster();
-    UI.drawActiveMonster();
-    UI.drawActiveTechniques();
-  },
 
   async progressTurn () {
-    Game.turn++;
+    Memory.state.turn++;
 
-    await Game.applyStatusEffect(state.enemy.monster);
-    await Game.applyStatusEffect(state.activeMonster);
+    await Game.applyStatusEffect(Memory.state.opponent.activeMonster);
+    await Game.applyStatusEffect(Memory.state.player.activeMonster);
 
     for (const event of Game.phases.preAction) {
       event();
@@ -157,30 +26,30 @@ const Game = {
     }
     Game.phases.postAction = [];
 
-    // enemy defeated
-    if (state.enemy.monster.hp <= 0) {
+    // opponent defeated
+    if (Memory.state.opponent.activeMonster.hp <= 0) {
       // money
-      state.money += state.enemy.monster.level * state.enemy.monster.moneyModifier;
+      Memory.state.money += Memory.state.opponent.activeMonster.level * Memory.state.opponent.activeMonster.moneyModifier;
 
       // exp
-      state.activeMonster.exp += calculateAwardedExperience(state.enemy.monster, [state.activeMonster])[0];
+      Memory.state.player.activeMonster.exp += calculateAwardedExperience(Memory.state.opponent.activeMonster, [Memory.state.player.activeMonster])[0];
 
-      if (state.activeMonster.canLevelUp()) {
-        state.activeMonster.levelUp();
+      if (Memory.state.player.activeMonster.canLevelUp()) {
+        Memory.state.player.activeMonster.levelUp();
       }
-      if (state.activeMonster.canEvolve()) {
-        await fetchMonster(state.activeMonster.evolutions[0].monster_slug);
-        state.activeMonster.evolve();
+      if (Memory.state.player.activeMonster.canEvolve()) {
+        await fetchMonster(Memory.state.player.activeMonster.evolutions[0].monster_slug);
+        Memory.state.player.activeMonster.evolve();
       }
 
-      await Game.spawnEnemyMonster();
+      await Game.spawnOpponentMonster();
     }
 
-    UI.drawEnemyMonster();
+    UI.drawOpponentMonster();
     UI.drawActiveMonster();
     UI.drawActiveTechniques();
 
-    UI.elements.money.textContent = `${state.money} €`;
+    UI.elements.money.textContent = `${Memory.state.money} €`;
   },
 
   /**
@@ -239,12 +108,12 @@ const Game = {
       // damage
       if (['damage', 'splash', 'area'].includes(techniqueEffect.type)) {
         Game.phases.action.push(() => {
-          const damage = simpleDamageCalculation(state.activeTechnique, state.activeMonster, state.enemy.monster);
+          const damage = simpleDamageCalculation(technique, user, target);
 
-          state.enemy.monster.hp -= damage;
+          target.hp -= damage;
           const damageNode = UI.createDamage(damage);
-          UI.applyMultiplierToDamage(damageNode, simpleDamageMultiplier(state.activeTechnique.types, state.enemy.monster.types));
-          UI.applyTechniqueToDamage(damageNode, state.activeTechnique);
+          UI.applyMultiplierToDamage(damageNode, simpleDamageMultiplier(technique.types, target.types));
+          UI.applyTechniqueToDamage(damageNode, technique);
           UI.drawDamage(damageNode);
           UI.drawTechniqueAnimation(technique);
         });
@@ -254,10 +123,10 @@ const Game = {
       else if (techniqueEffect.type === 'money') {
         Game.phases.action.push(() => {
           const money = Math.max(1, Math.floor(Math.random() * target.level));
-          state.money += money;
+          Memory.state.money += money;
 
           const damageNode = UI.createDamage(`${money} €`);
-          UI.applyTechniqueToDamage(damageNode, state.activeTechnique);
+          UI.applyTechniqueToDamage(damageNode, technique);
           UI.drawDamage(damageNode);
           UI.drawTechniqueAnimation(technique);
         });
@@ -265,7 +134,10 @@ const Game = {
 
       // healing
       else if (techniqueEffect.type === 'healing') {
-        techniqueEffect.recipient.hp = techniqueEffect.recipient.stats.hp;
+        for (const recipient of techniqueEffect.recipients) {
+          console.log((user.level + 7) * technique.healingPower);
+          recipient.hp += (user.level + 7) * technique.healingPower;
+        }
       }
 
       // enhance
@@ -287,10 +159,12 @@ const Game = {
           const success = technique.potency >= potency;
 
           if (success) {
-            // TODO: check replace
-            if (techniqueEffect.recipient.statusEffect) return;
+            for (const recipient of techniqueEffect.recipients) {
+              // TODO: check replace
+              if (recipient.statusEffect) continue;
 
-            techniqueEffect.recipient.statusEffect = statusEffect;
+              recipient.statusEffect = statusEffect;
+            }
           }
         });
 
@@ -426,14 +300,14 @@ const Game = {
     });
   },
 
-  async spawnEnemyMonster () {
-    state.enemy.monster = await fetchMonster(DB.allMonsters[Math.floor(Math.random() * DB.allMonsters.length)]);
-    state.enemy.monster.level = Math.ceil(Math.random() * state.activeMonster.level);
+  async spawnOpponentMonster () {
+    Memory.state.opponent.activeMonster = await fetchMonster(DB.allMonsters[Math.floor(Math.random() * DB.allMonsters.length)]);
+    Memory.state.opponent.activeMonster.level = Math.ceil(Math.random() * Memory.state.player.activeMonster.level);
 
-    // state.enemy.monster.experienceModifier = state.enemy.monster.level;
-    state.enemy.monster.moneyModifier = state.enemy.monster.level;
+    // Memory.state.opponent.activeMonster.experienceModifier = Memory.state.opponent.activeMonster.level;
+    Memory.state.opponent.activeMonster.moneyModifier = Memory.state.opponent.activeMonster.level;
 
-    UI.drawEnemyMonster();
+    UI.drawOpponentMonster();
   },
 
   /**
@@ -442,7 +316,7 @@ const Game = {
   async battleClick (event) {
     UI.battleClickEvent = event;
 
-    await Game.tryUseTechnique(state.activeTechnique, state.activeMonster, state.enemy.monster);
+    await Game.tryUseTechnique(Memory.state.activeTechnique, Memory.state.player.activeMonster, Memory.state.opponent.activeMonster);
 
     Game.progressTurn();
   },
@@ -461,32 +335,32 @@ const Game = {
     }
 
     const idx = [...UI.elements.techniques.children].indexOf(target);
-    state.activeTechnique = state.activeMonster.activeTechniques[idx];
+    Memory.state.activeTechnique = Memory.state.player.activeMonster.activeTechniques[idx];
 
     // trigger battle click
-    const rect = UI.elements.battleEnemy.getBoundingClientRect();
+    const rect = UI.elements.battleOpponent.getBoundingClientRect();
     const xMin = rect.left + 64;
     const xMax = rect.right - 64;
     const yMin = rect.top + 32;
     const yMax = rect.bottom - 32;
-    UI.elements.battleEnemy.dispatchEvent(new MouseEvent('click', {
+    UI.elements.battleOpponent.dispatchEvent(new MouseEvent('click', {
       clientX: Math.random() * (xMax - xMin) + xMin,
       clientY: Math.random() * (yMax - yMin) + yMin,
     }));
   },
 
   catchMonster () {
-    const caughtMonster = new Monster(state.enemy.monster.slug);
+    const caughtMonster = new Monster(Memory.state.opponent.activeMonster.slug);
     caughtMonster.initialize();
-    caughtMonster.level = state.enemy.monster.level;
+    caughtMonster.level = Memory.state.opponent.activeMonster.level;
 
-    state.partyMonsters.push(caughtMonster);
+    Memory.state.player.monsters.push(caughtMonster);
 
-    Game.spawnEnemyMonster();
+    Game.spawnOpponentMonster();
   },
 };
 
 // Game click bindings
-UI.elements.battleEnemy.addEventListener('click', Game.battleClick);
+UI.elements.battleOpponent.addEventListener('click', Game.battleClick);
 UI.elements.techniques.addEventListener('click', Game.techniqueClick);
 UI.elements.menuCatch.addEventListener('click', Game.catchMonster);
diff --git a/resources/js/main.js b/resources/js/main.js
index d5bf6fe..a3568bf 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -3,10 +3,13 @@
 
   const possibleStarterMonsters = ['budaye', 'dollfin', 'grintot', 'ignibus', 'memnomnom'];
 
-  // state.enemy.monster = await fetchMonster('grintot');
-  state.enemy.monster = await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))]);
+  Memory.state.opponent = new Trainer();
+  Memory.state.opponent.monsters = [
+    await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))])
+  ];
 
-  state.partyMonsters = [
+  Memory.state.player = new Trainer();
+  Memory.state.player.monsters = [
     await fetchMonster('dollfin'),
     await fetchMonster(possibleStarterMonsters[Math.round(Math.random() * (possibleStarterMonsters.length - 1))]),
     await fetchMonster('corvix'),
@@ -19,12 +22,10 @@
     await fetchMonster('dragarbor'),
     await fetchMonster('mk01_omega'),
     await fetchMonster('jelillow'),
+    await fetchMonster('picc'),
   ];
 
-  state.activeMonster = state.partyMonsters[0];
-  state.activeTechnique = state.activeMonster.activeTechniques[0];
-
-  state.inventory = [
+  Memory.state.player.inventory = [
     new InventoryItem(await fetchItem('tuxeball')),
     new InventoryItem(await fetchItem('ancient_egg')),
     new InventoryItem(await fetchItem('sweet_sand')),
@@ -41,7 +42,11 @@
     new InventoryItem(await fetchItem('revive')),
   ];
 
-  UI.drawEnemyMonster();
+  Memory.state.opponent.activeMonster = Memory.state.opponent.monsters[0];
+  Memory.state.player.activeMonster = Memory.state.player.monsters[0];
+  Memory.state.activeTechnique = Memory.state.player.activeMonster.activeTechniques[0];
+
+  UI.drawOpponentMonster();
   UI.drawActiveMonster();
   UI.drawActiveTechniques();
 })();
diff --git a/resources/js/memory.js b/resources/js/memory.js
new file mode 100644
index 0000000..81acf89
--- /dev/null
+++ b/resources/js/memory.js
@@ -0,0 +1,149 @@
+const Memory = {
+  /**
+   * @type {State}
+   */
+  state: new State(),
+
+
+  /**
+   * @returns {string}
+   */
+  save () {
+    const saveMonster = (monsterData, monsterState) => {
+      monsterData.level = monsterState.level;
+      monsterData.hp = monsterState.hp;
+
+      if (monsterData.statusEffect && monsterData.statusEffect.slug === 'lifeleech') {
+        monsterData.statusEffect = null;
+      }
+
+      return monsterData;
+    };
+
+    /**
+     * @type {State}
+     */
+    const saveData = JSON.parse(JSON.stringify(Memory.state));
+
+    // monsters
+    for (const idx in saveData.monsters) {
+      saveData.monsters[idx] = saveMonster(saveData.monsters[idx], Memory.state.monsters[idx]);
+    }
+
+    // player - monsters
+    for (const idx in saveData.player.monsters) {
+      saveData.player.monsters[idx] = saveMonster(saveData.player.monsters[idx], Memory.state.player.monsters[idx]);
+    }
+
+    saveData.player.activeMonsterIdx = Memory.state.player.monsters.indexOf(Memory.state.player.activeMonster);
+
+    // opponent - monsters
+    for (const idx in saveData.opponent.monsters) {
+      saveData.opponent.monsters[idx] = saveMonster(saveData.opponent.monsters[idx], Memory.state.opponent.monsters[idx]);
+    }
+
+    saveData.opponent.activeMonsterIdx = Memory.state.opponent.monsters.indexOf(Memory.state.opponent.activeMonster);
+
+    // hash
+    return btoa(JSON.stringify(saveData));
+  },
+
+  /**
+   * @param {string} saveData
+   */
+  async load (saveData) {
+    /**
+     * @param {Monster} monsterData
+     */
+    const loadMonster = async (monsterData) => {
+      const monster = await fetchMonster(monsterData.slug);
+
+      monster.level = monsterData.level;
+      monster.hp = monsterData.hp;
+      monster.exp = monsterData.exp;
+      monster.tasteWarm = monsterData.tasteWarm;
+      monster.tasteCold = monsterData.tasteCold;
+      monster.gender = monsterData.gender;
+      monster.heldItem = await loadItem(monsterData.heldItem);
+      monster.statusEffect = await loadStatusEffect(monsterData.statusEffect);
+      monster.statModifiers = monsterData.statModifiers;
+      monster.experienceModifier = monsterData.experienceModifier;
+      monster.moneyModifier = monsterData.moneyModifier;
+      monster.activeTechniques = await Promise.all(monsterData.activeTechniques.map(async (technique) => {
+        return loadTechnique(technique);
+      }));
+
+      return monster;
+    };
+
+    /**
+     * @param {InventoryItem} inventoryItemData
+     */
+    const loadInventoryItem = async (inventoryItemData) => {
+      const inventoryItem = new InventoryItem(await fetchItem(inventoryItemData.item.slug));
+
+      inventoryItem.quantity = inventoryItemData.quantity;
+
+      return inventoryItem;
+    };
+
+    /**
+     * @param {Item} itemData
+     */
+    const loadItem = async (itemData) => {
+      if (!itemData) {
+        return null;
+      }
+
+      const item = await fetchItem(itemData.slug);
+
+      return item;
+    };
+
+    /**
+     * @param {StatusEffect} statusEffectData
+     */
+    const loadStatusEffect = async (statusEffectData) => {
+      if (!statusEffectData) {
+        return null;
+      }
+
+      const statusEffect = await fetchStatusEffect(statusEffectData.slug);
+
+      statusEffect.turnsLeft = statusEffectData.turnsLeft;
+
+      return statusEffect;
+    };
+
+    /**
+     * @param {Technique} techniqueData
+     */
+    const loadTechnique = async (techniqueData) => {
+      const technique = await fetchTechnique(techniqueData.slug);
+
+      technique.turnLastUse = techniqueData.turnLastUse;
+
+      return technique;
+    };
+
+    /**
+     * @type {State}
+     */
+    const loadedState = JSON.parse(atob(saveData));
+
+    Memory.state.turn = loadedState.turn;
+    Memory.state.money = loadedState.money;
+    Memory.state.monsters = await Promise.all(loadedState.monsters.map(async (monsterData) => await loadMonster(monsterData)));
+    Memory.state.player.monsters = await Promise.all(loadedState.player.monsters.map(async (monsterData) => await loadMonster(monsterData)));
+    Memory.state.player.inventory = await Promise.all(loadedState.player.inventory.map(async (itemData) => await loadInventoryItem(itemData)));
+    Memory.state.player.activeMonster = Memory.state.player.monsters[loadedState.player.activeMonsterIdx];
+    Memory.state.opponent.monsters = await Promise.all(loadedState.opponent.monsters.map(async (monsterData) => await loadMonster(monsterData)));
+    Memory.state.opponent.inventory = await Promise.all(loadedState.opponent.inventory.map(async (itemData) => await loadInventoryItem(itemData)));
+    Memory.state.opponent.activeMonster = Memory.state.opponent.monsters[loadedState.opponent.activeMonsterIdx];
+    Memory.state.activeTechnique = await loadTechnique(loadedState.activeTechnique);
+
+    UI.drawOpponentMonster();
+    UI.drawActiveMonster();
+    UI.drawActiveTechniques();
+  },
+};
diff --git a/resources/js/ui.js b/resources/js/ui.js
index 08e09e2..6c077b7 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -32,9 +32,9 @@ const Template = {
 
 const UI = {
   elements: {
-    battleEnemy: document.querySelector('#battle__enemy'),
-    battleEnemySprite: null,
-    battleEnemyAnimation: document.querySelector('.battle__monster-sprite__animation'),
+    battleOpponent: document.querySelector('#battle__opponent'),
+    battleOpponentSprite: null,
+    battleOpponentAnimation: document.querySelector('.battle__monster-sprite__animation'),
     battlePlayer: document.querySelector('#battle__player'),
 
     techniques: document.querySelector('#techniques'),
@@ -286,10 +286,10 @@ const UI = {
   /**
    * @returns {HTMLElement}
    */
-  createEnemyMonster () {
-    const battleMonsterNode = UI.createBattleMonster(state.enemy.monster);
+  createOpponentMonster () {
+    const battleMonsterNode = UI.createBattleMonster(Memory.state.opponent.activeMonster);
 
-    battleMonsterNode.classList.add('battle__monster--enemy');
+    battleMonsterNode.classList.add('battle__monster--opponent');
 
     return battleMonsterNode;
   },
@@ -298,17 +298,17 @@ const UI = {
    * @returns {HTMLElement}
    */
   createActiveMonster () {
-    const battleMonsterNode = UI.createBattleMonster(state.activeMonster);
+    const battleMonsterNode = UI.createBattleMonster(Memory.state.player.activeMonster);
 
     UI.replaceTemplateSlot(
       battleMonsterNode.querySelector('[data-template-slot="expBar"]'),
-      UI.createExpBar(state.activeMonster)
+      UI.createExpBar(Memory.state.player.activeMonster)
     );
 
     battleMonsterNode.classList.add('battle__monster--player');
 
     battleMonsterNode.querySelector('[data-template-slot="sprite"]').addEventListener('click', () => {
-      UI.openStatsMenu(state.activeMonster);
+      UI.openStatsMenu(Memory.state.player.activeMonster);
     });
 
     return battleMonsterNode;
@@ -345,19 +345,19 @@ const UI = {
   /**
    * @param {HTMLElement} battleMonsterNode
    */
-  drawEnemyMonster () {
-    const battleMonsterNode = UI.createEnemyMonster();
+  drawOpponentMonster () {
+    const battleMonsterNode = UI.createOpponentMonster();
 
-    UI.elements.battleEnemySprite = battleMonsterNode.querySelector('[data-template-slot="sprite"]');
-    UI.elements.battleEnemySprite.style.transitionDuration = `${UI.damageHighlightClickDuration}s`;
+    UI.elements.battleOpponentSprite = battleMonsterNode.querySelector('[data-template-slot="sprite"]');
+    UI.elements.battleOpponentSprite.style.transitionDuration = `${UI.damageHighlightClickDuration}s`;
 
-    const previousBattleMonsterNode = UI.elements.battleEnemy.querySelector('.battle__monster');
+    const previousBattleMonsterNode = UI.elements.battleOpponent.querySelector('.battle__monster');
     if (previousBattleMonsterNode) {
-      UI.elements.battleEnemySprite.classList = previousBattleMonsterNode.querySelector('[data-template-slot="sprite"]').classList;
+      UI.elements.battleOpponentSprite.classList = previousBattleMonsterNode.querySelector('[data-template-slot="sprite"]').classList;
 
-      UI.elements.battleEnemy.removeChild(previousBattleMonsterNode);
+      UI.elements.battleOpponent.removeChild(previousBattleMonsterNode);
     }
-    UI.elements.battleEnemy.appendChild(battleMonsterNode);
+    UI.elements.battleOpponent.appendChild(battleMonsterNode);
   },
 
   /**
@@ -377,7 +377,7 @@ const UI = {
    * @returns {void}
    */
   drawActiveTechniques () {
-    const activeTechniques = UI.createActiveTechniques(state.activeMonster);
+    const activeTechniques = UI.createActiveTechniques(Memory.state.player.activeMonster);
     activeTechniques.id = 'techniques';
 
     document.querySelector('#techniques').innerHTML = activeTechniques.innerHTML;
@@ -404,17 +404,17 @@ const UI = {
     const y = UI.battleClickEvent.clientY;
 
     const techniqueAnimationLoop = () => {
-      UI.elements.battleEnemyAnimation.src = `/modules/tuxemon/mods/tuxemon/animations/technique/${animation}_${("00" + UI.techniqueAnimationNumber).slice(-2)}.png`;
-      UI.elements.battleEnemyAnimation.style.top = y - (UI.elements.battleEnemyAnimation.clientHeight / 2) + 'px';
-      UI.elements.battleEnemyAnimation.style.left = x - (UI.elements.battleEnemyAnimation.clientWidth / 2) + 'px';
-      // console.log(UI.elements.battleEnemyAnimation.src);
+      UI.elements.battleOpponentAnimation.src = `/modules/tuxemon/mods/tuxemon/animations/technique/${animation}_${("00" + UI.techniqueAnimationNumber).slice(-2)}.png`;
+      UI.elements.battleOpponentAnimation.style.top = y - (UI.elements.battleOpponentAnimation.clientHeight / 2) + 'px';
+      UI.elements.battleOpponentAnimation.style.left = x - (UI.elements.battleOpponentAnimation.clientWidth / 2) + 'px';
+      // console.log(UI.elements.battleOpponentAnimation.src);
 
       UI.techniqueAnimationNumber++;
 
       if (UI.techniqueAnimationNumber >= DB.allAnimations[animation].length) {
         UI.techniqueAnimationIsRunning = false;
         UI.techniqueAnimationNumber = 0;
-        UI.elements.battleEnemyAnimation.src = '';
+        UI.elements.battleOpponentAnimation.src = '';
         return;
       }
 
@@ -445,8 +445,8 @@ const UI = {
     const feedbackNode = UI.createTemplate(Template.battleDamage);
     feedbackNode.innerHTML = feedback;
 
-    feedbackNode.style.top = UI.battleClickEvent.pageY - UI.elements.battleEnemy.offsetTop + (Math.random() * 40 - 20) + 'px';
-    feedbackNode.style.left = UI.battleClickEvent.pageX - UI.elements.battleEnemy.offsetLeft + (Math.random() * 40 - 20) + 'px';
+    feedbackNode.style.top = UI.battleClickEvent.pageY - UI.elements.battleOpponent.offsetTop + (Math.random() * 40 - 20) + 'px';
+    feedbackNode.style.left = UI.battleClickEvent.pageX - UI.elements.battleOpponent.offsetLeft + (Math.random() * 40 - 20) + 'px';
 
     feedbackNode.dataset.duration = 2;
     feedbackNode.style.animationDuration = `${feedbackNode.dataset.duration}s`;
@@ -512,7 +512,7 @@ const UI = {
    * @param {HTMLElement} damageNode
    */
   drawActionFeedback (node) {
-    UI.elements.battleEnemy.appendChild(node);
+    UI.elements.battleOpponent.appendChild(node);
     setTimeout(() => node.remove(), (node.dataset.duration * 1000) - 500);
   },
 
@@ -522,9 +522,9 @@ const UI = {
   drawDamage (damageNode) {
     UI.drawActionFeedback(damageNode);
 
-    UI.elements.battleEnemySprite.classList.add('damaged');
+    UI.elements.battleOpponentSprite.classList.add('damaged');
     clearTimeout(UI.damageHighlightClickTimeout);
-    UI.damageHighlightClickTimeout = setTimeout(() => UI.elements.battleEnemySprite.classList.remove('damaged'), UI.damageHighlightClickDuration * 1000);
+    UI.damageHighlightClickTimeout = setTimeout(() => UI.elements.battleOpponentSprite.classList.remove('damaged'), UI.damageHighlightClickDuration * 1000);
   },
 
   /**
@@ -546,8 +546,8 @@ const UI = {
 
     const party = UI.createTemplate(Template.party);
     party.id = 'party';
-    for (const monsterIdx in state.partyMonsters) {
-      const monster = state.partyMonsters[monsterIdx];
+    for (const monsterIdx in Memory.state.player.monsters) {
+      const monster = Memory.state.player.monsters[monsterIdx];
       const partyMonster = UI.createTemplate(Template.partyMonster);
 
       partyMonster.querySelector('[data-template-slot="sprite"]').src = `/modules/tuxemon/mods/tuxemon/gfx/sprites/battle/${monster.slug}-front.png`;
@@ -564,8 +564,8 @@ const UI = {
         }
 
         if (UI.partySelectionMode === 'select') {
-          state.activeMonster = monster;
-          state.activeTechnique = state.activeMonster.activeTechniques[0];
+          Memory.state.player.activeMonster = monster;
+          Memory.state.activeTechnique = Memory.state.player.activeMonster.activeTechniques[0];
 
           UI.drawActiveMonster();
           UI.drawActiveTechniques();
@@ -641,7 +641,7 @@ const UI = {
       },
     };
 
-    for (const item of state.inventory) {
+    for (const item of Memory.state.player.inventory) {
       const inventoryItemNode = UI.createTemplate(Template.inventoryItem);
 
       inventoryItemNode.querySelector('[data-template-slot="sprite"]').src = `/modules/tuxemon/mods/tuxemon/${item.sprite}`;
@@ -714,7 +714,7 @@ const UI = {
     const popup = UI.createPopup();
     const dialog = UI.createTemplate(Template.dialogSave);
 
-    const saveData = Game.save();
+    const saveData = Memory.save();
 
     dialog.querySelector('[data-template-slot="saveData"]').value = saveData;
     dialog.querySelector('[data-template-slot="saveClipboard"]').addEventListener('click', async () => {
@@ -735,7 +735,7 @@ const UI = {
     const dialog = UI.createTemplate(Template.dialogLoad);
 
     dialog.querySelector('[data-template-slot="load"]').addEventListener('click', () => {
-      Game.load(
+      Memory.load(
         dialog.querySelector('[data-template-slot="saveData"]').value.trim()
       );
author	Daniel Weipert <code@drogueronin.de>	2023-08-19 13:18:54 +0200
committer	Daniel Weipert <code@drogueronin.de>	2023-08-19 13:18:54 +0200
commit	218da95a4b387ee5ac25f168d1529419039f2e54 (patch)
tree	21375d6aae287da413cbfc1002c2c8eeb7bba1ed
parent	91d048ef0f994446aaee91e3afcbd99788e439d7 (diff)