| 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-17 12:52:28 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-17 13:05:47 -0700 |
| commit | 143e3cdb45a96912d6791a37f64bf3893879cd93 (patch) | |
| tree | 9e2b82407cb73f8f797b52e970244a8653e7847e /src/modules | |
| parent | 4229c732bca15f4563f596ca345d576984bc517a (diff) | |
Add callbacks for updating the UI
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/game.js | 89 |
1 files changed, 77 insertions, 12 deletions
diff --git a/src/modules/game.js b/src/modules/game.js index 0435c28..c94685e 100644 --- a/src/modules/game.js +++ b/src/modules/game.js @@ -345,6 +345,23 @@ export default class Game { } } + select(allegiance, number) { + this.Counter.select({ dataset: { allegiance, number } }); + } + + unSelect() { + this.Counter.unSelect(); + } + + endTurn(allegiance) { + const selector = `#firing-arcs [data-troop-allegiance="${allegiance}"]`; + this.svg.querySelectorAll(selector).forEach(el => el.remove()); + } + + toggleProne() { + this.Counter.toggleProne(); + } + toggleFiringArcVisibility(allegiance) { const vis = this.#firingArcVisibility[allegiance], clipPaths = this.svg.querySelectorAll(`clipPath[data-troop-allegiance="${allegiance}"]`); @@ -483,15 +500,23 @@ export default class Game { container.SightLine.update(this); } + container.proneFlagCallback(!!this.parentElement.querySelector('[href="#counter-prone"]')); + this.parentElement.appendChild(counter); + this.remove(); container.Counter.removeClones(counter); trace.remove(); } else { + const proneCounter = this.parentElement.querySelector('[href="#counter-prone"]'); + + if (proneCounter) { + proneCounter.remove(); + } + points = points.filter(p => p != `${pos.x},${pos.y}`).join(' '); trace.setAttributeNS(null, 'points', points); + this.remove(); } - - this.remove(); } }, @@ -550,6 +575,14 @@ export default class Game { container.SightLine.draw(this.parentElement, clone.parentElement); } + const proneCounter = this.parentElement.querySelector('[href="#counter-prone"]'); + + if (proneCounter) { + proneCounter.remove(); + } + + container.proneFlagCallback(!!clone.parentElement.querySelector('[href="#counter-prone"]')); + clone.parentElement.appendChild(this); clone.remove(); } @@ -588,6 +621,7 @@ export default class Game { counter.classList.add(selectedClass); let existingArcs = container.getExistingArcs(allegiance, number); existingArcs.forEach(el => el.removeAttribute('clip-path')); + container.selectCallback({ prone: this.hasProne(counter), ...counter.dataset }); } }; @@ -639,6 +673,10 @@ export default class Game { original.parentElement.appendChild(counter); point.parentElement.appendChild(original); + if (counter.parentElement.querySelector('[href="#counter-prone"]')) { + container.Counter.toggleProne(); + } + let previous = container.getCellPosition(counter.parentElement), current = container.getCellPosition(original.parentElement); @@ -671,7 +709,15 @@ export default class Game { }; this.removeClones = function ({ dataset: { allegiance, number }}) { - container.getClones(allegiance, number).forEach(el => el.remove()); + container.getClones(allegiance, number).forEach(el => { + const proneCounter = el.parentElement.querySelector('[href="#counter-prone"]'); + + if (proneCounter) { + proneCounter.remove(); + } + + el.remove() + }); }; this.endMove = function (el) { @@ -686,12 +732,33 @@ export default class Game { this.unSelect(); }; - this.hasProne = function (troopNumber, troopAllegiance) { - let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`; + this.hasProne = function (counter) { + const isOnBoard = counter.parentElement.hasAttribute('data-x'); + + if (isOnBoard) { + return !!counter.parentElement.querySelector('[href="#counter-prone"]'); + } - return !!container.svg.querySelector(selector); + return false; }; + this.toggleProne = function() { + const selected = container.getSelected(), + isOnBoard = selected && selected.parentElement.hasAttribute('data-x'); + + if (selected && isOnBoard) { + const proneCounter = selected.parentElement.querySelector('[href="#counter-prone"]'); + + if (proneCounter) { + proneCounter.remove(); + } else { + const counter = document.createElementNS(svgns, 'use'); + counter.setAttributeNS(null, 'href', '#counter-prone'); + selected.parentElement.appendChild(counter); + } + } + } + this.addEventListeners = function (counter) { counter.addEventListener('pointerover', pointerOver); counter.addEventListener('pointerout', pointerOut); @@ -724,9 +791,8 @@ export default class Game { }; this.clearHexes = function() { - if (ptGrp.info) { - ptGrp.info.querySelector('#hex-count').textContent = '-'; - ptGrp.info.style.display = 'none'; + if (ptGrp.distanceCallback) { + ptGrp.distanceCallback(); } ptGrp.getActiveHexes().forEach(el => el.classList.remove('active')); @@ -800,9 +866,8 @@ export default class Game { this.drawHexes = function (...coords) { this.clearHexes() - if (ptGrp.info) { - ptGrp.info.querySelector('#hex-count').textContent = offset_distance(...coords); - ptGrp.info.style.display = 'block'; + if (ptGrp.distanceCallback) { + ptGrp.distanceCallback(offset_distance(...coords)); } let lineCoords = linedraw(...coords); |