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>
@@ -412,7 +433,6 @@
          const btnCreateCharacter = document.getElementById("btn-create-character");
          const btnNoCharCreateCharacter = document.getElementById("btn-no-char-create-character");
          const btnSaveCharacter = document.getElementById("btn-save-character");
-         const btnAbilityDo = document.getElementById("btn-ability-do");
 
          const inpCharacterRoster = document.getElementById("inp-character-roster");
          const inpCampaignName = document.getElementById("inp-campaign-name");
@@ -436,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");
@@ -640,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");
 
@@ -716,23 +740,11 @@
          };
 
          const subtractPoolPoints = () => {
-             var currentPool = getSelectedPool();
              var abilityCost = calculateAbilityCost();
-             var poolValue = Number(inpPoolValue[currentPool].value);
 
              if (abilityCost === null) return;
 
              updateAbilityCostDisplay();
-
-             if (poolValue < abilityCost) {
-                 alert("You cannot affort to use this ability now.");
-
-                 return;
-             }
-
-             inpPoolValue[currentPool].value = poolValue - abilityCost;
-
-             updateAbilityCostDisplay();
          };
 
          document.addEventListener(
@@ -780,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>