| 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-24 10:11:18 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-24 10:11:18 -0700 |
| commit | 3d2d5cad852a8dc5bd8f4f619b85775a3d1a09f6 (patch) | |
| tree | 8c62236025c5eae7b054ced160a07cd02e720d8f | |
| parent | 96e6f8a09afaf7bc729b7e14eb0d72dd372ca9fd (diff) | |
WIP: hover over counter reveals firing arc working again
| -rw-r--r-- | src/modules/counter.js | 46 | ||||
| -rw-r--r-- | src/modules/game.js | 74 |
2 files changed, 57 insertions, 63 deletions
diff --git a/src/modules/counter.js b/src/modules/counter.js index 21a0238..3438566 100644 --- a/src/modules/counter.js +++ b/src/modules/counter.js @@ -61,29 +61,29 @@ export default class Counter { return pt; } - pointerOver(e) { - const { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset, - cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`); - - if (cp) { - cp.style.display = 'none'; - } - } - - pointerOut(e) { - let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset, - cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`); - - if (cp) { - let isVisible = - document - .getElementById('toggle-firing-arc-vis') - .querySelector(`input[data-allegiance="${troopAllegiance}"]`) - .checked; - - cp.style.display = isVisible ? 'none' : ''; - } - } + // pointerOver(e) { + // const { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset, + // cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`); + + // if (cp) { + // cp.style.display = 'none'; + // } + // } + + // pointerOut(e) { + // let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset, + // cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`); + + // if (cp) { + // let isVisible = + // document + // .getElementById('toggle-firing-arc-vis') + // .querySelector(`input[data-allegiance="${troopAllegiance}"]`) + // .checked; + + // cp.style.display = isVisible ? 'none' : ''; + // } + // } click(e) { if (e.target.classList.contains(selectedClass)) { diff --git a/src/modules/game.js b/src/modules/game.js index a81cb5f..ff9937b 100644 --- a/src/modules/game.js +++ b/src/modules/game.js @@ -133,9 +133,6 @@ export default class Game { setUpCells() { this.getCells().forEach(cell => { - let group = cell, - point = this.getHex(cell); - function isGrenade(el) { return el && el.getAttribute('href') === '#counter-grenade'; } @@ -164,7 +161,7 @@ export default class Game { if (isGrenade(toPlace)) { state.hex.after(toPlace); } else if (toPlace && !state.occupant) { - this.counter.place(point); + this.counter.place(this.getHex(cell)); this.placing.push(toPlace); const lockedSl = this.svg.querySelector('.sight-line:not(.active)'); @@ -247,33 +244,6 @@ export default class Game { } }); - // point.addEventListener('click', e => { - // const toPlace = this.placing.pop(); - - // // TODO - // let existingOccupant = - // this.svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`); - - // if (toPlace && toPlace.getAttribute('href') === '#counter-grenade') { - // point.after(toPlace); - // return; - // } - - // if (this.getSelected() && !existingOccupant) { - // let sl = this.svg.querySelector('.sight-line'); - // this.placing.push(toPlace); - // this.counter.place(point); - - // if (sl) { - // if (sl.classList.contains('active')) { - // this.sightLine.clear(); - // } else { - // this.sightLine.update(point, this.getCellPosition(point.parentElement)); - // } - // } - // } - // }); - // Logic for this event: // If there's a locked sightline, unlock it. Otherwise, if there's an // active sightline, lock it. @@ -284,8 +254,9 @@ export default class Game { // There is a locked sightline when there is a selected soldier, its // counter is on the board, and one cell has the 'sight-line-target' class. - group.addEventListener('contextmenu', e => { + cell.addEventListener('contextmenu', e => { e.preventDefault(); + let sl = this.svg.querySelector('.sight-line'); if (sl) { @@ -294,14 +265,14 @@ export default class Game { if (sl.classList.contains('active')) { this.sightLine.clear(); } else { - group.querySelector(`use[href="#hex"]`).classList.add('sight-line-target'); + cell.querySelector(`use[href="#hex"]`).classList.add('sight-line-target'); } - group.dispatchEvent(new MouseEvent('pointerover')); + cell.dispatchEvent(new MouseEvent('pointerover')); } }); - group.addEventListener('pointerover', e => { + cell.addEventListener('pointerover', e => { let selected = this.getSelected(); if (selected) { @@ -309,26 +280,49 @@ export default class Game { isOnBoard = selected.parentElement.hasAttribute('data-x'), sourceCell = selected.parentElement; - if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != group) { - this.sightLine.draw(sourceCell, group); + if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != cell) { + this.sightLine.draw(sourceCell, cell); + } + } + + let occupant = cell.querySelector('use[href*="#t-"'); + + if (occupant) { + const { number, allegiance } = occupant.dataset; + const cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`); + + if (cp) { + cp.style.display = 'none'; } } }); - group.addEventListener('pointerout', e => { + cell.addEventListener('pointerout', e => { let sl = this.svg.querySelector('.sight-line.active'); if (sl && sl.classList.contains('active')) { this.sightLine.clear(); } + + let occupant = cell.querySelector('use[href*="#t-"'); + + if (occupant) { + let { number, allegiance } = occupant.dataset, + cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`); + + if (cp) { + cp.style.display = this.#firingArcVisibility[allegiance] ? 'none' : ''; + } + } }); }); } setFiringArc(size) { - const counter = this.getSelected(); + const counter = this.getSelected(), + isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x'); - if (counter) { + if (isOnBoard(counter)) { const { allegiance, number } = counter.dataset, cellPosition = this.getCellPosition(counter.parentElement); |