Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-27 09:06:57 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-27 09:06:57 -0700
commitef885b91c2b08af27f5a6dca4172f0ed03677b66 (patch)
tree01c59186a409edea014546808febb659e13aba62
parentd73b534f681bfd51eb396e70236a752ea2dc9cfd (diff)
Remove calling the counter module with 'new'
Diffstat
-rw-r--r--src/modules/game.js2
-rw-r--r--src/modules/game/counter.js118
2 files changed, 57 insertions, 63 deletions
diff --git a/src/modules/game.js b/src/modules/game.js
index 1257d90..b849124 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -15,7 +15,7 @@ export default class Game {
this.firingArc = FiringArc(svg, board);
this.sightLine = SightLine(board);
- this.counter = new Counter(svg);
+ this.counter = Counter(svg, board);
this.setUpCells();
diff --git a/src/modules/game/counter.js b/src/modules/game/counter.js
index cc15509..21406c8 100644
--- a/src/modules/game/counter.js
+++ b/src/modules/game/counter.js
@@ -1,69 +1,50 @@
-const svgns = "http://www.w3.org/2000/svg";
+const svgns = "http://www.w3.org/2000/svg",
+ selectedClass = 'selected';
-export default class Counter {
- #board;
-
- constructor(svg, board) {
- this.svg = svg;
- this.#board = board;
- this.selectedClass = 'selected';
- }
-
- dataSelector({ dataset: { allegiance, number }}) {
- return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
- }
-
- position(x, y) {
- return `g[data-x="${x}"][data-y="${y}"]`;
- }
-
- counterPosition(x, y) {
- return `.counter[data-x="${x}"][data-x="${y}"]`;
- }
-
- traceSelector(counter) {
- return `polyline.move-trace${this.dataSelector(counter)}`;
- }
+function dataSelector({ dataset: { allegiance, number }}) {
+ return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
+}
- getClones(counter) {
- return this.svg.querySelectorAll(`.counter.clone${this.dataSelector(counter)}`);
- }
+function traceSelector(counter) {
+ return `polyline.move-trace${dataSelector(counter)}`;
+}
- getCounter(selected) {
- return this.svg.querySelector(`.counter${this.dataSelector(selected)}:not(.clone)`);
- }
+function getCellPosition(cell) {
+ let pt = new DOMPoint(0, 0),
+ transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
+ mtx = new DOMMatrix(transform);
+ pt = pt.matrixTransform(mtx);
- getCounterAndClones(counter) {
- return this.svg.querySelectorAll(`.counter${this.dataSelector(counter)}`);
- }
+ transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
+ mtx = new DOMMatrix(transform);
+ pt = pt.matrixTransform(mtx);
- getTrace(counter) {
- return this.svg.querySelector(this.traceSelector(counter));
- }
+ return pt;
+}
- getCellPosition(cell) {
- let pt = new DOMPoint(0, 0),
- transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
- mtx = new DOMMatrix(transform);
- pt = pt.matrixTransform(mtx);
+function getClones(svg, counter) {
+ return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`);
+}
- transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
- mtx = new DOMMatrix(transform);
- pt = pt.matrixTransform(mtx);
+function getCounterAndClones(svg, counter) {
+ return svg.querySelectorAll(`.counter${dataSelector(counter)}`);
+}
- return pt;
+export default function (svg, board) {
+ function getCounter(selected) {
+ return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
}
- getBoard() {
- return this.svg.querySelector('.board');
+ function getTrace(counter) {
+ return svg.querySelector(traceSelector(counter));
}
- place(selected, cell) {
+ function place(selected, cell) {
let points,
- counterNodeList = this.getCounterAndClones(selected);
+ counterNodeList = getCounterAndClones(svg, selected);
if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
- let trace = this.svg.querySelector(this.traceSelector(selected));
+ let trace = svg.querySelector(traceSelector(selected));
let prevCoords = [
selected.parentElement.dataset.x,
@@ -71,7 +52,7 @@ export default class Counter {
]
let clone = selected.cloneNode(true);
- clone.classList.remove(this.selectedClass);
+ clone.classList.remove(selectedClass);
clone.classList.add('clone');
selected.dataset.previous = prevCoords;
@@ -86,8 +67,8 @@ export default class Counter {
}
});
- let previous = this.getCellPosition(clone.parentElement),
- current = this.getCellPosition(selected.parentElement);
+ let previous = getCellPosition(clone.parentElement),
+ current = getCellPosition(selected.parentElement);
if (!trace) {
trace = document.createElementNS(svgns, 'polyline');
@@ -98,7 +79,7 @@ export default class Counter {
trace.dataset.allegiance = selected.dataset.allegiance;
trace.classList.add('move-trace');
- this.getBoard().prepend(trace);
+ board.prepend(trace);
} else {
points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
}
@@ -110,12 +91,12 @@ export default class Counter {
}
}
- removeClones(counter) {
- this.getClones(counter).forEach(c => c.remove());
+ function removeClones(counter) {
+ getClones(svg, counter).forEach(c => c.remove());
}
- endMove(counter) {
- const trace = this.svg.querySelector(this.traceSelector(counter)),
+ function endMove(counter) {
+ const trace = svg.querySelector(traceSelector(counter)),
proneCounter = counter.querySelector('[href="#counter-prone"]');
if (trace) {
@@ -128,14 +109,14 @@ export default class Counter {
proneCounter.dataset.preexisting = '';
}
- this.removeClones(counter);
+ removeClones(counter);
}
- hasProne(counter) {
+ function hasProne(counter) {
return !!counter.querySelector('[href="#counter-prone"]');
}
- toggleProne(counter) {
+ function toggleProne(counter) {
let proneCounter = counter.querySelector('[href="#counter-prone"]');
if (!proneCounter) {
@@ -148,4 +129,17 @@ export default class Counter {
proneCounter.remove();
}
}
+
+ return {
+ get selectedClass() {
+ return selectedClass;
+ },
+ endMove,
+ getCounter,
+ hasProne,
+ toggleProne,
+ place,
+ getTrace,
+ removeClones
+ };
}