From b73217c5c45e2c23ac14e70346036cf4477a6ebe Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 24 Apr 2024 11:22:42 -0700
Subject: Make trooper counters groups
---
src/modules/counter.js | 24 +++++++++---------------
src/modules/game.js | 24 ++++++++++++++++--------
2 files changed, 25 insertions(+), 23 deletions(-)
(limited to 'src/modules')
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,
--
cgit v1.2.3