From 76fbb6c3003eb757f8694a114e633ca84a8515af Mon Sep 17 00:00:00 2001
From: Randy Knapp <randy.bravo2@gmail.com>
Date: Mon, 1 Jun 2020 10:59:52 -0700
Subject: [PATCH] [Zafir] Combat attribute calculator

---
 Zafir/zafir.css  | 40 ++++++++++++++++++++
 Zafir/zafir.html | 97 ++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 122 insertions(+), 15 deletions(-)

diff --git a/Zafir/zafir.css b/Zafir/zafir.css
index d4068ac2c4..ec7a104bb2 100644
--- a/Zafir/zafir.css
+++ b/Zafir/zafir.css
@@ -126,6 +126,38 @@ select.sheet-dtype {
   margin-top:12px;
 }
 
+.sheet-attrcol1 {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(20%);
+  margin-right: 20px;
+}
+
+.sheet-attrcol2 {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(50%);
+  margin-right: 20px;
+}
+
+.sheet-attrcol3 {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(24%);
+  margin-right: 0px;
+}
+
+.sheet-attrvalue {
+  display: inline-block;
+  width: 24px;
+  text-align: center;
+}
+
+.sheet-attrtotal {
+  border-radius: 5px;
+  border: 2px solid #c1912e;
+}
+
 .sheet-gmtools select,
 .sheet-res select,
 .sheet-atk select {
@@ -301,6 +333,10 @@ div.itemcontrol {
   border: 2px solid #AAA;
 }
 
+.sheet-skillroller {
+  border: 2px solid #c1912e;
+}
+
 .sheet-attack label,
 .sheet-paneltracker label {
   vertical-align: middle;
@@ -474,6 +510,10 @@ input[type=checkbox] {
   margin-bottom: 6px;
 }
 
+.sheet-combatattr .sheet-tooltiptext {
+  left: 10%;
+}
+
 .sheet-tooltip .sheet-tooltiptext b {
   font-size: 14px;
   font-weight: bold;
diff --git a/Zafir/zafir.html b/Zafir/zafir.html
index bd47edd3bc..005e98140e 100644
--- a/Zafir/zafir.html
+++ b/Zafir/zafir.html
@@ -23,7 +23,7 @@
 
     <!-- Second Row: Base Attributes, Combat Attributes, Status -->
     <div class="3colrow attributes">
-        <div class="col">
+        <div class="attrcol1">
             <h3>Base Attributes</h3>
             <label>Toughness:</label><input type="number" name="attr_toughness" /><br/>
             <label>Agility:</label><input type="number" name="attr_agility" /><br/>
@@ -31,20 +31,47 @@
             <label>Discipline:</label><input type="number" name="attr_discipline" />
         </div>
 
-        <div class="col">
+        <div class="attrcol2 combatattr">
             <h3>Combat Attributes</h3>
-            <label class="tooltip">Max HP:<span class="tooltiptext"><b>Max HP:</b><br/>2<br/>+&nbsp;Half&nbsp;Level<br/>+&nbsp;Toughness<br/>+&nbsp;Body&nbsp;Armor<br/>+&nbsp;Other</span></label><input type="number" name="attr_hp_max" /><br/>
-            <label class="tooltip">Speed:<span class="tooltiptext"><b>Speed:</b><br/>6<br/>+&nbsp;Double&nbsp;Agility<br/>+&nbsp;Equipment<br/>+&nbsp;Abilities<br/>+&nbsp;Other</span></label><input type="number" name="attr_speed" /><br/>
-            <label class="tooltip">Aim:<span class="tooltiptext"><b>Aim:</b><br/>Accuracy<br/>+&nbsp;Equipment<br/>+&nbsp;Abilities<br/>+&nbsp;Other</span></label><input type="number" name="attr_aim" /><br/>
-            <label class="tooltip">Will:<span class="tooltiptext"><b>Will:</b><br/>Discipline<br/>+&nbsp;Equipment<br/>+&nbsp;Abilities<br/>+&nbsp;Other</span></label><input type="number" name="attr_will" />
+            <label>Max HP:</label><span class="labellike attrvalue attrtotal" name="attr_hp_max"></span>
+                <span class="labellike attrvalue">=</span>
+                <span class="labellike attrvalue tooltip">2<span class="tooltiptext">Base HP: 2</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><span class="labellike attrvalue" name="attr_halflevel"></span><span class="tooltiptext">Half Level</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><span class="labellike attrvalue" name="attr_toughness"></span><span class="tooltiptext">Toughness</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><span class="labellike attrvalue" name="attr_bahp"></span><span class="tooltiptext">Body Armor: HP</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><input type="number" name="attr_maxhpother" value="0" /><span class="tooltiptext">Other</span></span>
+                <br/>
+            <label>Speed:</label><span class="labellike attrvalue attrtotal" name="attr_speed"></span>
+                <span class="labellike attrvalue">=</span>
+                <span class="labellike attrvalue tooltip">6<span class="tooltiptext">Base Speed: 6</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><span class="labellike attrvalue" name="attr_doubleagility"></span><span class="tooltiptext">Agility × 2</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><input type="number" name="attr_speedother" value="0" /><span class="tooltiptext">Other</span></span>
+                <br/>
+            <label>Aim:</label><span class="labellike attrvalue attrtotal" name="attr_aim"></span>
+                <span class="labellike attrvalue">=</span>
+                <span class="tooltip"><span class="labellike attrvalue" name="attr_accuracy"></span><span class="tooltiptext">Accuracy</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><input type="number" name="attr_aimother" value="0" /><span class="tooltiptext">Other</span></span>
+                <br/>
+            <label>Will:</label><span class="labellike attrvalue attrtotal" name="attr_will"></span>
+                <span class="labellike attrvalue">=</span>
+                <span class="tooltip"><span class="labellike attrvalue" name="attr_discipline"></span><span class="tooltiptext">Discipline</span></span>
+                <span class="labellike attrvalue">+</span>
+                <span class="tooltip"><input type="number" name="attr_willother" value="0" /><span class="tooltiptext">Other</span></span>
         </div>
 
-        <div class="col">
+        <div class="attrcol3 nowrap">
             <h3>Status</h3>
             <label>HP <span style="font-family:Pictos">k</span>:</label><input type="number" name="attr_hp" /><span class="labellike">&nbsp;/&nbsp;</span><span class="labellike" name="attr_hp_max"></span><br/>
             <label>AP <span style="font-family:'Pictos Three'">b</span>:</label><input type="number" name="attr_ap" /><br/>
             <label>SP <span style="font-family:Pictos">L</span>:</label><input type="number" name="attr_sp" /><br/>
-            <label>Focus:</label><input type="number" name="attr_focus" />
+            <label>Focus:</label><input type="number" name="attr_focus" /><span class="labellike">&nbsp;/&nbsp;</span><input type="number" name="attr_focus_max" />
         </div>
     </div>
 
@@ -53,7 +80,7 @@
     <br />
     <input type="hidden" class="tabstoggle" name="attr_sheetTab" value="atk" />
     <div class="tabrow">
-        <button type="action" name="act_atk" class="atkbtn">Combat Panel</button>
+        <button type="action" name="act_atk" class="atkbtn">Combat</button>
         <button type="action" name="act_aab" class="aabbtn">Abilities</button>
         <button type="action" name="act_eqp" class="eqpbtn">Equipment</button>
         <button type="action" name="act_res" class="resbtn">Responsibilities</button>
@@ -62,13 +89,13 @@
     </div>
     <br />
 
-    <!-- Combat Panel -->
+    <!-- Combat -->
     <div class="atk">
         <div class="2colrow">
             <div class="col1 nowrap">
                 <input type="hidden" class="tabstoggle" name="attr_sheetTabAttacks" value="cwp" />
                 <div class="tabrow">
-                    <h2>Combat Panel</h2>
+                    <h2>Combat</h2>
                     <button type="action" name="act_cwp" class="cwpbtn">Weapon Attack</button>
                     <button type="action" name="act_cwl" class="cwlbtn">Will Attack</button>
                 </div>
@@ -425,7 +452,7 @@
                 </select><br />
                 <label>Bonus Skill:</label><input style="width:18%;position:relative;right:3px;margin-right:93px;" type="number" value="0" name="attr_bonusskill" />
                 <label>Bonus Crit:</label><input style="width:18%;position:relative;right:3px;" type="number" value="0" name="attr_bonusskillcrit" />
-                <div class="attack clearfix">
+                <div class="attack clearfix skillroller">
                     <button type="roll" name="roll_skillaction" class="btn" value="&{template:zafirskillaction} {{name=@{skillname}}} {{aim=[[(@{skilldice})d6>5]]}} {{crit=[[(@{bonusskillcrit})d6>6]]}} {{responsibility=@{skillresponsibility}}} {{player=@{char_name}}}">Skill Roll</button>
                     <select name="attr_skillname" style="width:110px;margin-right:10px;">
                         <option value="Coerce">Coerce</option>
@@ -501,7 +528,7 @@
     <input type="hidden" class="tabstoggle" name="attr_gmTab" value="gmcombat" />
     <div class="tabrow">
         <h2>Game Master's Toolkit</h2>
-        <button type="action" name="act_gmcombat" class="gmcombatbtn">Combat Panel</button>
+        <button type="action" name="act_gmcombat" class="gmcombatbtn">Combat</button>
         <button type="action" name="act_gmunits" class="gmunitsbtn">Enemy Units</button>
     </div>
     <br />
@@ -792,7 +819,7 @@ buttonlistAbilities.forEach(button => {
     });
 });
 
-// Combat panel sheet tab bar
+// Combat sheet tab bar
 const buttonlistAttacks = ["cwp", "cwl"];
 buttonlistAttacks.forEach(button => {
     on(`clicked:${button}`, function() {
@@ -802,7 +829,7 @@ buttonlistAttacks.forEach(button => {
     });
 });
 
-// Combat panel sheet tab bar
+// Combat sheet tab bar
 const buttonlistGm = ["gmcombat", "gmunits"];
 buttonlistGm.forEach(button => {
     on(`clicked:${button}`, function() {
@@ -837,6 +864,46 @@ function sheetOpenAndAttrChanged(inputs) {
     return "sheet:opened change:" + inputs.join(" change:");
 }
 
+// Setting the calculated attributes
+const combatAttrInputs = [
+    "level",
+    "toughness",
+    "agility",
+    "accuracy",
+    "discipline",
+    "maxhpother",
+    "speedother",
+    "aimother",
+    "willother",
+    "bahp"
+];
+on(sheetOpenAndAttrChanged(combatAttrInputs), function() {
+    getAttrs(combatAttrInputs, function(values) {
+        let level = parseInt(values.level)||0;
+        let toughness = parseInt(values.toughness)||0;
+        let agility = parseInt(values.agility)||0;
+        let accuracy = parseInt(values.accuracy)||0;
+        let discipline = parseInt(values.discipline)||0;
+        let maxhpother = parseInt(values.maxhpother)||0;
+        let speedother = parseInt(values.speedother)||0;
+        let aimother = parseInt(values.aimother)||0;
+        let willother = parseInt(values.willother)||0;
+        let bodyArmorHP = parseInt(values.bahp)||0;
+
+        let halflevel = Math.floor(level / 2);
+        let doubleAgility = (agility * 2);
+
+        setAttrs({
+            halflevel: halflevel,
+            doubleagility: doubleAgility,
+            hp_max: 2 + halflevel + toughness + bodyArmorHP + maxhpother,
+            speed: 6 + doubleAgility + speedother,
+            aim: accuracy + aimother,
+            will: discipline + willother
+        });
+    });
+});
+
 // Setting the aim dice for weapon attacks
 const attackDiceInputs = [
     "wpaimdice",