diff --git a/.gitignore b/.gitignore index ccafe28..23fa937 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .parcel-cache node_modules +Old_Code \ No newline at end of file diff --git a/components/_healthBox.css b/components/_healthBox.css index 162c105..9f95eed 100644 --- a/components/_healthBox.css +++ b/components/_healthBox.css @@ -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; } \ No newline at end of file diff --git a/components/_healthBox.pug b/components/_healthBox.pug index f2718da..104e1a2 100644 --- a/components/_healthBox.pug +++ b/components/_healthBox.pug @@ -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}") \ No newline at end of file +.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 \ No newline at end of file diff --git a/components/_healthBoxBox.pug b/components/_healthBoxBox.pug deleted file mode 100644 index a5f2b08..0000000 --- a/components/_healthBoxBox.pug +++ /dev/null @@ -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} \ No newline at end of file diff --git a/components/_healthBoxContainer.pug b/components/_healthBoxContainer.pug deleted file mode 100644 index 656b395..0000000 --- a/components/_healthBoxContainer.pug +++ /dev/null @@ -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) \ No newline at end of file diff --git a/main.css b/main.css index 3957465..85ec8e8 100644 --- a/main.css +++ b/main.css @@ -28,16 +28,27 @@ padding: 0px; text-align: center; vertical-align: middle; + /*color: white;*/ + padding: 2px; &[type=roll] { background-color: #550000; border: 0; + padding: 1px; width: 1.5em; height: 1.5em; background-image: none; color: white; border-radius: 8px; box-shadow: none; + position: relative; + + &::before { + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + } } } diff --git a/output/main.css b/output/main.css index 149c9e1..04a8b79 100644 --- a/output/main.css +++ b/output/main.css @@ -2,17 +2,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { display: block; } -.healthWrapper { - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - display: grid; -} - -.healthWrapper > h3 { - color: #aae; -} - -.healthWrapper > .healthContainer { +.repcontainer[data-groupname="repeating_physicaltracker"] { grid-template-columns: repeat(3, auto); justify-content: start; justify-items: center; @@ -20,59 +10,64 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { display: grid; } -.healthWrapper > .healthContainer > * { +.repcontainer[data-groupname="repeating_physicaltracker"] > * { margin: -1px; } -.healthWrapper > .healthContainer > label.healthTrackerBox { - cursor: pointer; - z-index: 1; - -webkit-appearance: none; - appearance: none; - width: 3.5rem; - height: 3.5rem; - background-color: #444; - background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: 90%; - border: 2px solid #500; - border-radius: 3px; - order: 1; - padding: 0; - position: relative; +.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; } -.healthWrapper > .healthContainer > label.healthTrackerBox.reset { - order: 2; +.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > .itemcontrol { + display: none !important; } -.healthWrapper > .healthContainer > label.healthTrackerBox > span { +.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button > span.woundModDisplay { content: "-1"; - display: none; + color: #bfbdba; position: absolute; top: 2px; right: 4px; } -.healthWrapper > .healthContainer > input:checked + .healthTrackerBox { - opacity: 0; - z-index: 0; - position: absolute; -} - -.healthWrapper > .healthContainer > input:checked + .healthTrackerBox > span { - display: block; -} - -.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox { +.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button { + -webkit-appearance: none; + appearance: none; + width: 3.5rem; + height: 3.5rem; + grid-span: 1span; background-color: #444; - background-image: none; - order: 3; + border: 2px solid #500; + border-radius: 3px; + margin: 0; + padding: 0; + position: relative; } -.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox > span { - display: block; +.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > div { + pointer-events: none; +} + +.repcontainer[data-groupname="repeating_physicaltracker"] > .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"); + background-position: center; + background-repeat: no-repeat; + background-size: 100%; +} + +.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > span.woundModDisplay { + display: none; +} + +.repcontrol[data-groupname="repeating_physicaltracker"] { + display: none !important; } .attr-rolls { @@ -162,7 +157,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { border: 0; border-radius: 1em; margin: 0 2px; - padding: 0; + padding: 2px; } .sheetform .charactersheet button[type="roll"] { @@ -174,6 +169,15 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { background-image: none; border: 0; border-radius: 8px; + padding: 1px; + position: relative; +} + +.sheetform .charactersheet button[type="roll"]:before { + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; } .sheetform .charactersheet input { diff --git a/output/main.html b/output/main.html index fb318de..998fbe7 100644 --- a/output/main.html +++ b/output/main.html @@ -107,205 +107,17 @@

Damage Tracks

-
-

Stun

-

Physical

-

Overflow

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
- -
-
- -
+
+ + +
+ + + + +
@@ -376,5 +188,74 @@ on("clicked:toggmroll", function() { }); }); }); +var renderHealthBoxes = function renderHealthBoxes() { + //let physicalBoxes = calculateBoxes('physical') + //let stunBoxes = calculateBoxes('stun') + //let overflowBoxes = calculateBoxes('overflow') + 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); + } +}; +var clearAllHealthBoxes = function clearAllHealthBoxes() { + getSectionIDs("physicaltracker", function(ids) { + ids.forEach(function(id) { + removeRepeatingRow("repeating_physicaltracker_".concat(id)); + }); + }); +}; +var clearTracker = function clearTracker(tracker, resetWounds) { + getSectionIDs("".concat(tracker, "tracker"), function(ids) { + var tempObject = {}; + ids.forEach(function(id) { + tempObject["repeating_".concat(tracker, "tracker_").concat(id, "_isCrossed")] = "false"; + }); + if (resetWounds) tempObject["".concat(tracker, "Wounds")] = 0; + setAttrs(tempObject); + }); +}; +var setTrackerTo = function setTrackerTo(tracker, toId) { + clearTracker(tracker, false); + getSectionIDs("".concat(tracker, "tracker"), function(ids) { + var tempObject = {}; + ids.forEach(function(id) { + getAttrs([ + "repeating_".concat(tracker, "tracker_").concat(id, "_boxNum") + ], function(values) { + if (values["repeating_".concat(tracker, "tracker_").concat(id, "_boxNum")] <= toId) tempObject["repeating_".concat(tracker, "tracker_").concat(id, "_isCrossed")] = "true"; + 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); + } + }); + }); + }); +}; +on("clicked:testBox", function() { + renderHealthBoxes(); +}); +on("clicked:clearBoxes", function() { + clearAllHealthBoxes(); +}); +on("clicked:repeating_physicaltracker:check-phys", function(ev) { + getAttrs([ + "repeating_physicaltracker_boxNum", + "repeating_physicaltracker_isCrossed", + "physicalWounds" + ], function(values) { + var _isCrossed = values.repeating_physicaltracker_isCrossed; + var _boxId = values.repeating_physicaltracker_boxNum; + var _physicalWounds = values.physicalWounds; + if (_isCrossed === "false") setTrackerTo("physical", _boxId); + else if (_physicalWounds - 1 != _boxId) setTrackerTo("physical", _boxId); + else clearTracker("physical", true); + }); +}); \ No newline at end of file diff --git a/workers/_worker-bundle.pug b/workers/_worker-bundle.pug index d8bd67b..5088e06 100644 --- a/workers/_worker-bundle.pug +++ b/workers/_worker-bundle.pug @@ -1,2 +1,4 @@ include ./tabToggler.js include ./extraTogglers.js +include ./healthTrackerManager.js + diff --git a/workers/healthTrackerManager.js b/workers/healthTrackerManager.js new file mode 100644 index 0000000..724bdf7 --- /dev/null +++ b/workers/healthTrackerManager.js @@ -0,0 +1,77 @@ +const renderHealthBoxes = () => { + //let physicalBoxes = calculateBoxes('physical') + //let stunBoxes = calculateBoxes('stun') + //let overflowBoxes = calculateBoxes('overflow') + 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) + } +} + +const clearAllHealthBoxes = () => { + getSectionIDs('physicaltracker', function (ids) { + ids.forEach(id => { + removeRepeatingRow(`repeating_physicaltracker_${id}`) + }); + }) +} + +const clearTracker = (tracker, resetWounds) => { + getSectionIDs(`${tracker}tracker`, function (ids) { + let tempObject = {} + ids.forEach(id => { + tempObject[`repeating_${tracker}tracker_${id}_isCrossed`] = 'false' + }); + if (resetWounds) { + tempObject[`${tracker}Wounds`] = 0 + } + setAttrs(tempObject) + }) +} + +const setTrackerTo = (tracker, toId) => { + clearTracker(tracker, false) + getSectionIDs(`${tracker}tracker`, function (ids) { + let tempObject = {} + ids.forEach(id => { + getAttrs([`repeating_${tracker}tracker_${id}_boxNum`], function (values) { + if (values[`repeating_${tracker}tracker_${id}_boxNum`] <= toId) { + tempObject[`repeating_${tracker}tracker_${id}_isCrossed`] = 'true' + } else { + tempObject[`repeating_${tracker}tracker_${id}_isCrossed`] = 'false' + } + if (values[`repeating_${tracker}tracker_${id}_boxNum`] == toId) { + tempObject[`${tracker}Wounds`] = toId + 1 + console.log(tempObject) + setAttrs(tempObject) + } + }) + }) + }) +} + +on('clicked:testBox', function() { + renderHealthBoxes() +}) + +on('clicked:clearBoxes', function() { + clearAllHealthBoxes() +}) + +on('clicked:repeating_physicaltracker:check-phys', function (ev) { + getAttrs(['repeating_physicaltracker_boxNum', 'repeating_physicaltracker_isCrossed', 'physicalWounds'], function (values) { + let _isCrossed = values.repeating_physicaltracker_isCrossed + let _boxId = values.repeating_physicaltracker_boxNum + let _physicalWounds = values.physicalWounds + if (_isCrossed === 'false') { + setTrackerTo('physical', _boxId) + } else if (_physicalWounds - 1 != _boxId) { + setTrackerTo('physical', _boxId) + } else { + clearTracker('physical', true) + } +})}) \ No newline at end of file