Final(ish)

index.html

@@ -392,12 +392,33 @@
                 </div>
                 <div class="box">
                     <h2>Use Ability</h2>
+                    <select id="inp-ability-selector">
+                        <option>Custom</option>
+                        <option data-pool="might" data-cost="3">Golem Grip</option>
+                    </select>
                     <span id="dsp-ability-pool" class="warn">No pool selected!</span>
                     <strong>Initial cost</strong> <input type="number" id="inp-ability-cost" min-value="0" value="0">
                     <strong>Effort used</strong> <input type="number" id="inp-ability-effort" min-value="0" value="0">
                     <span id="dsp-ability-cost"></span>
                     <button id="btn-ability-do">Do it!</button>
                 </div>
+                <div class="box">
+                    <h2>Do a Task</h2>
+                    Training
+                    <select>
+                        <option>Inability</option>
+                        <option selected>Practised</option>
+                        <option>Trained</option>
+                        <option>Specialised</option>
+                    </select>
+                    Effort <input type="number">
+                    <button>Roll!</button>
+                    <button>Do it!</button>
+                </div>
+                <div class="box">
+                    <h2>Take Damage</h2>
+                    <input type="number"><button>Ouch!</button>
+                </div>
             </div>
         </div>
         <script>
@@ -435,6 +456,8 @@
          };
          const inpAbilityCost = document.getElementById("inp-ability-cost");
          const inpAbilityEffort = document.getElementById("inp-ability-effort");
+         const abilityRoller = document.getElementById("roll-ability");
+         const abilityCostDisplay = document.getElementById("ability-cost-display");
 
          const dspAbilityPool = document.getElementById("dsp-ability-pool");
          const dspAbilityCost = document.getElementById("dsp-ability-cost");
@@ -639,6 +662,8 @@
              return String(str).charAt(0).toUpperCase() + String(str).slice(1);
          };
 
+         const d20 = () => Math.floor(Math.random() * 20) + 1;
+
          const getSelectedPool = () => {
              var currentPoolSelector = document.querySelector("input[name=pool-selector]:checked");
 
@@ -714,6 +739,14 @@
              updateAbilityCostDisplay();
          };
 
+         const subtractPoolPoints = () => {
+             var abilityCost = calculateAbilityCost();
+
+             if (abilityCost === null) return;
+
+             updateAbilityCostDisplay();
+         };
+
          document.addEventListener(
              "DOMContentLoaded",
              () => {
@@ -751,6 +784,7 @@
 
                      loadCharacter(selectedID);
                  });
+                 btnAbilityDo.addEventListener("click", subtractPoolPoints);
 
                  clearSheet();
                  loadCharacterRoster(true);
@@ -758,6 +792,41 @@
                  updateAbilityCostDisplay();
              },
          );
+
+         abilitySelector.addEventListener(
+             "change",
+             (evt) => {
+                 var selectedOption = evt.target.selectedOptions[0];
+
+                 if (selectedOption.dataset.pool !== null) {
+                     var poolChooser = poolChoices[selectedOption.dataset.pool];
+                     poolChooser.checked = true;
+                     abilityInitialCost.value = Number(selectedOption.dataset.cost);
+                 }
+             },
+         );
+
+         abilityInitialCost.addEventListener("input", updateAbilityCost);
+
+         var abilityEffortChecking = false;
+
+         abilityEffort.addEventListener(
+             "input",
+             (evt) => {
+                 if (abilityEffortChecking) return;
+
+                 abilityEffortChecking = true;
+
+                 if (evt.target.value < 0) {
+                     evt.target.value = 0;
+                 } else if (evt.target.value >= inputMaxEffort.value) {
+                     evt.target.value = maxEffort.value;
+                 }
+
+                 updateAbilityCost();
+                 abilityEffortChecking = false;
+             },
+         );
         </script>
     </body>
 </html>