| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-07 10:52:37 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-07 10:52:37 -0700 |
| commit | cec78881d1290ffc6529de3f05ff0cc0dbc217ad (patch) | |
| tree | ccc2b961d5db453c56bfbd69aa1e89e068cb52bd | |
| parent | 0783d703c1365f3307cb9e780b81f5ef19387bac (diff) | |
Extract record deactivation event handler function
| -rw-r--r-- | src/modules/record_sheet.js | 82 |
1 files changed, 41 insertions, 41 deletions
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 34ffe80..322b879 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -89,6 +89,45 @@ function createWeaponIcon(type) { return icon; } +function makeInactiveDivider(parent) { + const div = document.createElement('div'); + div.classList.add('inactive-divider'); + div.textContent = 'Inactive'; + parent.append(div); + return div; +} + +function deactivationHandler(e) { + e.preventDefault(); + + if (!this.classList.contains('inactive')) { + const inactiveDivider = this.parentElement.querySelector('.inactive-divider') || makeInactiveDivider(this.parentElement); + + this.addEventListener('transitionend', e => { + inactiveDivider.after(this); + inactiveDivider.scrollIntoView({ behavior: 'smooth' }); + }); + + this.classList.add('inactive'); + this.setAttributeNS(null, 'style', 'transform: scale(0.9);'); + } else { + const squadRecords = this.parentElement.querySelectorAll(`.soldier-record:not(.inactive)[data-squad="${this.dataset.squad}"]`); + const sorted = [...squadRecords, this].sort(({ dataset: { number: a }}, { dataset: { number: b }}) => +a > +b); + const index = sorted.findIndex(record => record === this); + + if (index === 0) + this.parentElement.prepend(this); + else if (index === sorted.length - 1) + sorted[sorted.length - 2].after(this) + else + sorted[index - 1].after(this) + + this.classList.remove('inactive'); + this.removeAttributeNS(null, 'style'); + this.scrollIntoView({ behavior: 'smooth' }); + } +} + function createRecord(unit) { const { dataset: { allegiance, number, squad }} = unit, @@ -169,44 +208,7 @@ function createRecord(unit) { moveArmorEl.forEach(el => el.addEventListener('click', moveArmorHandler)); } - function makeInactiveDivider(parent) { - const div = document.createElement('div'); - div.classList.add('inactive-divider'); - div.textContent = 'Inactive'; - parent.append(div); - return div; - } - - div.addEventListener('contextmenu', e => { - e.preventDefault(); - - if (!div.classList.contains('inactive')) { - const inactiveDivider = div.parentElement.querySelector('.inactive-divider') || makeInactiveDivider(div.parentElement); - - div.addEventListener('transitionend', e => { - inactiveDivider.after(div); - inactiveDivider.scrollIntoView({ behavior: 'smooth' }); - }); - - div.classList.add('inactive'); - div.setAttributeNS(null, 'style', 'transform: scale(0.9);'); - } else { - const squadRecords = div.parentElement.querySelectorAll(`.soldier-record:not(.inactive)[data-squad="${div.dataset.squad}"]`); - const sorted = [...squadRecords, div].sort(({dataset: { number: a }}, {dataset: { number: b }}) => +a > +b); - const index = sorted.findIndex(record => record === div); - - if (index === 0) - div.parentElement.prepend(div); - else if (index === sorted.length - 1) - sorted[sorted.length - 2].after(div) - else - sorted[index - 1].after(div) - - div.classList.remove('inactive'); - div.removeAttributeNS(null, 'style'); - div.scrollIntoView({ behavior: 'smooth' }); - } - }); + div.addEventListener('contextmenu', deactivationHandler); return div; } @@ -317,9 +319,7 @@ function endMove() { selected.classList.toggle('movement-ended'); deselect(); - if (next) { - Observable.notify('select', next); - } + if (next) Observable.notify('select', next); } } |