feat: Create the updateAbilityCostDisplay() helper

index.html

@@ -437,6 +437,7 @@
          const inpAbilityEffort = document.getElementById("inp-ability-effort");
 
          const dspAbilityPool = document.getElementById("dsp-ability-pool");
+         const dspAbilityCost = document.getElementById("dsp-ability-cost");
 
          var characterRoster = {};
          var currentCharacter = null;
@@ -494,6 +495,7 @@
              }
 
              currentCharacter = characterID;
+             updateAbilityCostDisplay();
          };
 
          const createCharacter = () => {
@@ -679,6 +681,25 @@
              return Math.max(0, cost + effortCost - poolEdge);
          };
 
+         const updateAbilityCostDisplay = () => {
+             var currentPool = getSelectedPool();
+             var cost = calculateAbilityCost();
+
+             clearContainer(dspAbilityCost);
+
+             if ((currentPool === null) || (cost === null)) return;
+
+             var currentPoolValue = Number(inpPoolValue[currentPool].value);
+
+             if (cost > currentPoolValue) {
+                 dspAbilityCost.classList.add("warn");
+             } else {
+                 dspAbilityCost.classList.remove("warn");
+             }
+
+             dspAbilityCost.appendChild(document.createTextNode(cost));
+         };
+
          document.addEventListener(
              "DOMContentLoaded",
              () => {
@@ -711,6 +732,7 @@
                  clearSheet();
                  loadCharacterRoster(true);
                  poolSelectionChanged();
+                 updateAbilityCostDisplay();
              },
          );
         </script>