From f600faf50e39ee16094979a25d00e3e77f1e39cb Mon Sep 17 00:00:00 2001 From: Maverick Date: Wed, 26 Oct 2022 15:16:33 +0200 Subject: [PATCH] Add overflow and stun damage tracks and include it functionality. --- components/_healthBox.css | 16 ++++- components/_healthBox.pug | 30 +++++++-- main.css | 12 +++- output/main.css | 38 ++++++++--- output/main.html | 114 +++++++++++++++++++++++++++----- workers/healthTrackerManager.js | 93 +++++++++++++++++++++++--- 6 files changed, 258 insertions(+), 45 deletions(-) diff --git a/components/_healthBox.css b/components/_healthBox.css index 9f95eed..0329031 100644 --- a/components/_healthBox.css +++ b/components/_healthBox.css @@ -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; } \ No newline at end of file diff --git a/components/_healthBox.pug b/components/_healthBox.pug index 104e1a2..0e2be16 100644 --- a/components/_healthBox.pug +++ b/components/_healthBox.pug @@ -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 \ No newline at end of file + .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 \ No newline at end of file diff --git a/main.css b/main.css index 85ec8e8..7533295 100644 --- a/main.css +++ b/main.css @@ -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 { diff --git a/output/main.css b/output/main.css index 04a8b79..3ce0a35 100644 --- a/output/main.css +++ b/output/main.css @@ -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; diff --git a/output/main.html b/output/main.html index 998fbe7..25be914 100644 --- a/output/main.html +++ b/output/main.html @@ -108,16 +108,35 @@

Damage Tracks

+ -
- - - - -
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
@@ -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); + }); +}); \ No newline at end of file diff --git a/workers/healthTrackerManager.js b/workers/healthTrackerManager.js index 724bdf7..876e89a 100644 --- a/workers/healthTrackerManager.js +++ b/workers/healthTrackerManager.js @@ -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) } -})}) \ No newline at end of file + }) +}) + +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) + } + }) +}) \ No newline at end of file