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