From 3e41e8115ae77e915569aeaa1453415e45cffb92 Mon Sep 17 00:00:00 2001
From: Salvador Melo <salmelo16@gmail.com>
Date: Mon, 27 Aug 2018 02:28:13 -0400
Subject: [PATCH] Improved health track with single row of cycling boxes.

---
 NWOD-Mage2e/mage2e.css  | 140 +++++++++++++++++++++++++++++++++
 NWOD-Mage2e/mage2e.html | 168 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 305 insertions(+), 3 deletions(-)

diff --git a/NWOD-Mage2e/mage2e.css b/NWOD-Mage2e/mage2e.css
index 3fdb8222af..970a802e96 100644
--- a/NWOD-Mage2e/mage2e.css
+++ b/NWOD-Mage2e/mage2e.css
@@ -309,4 +309,144 @@ input.sheet-CorC2:checked ~ h4.sheet-CorC2
 
 .sheet-reptable + .repcontainer {
     padding-right: 0px;
+}
+
+.sheet-legacy {
+    display: none;
+}
+
+/* -----BOXES----- */
+.sheet-healthboxcontainer {
+    position: relative;
+}
+
+.sheet-healthboxcontainer input
+{
+    top: 0px;
+    right: 0px;
+    position: absolute;
+    opacity: 0;
+    width: 15px;
+    cursor: pointer;
+    margin-top: 5px;
+    z-index: 101;
+}
+
+.sheet-healthboxcontainer input + span::before
+{
+    content: "";
+    opacity: 1.0;
+    width: 10px;
+    height: 10px;
+    font-size: 12px;
+    
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
+    border-radius: 1px;
+    
+    border: solid 1px #000000;
+    line-height: 11px;
+    text-align: center;
+    vertical-align: middle;
+    
+    -moz-box-shadow: 0 0 0px #000;
+    -webkit-box-shadow: 0 0 0px #000;
+    box-shadow: 0 0 0px #000;
+    
+    background: #000000;
+    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
+    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
+    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
+    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
+    background: radial-gradient(#f6f6f6, #dfdfdf);
+}
+
+.sheet-healthboxcontainer input:checked + span::before
+{  
+    -moz-box-shadow: 0 0 2px transparent;
+    -webkit-box-shadow: 0 0 2px transparent;
+    box-shadow: 0 0 2px transparent;
+}
+
+.sheet-healthboxcontainer input[type="radio"].sheet-whitedot:checked + span::before
+{
+    content: "" !important;
+}
+
+.sheet-healthboxcontainer input[type="radio"].sheet-bashingdot:checked + span::before
+{
+    background: 
+       linear-gradient(to top left,
+          rgba(0,0,0,0) 0%,
+          rgba(0,0,0,0) calc(50% - 1.2px),
+          rgba(170, 0, 0, 1) 50%,
+          rgba(0,0,0,0) calc(50% + 1.2px),
+          rgba(0,0,0,0) 100%);
+}
+
+.sheet-healthboxcontainer input[type="radio"].sheet-lethaldot:checked + span::before
+{
+    background: 
+        linear-gradient(to top left,
+          rgba(0,0,0,0) 0%,
+          rgba(0,0,0,0) calc(50% - 1.2px),
+          rgba(170, 0, 0, 1) 50%,
+          rgba(0,0,0,0) calc(50% + 1.2px),
+          rgba(0,0,0,0) 100%),
+        linear-gradient(to top right,
+          rgba(0,0,0,0) 0%,
+          rgba(0,0,0,0) calc(50% - 1.2px),
+          rgba(170, 0, 0, 1) 50%,
+          rgba(0,0,0,0) calc(50% + 1.2px),
+          rgba(0,0,0,0) 100%);
+}
+
+.sheet-healthboxcontainer input[type="radio"].sheet-aggravateddot:checked + span::before
+{
+    background: 
+        linear-gradient(to top left,
+          rgba(0,0,0,0) 0%,
+          rgba(0,0,0,0) calc(50% - 1.2px),
+          rgba(170, 0, 0, 1) 50%,
+          rgba(0,0,0,0) calc(50% + 1.2px),
+          rgba(0,0,0,0) 100%),
+        linear-gradient(to top right,
+          rgba(0,0,0,0) 0%,
+          rgba(0,0,0,0) calc(50% - 1.2px),
+          rgba(170, 0, 0, 1) 50%,
+          rgba(0,0,0,0) calc(50% + 1.2px),
+          rgba(0,0,0,0) 100%),
+        linear-gradient(to right,
+          rgba(0,0,0,0) 0%,
+          rgba(0,0,0,0) calc(50% - 1.2px),
+          rgba(170, 0, 0, 1) 50%,
+          rgba(0,0,0,0) calc(50% + 1.2px),
+          rgba(0,0,0,0) 100%)
+}
+
+.sheet-healthboxcontainer input[type="radio"].sheet-whitedot { 
+    z-index: 102; 
+}
+
+input.sheet-whitedot:checked ~ input.sheet-bashingdot,
+input.sheet-bashingdot:checked ~ input.sheet-lethaldot,
+input.sheet-lethaldot:checked ~ input.sheet-aggravateddot { 
+    z-index: 103; 
+}
+
+.sheet-healthboxcontainer span {
+    display: none;
+}
+
+input.sheet-whitedot:checked ~ span.sheet-whitedot,
+input.sheet-bashingdot:checked ~ span.sheet-bashingdot, 
+input.sheet-lethaldot:checked ~ span.sheet-lethaldot,
+input.sheet-aggravateddot:checked ~ span.sheet-aggravateddot { 
+    display: inline-block; 
+}
+
+.sheet-healthcontainer {
+    width: 20px;
+    margin-left: -16px;
+    display: inline-block;
 }
\ No newline at end of file
diff --git a/NWOD-Mage2e/mage2e.html b/NWOD-Mage2e/mage2e.html
index 70ca6532f1..95dc02a67e 100644
--- a/NWOD-Mage2e/mage2e.html
+++ b/NWOD-Mage2e/mage2e.html
@@ -1,3 +1,7 @@
+<!--version upgrade markers-->
+<div style="display: none;">
+    <input type="checkbox" value="1" name="attr_new_health_track"/>
+</div>
 <div align="center">
     <img src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/NWOD-Mage2e/mage-logo.png" width="350px"><br><h3>Second Edition</h3>
 </div>
@@ -376,14 +380,139 @@
             <td><input type="radio" name="attr_health" value="1" checked="false"><span></span> <input type="radio" name="attr_health" value="2"><span> </span><input type="radio" name="attr_health" value="3"><span></span> <input type="radio" name="attr_health" value="4"><span></span> <input type="radio" name="attr_health" value="5"><span></span> <input type="radio" name="attr_health" value="6"><span></span> <input type="radio" name="attr_health" value="7"><span></span> <input type="radio" name="attr_health" value="8"><span></span> <input type="radio" name="attr_health" value="9"><span></span> <input type="radio" name="attr_health" value="10"><span></span> <input type="radio" name="attr_health" value="11"><span></span> <input type="radio" name="attr_health" value="12"><span></span></td>
         </tr>
         <tr>
+            <td style="text-align:right">Boxes:</td>
+            <td>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_1"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_1"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_1"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_1"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_2"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_2"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_2"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_2"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_3"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_3"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_3"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_3"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_4"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_4"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_4"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_4"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_5"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_5"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_5"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_5"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_6"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_6"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_6"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_6"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_7"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_7"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_7"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_7"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_8"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_8"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_8"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_8"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_9"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_9"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_9"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_9"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_10"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_10"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_10"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_10"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_11"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_11"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_11"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_11"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+                <span class="healthboxcontainer">
+                    <input type="radio" class="sheet-whitedot" name="attr_healthbox_12"
+                        value="0" checked="checked" /><span class="sheet-whitedot"></span>
+                    <input type="radio" class="sheet-bashingdot" name="attr_healthbox_12"
+                        value="1" /><span class="sheet-bashingdot"></span>
+                    <input type="radio" class="sheet-lethaldot" name="attr_healthbox_12"
+                        value="2" /><span class="sheet-lethaldot"></span>
+                    <input type="radio" class="sheet-aggravateddot" name="attr_healthbox_12"
+                        value="3" /><span class="sheet-aggravateddot"></span>
+                </span>
+            </td>
+        </tr>
+        <tr class='legacy'>
             <td style="text-align: right;">Bashing:</td>
             <td><input type="checkbox" name="attr_bashing1"><span></span> <input type="checkbox" name="attr_bashing2"><span></span> <input type="checkbox" name="attr_bashing3"><span></span> <input type="checkbox" name="attr_bashing4"><span></span> <input type="checkbox" name="attr_bashing5"><span></span> <input type="checkbox" name="attr_bashing6"><span></span> <input type="checkbox" name="attr_bashing7"><span></span> <input type="checkbox" name="attr_bashing8"><span></span> <input type="checkbox" name="attr_bashing9"><span></span> <input type="checkbox" name="attr_bashing10"><span></span> <input type="checkbox" name="attr_bashing11"><span></span> <input type="checkbox" name="attr_bashing12"><span></span></td>
         </tr>
-        <tr>
+        <tr class='legacy'>
             <td style="text-align: right;">Lethal:</td>
             <td><input type="checkbox" name="attr_lethal1"><span></span> <input type="checkbox" name="attr_lethal2"><span></span> <input type="checkbox" name="attr_lethal3"><span></span> <input type="checkbox" name="attr_lethal4"><span></span> <input type="checkbox" name="attr_lethal5"><span></span> <input type="checkbox" name="attr_lethal6"><span></span> <input type="checkbox" name="attr_lethal7"><span></span> <input type="checkbox" name="attr_lethal8"><span></span> <input type="checkbox" name="attr_lethal9"><span></span> <input type="checkbox" name="attr_lethal10"><span></span> <input type="checkbox" name="attr_lethal11"><span></span> <input type="checkbox" name="attr_lethal12"><span></span></td>
         </tr>
-        <tr>
+        <tr class='legacy'>
             <td style="text-align: right;">Aggravated:</td>
             <td><input type="checkbox" name="attr_aggravated1"><span></span> <input type="checkbox" name="attr_aggravated2"><span></span> <input type="checkbox" name="attr_aggravated3"><span></span> <input type="checkbox" name="attr_aggravated4"><span></span> <input type="checkbox" name="attr_aggravated5"><span></span> <input type="checkbox" name="attr_aggravated6"><span></span> <input type="checkbox" name="attr_aggravated7"><span></span> <input type="checkbox" name="attr_aggravated8"><span></span> <input type="checkbox" name="attr_aggravated9"><span></span> <input type="checkbox" name="attr_aggravated10"><span></span> <input type="checkbox" name="attr_aggravated11"><span></span> <input type="checkbox" name="attr_aggravated12"><span></span></td>
         </tr>
@@ -879,4 +1008,37 @@
         </tr>
     </table>
 </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/worker">
+
+    on("sheet:opened", function() {
+        getAttrs(["new_health_track"], function(values){
+            if (values.new_health_track == 0) {
+                var attrs = [];
+                for (var i = 1; i <= 12; i++){
+                    attrs.push("bashing" + i);
+                    attrs.push("lethal" + i);
+                    attrs.push("aggravated" + i);
+                }
+                getAttrs(attrs, function(values){
+                    var healths = {new_health_track: 1};
+                    for (var i = 1; i <= 12; i++){
+                        var prop = "healthbox_" + i; 
+                        if (values["aggravated" + i] != 0){
+                            healths[prop] = 3;
+                        }else if (values["lethal" + i] != 0){
+                            healths[prop] = 2;
+                        }else if (values["bashing" + i] != 0){
+                            healths[prop] = 1;
+                        }else{
+                            healths[prop] = 0;
+                        }
+                    }
+
+                    setAttrs(healths);
+                });
+            }
+        });
+    });
+    
+</script>
\ No newline at end of file