Added Basic Health Tracker Functionality

.gitignore

@@ -1,2 +1,3 @@
 .parcel-cache
 node_modules
+Old_Code

components/_healthBox.css

@@ -1,79 +1,66 @@
-.healthWrapper {
+.repcontainer[data-groupname="repeating_physicaltracker"] {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, auto);
-  gap: 1rem;
+  justify-items: center;
-  > {
+  gap: 0px;
+  justify-content: start;
 
-    h3 {
+  > * {
-      color: #aaaaee;
+      margin: -1px;
+    }
+  
+  > .repitem {
+
+    width: fit-content;
+    height: fit-content;
+      
+    > .itemcontrol {
+      display: none !important;
+    }
+    > button {
+
+      > span.woundModDisplay {
+        content: "-1";
+        top: 2px;
+        right: 4px;
+        color: #bfbdba;
+        position: absolute;
+      }
+
+      background-color: #444444;
+      border: 2px solid #550000;
+      border-radius: 0px;
+      appearance: none;
+      width: 3.5rem;
+      height: 3.5rem;
+      border-radius: 3px;
+      padding: 0px;
+      position: relative;
+      grid-span: 1span;
+      margin: 0px;
     }
 
-    .healthContainer {
+    > div {
-      display: grid;
+      pointer-events: none;
-      grid-template-columns: repeat(3, auto);
+    }
-      justify-items: center;
-      gap: 0px;
-      justify-content: start;
-      > {
-        * {
-          margin: -1px;
-        }
-        
-        label  {
-          &.healthTrackerBox {
-            cursor: pointer;
-            order: 1;
-            background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg);
-            background-color: #444444;
-            background-size: 90%;
-            background-position: center;
-            background-repeat: no-repeat;
-            z-index: 1;
-            position: relative;
-            border: 2px solid #550000;
-            border-radius: 0px;
-            appearance: none;
-            width: 3.5rem;
-            height: 3.5rem;
-            border-radius: 3px;
-            padding: 0px;
 
-            &.reset {
+    > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button {
-              order: 2;
+      > div {
-            }
+        background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
-  
+        background-size: 100%;
-            > span {
+        background-position: center center;
-              position: absolute;
+        background-repeat: no-repeat;
-              content: "-1";
+        height: 100%;
-              top: 2px;
+        width: 100%;
-              right: 4px;
+      }
-              display: none;
-            }
-          }
-        }
 
-        input:checked {
+      > span.woundModDisplay {
-          & + .healthTrackerBox {
+        display: none;
-            position: absolute;
-            opacity: 0;
-            z-index: 0;
-
-            > span {
-              display: block;
-            }
-          } 
-
-          & ~ .healthTrackerBox {
-            order: 3;
-            background-color: #444444;
-            background-image: none;
-
-            > span {
-              display: block;
-            }
-          }
-        }
       }
     }
   }
+}
+
+.repcontrol[data-groupname="repeating_physicaltracker"] {
+  display: none !important;
 }

components/_healthBox.pug

@@ -1,14 +1,10 @@
-.healthWrapper
+.healthBox
-  include ./_healthBoxContainer
+  button(type="action" name="act_testBox" title="%{testBox}" value="2") Add
-  h3 Stun
+  button(type="action" name="act_clearBoxes" title="%{clearBoxes}" value="1") Remove
-  h3 Physical
+  fieldset(class="repeating_physicaltracker")
-  h3 Overflow
+    input(type="hidden" name="attr_boxNum" value="0")
-  +healthContainer(30).stun     //Will/2 + 8
+    input(type="hidden", name="attr_isCrossed" value="false")
-  +healthContainer(30).physical //Body/2 + 8
+    input(type="hidden", name="attr_woundMod" value="0")
-  +healthContainer(30).overflow //Body*2
+    button(type='action' name="act_check-phys" title="%{checkPhys}" value="3")
-  .stunInfo
+      span.woundModDisplay(name="attr_woundMod") 0
-    input(type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_wil}/2)+8-@{stunWounds}")
+      div
-  .physicalInfo
-    input(type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_bod}/2)+8-@{physicalWounds}")
-  .overflowInfo
-    input(type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_wil}/2)+8-@{stunWounds}")

