[Zafir] Some trackers on the attacks page

Zafir/zafir.css

@@ -90,6 +90,30 @@ select.sheet-dtype {
   width: 120px;
 }
 
+.sheet-tracker .repitem {
+  margin-bottom: 4px;
+}
+
+.sheet-atk button.sheet-btn {
+  float: right;
+  background-color: #EEE;
+  border: none;
+  color: #777;
+  font-size: 14px;
+  padding: 10px 14px;
+  font-weight: bold;
+  border-radius: 8px;
+  outline: none;
+}
+
+.sheet-atk button:hover {
+  background-color: #DDD;
+}
+
+.sheet-atk button:active {
+  background-color: #CCC;
+}
+
 .sheet-eba .sheet-short {
   width: 30px;
 }
@@ -257,6 +281,26 @@ button.sheet-othbtn {
   outline: none;
 }
 
+button.sheet-atkbtn:hover,
+button.sheet-aabbtn:hover,
+button.sheet-pabbtn:hover,
+button.sheet-eqpbtn:hover,
+button.sheet-resbtn:hover,
+button.sheet-invbtn:hover,
+button.sheet-othbtn:hover {
+  background-color: #DDD;
+}
+
+button.sheet-atkbtn:active,
+button.sheet-aabbtn:active,
+button.sheet-pabbtn:active,
+button.sheet-eqpbtn:active,
+button.sheet-resbtn:active,
+button.sheet-invbtn:active,
+button.sheet-othbtn:active {
+  background-color: #CCC;
+}
+
 .sheet-tabstoggle[value="atk"] ~ div button.sheet-atkbtn,
 .sheet-tabstoggle[value="aab"] ~ div button.sheet-aabbtn,
 .sheet-tabstoggle[value="pab"] ~ div button.sheet-pabbtn,
@@ -292,6 +336,20 @@ button.sheet-ehgbtn {
   outline: none;
 }
 
+button.sheet-epwbtn:hover,
+button.sheet-eswbtn:hover,
+button.sheet-ebabtn:hover,
+button.sheet-ehgbtn:hover {
+  background-color: #DDD;
+}
+
+button.sheet-epwbtn:active,
+button.sheet-eswbtn:active,
+button.sheet-ebabtn:active,
+button.sheet-ehgbtn:active {
+  background-color: #CCC;
+}
+
 .sheet-tabstoggle[value="epw"] ~ div button.sheet-epwbtn,
 .sheet-tabstoggle[value="esw"] ~ div button.sheet-eswbtn,
 .sheet-tabstoggle[value="eba"] ~ div button.sheet-ebabtn,

Zafir/zafir.html

@@ -60,8 +60,36 @@
 <br />
 
 <div class='atk'>
+    <button class="btn">Initialize Combat</button>
     <h2>Attacks &amp; Actions</h2>
-    <span>TODO</span>
+    <div class="3colrow">
+        <div class="col">
+            <h3>Weapon Attack</h3>
+        </div>
+        <div class="col">
+            <h3>Will Attack</h3>
+        </div>
+        <div class="col">
+            <h3>Ammo Tracker</h3>
+            <div class="inset">
+                <label style="width:110px"><span name="attr_wpname" value="<primary weapon>"></span>:</label><input type="number" name="attr_wpammo" /><span class="labellike">&nbsp;/&nbsp;</span><span class="labellike" name="attr_wpammo_max"></span><br/>
+            </div>
+            <h3>Cooldown Tracker</h3>
+            <div class="inset nowrap tracker">
+                <fieldset class="repeating_cooldowntracker">
+                    <input style="width:80%" type="text" spellcheck="false" name="attr_cooldownname" />
+                    <input style="width:18%" type="number" name="attr_cooldownvalue" />
+                </fieldset>
+            </div>
+            <h3>Charges Tracker</h3>
+            <div class="inset nowrap tracker">
+                <fieldset class="repeating_chargetracker">
+                    <input style="width:80%" type="text" spellcheck="false" name="attr_chargename" />
+                    <input style="width:18%" type="number" name="attr_chargevalue" />
+                </fieldset>
+            </div>
+        </div>
+    </div>
 </div>
 
 <div class='aab'>
@@ -194,7 +222,7 @@
                         <label>Crit Dmg:</label><input type="number" name="attr_wpcritdmg" />
                     </div>
                     <div class="colx">
-                        <label>Ammo:</label><input type="number" name="attr_wpammo" />
+                        <label>Max Ammo:</label><input type="number" name="attr_wpammo_max" />
                     </div>
                 </div>
             </div>
@@ -235,9 +263,6 @@
                     <div class="colx">
                         <label>Crit Dmg:</label><input type="number" name="attr_wscritdmg" />
                     </div>
-                    <div class="colx">
-                        <label>Ammo:</label><input type="number" name="attr_wsammo" />
-                    </div>
                 </div>
             </div>
             <div class="col">
@@ -256,15 +281,15 @@
         <div class="2colrow">
             <div class="col">
                 <label>Name:</label><input type="text" spellcheck="false" name="attr_baname" /><br/>
-                <div class="3colrowx">
+                <div class="3colrowx nowrap">
                     <div class="colx">
-                        <label class="short">HP:</label><input type="number" name="attr_bahp" />
+                        <label>HP:</label><input type="number" name="attr_bahp" />
                     </div>
                     <div class="colx">
-                        <label class="short">AP:</label><input type="number" name="attr_baap" />
+                        <label style="position:relative;left:50px;">AP:</label><input type="number" name="attr_baap" />
                     </div>
                     <div class="colx">
-                        <label class="short">SP:</label><input type="number" name="attr_basp" />
+                        <label style="position:relative;left:50px;">SP:</label><input type="number" name="attr_basp" />
                     </div>
                 </div>
                 <div class="clearfix">
@@ -331,7 +356,7 @@
     <div class="3colrow">
         <div class="col">
             <h2>Money</h2>
-            <label class="short money">₹</label><input type="number" class="expand" name="attr_money" /><br/>
+            <label class="short money" style="font-family:Helvetica, Arial">₹</label><input type="number" class="expand" name="attr_money" /><br/>
         </div>
         <div class="col">
             <h2>Inventory</h2>