ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make trooper counters groups

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent 0c389edd4b
commit ab6faa6a0d
4 changed files with 48 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/map.css
View File

@ -65,7 +65,7 @@ polyline.move-trace {
r: inherit; r: inherit;
} }
g.troop-counter, g.troop-counter use { g.troop-counter, g.counter, g.troop-counter use {
r: inherit; r: inherit;
} }
@ -94,38 +94,17 @@ g.troop-counter-template text {
transform: translate(-5px, -5px); transform: translate(-5px, -5px);
} }
g#points g use.counter { g.clone {
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 {
stroke: white; stroke: white;
stroke-width: 0.5px; stroke-width: 0.5px;
stroke-dasharray: 1; stroke-dasharray: 1;
} }
use[data-allegiance="davion"].clone { g[data-allegiance="davion"].clone {
fill: rgb(255, 126, 126); fill: rgb(255, 126, 126);
} }
use[data-allegiance="liao"].clone { g[data-allegiance="liao"].clone {
fill: rgb(130, 190, 130); fill: rgb(130, 190, 130);
} }
@ -180,7 +159,7 @@ use[href*="#t-"] {
r: 5px; r: 5px;
} }
use.selected { g.selected use {
animation: 1s selected 0.25s linear infinite; animation: 1s selected 0.25s linear infinite;
stroke-width: 2px; stroke-width: 2px;
stroke: yellow; stroke: yellow;
@ -195,28 +174,23 @@ use.selected {
} }
} }
use[data-allegiance="liao"] { .counter[data-allegiance="liao"] {
fill: #008000; fill: #008000;
} }
use[data-allegiance="davion"] { .counter[data-allegiance="davion"] {
fill: red; fill: red;
} }
/* Counter is off the grid */
use[href*="#t-"][data-x]:hover {
--scale: 1.5;
}
.board { .board {
transform: translate(19px, 31px) scale(4); transform: translate(19px, 31px) scale(4);
} }
g.start-locations g:first-child { g.start-locations > g:first-child {
--i: -2; --i: -2;
} }
g.start-locations g:last-child { g.start-locations > g:last-child {
--i: 52; --i: 52;
} }

28
public/map.svg
View File

@ -54,22 +54,22 @@
<g class="grid"> <g class="grid">
<g class="start-locations"> <g class="start-locations">
<g> <g>
<use data-x="13" class="counter" href="#t-1" data-allegiance="liao" data-number="1"/> <g data-x="13" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
<use data-x="14" class="counter" href="#t-2" data-allegiance="liao" data-number="2"/> <g data-x="14" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
<use data-x="15" class="counter" href="#t-3" data-allegiance="liao" data-number="3"/> <g data-x="15" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
<use data-x="16" class="counter" href="#t-4" data-allegiance="liao" data-number="4"/> <g data-x="16" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
<use data-x="17" class="counter" href="#t-5" data-allegiance="liao" data-number="5"/> <g data-x="17" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
<use data-x="18" class="counter" href="#t-6" data-allegiance="liao" data-number="6"/> <g data-x="18" class="counter" data-allegiance="liao" data-number="6"><use href="#t-6"/></g>
<use data-x="19" class="counter" href="#t-7" data-allegiance="liao" data-number="7"/> <g data-x="19" class="counter" data-allegiance="liao" data-number="7"><use href="#t-7"/></g>
</g> </g>
<g> <g>
<use data-x="13" class="counter" href="#t-1" data-allegiance="davion" data-number="1"/> <g data-x="13" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
<use data-x="14" class="counter" href="#t-2" data-allegiance="davion" data-number="2"/> <g data-x="14" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
<use data-x="15" class="counter" href="#t-3" data-allegiance="davion" data-number="3"/> <g data-x="15" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
<use data-x="16" class="counter" href="#t-4" data-allegiance="davion" data-number="4"/> <g data-x="16" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
<use data-x="17" class="counter" href="#t-5" data-allegiance="davion" data-number="5"/> <g data-x="17" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
<use data-x="18" class="counter" href="#t-6" data-allegiance="davion" data-number="6"/> <g data-x="18" class="counter" data-allegiance="davion" data-number="6"><use href="#t-6"/></g>
<use data-x="19" class="counter" href="#t-7" data-allegiance="davion" data-number="7"/> <g data-x="19" class="counter" data-allegiance="davion" data-number="7"><use href="#t-7"/></g>
</g> </g>
</g> </g>
<g data-y="0"> <g data-y="0">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

