Clean up armor assign code

This commit is contained in:
Catalin Constantin Mititiuc 2024-08-07 17:56:56 -07:00
parent 16dc347cd7
commit 4e4daa9e76

View File

@ -156,52 +156,76 @@ function closestSibling(el, selector) {
return [];
}
function configArmor(unit, record) {
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 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'));
function armorAssignPreviewSel(index, armorPoints, direction) {
const range = {
previous: {
from: index + 2 - armorPoints,
to: index + 1
},
next: {
from: index + 1,
to: index + armorPoints
}
});
}
track.addEventListener('pointerout', e => {
track.querySelectorAll('.unprotected').forEach(el => el.classList.remove('unprotected'));
});
return `damage-block:nth-of-type(n + ${range[direction].from}):nth-of-type(-n + ${range[direction].to})`;
}
track.addEventListener('click', e => {
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 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;
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));
}
}
function clearArmorAssignPreviewHandler(e) {
track
.querySelectorAll(`.${previewClass}`)
.forEach(el => el.classList.remove(previewClass));
}
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;