From d5994439ae80ad33494e710d9bb18f659689fe35 Mon Sep 17 00:00:00 2001
From: Gergely Polonkai <gergely@polonkai.eu>
Date: Wed, 11 Jun 2025 20:05:43 +0200
Subject: [PATCH] feat: Create the ability use box

---
 index.html | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
diff --git a/index.html b/index.html
index 01aa414..43e50bf 100644
--- a/index.html
+++ b/index.html
@@ -184,6 +184,11 @@
              border-color: var(--box-border);
          }
 
+         .warn {
+             color: red;
+             font-weight: bold;
+         }
+
          /* Character roster box */
 
          #cont-character-roster {
@@ -269,6 +274,8 @@
          .input-unlocker:checked + label  .input-unlocked {
              display: initial;
          }
+
+         /* Ability use box */
         </style>
     </head>
     <body>
@@ -383,6 +390,14 @@
                         </label>
                     </div>
                 </div>
+                <div class="box">
+                    <h2>Use Ability</h2>
+                    <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>
         </div>
         <script>
@@ -419,6 +434,8 @@
              intellect: document.getElementById("inp-pool-edge-intellect"),
          };
 
+         const dspAbilityPool = document.getElementById("dsp-ability-pool");
+
          var characterRoster = {};
          var currentCharacter = null;
 
@@ -624,6 +641,20 @@
              return (currentPoolSelector === null) ? null : currentPoolSelector.value;
          };
 
+         const poolSelectionChanged = () => {
+             var currentPool = getSelectedPool();
+
+             clearContainer(dspAbilityPool);
+
+             if (currentPool === null) {
+                 dspAbilityPool.appendChild(document.createTextNode("No pool selected!"));
+                 dspAbilityPool.classList.add("warn");
+             } else {
+                 dspAbilityPool.appendChild(document.createTextNode(capitalize(currentPool)));
+                 dspAbilityPool.classList.remove("warn");
+             }
+         };
+
          document.addEventListener(
              "DOMContentLoaded",
              () => {
@@ -636,6 +667,10 @@
                      .querySelectorAll(".input-unlocker")
                      .forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
 
+                 document
+                     .querySelectorAll("input[name=pool-selector]")
+                     .forEach((elem) => {elem.addEventListener("change", poolSelectionChanged)});
+
                  btnNoCharCreateCharacter.addEventListener("click", createCharacter);
                  btnCreateCharacter.addEventListener("click", createCharacter);
                  btnSaveCharacter.addEventListener("click", saveCurrentCharacter);
@@ -649,6 +684,7 @@
 
                  clearSheet();
                  loadCharacterRoster(true);
+                 poolSelectionChanged();
              },
          );
         </script>
