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 2024-04-24 11:22:42 -07:00
parent 3d2d5cad85
commit b73217c5c4
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;
}
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;
}

28
public/map.svg
View File

@ -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">

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) {
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);
}
}
}

24
src/modules/game.js
View File

@ -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,