From ff2aaab4da3d51347bb14c4199b92bfe85cdb271 Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Mon, 16 Jun 2025 22:41:29 -0700
Subject: [PATCH] Remove calling the counter module with 'new'

---
 src/modules/game.js         |   2 +-
 src/modules/game/counter.js | 122 +++++++++++++++++-------------------
 2 files changed, 59 insertions(+), 65 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;
+function dataSelector({ dataset: { allegiance, number }}) {
+  return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
+}
 
-  constructor(svg, board) {
-    this.svg = svg;
-    this.#board = board;
-    this.selectedClass = 'selected';
-  }
+function traceSelector(counter) {
+  return `polyline.move-trace${dataSelector(counter)}`;
+}
 
-  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)}`;
-  }
-
-  getClones(counter) {
-    return this.svg.querySelectorAll(`.counter.clone${this.dataSelector(counter)}`);
-  }
-
-  getCounter(selected) {
-    return this.svg.querySelector(`.counter${this.dataSelector(selected)}:not(.clone)`);
-  }
-
-  getCounterAndClones(counter) {
-    return this.svg.querySelectorAll(`.counter${this.dataSelector(counter)}`);
-  }
-
-  getTrace(counter) {
-    return this.svg.querySelector(this.traceSelector(counter));
-  }
-
-  getCellPosition(cell) {
-    let pt = new DOMPoint(0, 0),
-      transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
-      mtx = new DOMMatrix(transform);
-      pt = pt.matrixTransform(mtx);
-
-    transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
+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);
 
-    return pt;
+  transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
+  mtx = new DOMMatrix(transform);
+  pt = pt.matrixTransform(mtx);
+
+  return pt;
+}
+
+function getClones(svg, counter) {
+  return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`);
+}
+
+function getCounterAndClones(svg, counter) {
+  return svg.querySelectorAll(`.counter${dataSelector(counter)}`);
+}
+
+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
+  };
 }