Maverick/SR6_Roll20_Sheet
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add overflow and stun damage tracks and include it functionality.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

16
components/_healthBox.css
View file

@ -1,4 +1,6 @@
.repcontainer[data-groupname="repeating_physicaltracker"] {
.repcontainer[data-groupname="repeating_physicaltracker"],
.repcontainer[data-groupname="repeating_stuntracker"],
.repcontainer[data-groupname="repeating_overflowtracker"] {
display: grid;
grid-template-columns: repeat(3, auto);
justify-items: center;
@ -61,6 +63,16 @@
}
}
.repcontrol[data-groupname="repeating_physicaltracker"] {
.repcontrol[data-groupname="repeating_physicaltracker"],
.repcontrol[data-groupname="repeating_stuntracker"],
.repcontrol[data-groupname="repeating_overflowtracker"] {
display: none !important;
}
.healthTrackerGrid {
display: grid;
grid-template-columns: repeat(3, auto);
justify-items: center;
align-items: start;
justify-content: space-around;
}

30
components/_healthBox.pug
View file

@ -1,10 +1,26 @@
.healthBox
button(type="action" class="interact-button" name="act_renderPhysBoxes" title="%{renderPhysBoxes}" value="3" ) Re-Render Boxes
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
.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.woundModDisplay(name="attr_woundMod") 0
div
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.woundModDisplay(name="attr_woundMod") 0
div
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.woundModDisplay(name="attr_woundMod") 0
div

12
main.css
View file

@ -2,6 +2,11 @@
@import-glob "components/*.css";
:root{
--mainBackgroundColor: #550000;
--mainTextColor: #aaaaee;
}
.sheetform {
padding: 0;
background-color: #0b0b0b !important;
@ -28,7 +33,7 @@
padding: 0px;
text-align: center;
vertical-align: middle;
/*color: white;*/
/* color: var(--mainTextColor); Forget setting color here, it will be overwritten by the theme */
padding: 2px;
&[type=roll] {
@ -50,6 +55,11 @@
text-align: center;
}
}
&[type=action].interact-button {
padding: 2px 8px;
color: var(--mainTextColor);
}
}
input {

38
output/main.css
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;

114
output/main.html
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>

93
workers/healthTrackerManager.js
View file

@ -2,14 +2,38 @@ const renderHealthBoxes = () => {
//let physicalBoxes = calculateBoxes('physical')
//let stunBoxes = calculateBoxes('stun')
//let overflowBoxes = calculateBoxes('overflow')
let tempObject = {}
for (let j = 0; j < 12; j++) {
let newRowId = generateRowID()
let tempObject = {}
tempObject[`repeating_physicaltracker_${newRowId}_boxNum`] = j
tempObject[`repeating_physicaltracker_${newRowId}_woundMod`] = Math.trunc(j / 3) * -1
tempObject[`repeating_physicaltracker_${newRowId}_isCrossed`] = 'false'
setAttrs(tempObject)
console.log(`Generating Physical Row Number: ${j}`)
while (tempObject[`repeating_physicaltracker_${newRowId}_boxNum`] != j) {
tempObject[`repeating_physicaltracker_${newRowId}_boxNum`] = j
tempObject[`repeating_physicaltracker_${newRowId}_woundMod`] = Math.trunc(j / 3) * -1
tempObject[`repeating_physicaltracker_${newRowId}_isCrossed`] = 'false'
}
}
for (let j = 0; j < 12; j++) {
let newRowId = generateRowID()
console.log(`Generating Stun Row Number: ${j}`)
while (tempObject[`repeating_stuntracker_${newRowId}_boxNum`] != j) {
tempObject[`repeating_stuntracker_${newRowId}_boxNum`] = j
tempObject[`repeating_stuntracker_${newRowId}_woundMod`] = Math.trunc(j / 3) * -1
tempObject[`repeating_stuntracker_${newRowId}_isCrossed`] = 'false'
}
}
for (let j = 0; j < 12; j++) {
let newRowId = generateRowID()
console.log(`Generating Overflow Row Number: ${j}`)
while (tempObject[`repeating_overflowtracker_${newRowId}_boxNum`] != j) {
tempObject[`repeating_overflowtracker_${newRowId}_boxNum`] = j
tempObject[`repeating_overflowtracker_${newRowId}_woundMod`] = Math.trunc(j / 3) * -1
tempObject[`repeating_overflowtracker_${newRowId}_isCrossed`] = 'false'
}
}
console.log(tempObject)
setAttrs(tempObject)
}
const clearAllHealthBoxes = () => {
@ -18,6 +42,25 @@ const clearAllHealthBoxes = () => {
removeRepeatingRow(`repeating_physicaltracker_${id}`)
});
})
getSectionIDs('stuntracker', function (ids) {
ids.forEach(id => {
removeRepeatingRow(`repeating_stuntracker_${id}`)
});
})
getSectionIDs('overflowtracker', function (ids) {
ids.forEach(id => {
removeRepeatingRow(`repeating_overflowtracker_${id}`)
});
})
}
const calculateBoxes = (tracker, stat, freeBoxes, woundReduction) => {
let trackerInfo = {}
trackerInfo.tracker = tracker
trackerInfo.startWoundCalc = freeBoxes
trackerInfo.normalBoxes = Math.trunc(stat / 2) + 8 + freeBoxes
}
const clearTracker = (tracker, resetWounds) => {
@ -46,7 +89,6 @@ const setTrackerTo = (tracker, toId) => {
}
if (values[`repeating_${tracker}tracker_${id}_boxNum`] == toId) {
tempObject[`${tracker}Wounds`] = toId + 1
console.log(tempObject)
setAttrs(tempObject)
}
})
@ -54,15 +96,15 @@ const setTrackerTo = (tracker, toId) => {
})
}
on('clicked:testBox', function() {
on('clicked:testBox', function () {
renderHealthBoxes()
})
on('clicked:clearBoxes', 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', 'physicalWounds'], function (values) {
let _isCrossed = values.repeating_physicaltracker_isCrossed
let _boxId = values.repeating_physicaltracker_boxNum
@ -74,4 +116,35 @@ 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) {
let _isCrossed = values.repeating_stuntracker_isCrossed
let _boxId = values.repeating_stuntracker_boxNum
let _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) {
let _isCrossed = values.repeating_overflowtracker_isCrossed
let _boxId = values.repeating_overflowtracker_boxNum
let _wounds = values.overflowWounds
if (_isCrossed === 'false') {
setTrackerTo('overflow', _boxId)
} else if (_wounds - 1 != _boxId) {
setTrackerTo('overflow', _boxId)
} else {
clearTracker('overflow', true)
}
})
})