Make trooper counters groups

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

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,