Improve armor assign
This commit is contained in:
parent
c2aaaeb4ec
commit
065ef1ef5e
@ -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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user