Improved health track with single row of cycling boxes.
This commit is contained in:
Salvador Melo
@@ -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;
|
||||
}
|
||||
+165
-3
@@ -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>
|
||||
</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>
|
||||
Reference in New Issue
Block a user