24
src/modules/counter.js
View File

@ -13,7 +13,7 @@ export default class Counter {
} }
selector(troopNumber, allegiance) { selector(troopNumber, allegiance) {
return `use.counter${this.dataSelector(troopNumber, allegiance)}`; return `.counter${this.dataSelector(troopNumber, allegiance)}`;
} }
position(x, y) { position(x, y) {
@ -21,7 +21,7 @@ export default class Counter {
} }
counterPosition(x, y) { counterPosition(x, y) {
return `use.counter[data-x="${x}"][data-x="${y}"]`; return `.counter[data-x="${x}"][data-x="${y}"]`;
} }
traceSelector(troopNumber, allegiance) { traceSelector(troopNumber, allegiance) {
@ -29,19 +29,19 @@ export default class Counter {
} }
getCounters() { 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) { 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) { 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) { 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 } }) { getTrace({ dataset: { allegiance, number } }) {
@ -247,7 +247,7 @@ export default class Counter {
selected.parentElement.parentElement.dataset.y selected.parentElement.parentElement.dataset.y
] ]
let clone = selected.cloneNode(); let clone = selected.cloneNode(true);
clone.classList.remove(selectedClass); clone.classList.remove(selectedClass);
clone.classList.add('clone'); clone.classList.add('clone');
@ -255,12 +255,6 @@ export default class Counter {
selected.parentElement.appendChild(clone); selected.parentElement.appendChild(clone);
point.parentElement.appendChild(selected); 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), let previous = this.getCellPosition(clone.parentElement),
current = this.getCellPosition(selected.parentElement); current = this.getCellPosition(selected.parentElement);
@ -331,14 +325,14 @@ export default class Counter {
isOnBoard = selected && selected.parentElement.hasAttribute('data-x'); isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
if (selected && isOnBoard) { if (selected && isOnBoard) {
const proneCounter = selected.parentElement.querySelector('[href="#counter-prone"]'); const proneCounter = selected.querySelector('[href="#counter-prone"]');
if (proneCounter) { if (proneCounter) {
proneCounter.remove(); proneCounter.remove();
} else { } else {
const counter = document.createElementNS(svgns, 'use'); const counter = document.createElementNS(svgns, 'use');
counter.setAttributeNS(null, 'href', '#counter-prone'); counter.setAttributeNS(null, 'href', '#counter-prone');
selected.parentElement.appendChild(counter); selected.appendChild(counter);
} }
} }
} }

24
src/modules/game.js
View File

@ -23,11 +23,19 @@ export default class Game {
} }
getCells() { getCells() {
return this.svg.querySelectorAll('g[data-x]'); return this.svg.querySelectorAll('g[data-y] > g[data-x]');
} }
getCell(x, y) { 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) { getHex(cell) {
@ -35,7 +43,7 @@ export default class Game {
} }
getSelected() { getSelected() {
return this.svg.querySelector(`use[data-allegiance][data-number].selected`); return this.svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
} }
getSightLine() { getSightLine() {
@ -55,7 +63,7 @@ export default class Game {
} }
getCounterAtGridIndex(x, y) { getCounterAtGridIndex(x, y) {
return this.getCell(x, y).querySelector('use[href*="#t-"'); return this.getCell(x, y).querySelector('.counter');
} }
getBoard() { getBoard() {
@ -152,8 +160,8 @@ export default class Game {
const state = { const state = {
placing: this.placing, placing: this.placing,
hex: cell.querySelector('use[href="#hex"]'), hex: cell.querySelector('use[href="#hex"]'),
occupant: cell.querySelector('use[href*="#t-"'), occupant: this.getCellOccupant(cell),
contents: cell.querySelectorAll('*:not(use[href="#hex"])') contents: this.getCellContents(cell)
}; };
let toPlace = this.placing.pop(); 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) { if (occupant) {
const { number, allegiance } = occupant.dataset; const { number, allegiance } = occupant.dataset;
@ -304,7 +312,7 @@ export default class Game {
this.sightLine.clear(); this.sightLine.clear();
} }
let occupant = cell.querySelector('use[href*="#t-"'); let occupant = this.getCellOccupant(cell);
if (occupant) { if (occupant) {
let { number, allegiance } = occupant.dataset, let { number, allegiance } = occupant.dataset,