1 files changed, 52 insertions, 9 deletions

diff --git a/script.js b/script.js
index 4e5727d..2fab2fc 100644
--- a/script.js
+++ b/script.js
@@ -162,6 +162,8 @@ class Monster {
   experienceModifier = 1;
   moneyModifier = 1;
 
+  activeTechniques = [];
+
   constructor (slug) {
     this.slug = slug;
 
@@ -227,6 +229,10 @@ class Monster {
     return slugToName(this.slug);
   }
 
+  getLearnableTechniques () {
+    return this.moveset.filter((move) => this.level >= move.learned_at);
+  }
+
   canLevelUp () {
     return this.exp >= this.getExperienceRequired();
   }
@@ -352,6 +358,10 @@ class Technique {
     this.resetToBase();
   }
 
+  get name () {
+    return slugToName(this.slug);
+  }
+
   get types () {
     return DB.techniques[this.slug].types;
   }
@@ -616,6 +626,7 @@ function slugToName (slug) {
   const templatePopup = document.querySelector('#tpl___popup').innerHTML;
   const templateMovesetList = document.querySelector('#tpl___moveset__list').innerHTML;
   const templateMovesetItem = document.querySelector('#tpl___moveset__item').innerHTML;
+  const templateTechnique = document.querySelector('#tpl___technique').innerHTML;
 
   const party = document.querySelector('#party');
   const money = document.querySelector('#money');
@@ -746,6 +757,8 @@ function slugToName (slug) {
         battlePlayer.appendChild(battleMonster);
 
         UI.setActiveTechnique();
+
+        UI.setActiveTechniques();
       } else {
         battleMonster.classList.add('battle__monster--enemy');
 
@@ -777,6 +790,17 @@ function slugToName (slug) {
           + state.activeTechnique.types.map((type) => UI.createElementTypeIcon(type)).join('');
     },
 
+    setActiveTechniques () {
+      const techniquesNode = document.querySelector('#techniques');
+      techniquesNode.replaceChildren();
+
+      for (const technique of state.activeMonster.activeTechniques) {
+        const techniqueNode = UI.getTemplate(templateTechnique);
+        techniqueNode.querySelector('.techniques__technique__name').innerHTML = technique.name;
+        techniquesNode.appendChild(techniqueNode);
+      }
+    },
+
     async chooseActiveTechnique () {
       let activeMoveIndex = 0;
       while ((await fetchTechnique(state.activeMonster.moveset[activeMoveIndex].technique)).power === 0) {
@@ -800,6 +824,10 @@ function slugToName (slug) {
         movesetItem.querySelector('.moveset__item__power').innerHTML = technique.power;
         movesetItem.querySelector('.moveset__item__level').innerHTML = move.level_learned;
 
+        if (state.activeMonster.activeTechniques.find((item) => item.slug === technique.slug)) {
+          movesetItem.setAttribute('selected', true);
+        }
+
         movesetItem.addEventListener('click', () => {
           if (movesetItem.getAttribute('disabled')) {
             return false;
@@ -808,7 +836,14 @@ function slugToName (slug) {
           state.activeTechnique = technique;
           UI.setActiveTechnique();
 
-          popup.remove();
+          if (movesetItem.getAttribute('selected')) {
+            movesetItem.removeAttribute('selected');
+            state.activeMonster.activeTechniques.splice(state.activeMonster.activeTechniques.findIndex((item) => item.slug === technique.slug), 1);
+          } else {
+            movesetItem.setAttribute('selected', true);
+            state.activeMonster.activeTechniques.push(technique);
+          }
+          UI.setActiveTechniques();
         });
 
         if (state.activeMonster.level < move.level_learned) {
@@ -1005,7 +1040,9 @@ function slugToName (slug) {
     applyTechniqueEffect (technique, user, target) {
       for (const effect of technique.combatEffects) {
         if (effect === 'money') {
-          state.money += Math.floor(Math.random() * target.level);
+          if (!techniqueHit) {
+            state.money += Math.floor(Math.random() * target.level);
+          }
         }
       }
 
@@ -1033,33 +1070,39 @@ function slugToName (slug) {
         }
       }
     },
+
+    damage () {
+      const damage = simpleDamageCalculation(state.activeTechnique, state.activeMonster, state.enemy.monster);
+      UI.createDamage(clickEvent, damage);
+
+      state.enemy.monster.hp -= damage;
+    },
   };
 
   UI.setActiveMonster();
   UI.setEnemyMonster();
 
+  let techniqueHit;
   let clickEvent;
   let turnEndPhaseEvents = [];
   document.querySelector('#battle__enemy').addEventListener('click', async (event) => {
     clickEvent = event;
 
     const accuracy = Math.random();
-    const hit = state.activeTechnique.accuracy >= accuracy;
+    techniqueHit = state.activeTechnique.accuracy >= accuracy;
 
-    if (hit) {
+    if (techniqueHit) {
       await Game.useTechnique(state.activeTechnique, state.activeMonster, state.enemy.monster);
     }
 
     await Game.applyStatusEffect(state.activeMonster, state.enemy.monster);
     await Game.applyStatusEffect(state.enemy.monster, state.activeMonster);
 
-    if (hit) {
-      Game.applyTechniqueEffect(state.activeTechnique, state.activeMonster, state.enemy.monster);
+    Game.applyTechniqueEffect(state.activeTechnique, state.activeMonster, state.enemy.monster);
 
-      const damage = simpleDamageCalculation(state.activeTechnique, state.activeMonster, state.enemy.monster);
-      UI.createDamage(event, damage);
+    if (techniqueHit) {
+      Game.damage();
 
-      state.enemy.monster.hp -= damage;
       if (state.enemy.monster.hp <= 0) {
         const faintedMonster = state.enemy.monster;