Added Basic Health Tracker Functionality
This commit is contained in:
parent
0abccf3f48
commit
05a0feab52
GPG key ID:
6379E413924A4E77
10 changed files with 290 additions and 348 deletions
|
|
@ -1,79 +1,66 @@
|
|||
.healthWrapper {
|
||||
.repcontainer[data-groupname="repeating_physicaltracker"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
> {
|
||||
grid-template-columns: repeat(3, auto);
|
||||
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 {
|
||||
display: grid;
|
||||
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;
|
||||
> div {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.reset {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
content: "-1";
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
> input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button {
|
||||
> div {
|
||||
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
|
||||
background-size: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:checked {
|
||||
& + .healthTrackerBox {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .healthTrackerBox {
|
||||
order: 3;
|
||||
background-color: #444444;
|
||||
background-image: none;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
> span.woundModDisplay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repcontrol[data-groupname="repeating_physicaltracker"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -1,14 +1,10 @@
|
|||
.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}")
|
||||
.healthBox
|
||||
button(type="action" name="act_testBox" title="%{testBox}" value="2") Add
|
||||
button(type="action" name="act_clearBoxes" title="%{clearBoxes}" value="1") Remove
|
||||
fieldset(class="repeating_physicaltracker")
|
||||
input(type="hidden" name="attr_boxNum" value="0")
|
||||
input(type="hidden", name="attr_isCrossed" value="false")
|
||||
input(type="hidden", name="attr_woundMod" value="0")
|
||||
button(type='action' name="act_check-phys" title="%{checkPhys}" value="3")
|
||||
span.woundModDisplay(name="attr_woundMod") 0
|
||||
div
|
||||
|
|
@ -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}
|
||||
|
|
@ -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)
|
||||
Loading…
Add table
Add a link
Reference in a new issue