Clean up armor assign code
This commit is contained in:
parent
16dc347cd7
commit
4e4daa9e76
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user