components/_healthBoxBox.pug

@@ -1,12 +0,0 @@
-mixin healthBox(number)
-  - let starter = number == 0
-  - let modifier = Math.floor(number / 3) * -1
-  - if (modifier == 0) modifier = ''
-  if starter
-    input.hidden.disp(id=`${attributes.class.substring(0,2)}B${number}` type="radio" name=`attr_${attributes.class}Wounds` value=number checked="checked")
-    label.healthTrackerBox.reset(for=`${attributes.class.substring(0,2)}B${number}`)
-      span.woundmodifier #{modifier}
-  else
-    input.hidden.disp(id=`${attributes.class.substring(0,2)}B${number}` type="radio" name=`attr_${attributes.class}Wounds` value=number)
-    label.healthTrackerBox(for=`${attributes.class.substring(0,2)}B${number}`)
-      span.woundmodifier #{modifier}

components/_healthBoxContainer.pug

@@ -1,5 +0,0 @@
-mixin healthContainer(count)
-  div(class='healthContainer ' + attributes.class)
-    include ./_healthBoxBox
-    - for (var i = 0; i < count; i++)
-      +healthBox(i)(class=attributes.class)

main.css

@@ -28,16 +28,27 @@
             padding: 0px;
             text-align: center;
             vertical-align: middle;
+            /*color: white;*/
+            padding: 2px;
 
             &[type=roll] {
                 background-color: #550000;
                 border: 0;
+                padding: 1px;
                 width: 1.5em;
                 height: 1.5em;
                 background-image: none;
                 color: white;
                 border-radius: 8px;
                 box-shadow: none;
+                position: relative;
+
+                &::before {
+                    width: 100%;
+                    height: 100%;
+                    vertical-align: middle;
+                    text-align: center;
+                }
             }
         }
         

output/main.css

@@ -2,17 +2,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
   display: block;
 }
 
