Improve armor assign

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

View File

@ -128,44 +128,80 @@ function deactivationHandler(e) {
} }
} }
function closestSibling(el, selector) {
let nextMatch, prevMatch;
const next = { steps: 0, direction: 'next' };
const prev = { steps: 0, direction: 'previous' };
next.el = prev.el = el;
while (next.el || prev.el) {
next.el = next.el?.nextElementSibling;
prev.el = prev.el?.previousElementSibling;
if (next.el) next.steps += 1
if (prev.el) prev.steps += 1
nextMatch = next.el?.matches(selector);
prevMatch = prev.el?.matches(selector);
if (nextMatch || prevMatch) {
const results = [];
if (prevMatch) results.push(prev);
if (nextMatch) results.push(next);
return results;
}
}
return [];
}
function configArmor(unit, record) { 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 s = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${unit.dataset.armor})`;
const armorBlocks = record.shadowRoot.querySelectorAll(s); const armorBlocks = record.shadowRoot.querySelectorAll(s);
armorBlocks.forEach(el => el.classList.add('armor')); armorBlocks.forEach(el => el.classList.add('armor'));
const ls = 'damage-block:nth-child(1 of .armor):not(:first-child)'; track.addEventListener('pointerover', e => {
const rs = 'damage-block:nth-last-child(1 of .armor):not(:last-child)'; const unprotected = [...track.querySelectorAll('damage-block:not(.armor):nth-of-type(n + 1):nth-of-type(-n + 10)')];
const moveArmorEl = record.shadowRoot.querySelectorAll(`${ls}, ${rs}`);
function moveArmorHandler(e) { if (e.target.getAttributeNS(null, 'slot') === 'block-number' && unprotected.includes(e.target.parentElement)) {
e.stopPropagation(); 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);
this.removeEventListener('click', moveArmorHandler); const range = {
if (!this.previousElementSibling.classList.contains('armor')) { previous: {
this.previousElementSibling.classList.add('armor'); from: currentIndex + 2 - +unit.dataset.armor,
this.previousElementSibling.addEventListener('click', moveArmorHandler); to: currentIndex + 1
let current = this.nextElementSibling; },
while (current.nextElementSibling && current.nextElementSibling.classList.contains('armor')) { next: {
current = current.nextElementSibling; from: currentIndex + 1,
to: currentIndex + +unit.dataset.armor
}
} }
current.classList.remove('armor');
current.removeEventListener('click', moveArmorHandler); const sel = `damage-block:nth-of-type(n + ${range[direction].from}):nth-of-type(-n + ${range[direction].to})`;
current.previousElementSibling.addEventListener('click', moveArmorHandler); track.querySelectorAll(sel).forEach(el => el.classList.add('unprotected'));
} else if (!this.nextElementSibling.classList.contains('armor')) {
this.nextElementSibling.classList.add('armor');
this.nextElementSibling.addEventListener('click', moveArmorHandler);
let current = this.previousElementSibling;
while (current.previousElementSibling && current.previousElementSibling.classList.contains('armor')) {
current = current.previousElementSibling;
}
current.classList.remove('armor');
current.removeEventListener('click', moveArmorHandler);
current.nextElementSibling.addEventListener('click', moveArmorHandler);
} }
} });
moveArmorEl.forEach(el => el.addEventListener('click', moveArmorHandler)); track.addEventListener('pointerout', e => {
track.querySelectorAll('.unprotected').forEach(el => el.classList.remove('unprotected'));
});
track.addEventListener('click', 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');
});
}
});
} }
function createRecord(unit) { function createRecord(unit) {