Web Dev Solutions

Catalin Mititiuc

From 0ff2d23093beeee00fc0d0ebec50c943c1cc8873 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 7 Aug 2024 10:58:37 -0700 Subject: Extract armor setup into function --- src/modules/record_sheet.js | 83 ++++++++++++++++++++++----------------------- 1 file changed, 41 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 322b879..841a693 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -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; -- cgit v1.2.3