-.healthWrapper {
+.repcontainer[data-groupname="repeating_physicaltracker"] {
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
-  display: grid;
-}
-
-.healthWrapper > h3 {
-  color: #aae;
-}
-
-.healthWrapper > .healthContainer {
   grid-template-columns: repeat(3, auto);
   justify-content: start;
   justify-items: center;
@@ -20,59 +10,64 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
   display: grid;
 }
 
-.healthWrapper > .healthContainer > * {
+.repcontainer[data-groupname="repeating_physicaltracker"] > * {
   margin: -1px;
 }
 
-.healthWrapper > .healthContainer > label.healthTrackerBox {
+.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem {
-  cursor: pointer;
+  width: -webkit-fit-content;
-  z-index: 1;
+  width: -moz-fit-content;
-  -webkit-appearance: none;
+  width: fit-content;
-  appearance: none;
+  height: -webkit-fit-content;
-  width: 3.5rem;
+  height: -moz-fit-content;
-  height: 3.5rem;
+  height: fit-content;
-  background-color: #444;
-  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 90%;
-  border: 2px solid #500;
-  border-radius: 3px;
-  order: 1;
-  padding: 0;
-  position: relative;
 }
 
-.healthWrapper > .healthContainer > label.healthTrackerBox.reset {
+.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > .itemcontrol {
-  order: 2;
+  display: none !important;
 }
 
-.healthWrapper > .healthContainer > label.healthTrackerBox > span {
+.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button > span.woundModDisplay {
   content: "-1";
-  display: none;
+  color: #bfbdba;
   position: absolute;
   top: 2px;
   right: 4px;
 }
 
-.healthWrapper > .healthContainer > input:checked + .healthTrackerBox {
+.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button {
-  opacity: 0;
+  -webkit-appearance: none;
-  z-index: 0;
+  appearance: none;
-  position: absolute;
+  width: 3.5rem;
-}
+  height: 3.5rem;
-
+  grid-span: 1span;
-.healthWrapper > .healthContainer > input:checked + .healthTrackerBox > span {
-  display: block;
-}
-
-.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox {
   background-color: #444;
-  background-image: none;
+  border: 2px solid #500;
-  order: 3;
+  border-radius: 3px;
+  margin: 0;
+  padding: 0;
+  position: relative;
 }
 
-.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox > span {
+.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > div {
-  display: block;
+  pointer-events: none;
+}
+
+.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > div {
+  height: 100%;
+  width: 100%;
+  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > span.woundModDisplay {
+  display: none;
+}
+
+.repcontrol[data-groupname="repeating_physicaltracker"] {
+  display: none !important;
 }
 
 .attr-rolls {
@@ -162,7 +157,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
   border: 0;
   border-radius: 1em;
   margin: 0 2px;
-  padding: 0;
+  padding: 2px;
 }
 
 .sheetform .charactersheet button[type="roll"] {
@@ -174,6 +169,15 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
   background-image: none;
   border: 0;
   border-radius: 8px;
+  padding: 1px;
+  position: relative;
+}
+
+.sheetform .charactersheet button[type="roll"]:before {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
 }
 
 .sheetform .charactersheet input {

output/main.html

@@ -107,205 +107,17 @@
       </div>
       <div class="healthBox">
         <h2>Damage Tracks</h2>
-        <div class="healthWrapper">
+        <div class="healthBox">
-          <h3>Stun</h3>
+          <button type="action" name="act_testBox" title="%{testBox}" value="2">Add</button>
-          <h3>Physical</h3>
+          <button type="action" name="act_clearBoxes" title="%{clearBoxes}" value="1">Remove</button>
-          <h3>Overflow</h3>
+          <fieldset class="repeating_physicaltracker">
-                    <div class="healthContainer stun">
+            <input type="hidden" name="attr_boxNum" value="0">
-                                  <input class="hidden disp" id="stB0" type="radio" name="attr_stunWounds" value="0" checked="checked">
+            <input type="hidden" name="attr_isCrossed" value="false">
-                                  <label class="healthTrackerBox reset" for="stB0"><span class="woundmodifier"></span></label>
+            <input type="hidden" name="attr_woundMod" value="0">
-                                  <input class="hidden disp" id="stB1" type="radio" name="attr_stunWounds" value="1">
+            <button type="action" name="act_check-phys" title="%{checkPhys}" value="3"><span class="woundModDisplay" name="attr_woundMod">0</span>
-                                  <label class="healthTrackerBox" for="stB1"><span class="woundmodifier"></span></label>
+              <div></div>
-                                  <input class="hidden disp" id="stB2" type="radio" name="attr_stunWounds" value="2">
+            </button>
-                                  <label class="healthTrackerBox" for="stB2"><span class="woundmodifier"></span></label>
+          </fieldset>
-                                  <input class="hidden disp" id="stB3" type="radio" name="attr_stunWounds" value="3">
-                                  <label class="healthTrackerBox" for="stB3"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="stB4" type="radio" name="attr_stunWounds" value="4">
-                                  <label class="healthTrackerBox" for="stB4"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="stB5" type="radio" name="attr_stunWounds" value="5">
-                                  <label class="healthTrackerBox" for="stB5"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="stB6" type="radio" name="attr_stunWounds" value="6">
-                                  <label class="healthTrackerBox" for="stB6"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="stB7" type="radio" name="attr_stunWounds" value="7">
-                                  <label class="healthTrackerBox" for="stB7"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="stB8" type="radio" name="attr_stunWounds" value="8">
-                                  <label class="healthTrackerBox" for="stB8"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="stB9" type="radio" name="attr_stunWounds" value="9">
-                                  <label class="healthTrackerBox" for="stB9"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="stB10" type="radio" name="attr_stunWounds" value="10">
-                                  <label class="healthTrackerBox" for="stB10"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="stB11" type="radio" name="attr_stunWounds" value="11">
-                                  <label class="healthTrackerBox" for="stB11"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="stB12" type="radio" name="attr_stunWounds" value="12">
-                                  <label class="healthTrackerBox" for="stB12"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="stB13" type="radio" name="attr_stunWounds" value="13">
-                                  <label class="healthTrackerBox" for="stB13"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="stB14" type="radio" name="attr_stunWounds" value="14">
-                                  <label class="healthTrackerBox" for="stB14"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="stB15" type="radio" name="attr_stunWounds" value="15">
-                                  <label class="healthTrackerBox" for="stB15"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="stB16" type="radio" name="attr_stunWounds" value="16">
-                                  <label class="healthTrackerBox" for="stB16"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="stB17" type="radio" name="attr_stunWounds" value="17">
-                                  <label class="healthTrackerBox" for="stB17"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="stB18" type="radio" name="attr_stunWounds" value="18">
-                                  <label class="healthTrackerBox" for="stB18"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="stB19" type="radio" name="attr_stunWounds" value="19">
-                                  <label class="healthTrackerBox" for="stB19"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="stB20" type="radio" name="attr_stunWounds" value="20">
-                                  <label class="healthTrackerBox" for="stB20"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="stB21" type="radio" name="attr_stunWounds" value="21">
-                                  <label class="healthTrackerBox" for="stB21"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="stB22" type="radio" name="attr_stunWounds" value="22">
-                                  <label class="healthTrackerBox" for="stB22"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="stB23" type="radio" name="attr_stunWounds" value="23">
-                                  <label class="healthTrackerBox" for="stB23"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="stB24" type="radio" name="attr_stunWounds" value="24">
-                                  <label class="healthTrackerBox" for="stB24"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="stB25" type="radio" name="attr_stunWounds" value="25">
-                                  <label class="healthTrackerBox" for="stB25"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="stB26" type="radio" name="attr_stunWounds" value="26">
-                                  <label class="healthTrackerBox" for="stB26"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="stB27" type="radio" name="attr_stunWounds" value="27">
-                                  <label class="healthTrackerBox" for="stB27"><span class="woundmodifier">-9</span></label>
-                                  <input class="hidden disp" id="stB28" type="radio" name="attr_stunWounds" value="28">
-                                  <label class="healthTrackerBox" for="stB28"><span class="woundmodifier">-9</span></label>
-                                  <input class="hidden disp" id="stB29" type="radio" name="attr_stunWounds" value="29">
-                                  <label class="healthTrackerBox" for="stB29"><span class="woundmodifier">-9</span></label>
-                    </div>
-                    <div class="healthContainer physical">
-                                  <input class="hidden disp" id="phB0" type="radio" name="attr_physicalWounds" value="0" checked="checked">
-                                  <label class="healthTrackerBox reset" for="phB0"><span class="woundmodifier"></span></label>
-                                  <input class="hidden disp" id="phB1" type="radio" name="attr_physicalWounds" value="1">
-                                  <label class="healthTrackerBox" for="phB1"><span class="woundmodifier"></span></label>
-                                  <input class="hidden disp" id="phB2" type="radio" name="attr_physicalWounds" value="2">
-                                  <label class="healthTrackerBox" for="phB2"><span class="woundmodifier"></span></label>
-                                  <input class="hidden disp" id="phB3" type="radio" name="attr_physicalWounds" value="3">
-                                  <label class="healthTrackerBox" for="phB3"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="phB4" type="radio" name="attr_physicalWounds" value="4">
-                                  <label class="healthTrackerBox" for="phB4"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="phB5" type="radio" name="attr_physicalWounds" value="5">
-                                  <label class="healthTrackerBox" for="phB5"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="phB6" type="radio" name="attr_physicalWounds" value="6">
-                                  <label class="healthTrackerBox" for="phB6"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="phB7" type="radio" name="attr_physicalWounds" value="7">
-                                  <label class="healthTrackerBox" for="phB7"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="phB8" type="radio" name="attr_physicalWounds" value="8">
-                                  <label class="healthTrackerBox" for="phB8"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="phB9" type="radio" name="attr_physicalWounds" value="9">
-                                  <label class="healthTrackerBox" for="phB9"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="phB10" type="radio" name="attr_physicalWounds" value="10">
-                                  <label class="healthTrackerBox" for="phB10"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="phB11" type="radio" name="attr_physicalWounds" value="11">
-                                  <label class="healthTrackerBox" for="phB11"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="phB12" type="radio" name="attr_physicalWounds" value="12">
-                                  <label class="healthTrackerBox" for="phB12"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="phB13" type="radio" name="attr_physicalWounds" value="13">
-                                  <label class="healthTrackerBox" for="phB13"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="phB14" type="radio" name="attr_physicalWounds" value="14">
-                                  <label class="healthTrackerBox" for="phB14"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="phB15" type="radio" name="attr_physicalWounds" value="15">
-                                  <label class="healthTrackerBox" for="phB15"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="phB16" type="radio" name="attr_physicalWounds" value="16">
-                                  <label class="healthTrackerBox" for="phB16"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="phB17" type="radio" name="attr_physicalWounds" value="17">
-                                  <label class="healthTrackerBox" for="phB17"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="phB18" type="radio" name="attr_physicalWounds" value="18">
-                                  <label class="healthTrackerBox" for="phB18"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="phB19" type="radio" name="attr_physicalWounds" value="19">
-                                  <label class="healthTrackerBox" for="phB19"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="phB20" type="radio" name="attr_physicalWounds" value="20">
-                                  <label class="healthTrackerBox" for="phB20"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="phB21" type="radio" name="attr_physicalWounds" value="21">
-                                  <label class="healthTrackerBox" for="phB21"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="phB22" type="radio" name="attr_physicalWounds" value="22">
-                                  <label class="healthTrackerBox" for="phB22"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="phB23" type="radio" name="attr_physicalWounds" value="23">
-                                  <label class="healthTrackerBox" for="phB23"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="phB24" type="radio" name="attr_physicalWounds" value="24">
-                                  <label class="healthTrackerBox" for="phB24"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="phB25" type="radio" name="attr_physicalWounds" value="25">
-                                  <label class="healthTrackerBox" for="phB25"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="phB26" type="radio" name="attr_physicalWounds" value="26">
-                                  <label class="healthTrackerBox" for="phB26"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="phB27" type="radio" name="attr_physicalWounds" value="27">
-                                  <label class="healthTrackerBox" for="phB27"><span class="woundmodifier">-9</span></label>
-                                  <input class="hidden disp" id="phB28" type="radio" name="attr_physicalWounds" value="28">
-                                  <label class="healthTrackerBox" for="phB28"><span class="woundmodifier">-9</span></label>
-                                  <input class="hidden disp" id="phB29" type="radio" name="attr_physicalWounds" value="29">
-                                  <label class="healthTrackerBox" for="phB29"><span class="woundmodifier">-9</span></label>
-                    </div>
-                    <div class="healthContainer overflow">
-                                  <input class="hidden disp" id="ovB0" type="radio" name="attr_overflowWounds" value="0" checked="checked">
-                                  <label class="healthTrackerBox reset" for="ovB0"><span class="woundmodifier"></span></label>
-                                  <input class="hidden disp" id="ovB1" type="radio" name="attr_overflowWounds" value="1">
-                                  <label class="healthTrackerBox" for="ovB1"><span class="woundmodifier"></span></label>
-                                  <input class="hidden disp" id="ovB2" type="radio" name="attr_overflowWounds" value="2">
-                                  <label class="healthTrackerBox" for="ovB2"><span class="woundmodifier"></span></label>
-                                  <input class="hidden disp" id="ovB3" type="radio" name="attr_overflowWounds" value="3">
-                                  <label class="healthTrackerBox" for="ovB3"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="ovB4" type="radio" name="attr_overflowWounds" value="4">
-                                  <label class="healthTrackerBox" for="ovB4"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="ovB5" type="radio" name="attr_overflowWounds" value="5">
-                                  <label class="healthTrackerBox" for="ovB5"><span class="woundmodifier">-1</span></label>
-                                  <input class="hidden disp" id="ovB6" type="radio" name="attr_overflowWounds" value="6">
-                                  <label class="healthTrackerBox" for="ovB6"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="ovB7" type="radio" name="attr_overflowWounds" value="7">
-                                  <label class="healthTrackerBox" for="ovB7"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="ovB8" type="radio" name="attr_overflowWounds" value="8">
-                                  <label class="healthTrackerBox" for="ovB8"><span class="woundmodifier">-2</span></label>
-                                  <input class="hidden disp" id="ovB9" type="radio" name="attr_overflowWounds" value="9">
-                                  <label class="healthTrackerBox" for="ovB9"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="ovB10" type="radio" name="attr_overflowWounds" value="10">
-                                  <label class="healthTrackerBox" for="ovB10"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="ovB11" type="radio" name="attr_overflowWounds" value="11">
-                                  <label class="healthTrackerBox" for="ovB11"><span class="woundmodifier">-3</span></label>
-                                  <input class="hidden disp" id="ovB12" type="radio" name="attr_overflowWounds" value="12">
-                                  <label class="healthTrackerBox" for="ovB12"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="ovB13" type="radio" name="attr_overflowWounds" value="13">
-                                  <label class="healthTrackerBox" for="ovB13"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="ovB14" type="radio" name="attr_overflowWounds" value="14">
-                                  <label class="healthTrackerBox" for="ovB14"><span class="woundmodifier">-4</span></label>
-                                  <input class="hidden disp" id="ovB15" type="radio" name="attr_overflowWounds" value="15">
-                                  <label class="healthTrackerBox" for="ovB15"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="ovB16" type="radio" name="attr_overflowWounds" value="16">
-                                  <label class="healthTrackerBox" for="ovB16"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="ovB17" type="radio" name="attr_overflowWounds" value="17">
-                                  <label class="healthTrackerBox" for="ovB17"><span class="woundmodifier">-5</span></label>
-                                  <input class="hidden disp" id="ovB18" type="radio" name="attr_overflowWounds" value="18">
-                                  <label class="healthTrackerBox" for="ovB18"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="ovB19" type="radio" name="attr_overflowWounds" value="19">
-                                  <label class="healthTrackerBox" for="ovB19"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="ovB20" type="radio" name="attr_overflowWounds" value="20">
-                                  <label class="healthTrackerBox" for="ovB20"><span class="woundmodifier">-6</span></label>
-                                  <input class="hidden disp" id="ovB21" type="radio" name="attr_overflowWounds" value="21">
-                                  <label class="healthTrackerBox" for="ovB21"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="ovB22" type="radio" name="attr_overflowWounds" value="22">
-                                  <label class="healthTrackerBox" for="ovB22"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="ovB23" type="radio" name="attr_overflowWounds" value="23">
-                                  <label class="healthTrackerBox" for="ovB23"><span class="woundmodifier">-7</span></label>
-                                  <input class="hidden disp" id="ovB24" type="radio" name="attr_overflowWounds" value="24">
-                                  <label class="healthTrackerBox" for="ovB24"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="ovB25" type="radio" name="attr_overflowWounds" value="25">
-                                  <label class="healthTrackerBox" for="ovB25"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="ovB26" type="radio" name="attr_overflowWounds" value="26">
-                                  <label class="healthTrackerBox" for="ovB26"><span class="woundmodifier">-8</span></label>
-                                  <input class="hidden disp" id="ovB27" type="radio" name="attr_overflowWounds" value="27">
-                                  <label class="healthTrackerBox" for="ovB27"><span class="woundmodifier">-9</span></label>
-                                  <input class="hidden disp" id="ovB28" type="radio" name="attr_overflowWounds" value="28">
-                                  <label class="healthTrackerBox" for="ovB28"><span class="woundmodifier">-9</span></label>
-                                  <input class="hidden disp" id="ovB29" type="radio" name="attr_overflowWounds" value="29">
-                                  <label class="healthTrackerBox" for="ovB29"><span class="woundmodifier">-9</span></label>
-                    </div>
-          <div class="stunInfo">
-            <input type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_wil}/2)+8-@{stunWounds}">
-          </div>
-          <div class="physicalInfo">
-            <input type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_bod}/2)+8-@{physicalWounds}">
-          </div>
-          <div class="overflowInfo">
-            <input type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_wil}/2)+8-@{stunWounds}">
-          </div>
         </div>
       </div>
       <div class="attr-rolls">
@@ -376,5 +188,74 @@ on("clicked:toggmroll", function() {
         });
     });
 });
