Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-08-07 17:56:56 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-08-07 17:56:56 -0700
commit4e4daa9e767ddaee9d662a6e1a9e213f15384680 (patch)
tree357ec71bff43d01e6793d6fa039c0b0f9f8b8de0
parent16dc347cd7ce364e408b431af3a63c9fddc48a31 (diff)
Clean up armor assign code
Diffstat
-rw-r--r--src/modules/record_sheet.js102
1 files changed, 63 insertions, 39 deletions
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index b55058d..241725d 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -156,52 +156,76 @@ function closestSibling(el, selector) {
return [];
}
-function configArmor(unit, record) {
+function armorAssignPreviewSel(index, armorPoints, direction) {
+ const range = {
+ previous: {
+ from: index + 2 - armorPoints,
+ to: index + 1
+ },
+ next: {
+ from: index + 1,
+ to: index + armorPoints
+ }
+ }
+
+ return `damage-block:nth-of-type(n + ${range[direction].from}):nth-of-type(-n + ${range[direction].to})`;
+}
+
+function assignArmor({ dataset: { armor: armorPts }}, record) {
+ const previewClass = 'preview';
+ const armoredClass = 'armor';
+ const armorableSel = ':nth-of-type(n + 1):nth-of-type(-n + 10)';
const track = record.shadowRoot.querySelector('.physical-status-track');
- const s = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${unit.dataset.armor})`;
- const armorBlocks = record.shadowRoot.querySelectorAll(s);
-
- armorBlocks.forEach(el => el.classList.add('armor'));
-
- track.addEventListener('pointerover', e => {
- const unprotected = [...track.querySelectorAll('damage-block:not(.armor):nth-of-type(n + 1):nth-of-type(-n + 10)')];
-
- if (e.target.getAttributeNS(null, 'slot') === 'block-number' && unprotected.includes(e.target.parentElement)) {
- e.target.parentElement.classList.add('unprotected');
- const [{ direction }] = closestSibling(e.target.parentElement, '.armor');
- const damageBlocks = track.querySelectorAll('damage-block:nth-of-type(n + 1):nth-of-type(-n + 10)');
- const currentIndex = [...damageBlocks].findIndex(el => el === e.target.parentElement);
-
- const range = {
- previous: {
- from: currentIndex + 2 - +unit.dataset.armor,
- to: currentIndex + 1
- },
- next: {
- from: currentIndex + 1,
- to: currentIndex + +unit.dataset.armor
- }
- }
+ const armorableBlocks = track.querySelectorAll(`damage-block${armorableSel}`);
+ const initial = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${armorPts})`;
+
+ track.querySelectorAll(initial).forEach(el => el.classList.add(armoredClass));
+
+ function isUnarmoredBlockNum(el) {
+ const unarmored = track.querySelectorAll(`damage-block:not(.${armoredClass})${armorableSel}`);
+
+ return [
+ el.getAttributeNS(null, 'slot') === 'block-number',
+ [...unarmored].includes(el.parentElement)
+ ].every(c => c);
+ };
+
+ function armorAssignPreviewHandler(e) {
+ const parent = e.target.parentElement;
- const sel = `damage-block:nth-of-type(n + ${range[direction].from}):nth-of-type(-n + ${range[direction].to})`;
- track.querySelectorAll(sel).forEach(el => el.classList.add('unprotected'));
+ if (isUnarmoredBlockNum(e.target)) {
+ const [{ direction }] = closestSibling(parent, `.${armoredClass}`);
+ const index = [...armorableBlocks].findIndex(el => el === parent);
+ const previewSel = armorAssignPreviewSel(index, +armorPts, direction);
+
+ track.querySelectorAll(previewSel).forEach(el => el.classList.add(previewClass));
}
- });
+ }
- track.addEventListener('pointerout', e => {
- track.querySelectorAll('.unprotected').forEach(el => el.classList.remove('unprotected'));
- });
+ function clearArmorAssignPreviewHandler(e) {
+ track
+ .querySelectorAll(`.${previewClass}`)
+ .forEach(el => el.classList.remove(previewClass));
+ }
- track.addEventListener('click', e => {
+ function armorAssignHandler(e) {
e.stopPropagation();
- if (e.target.getAttributeNS(null, 'slot') === 'block-number' && e.target.parentElement.classList.contains('unprotected')) {
- track.querySelectorAll('damage-block.armor').forEach(el => el.classList.remove('armor'));
- track.querySelectorAll('damage-block.unprotected').forEach(el => {
- el.classList.remove('unprotected');
- el.classList.add('armor');
+
+ if (isUnarmoredBlockNum(e.target)) {
+ track
+ .querySelectorAll(`damage-block.${armoredClass}`)
+ .forEach(el => el.classList.remove(armoredClass));
+
+ track.querySelectorAll(`damage-block.${previewClass}`).forEach(el => {
+ el.classList.remove(previewClass);
+ el.classList.add(armoredClass);
});
}
- });
+ }
+
+ track.addEventListener('pointerover', armorAssignPreviewHandler);
+ track.addEventListener('pointerout', clearArmorAssignPreviewHandler);
+ track.addEventListener('click', armorAssignHandler);
}
function createRecord(unit) {
@@ -242,7 +266,7 @@ function createRecord(unit) {
spans.forEach(el => div.appendChild(el));
- if (unit.dataset.armor) configArmor(unit, div);
+ if (unit.dataset.armor) assignArmor(unit, div);
div.addEventListener('contextmenu', deactivationHandler);
return div;