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