Final(ish)

index.html

@@ -249,6 +249,10 @@
              display: initial;
          }
 
+         .pool-container input {
+             width: 30%;
+         }
+
          #btn-load-character {
              display: none;
          }
@@ -288,6 +292,8 @@
                     <strong>Campaign</strong> <input type="text" id="campaign-name">
                     <strong>Name</strong> <input type="text" id="character-name">
                     <strong>Max Effort</strong> <input type="number" id="max-effort" min="1" value="1">
+                    Armor <input type="number">
+                    <button>Save Character</button>
                 </div>
                 <div class="box">
                     <h2>Abilities</h2>
@@ -399,6 +405,26 @@
          const inputCampaignName = document.getElementById("campaign-name");
          const inputMaxEffort = document.getElementById("max-effort");
          const characterSelector = document.getElementById("character-roster");
+         const abilitySelector = document.getElementById("ability-selector");
+         const abilityInitialCost = document.getElementById("ability-cost");
+         const abilityEffort = document.getElementById("ability-effort");
+         const abilityRoller = document.getElementById("roll-ability");
+         const abilityCostDisplay = document.getElementById("ability-cost-display");
+         const poolChoices = {
+             might: document.getElementById("pool-selector-might"),
+             speed: document.getElementById("pool-selector-speed"),
+             intellect: document.getElementById("pool-selector-intellect"),
+         };
+         const poolValues = {
+             might: document.getElementById("pool-value-might"),
+             speed: document.getElementById("pool-value-speed"),
+             intellect: document.getElementById("pool-value-intellect"),
+         };
+         const poolEdges = {
+             might: document.getElementById("pool-edge-might"),
+             speed: document.getElementById("pool-edge-speed"),
+             intellect: document.getElementById("pool-edge-intellect"),
+         };
 
          var characterRoster = {};
          var currentCharacter = null;
@@ -580,6 +606,44 @@
              }
          };
 
+         const d20 = () => Math.floor(Math.random() * 20) + 1;
+
+         const getSelectedAttribute = () => {
+             var currentPoolSelector = document.querySelector("input[name=pool-selector]:checked");
+
+             return (currentPoolSelector === null) ? null : currentPoolSelector.value;
+         };
+
+         const getSelectedPool = () => {
+             if ((currentPool = getSelectedAttribute()) === null) {
+                 return 0;
+             }
+
+             return Number(poolValues[currentPool].value);
+         };
+
+         const getSelectedEdge = () => {
+             if ((currentPool = getSelectedAttribute()) === null) {
+                 return 0;
+             }
+
+             return Number(poolEdges[currentPool].value);
+         };
+
+         const calculateAbilityCost = () => {
+             var cost = Number(abilityInitialCost.value);
+             var usedEffort = Number(abilityEffort.value);
+             var effortCost = (usedEffort > 0) ? 3 + Math.max(usedEffort - 1, 0) * 2 : 0;
+             cost += effortCost - getSelectedEdge();
+
+             return Math.max(cost, 0);
+         };
+
+         const updateAbilityCost = () => {
+             var cost = calculateAbilityCost();
+             abilityCostDisplay.innerHTML = String(cost);
+         };
+
          document.addEventListener(
              "DOMContentLoaded",
              () => {
@@ -592,6 +656,41 @@
              },
          );
 
+         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;
+             },
+         );
+
          btnNoCharCreateCharacter.addEventListener("click", createCharacter);
 
          document