Draft: Create the Use Ability box

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>