Clean up armor assign code

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent 065ef1ef5e
commit a78249d611

View File

@ -156,52 +156,76 @@ function closestSibling(el, selector) {
return []; return [];
} }
function configArmor(unit, record) { function armorAssignPreviewSel(index, armorPoints, direction) {
const track = record.shadowRoot.querySelector('.physical-status-track'); const range = {
const s = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${unit.dataset.armor})`; previous: {
const armorBlocks = record.shadowRoot.querySelectorAll(s); from: index + 2 - armorPoints,
to: index + 1
armorBlocks.forEach(el => el.classList.add('armor')); },
next: {
track.addEventListener('pointerover', e => { from: index + 1,
const unprotected = [...track.querySelectorAll('damage-block:not(.armor):nth-of-type(n + 1):nth-of-type(-n + 10)')]; to: index + armorPoints
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'));
} }
}); }
track.addEventListener('pointerout', e => { return `damage-block:nth-of-type(n + ${range[direction].from}):nth-of-type(-n + ${range[direction].to})`;
track.querySelectorAll('.unprotected').forEach(el => el.classList.remove('unprotected')); }
});
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(); 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')); if (isUnarmoredBlockNum(e.target)) {
track.querySelectorAll('damage-block.unprotected').forEach(el => { track
el.classList.remove('unprotected'); .querySelectorAll(`damage-block.${armoredClass}`)
el.classList.add('armor'); .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) { function createRecord(unit) {
@ -242,7 +266,7 @@ function createRecord(unit) {
spans.forEach(el => div.appendChild(el)); spans.forEach(el => div.appendChild(el));
if (unit.dataset.armor) configArmor(unit, div); if (unit.dataset.armor) assignArmor(unit, div);
div.addEventListener('contextmenu', deactivationHandler); div.addEventListener('contextmenu', deactivationHandler);
return div; return div;