feat: Create the ability use box

2025-06-11 20:05:43 +02:00
parent dfbf305206
commit d5994439ae
1 changed files with 36 additions and 0 deletions
--- 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>