+var renderHealthBoxes = function renderHealthBoxes() {
+    //let physicalBoxes = calculateBoxes('physical')
+    //let stunBoxes = calculateBoxes('stun')
+    //let overflowBoxes = calculateBoxes('overflow')
+    for(var j = 0; j < 12; j++){
+        var newRowId = generateRowID();
+        var tempObject = {};
+        tempObject["repeating_physicaltracker_".concat(newRowId, "_boxNum")] = j;
+        tempObject["repeating_physicaltracker_".concat(newRowId, "_woundMod")] = Math.trunc(j / 3) * -1;
+        tempObject["repeating_physicaltracker_".concat(newRowId, "_isCrossed")] = "false";
+        setAttrs(tempObject);
+    }
+};
+var clearAllHealthBoxes = function clearAllHealthBoxes() {
+    getSectionIDs("physicaltracker", function(ids) {
+        ids.forEach(function(id) {
+            removeRepeatingRow("repeating_physicaltracker_".concat(id));
+        });
+    });
+};
+var clearTracker = function clearTracker(tracker, resetWounds) {
+    getSectionIDs("".concat(tracker, "tracker"), function(ids) {
+        var tempObject = {};
+        ids.forEach(function(id) {
+            tempObject["repeating_".concat(tracker, "tracker_").concat(id, "_isCrossed")] = "false";
+        });
+        if (resetWounds) tempObject["".concat(tracker, "Wounds")] = 0;
+        setAttrs(tempObject);
+    });
+};
+var setTrackerTo = function setTrackerTo(tracker, toId) {
+    clearTracker(tracker, false);
+    getSectionIDs("".concat(tracker, "tracker"), function(ids) {
+        var tempObject = {};
+        ids.forEach(function(id) {
+            getAttrs([
+                "repeating_".concat(tracker, "tracker_").concat(id, "_boxNum")
+            ], function(values) {
+                if (values["repeating_".concat(tracker, "tracker_").concat(id, "_boxNum")] <= toId) tempObject["repeating_".concat(tracker, "tracker_").concat(id, "_isCrossed")] = "true";
+                else tempObject["repeating_".concat(tracker, "tracker_").concat(id, "_isCrossed")] = "false";
+                if (values["repeating_".concat(tracker, "tracker_").concat(id, "_boxNum")] == toId) {
+                    tempObject["".concat(tracker, "Wounds")] = toId + 1;
+                    console.log(tempObject);
+                    setAttrs(tempObject);
+                }
+            });
+        });
+    });
+};
+on("clicked:testBox", function() {
+    renderHealthBoxes();
+});
+on("clicked:clearBoxes", function() {
+    clearAllHealthBoxes();
+});
+on("clicked:repeating_physicaltracker:check-phys", function(ev) {
+    getAttrs([
+        "repeating_physicaltracker_boxNum",
+        "repeating_physicaltracker_isCrossed",
+        "physicalWounds"
+    ], function(values) {
+        var _isCrossed = values.repeating_physicaltracker_isCrossed;
+        var _boxId = values.repeating_physicaltracker_boxNum;
+        var _physicalWounds = values.physicalWounds;
+        if (_isCrossed === "false") setTrackerTo("physical", _boxId);
+        else if (_physicalWounds - 1 != _boxId) setTrackerTo("physical", _boxId);
+        else clearTracker("physical", true);
+    });
+});
 
 </script>

