Added attribute rolls

components/_abilityBox.css

@@ -1,6 +1,6 @@
 .abilityBox {
   display: grid;
-  grid-template-columns: repeat(6, auto);
+  grid-template-columns: repeat(7, auto);
   grid-auto-flow: row;
   justify-content: start;
   gap: 0.7em 4px;
@@ -30,6 +30,9 @@
         margin-bottom: -0.5em;
       }
     }
+    h2 {
+      margin-bottom: 40px;
+    }
   }
   
   

components/_abilityBoxLabels.pug

@@ -3,4 +3,5 @@ p.abilityLabel Rating
 p.abilityLabel
 p.abilityLabel Mod
 p.abilityLabel
-p.abilityLabel Pool
+p.abilityLabel Pool
+p.abilityLabel Roll

components/_abilityBoxRows.pug

@@ -6,4 +6,5 @@ mixin abilityRow(name)
   p +
   input(type="number" name=`attr_abilitymod_${name.substring(0,3)}` value="0")
   p =
-  input(type="number" name=`attr_abilitypool_${name.substring(0,3)}` value=`@{abilityrtg_${name.substring(0,3)}}+@{abilitymod_${name.substring(0,3)}}` disabled="true")
+  input(type="number" name=`attr_abilitypool_${name.substring(0,3)}` value=`@{abilityrtg_${name.substring(0,3)}}+@{abilitymod_${name.substring(0,3)}}` disabled="true")
+  button(type="roll")

components/_attr-rolls.css

@@ -0,0 +1,16 @@
+.attr-rolls {
+  width: 100%;
+
+  > .attr-rolls-grid {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    grid-gap: 4px;
+    > {
+      p {
+        color: #aaaaee;
+        font-size: 10pt;
+        margin-right: 30px;
+      }
+    }
+  }
+}

components/_attr-rolls.pug

@@ -0,0 +1,40 @@
+h2 Attribute Rolls
+-
+  var attr_rolls = [
+    {
+      name: "Surprise",
+      roll: "",
+      shorthand: "(R+I)"
+    },
+    {
+      name: "Composure",
+      roll: "",
+      shorthand: "(C+W)"
+    },
+    {
+      name: "Judge Intentions",
+      roll: "",
+      shorthand: "(C+I)"
+    },
+    {
+      name: "Memory",
+      roll: "",
+      shorthand: "(L+W)"
+    },
+    {
+      name: "Poison/Drug",
+      roll: "",
+      shorthand: "(B+W)"
+    },
+    {
+      name: "Carry/Lift",
+      roll: "",
+      shorthand: "(B+S)"
+    }
+  ];
+
+.attr-rolls-grid
+  include ./_attr-rollsRow
+  each val in attr_rolls
+    +attr-rollsRow(val.name, val.roll, val.shorthand)
+  

components/_attr-rollsRow.pug

@@ -0,0 +1,3 @@
+mixin attr-rollsRow(name, roll, shorthand)
+  p #{name + " " + shorthand}
+  button(type="roll")

components/_healthBox.css

@@ -1,8 +1,13 @@
 .healthWrapper {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   > {
+
+    h3 {
+      color: #aaaaee;
+    }
+
     .healthContainer {
       display: grid;
       grid-template-columns: repeat(3, auto);
@@ -13,33 +18,36 @@
         * {
           margin: -1px;
         }
-        /* TODO: Refactor to use Labels !!!! */
         
         label  {
           &.healthTrackerBox {
             cursor: pointer;
             order: 1;
-            background-color: red;
+            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: 6rem;
-            height: 6rem;
+            width: 3.5rem;
+            height: 3.5rem;
             border-radius: 3px;
             padding: 0px;
 
             &.reset {
               order: 2;
-              background-color: brown;
             }
   
-            &:after {
+            > span {
               position: absolute;
               content: "-1";
               top: 2px;
               right: 4px;
+              display: none;
             }
           }
         }
@@ -49,11 +57,20 @@
             position: absolute;
             opacity: 0;
             z-index: 0;
+
+            > span {
+              display: block;
+            }
           } 
 
           & ~ .healthTrackerBox {
             order: 3;
             background-color: #444444;
+            background-image: none;
+
+            > span {
+              display: block;
+            }
           }
         }
       }

components/_healthBox.pug

@@ -0,0 +1,14 @@
+.healthWrapper
+  include ./_healthBoxContainer
+  h3 Stun
+  h3 Physical
+  h3 Overflow
+  +healthContainer(30).stun     //Will/2 + 8
+  +healthContainer(30).physical //Body/2 + 8
+  +healthContainer(30).overflow //Body*2
+  .stunInfo
+    input(type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_wil}/2)+8-@{stunWounds}")
+  .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

@@ -0,0 +1,12 @@
+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

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