| 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-04-23 19:01:29 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-23 19:01:29 -0700 |
| commit | f60969ef8dc72d3b97c5abb9f637171d2a6f2921 (patch) | |
| tree | ab71b28f67116d473ef799bcc6db24facbae258e /src/modules/counter.js | |
| parent | 1a75bf469aa72f9845fe86ac2ebb34424c262f33 (diff) | |
WIP: handle clicking on counters at the cell level
Diffstat (limited to 'src/modules/counter.js')
| -rw-r--r-- | src/modules/counter.js | 44 |
1 files changed, 18 insertions, 26 deletions
diff --git a/src/modules/counter.js b/src/modules/counter.js index de393a0..162e56e 100644 --- a/src/modules/counter.js +++ b/src/modules/counter.js @@ -6,8 +6,6 @@ export default class Counter { constructor(svg, container) { this.svg = svg; this.container = container; - - this.getCounters().forEach(c => this.addEventListeners(c)); } dataSelector(troopNumber, allegiance) { @@ -60,13 +58,6 @@ export default class Counter { return pt; } - addEventListeners(counter) { - counter.addEventListener('pointerover', this.pointerOver.bind(this)); - counter.addEventListener('pointerout', this.pointerOut.bind(this)); - counter.addEventListener('click', this.click.bind(this)); - // counter.addEventListener('dblclick', dblClick); - } - pointerOver(e) { const { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset, cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`); @@ -245,32 +236,33 @@ export default class Counter { troopAllegiance = selected.dataset.allegiance, troopNumber = selected.dataset.number; - let counter, points, + let points, counterNodeList = this.getCounterAndClones(troopAllegiance, troopNumber); if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) { - let counters = Array.from(counterNodeList), - original = counters.find(el => !el.classList.contains('clone')), - trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance)); + let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance)); + + let prevCoords = [ + selected.parentElement.dataset.x, + selected.parentElement.parentElement.dataset.y + ] - counter = original.cloneNode(); - counter.setAttributeNS(null, 'x', 0); - counter.setAttributeNS(null, 'y', 0); - counter.classList.remove(selectedClass); - counter.classList.add('clone'); + let clone = selected.cloneNode(); + clone.classList.remove(selectedClass); + clone.classList.add('clone'); - original.setAttributeNS(null, 'x', 0); - original.setAttributeNS(null, 'y', 0); + selected.dataset.previous = prevCoords; + selected.parentElement.appendChild(clone); + point.parentElement.appendChild(selected); - original.parentElement.appendChild(counter); - point.parentElement.appendChild(original); + console.log(this.getCounterAndClones(troopAllegiance, troopNumber)); - if (counter.parentElement.querySelector('[href="#counter-prone"]')) { + if (clone.parentElement.querySelector('[href="#counter-prone"]')) { this.toggleProne(); } - let previous = this.getCellPosition(counter.parentElement), - current = this.getCellPosition(original.parentElement); + let previous = this.getCellPosition(clone.parentElement), + current = this.getCellPosition(selected.parentElement); if (!trace) { trace = document.createElementNS(svgns, 'polyline'); @@ -287,7 +279,7 @@ export default class Counter { } trace.setAttributeNS(null, 'points', points); - counter.addEventListener('click', this.clickClone.bind(this)); + // clone.addEventListener('click', this.clickClone.bind(this)); } else { selected.removeAttribute('data-x'); point.parentElement.appendChild(selected); |