Extract armor setup into function
This commit is contained in:
parent
93a88e067f
commit
e79922c6fb
@ -128,6 +128,46 @@ function deactivationHandler(e) {
|
||||
}
|
||||
}
|
||||
|
||||
function configArmor(unit, record) {
|
||||
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'));
|
||||
|
||||
const ls = 'damage-block:nth-child(1 of .armor):not(:first-child)';
|
||||
const rs = 'damage-block:nth-last-child(1 of .armor):not(:last-child)';
|
||||
const moveArmorEl = record.shadowRoot.querySelectorAll(`${ls}, ${rs}`);
|
||||
|
||||
function moveArmorHandler(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
this.removeEventListener('click', moveArmorHandler);
|
||||
if (!this.previousElementSibling.classList.contains('armor')) {
|
||||
this.previousElementSibling.classList.add('armor');
|
||||
this.previousElementSibling.addEventListener('click', moveArmorHandler);
|
||||
let current = this.nextElementSibling;
|
||||
while (current.nextElementSibling && current.nextElementSibling.classList.contains('armor')) {
|
||||
current = current.nextElementSibling;
|
||||
}
|
||||
current.classList.remove('armor');
|
||||
current.removeEventListener('click', moveArmorHandler);
|
||||
current.previousElementSibling.addEventListener('click', moveArmorHandler);
|
||||
} 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));
|
||||
}
|
||||
|
||||
function createRecord(unit) {
|
||||
const { dataset: { allegiance, number, squad }} = unit,
|
||||
|
||||
@ -166,48 +206,7 @@ function createRecord(unit) {
|
||||
|
||||
spans.forEach(el => div.appendChild(el));
|
||||
|
||||
if (unit.dataset.armor) {
|
||||
const s = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${unit.dataset.armor})`;
|
||||
const armorBlocks = div.shadowRoot.querySelectorAll(s);
|
||||
|
||||
armorBlocks.forEach(el => {
|
||||
el.classList.add('armor');
|
||||
});
|
||||
|
||||
const ls = 'damage-block:nth-child(1 of .armor):not(:first-child)';
|
||||
const rs = 'damage-block:nth-last-child(1 of .armor):not(:last-child)';
|
||||
const moveArmorEl = div.shadowRoot.querySelectorAll(`${ls}, ${rs}`);
|
||||
|
||||
function moveArmorHandler(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
this.removeEventListener('click', moveArmorHandler);
|
||||
if (!this.previousElementSibling.classList.contains('armor')) {
|
||||
this.previousElementSibling.classList.add('armor');
|
||||
this.previousElementSibling.addEventListener('click', moveArmorHandler);
|
||||
let current = this.nextElementSibling;
|
||||
while (current.nextElementSibling && current.nextElementSibling.classList.contains('armor')) {
|
||||
current = current.nextElementSibling;
|
||||
}
|
||||
current.classList.remove('armor');
|
||||
current.removeEventListener('click', moveArmorHandler);
|
||||
current.previousElementSibling.addEventListener('click', moveArmorHandler);
|
||||
} 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));
|
||||
}
|
||||
|
||||
if (unit.dataset.armor) configArmor(unit, div);
|
||||
div.addEventListener('contextmenu', deactivationHandler);
|
||||
|
||||
return div;
|
||||
|
Loading…
x
Reference in New Issue
Block a user