From feb79d2fb121054e81a0d62d4d42de95df5e7041 Mon Sep 17 00:00:00 2001
From: Gergely Polonkai <gergely@polonkai.eu>
Date: Fri, 6 Jun 2025 01:46:53 +0200
Subject: [PATCH] Draft: Create the Use Ability box

---
 index.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index ab2da30..b58b7a5 100644
--- a/index.html
+++ b/index.html
@@ -282,14 +282,14 @@
                 <button id="btn-no-char-create-character">Create one</button>
             </div>
             <div id="character-container">
-                <div id="character-base-data-container" class="box">
+                <div class="box">
                     <h2>Character data</h2>
                     <div id="character-id-container"></div>
                     <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">
                 </div>
-                <div id="abilities-container" class="box">
+                <div class="box">
                     <h2>Abilities</h2>
                     <div class="pool-container">
                         <h3>
@@ -358,6 +358,18 @@
                         </label>
                     </div>
                 </div>
+                <div class="box">
+                    <h2>Use Ability</h2>
+                    <select id="ability-selector">
+                        <option>Custom</option>
+                        <option data-pool="might" data-cost="3">Golem Grip</option>
+                        <option data-pool="speed" data-cost="1">Some Speedy Thing</option>
+                    </select>
+                    Initial cost <input type="number" id="ability-cost">
+                    Effort <input type="number" id="ability-effort">
+                    <span id="ability-cost-display"></span>
+                    <button id="roll-ability">Do it!</button>
+                </div>
             </div>
         </div>
         <script>