active techniques multiple

3 files changed, 90 insertions, 9 deletions

diff --git a/index.html b/index.html
index 94f298c..e569d47 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,17 @@
         <div id="battle__player"></div>
       </div>
 
+      <div id="techniques"></div>
+      <template id="tpl___technique">
+        <div class="techniques__technique">
+          <div class="techniques__technique__name"></div>
+          <div class="techniques__technique__types"></div>
+          <div class="techniques__technique__power"></div>
+          <div class="techniques__technique__accuracy"></div>
+          <div class="techniques__technique__range"></div>
+        </div>
+      </template>
+
       <div id="status">
         <div>Money: <span id="money"></span></div>
       </div>
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;
 
diff --git a/style.css b/style.css
index 5c4b2f6..b344c8a 100644
--- a/style.css
+++ b/style.css
@@ -37,6 +37,10 @@ img {
 .popup {
   background-color: #fff;
   padding: 0.25rem 0.5rem;
+
+  background-image: url('/modules/tuxemon/mods/tuxemon/gfx/ui/background/spyder_empty.png');
+  background-size: cover;
+  background-position: center;
 }
 
 #battle {
@@ -176,6 +180,7 @@ img {
   transition: background-color;
 }
 
+
 .moveset__item {
   font-size: 1.5rem;
   border: 1px solid #000;
@@ -183,20 +188,40 @@ img {
   margin: 0.5em 0;
   line-height: 1em;
   cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.75);
 }
+
 .moveset__item:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 .moveset__item[disabled] {
   filter: grayscale(100%);
   opacity: 0.5;
 }
+
+.moveset__item[selected] {
+  border-color: green;
+  color: green;
+}
+
 .moveset__item img {
   height: 1em;
   width: 1em;
 }
 
 
+
+#techniques {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+.techniques__technique {}
+
+
+
 #status {
   color: #fff;
   background-color: #000;
@@ -204,6 +229,7 @@ img {
 }
 
 
+
 #menu {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -218,6 +244,7 @@ img {
 }
 
 
+
 #party {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;