workers/_worker-bundle.pug

@@ -1,2 +1,4 @@
 include ./tabToggler.js
 include ./extraTogglers.js
+include ./healthTrackerManager.js
+

workers/healthTrackerManager.js

@@ -0,0 +1,77 @@
+const renderHealthBoxes = () => {
+  //let physicalBoxes = calculateBoxes('physical')
+  //let stunBoxes = calculateBoxes('stun')
+  //let overflowBoxes = calculateBoxes('overflow')
+  for (let j = 0; j < 12; j++) {
+    let newRowId = generateRowID()
+    let tempObject = {}
+    tempObject[`repeating_physicaltracker_${newRowId}_boxNum`] = j
+    tempObject[`repeating_physicaltracker_${newRowId}_woundMod`] = Math.trunc(j / 3) * -1
+    tempObject[`repeating_physicaltracker_${newRowId}_isCrossed`] = 'false'
+    setAttrs(tempObject)
+  }
+}
+
+const clearAllHealthBoxes = () => {
+  getSectionIDs('physicaltracker', function (ids) {
+    ids.forEach(id => {
+      removeRepeatingRow(`repeating_physicaltracker_${id}`)
+    });
+  })
+}
+
+const clearTracker = (tracker, resetWounds) => {
+  getSectionIDs(`${tracker}tracker`, function (ids) {
+    let tempObject = {}
+    ids.forEach(id => {
+      tempObject[`repeating_${tracker}tracker_${id}_isCrossed`] = 'false'
+    });
+    if (resetWounds) {
+      tempObject[`${tracker}Wounds`] = 0
+    }
+    setAttrs(tempObject)
+  })
+}
+
+const setTrackerTo = (tracker, toId) => {
+  clearTracker(tracker, false)
+  getSectionIDs(`${tracker}tracker`, function (ids) {
+    let tempObject = {}
+    ids.forEach(id => {
+      getAttrs([`repeating_${tracker}tracker_${id}_boxNum`], function (values) {
+        if (values[`repeating_${tracker}tracker_${id}_boxNum`] <= toId) {
+          tempObject[`repeating_${tracker}tracker_${id}_isCrossed`] = 'true'
+        } else {
+          tempObject[`repeating_${tracker}tracker_${id}_isCrossed`] = 'false'
+        }
+        if (values[`repeating_${tracker}tracker_${id}_boxNum`] == toId) {
+          tempObject[`${tracker}Wounds`] = toId + 1
+          console.log(tempObject)
+          setAttrs(tempObject)
+        }
+      })
+    })
+  })
+}
+
+on('clicked:testBox', function() {
+  renderHealthBoxes()
+})
+
+on('clicked:clearBoxes', function() {
+  clearAllHealthBoxes()
+})
+
+on('clicked:repeating_physicaltracker:check-phys', function (ev) {
+  getAttrs(['repeating_physicaltracker_boxNum', 'repeating_physicaltracker_isCrossed', 'physicalWounds'], function (values) {
+    let _isCrossed = values.repeating_physicaltracker_isCrossed
+    let _boxId = values.repeating_physicaltracker_boxNum
+    let _physicalWounds = values.physicalWounds
+    if (_isCrossed === 'false') {
+      setTrackerTo('physical', _boxId)
+    } else if (_physicalWounds - 1 != _boxId) {
+      setTrackerTo('physical', _boxId)
+    } else {
+      clearTracker('physical', true)
+    }
+})})