| 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 11:22:42 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-24 12:21:35 -0700 |
| commit | b73217c5c45e2c23ac14e70346036cf4477a6ebe (patch) | |
| tree | c66cb1b18eba1db7b25611ff779cb361dc7da813 | |
| parent | 3d2d5cad852a8dc5bd8f4f619b85775a3d1a09f6 (diff) | |
Make trooper counters groups
| -rw-r--r-- | public/map.css | 44 | ||||
| -rw-r--r-- | public/map.svg | 28 | ||||
| -rw-r--r-- | src/modules/counter.js | 24 | ||||
| -rw-r--r-- | src/modules/game.js | 24 |
4 files changed, 48 insertions, 72 deletions
diff --git a/public/map.css b/public/map.css index 71dfe79..cc95931 100644 --- a/public/map.css +++ b/public/map.css @@ -65,7 +65,7 @@ polyline.move-trace { r: inherit; } -g.troop-counter, g.troop-counter use { +g.troop-counter, g.counter, g.troop-counter use { r: inherit; } @@ -94,38 +94,17 @@ g.troop-counter-template text { transform: translate(-5px, -5px); } -g#points g use.counter { - r: 5px; -} - -g#points g.hover use[href="#point"] { - opacity: 1; - fill: orange; -} - -g#points g.hover use.counter { - r: 7px; -} - -g#points use.counter[data-troop-allegiance="davion"] { - fill: red; -} - -g#points use.counter[data-troop-allegiance="liao"] { - fill: green; -} - -use.clone { +g.clone { stroke: white; stroke-width: 0.5px; stroke-dasharray: 1; } -use[data-allegiance="davion"].clone { +g[data-allegiance="davion"].clone { fill: rgb(255, 126, 126); } -use[data-allegiance="liao"].clone { +g[data-allegiance="liao"].clone { fill: rgb(130, 190, 130); } @@ -180,7 +159,7 @@ use[href*="#t-"] { r: 5px; } -use.selected { +g.selected use { animation: 1s selected 0.25s linear infinite; stroke-width: 2px; stroke: yellow; @@ -195,28 +174,23 @@ use.selected { } } -use[data-allegiance="liao"] { +.counter[data-allegiance="liao"] { fill: #008000; } -use[data-allegiance="davion"] { +.counter[data-allegiance="davion"] { fill: red; } -/* Counter is off the grid */ -use[href*="#t-"][data-x]:hover { - --scale: 1.5; -} - .board { transform: translate(19px, 31px) scale(4); } -g.start-locations g:first-child { +g.start-locations > g:first-child { --i: -2; } -g.start-locations g:last-child { +g.start-locations > g:last-child { --i: 52; } diff --git a/public/map.svg b/public/map.svg index f4774c0..d647e97 100644 --- a/public/map.svg +++ b/public/map.svg @@ -54,22 +54,22 @@ <g class="grid"> <g class="start-locations"> <g> - <use data-x="13" class="counter" href="#t-1" data-allegiance="liao" data-number="1"/> - <use data-x="14" class="counter" href="#t-2" data-allegiance="liao" data-number="2"/> - <use data-x="15" class="counter" href="#t-3" data-allegiance="liao" data-number="3"/> - <use data-x="16" class="counter" href="#t-4" data-allegiance="liao" data-number="4"/> - <use data-x="17" class="counter" href="#t-5" data-allegiance="liao" data-number="5"/> - <use data-x="18" class="counter" href="#t-6" data-allegiance="liao" data-number="6"/> - <use data-x="19" class="counter" href="#t-7" data-allegiance="liao" data-number="7"/> + <g data-x="13" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g> + <g data-x="14" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g> + <g data-x="15" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g> + <g data-x="16" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g> + <g data-x="17" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g> + <g data-x="18" class="counter" data-allegiance="liao" data-number="6"><use href="#t-6"/></g> + <g data-x="19" class="counter" data-allegiance="liao" data-number="7"><use href="#t-7"/></g> </g> <g> - <use data-x="13" class="counter" href="#t-1" data-allegiance="davion" data-number="1"/> - <use data-x="14" class="counter" href="#t-2" data-allegiance="davion" data-number="2"/> - <use data-x="15" class="counter" href="#t-3" data-allegiance="davion" data-number="3"/> - <use data-x="16" class="counter" href="#t-4" data-allegiance="davion" data-number="4"/> - <use data-x="17" class="counter" href="#t-5" data-allegiance="davion" data-number="5"/> - <use data-x="18" class="counter" href="#t-6" data-allegiance="davion" data-number="6"/> - <use data-x="19" class="counter" href="#t-7" data-allegiance="davion" data-number="7"/> + <g data-x="13" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g> + <g data-x="14" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g> + <g data-x="15" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g> + <g data-x="16" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g> + <g data-x="17" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g> + <g data-x="18" class="counter" data-allegiance="davion" data-number="6"><use href="#t-6"/></g> + <g data-x="19" class="counter" data-allegiance="davion" data-number="7"><use href="#t-7"/></g> </g> </g> <g data-y="0"> diff --git a/src/modules/counter.js b/src/modules/counter.js index 3438566..a4bd4b4 100644 --- a/src/modules/counter.js +++ b/src/modules/counter.js @@ -13,7 +13,7 @@ export default class Counter { } selector(troopNumber, allegiance) { - return `use.counter${this.dataSelector(troopNumber, allegiance)}`; + return `.counter${this.dataSelector(troopNumber, allegiance)}`; } position(x, y) { @@ -21,7 +21,7 @@ export default class Counter { } counterPosition(x, y) { - return `use.counter[data-x="${x}"][data-x="${y}"]`; + return `.counter[data-x="${x}"][data-x="${y}"]`; } traceSelector(troopNumber, allegiance) { @@ -29,19 +29,19 @@ export default class Counter { } getCounters() { - return this.svg.querySelectorAll(`use[data-allegiance][data-number]:not(.clone)`); + return this.svg.querySelectorAll(`.counter[data-allegiance][data-number]:not(.clone)`); } getClones(al, n) { - return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"].clone`); + return this.svg.querySelectorAll(`.counter.clone[data-allegiance="${al}"][data-number="${n}"]`); } getCounter(al, n) { - return this.svg.querySelector(`use[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`); + return this.svg.querySelector(`.counter[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`); } getCounterAndClones(al, n) { - return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"]`); + return this.svg.querySelectorAll(`.counter[data-allegiance="${al}"][data-number="${n}"]`); } getTrace({ dataset: { allegiance, number } }) { @@ -247,7 +247,7 @@ export default class Counter { selected.parentElement.parentElement.dataset.y ] - let clone = selected.cloneNode(); + let clone = selected.cloneNode(true); clone.classList.remove(selectedClass); clone.classList.add('clone'); @@ -255,12 +255,6 @@ export default class Counter { selected.parentElement.appendChild(clone); point.parentElement.appendChild(selected); - console.log(this.getCounterAndClones(troopAllegiance, troopNumber)); - - if (clone.parentElement.querySelector('[href="#counter-prone"]')) { - this.toggleProne(); - } - let previous = this.getCellPosition(clone.parentElement), current = this.getCellPosition(selected.parentElement); @@ -331,14 +325,14 @@ export default class Counter { isOnBoard = selected && selected.parentElement.hasAttribute('data-x'); if (selected && isOnBoard) { - const proneCounter = selected.parentElement.querySelector('[href="#counter-prone"]'); + const proneCounter = selected.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); + selected.appendChild(counter); } } } diff --git a/src/modules/game.js b/src/modules/game.js index ff9937b..657aa9d 100644 --- a/src/modules/game.js +++ b/src/modules/game.js @@ -23,11 +23,19 @@ export default class Game { } getCells() { - return this.svg.querySelectorAll('g[data-x]'); + return this.svg.querySelectorAll('g[data-y] > g[data-x]'); } getCell(x, y) { - return this.svg.querySelector(`g[data-y="${y}"] g[data-x="${x}"]`); + return this.svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`); + } + + getCellOccupant(cell) { + return cell.querySelector('.counter'); + } + + getCellContents(cell) { + return cell.querySelectorAll('*:not(use[href="#hex"])'); } getHex(cell) { @@ -35,7 +43,7 @@ export default class Game { } getSelected() { - return this.svg.querySelector(`use[data-allegiance][data-number].selected`); + return this.svg.querySelector(`.counter.selected[data-allegiance][data-number]`); } getSightLine() { @@ -55,7 +63,7 @@ export default class Game { } getCounterAtGridIndex(x, y) { - return this.getCell(x, y).querySelector('use[href*="#t-"'); + return this.getCell(x, y).querySelector('.counter'); } getBoard() { @@ -152,8 +160,8 @@ export default class Game { const state = { placing: this.placing, hex: cell.querySelector('use[href="#hex"]'), - occupant: cell.querySelector('use[href*="#t-"'), - contents: cell.querySelectorAll('*:not(use[href="#hex"])') + occupant: this.getCellOccupant(cell), + contents: this.getCellContents(cell) }; let toPlace = this.placing.pop(); @@ -285,7 +293,7 @@ export default class Game { } } - let occupant = cell.querySelector('use[href*="#t-"'); + let occupant = this.getCellOccupant(cell); if (occupant) { const { number, allegiance } = occupant.dataset; @@ -304,7 +312,7 @@ export default class Game { this.sightLine.clear(); } - let occupant = cell.querySelector('use[href*="#t-"'); + let occupant = this.getCellOccupant(cell); if (occupant) { let { number, allegiance } = occupant.dataset, |
