Add overflow and stun damage tracks and include it functionality.

This commit is contained in:
Sebastian Fischlmayr 2022-10-26 15:16:33 +02:00
parent 05a0feab52
commit f600faf50e
Signed by: Maverick
GPG key ID: 6379E413924A4E77
6 changed files with 258 additions and 45 deletions

View file

@ -2,7 +2,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
display: block;
}
.repcontainer[data-groupname="repeating_physicaltracker"] {
.repcontainer[data-groupname="repeating_physicaltracker"], .repcontainer[data-groupname="repeating_stuntracker"], .repcontainer[data-groupname="repeating_overflowtracker"] {
grid-template-columns: repeat(3, auto);
justify-content: start;
justify-items: center;
@ -10,11 +10,11 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
display: grid;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > * {
.repcontainer[data-groupname="repeating_physicaltracker"] > *, .repcontainer[data-groupname="repeating_stuntracker"] > *, .repcontainer[data-groupname="repeating_overflowtracker"] > * {
margin: -1px;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem, .repcontainer[data-groupname="repeating_stuntracker"] > .repitem, .repcontainer[data-groupname="repeating_overflowtracker"] > .repitem {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
@ -23,11 +23,11 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
height: fit-content;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > .itemcontrol {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > .itemcontrol, .repcontainer[data-groupname="repeating_stuntracker"] > .repitem > .itemcontrol, .repcontainer[data-groupname="repeating_overflowtracker"] > .repitem > .itemcontrol {
display: none !important;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button > span.woundModDisplay {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button > span.woundModDisplay, .repcontainer[data-groupname="repeating_stuntracker"] > .repitem > button > span.woundModDisplay, .repcontainer[data-groupname="repeating_overflowtracker"] > .repitem > button > span.woundModDisplay {
content: "-1";
color: #bfbdba;
position: absolute;
@ -35,7 +35,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
right: 4px;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button, .repcontainer[data-groupname="repeating_stuntracker"] > .repitem > button, .repcontainer[data-groupname="repeating_overflowtracker"] > .repitem > button {
-webkit-appearance: none;
appearance: none;
width: 3.5rem;
@ -49,11 +49,11 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
position: relative;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > div {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > div, .repcontainer[data-groupname="repeating_stuntracker"] > .repitem > div, .repcontainer[data-groupname="repeating_overflowtracker"] > .repitem > div {
pointer-events: none;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > div {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > div, .repcontainer[data-groupname="repeating_stuntracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > div, .repcontainer[data-groupname="repeating_overflowtracker"] > .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");
@ -62,14 +62,22 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
background-size: 100%;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > span.woundModDisplay {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > span.woundModDisplay, .repcontainer[data-groupname="repeating_stuntracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > span.woundModDisplay, .repcontainer[data-groupname="repeating_overflowtracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > span.woundModDisplay {
display: none;
}
.repcontrol[data-groupname="repeating_physicaltracker"] {
.repcontrol[data-groupname="repeating_physicaltracker"], .repcontrol[data-groupname="repeating_stuntracker"], .repcontrol[data-groupname="repeating_overflowtracker"] {
display: none !important;
}
.healthTrackerGrid {
grid-template-columns: repeat(3, auto);
justify-content: space-around;
align-items: start;
justify-items: center;
display: grid;
}
.attr-rolls {
width: 100%;
}
@ -125,6 +133,11 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
margin-bottom: 40px;
}
:root {
--mainBackgroundColor: #500;
--mainTextColor: #aae;
}
.sheetform {
height: 100%;
padding: 0;
@ -180,6 +193,11 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
text-align: center;
}
.sheetform .charactersheet button[type="action"].interact-button {
color: var(--mainTextColor);
padding: 2px 8px;
}
.sheetform .charactersheet input {
color: #aae;
background-color: #444;

View file

@ -108,16 +108,35 @@
<div class="healthBox">
<h2>Damage Tracks</h2>
<div class="healthBox">
<button class="interact-button" type="action" name="act_renderPhysBoxes" title="%{renderPhysBoxes}" value="3">Re-Render Boxes</button>
<button type="action" name="act_testBox" title="%{testBox}" value="2">Add</button>
<button type="action" name="act_clearBoxes" title="%{clearBoxes}" value="1">Remove</button>
<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 class="woundModDisplay" name="attr_woundMod">0</span>
<div></div>
</button>
</fieldset>
<div class="healthTrackerGrid">
<fieldset class="repeating_stuntracker">
<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-tracker" value="3"><span class="woundModDisplay" name="attr_woundMod">0</span>
<div></div>
</button>
</fieldset>
<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-tracker" value="3"><span class="woundModDisplay" name="attr_woundMod">0</span>
<div></div>
</button>
</fieldset>
<fieldset class="repeating_overflowtracker">
<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-tracker" value="3"><span class="woundModDisplay" name="attr_woundMod">0</span>
<div></div>
</button>
</fieldset>
</div>
</div>
</div>
<div class="attr-rolls">
@ -192,14 +211,36 @@ var renderHealthBoxes = function renderHealthBoxes() {
//let physicalBoxes = calculateBoxes('physical')
//let stunBoxes = calculateBoxes('stun')
//let overflowBoxes = calculateBoxes('overflow')
var tempObject = {};
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);
console.log("Generating Physical Row Number: ".concat(j));
while(tempObject["repeating_physicaltracker_".concat(newRowId, "_boxNum")] != j){
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";
}
}
for(var j1 = 0; j1 < 12; j1++){
var newRowId1 = generateRowID();
console.log("Generating Stun Row Number: ".concat(j1));
while(tempObject["repeating_stuntracker_".concat(newRowId1, "_boxNum")] != j1){
tempObject["repeating_stuntracker_".concat(newRowId1, "_boxNum")] = j1;
tempObject["repeating_stuntracker_".concat(newRowId1, "_woundMod")] = Math.trunc(j1 / 3) * -1;
tempObject["repeating_stuntracker_".concat(newRowId1, "_isCrossed")] = "false";
}
}
for(var j2 = 0; j2 < 12; j2++){
var newRowId2 = generateRowID();
console.log("Generating Overflow Row Number: ".concat(j2));
while(tempObject["repeating_overflowtracker_".concat(newRowId2, "_boxNum")] != j2){
tempObject["repeating_overflowtracker_".concat(newRowId2, "_boxNum")] = j2;
tempObject["repeating_overflowtracker_".concat(newRowId2, "_woundMod")] = Math.trunc(j2 / 3) * -1;
tempObject["repeating_overflowtracker_".concat(newRowId2, "_isCrossed")] = "false";
}
}
console.log(tempObject);
setAttrs(tempObject);
};
var clearAllHealthBoxes = function clearAllHealthBoxes() {
getSectionIDs("physicaltracker", function(ids) {
@ -207,6 +248,22 @@ var clearAllHealthBoxes = function clearAllHealthBoxes() {
removeRepeatingRow("repeating_physicaltracker_".concat(id));
});
});
getSectionIDs("stuntracker", function(ids) {
ids.forEach(function(id) {
removeRepeatingRow("repeating_stuntracker_".concat(id));
});
});
getSectionIDs("overflowtracker", function(ids) {
ids.forEach(function(id) {
removeRepeatingRow("repeating_overflowtracker_".concat(id));
});
});
};
var calculateBoxes = function calculateBoxes(tracker, stat, freeBoxes, woundReduction) {
var trackerInfo = {};
trackerInfo.tracker = tracker;
trackerInfo.startWoundCalc = freeBoxes;
trackerInfo.normalBoxes = Math.trunc(stat / 2) + 8 + freeBoxes;
};
var clearTracker = function clearTracker(tracker, resetWounds) {
getSectionIDs("".concat(tracker, "tracker"), function(ids) {
@ -230,7 +287,6 @@ var setTrackerTo = function setTrackerTo(tracker, toId) {
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);
}
});
@ -243,7 +299,7 @@ on("clicked:testBox", function() {
on("clicked:clearBoxes", function() {
clearAllHealthBoxes();
});
on("clicked:repeating_physicaltracker:check-phys", function(ev) {
on("clicked:repeating_physicaltracker:check-tracker", function(ev) {
getAttrs([
"repeating_physicaltracker_boxNum",
"repeating_physicaltracker_isCrossed",
@ -257,5 +313,33 @@ on("clicked:repeating_physicaltracker:check-phys", function(ev) {
else clearTracker("physical", true);
});
});
on("clicked:repeating_stuntracker:check-tracker", function(ev) {
getAttrs([
"repeating_stuntracker_boxNum",
"repeating_stuntracker_isCrossed",
"stunWounds"
], function(values) {
var _isCrossed = values.repeating_stuntracker_isCrossed;
var _boxId = values.repeating_stuntracker_boxNum;
var _wounds = values.stunWounds;
if (_isCrossed === "false") setTrackerTo("stun", _boxId);
else if (_wounds - 1 != _boxId) setTrackerTo("stun", _boxId);
else clearTracker("stun", true);
});
});
on("clicked:repeating_overflowtracker:check-tracker", function(ev) {
getAttrs([
"repeating_overflowtracker_boxNum",
"repeating_overflowtracker_isCrossed",
"overflowWounds"
], function(values) {
var _isCrossed = values.repeating_overflowtracker_isCrossed;
var _boxId = values.repeating_overflowtracker_boxNum;
var _wounds = values.overflowWounds;
if (_isCrossed === "false") setTrackerTo("overflow", _boxId);
else if (_wounds - 1 != _boxId) setTrackerTo("overflow", _boxId);
else clearTracker("overflow", true);
});
});
</script>