5 files changed, 63 insertions, 78 deletions
diff --git a/public/index.html b/public/index.html
index dbabace..ed30437 100644
--- a/public/index.html
+++ b/public/index.html
@@ -194,49 +194,49 @@
             <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
             17th Kestral Mechanized Infantry -->
           </p>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="davion">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="davion">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-number="3" data-allegiance="davion">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-number="4" data-allegiance="davion">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-number="5" data-allegiance="davion">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-number="6" data-allegiance="davion">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="davion">
+          <div is="soldier-record-block" class="soldier-record" data-number="7" data-allegiance="davion">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
             <span slot="primary-weapon-type">Blazer</span>
             <span slot="primary-weapon-damage">4L</span>
@@ -258,49 +258,49 @@
             <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
             Aldebaran Home Guard -->
           </p>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
+          <div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="liao">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
+          <div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="liao">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
+          <div is="soldier-record-block" class="soldier-record" data-number="3" data-allegiance="liao">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="liao">
+          <div is="soldier-record-block" class="soldier-record" data-number="4" data-allegiance="liao">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="liao">
+          <div is="soldier-record-block" class="soldier-record" data-number="5" data-allegiance="liao">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="liao">
+          <div is="soldier-record-block" class="soldier-record" data-number="6" data-allegiance="liao">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
-          <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="liao">
+          <div is="soldier-record-block" class="soldier-record" data-number="7" data-allegiance="liao">
             <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
             <span slot="primary-weapon-type">Blazer</span>
             <span slot="primary-weapon-damage">4L</span>
diff --git a/public/style.css b/public/style.css
index a8fa57a..ae19a57 100644
--- a/public/style.css
+++ b/public/style.css
@@ -245,11 +245,11 @@ g#points g.hover use.counter:not(.clone) {
   /* stroke-width: 2px; */
 }
 
-g#points use.counter[data-troop-allegiance="davion"] {
+g#points use.counter[data-allegiance="davion"] {
   fill: red;
 }
 
-g#points use.counter[data-troop-allegiance="liao"] {
+g#points use.counter[data-allegiance="liao"] {
   fill: green;
 }
 
@@ -259,11 +259,11 @@ g#points use.clone {
   stroke-dasharray: 1;
 }
 
-g#points use[data-troop-allegiance="davion"].clone {
+g#points use[data-allegiance="davion"].clone {
   fill: rgb(255, 126, 126);
 }
 
-g#points use[data-troop-allegiance="liao"].clone {
+g#points use[data-allegiance="liao"].clone {
   fill: rgb(130, 190, 130);
 }
 
@@ -284,11 +284,11 @@ g#counters use:hover {
   r: 8px;
 } */
 
-/* g#counters use[data-troop-allegiance="davion"] {
+/* g#counters use[data-allegiance="davion"] {
   fill: red;
 }
 
-g#counters use[data-troop-allegiance="liao"] {
+g#counters use[data-allegiance="liao"] {
   fill: green;
 } */
 
@@ -298,11 +298,11 @@ g#counters use[data-troop-allegiance="liao"] {
   stroke-dasharray: 1;
 }
 
-g#counters use[data-troop-allegiance="davion"].clone {
+g#counters use[data-allegiance="davion"].clone {
   fill: rgb(255, 126, 126);
 }
 
-g#counters use[data-troop-allegiance="liao"].clone {
+g#counters use[data-allegiance="liao"].clone {
   fill: rgb(130, 190, 130);
 } */
 
@@ -321,11 +321,11 @@ text.counter, #troop-counter text {
   user-select: none;
 }
 
-polygon.firing-arc[data-troop-allegiance="davion"] {
+polygon.firing-arc[data-allegiance="davion"] {
   fill: red;
 }
 
-polygon.firing-arc[data-troop-allegiance="liao"] {
+polygon.firing-arc[data-allegiance="liao"] {
   fill: green;
 }
 
@@ -360,11 +360,11 @@ button.set-firing-arc img {
   background-color: white;
 }
 
-.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] svg {
+.soldier-record[data-allegiance="liao"] [slot="troop-number"] svg {
   fill: green;
 }
 
-.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] svg {
+.soldier-record[data-allegiance="davion"] [slot="troop-number"] svg {
   fill: red;
 }
 
@@ -384,11 +384,11 @@ button.set-firing-arc img {
   font-family: monospace;
 }
 
-.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] img {
+.soldier-record[data-allegiance="davion"] [slot="troop-number"] img {
   fill: red;
 }
 
-.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] img {
+.soldier-record[data-allegiance="liao"] [slot="troop-number"] img {
   fill: green;
 }
 
diff --git a/src/index.js b/src/index.js
index b4216be..d6204e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,7 +18,7 @@ const RecordSheet = new function () {
 
   this.select = function (data) {
     this.unSelect();
-    document.querySelector(`#record-sheet .soldier-record[data-troop-number="${data.number}"][data-troop-allegiance="${data.allegiance}"]`).classList.add('selected');
+    document.querySelector(`#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`).classList.add('selected');
     document.getElementById('toggle-prone-counter').checked = data.prone;
   };
 
@@ -121,8 +121,7 @@ window.addEventListener('load', () => {
         game.unSelect();
         RecordSheet.unSelect();
       } else {
-        const { troopAllegiance: allegiance, troopNumber: number } = el.dataset;
-        game.select({ dataset: { allegiance, number }});
+        game.select(el);
       }
     })
   );
@@ -134,7 +133,7 @@ window.addEventListener('load', () => {
 
   document.querySelectorAll('.end-turn').forEach(el =>
     el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
-      let dataSelector = `[data-troop-allegiance="${allegiance}"]`,
+      let dataSelector = `[data-allegiance="${allegiance}"]`,
         records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
         turnCounter = document.getElementById('turn-count'),
         { textContent: count, dataset: { update }} = turnCounter;
@@ -153,12 +152,11 @@ window.addEventListener('load', () => {
       }
 
       records
-        .sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber)
+        .sort((el1, el2) => el1.dataset.number > el2.dataset.number)
         .forEach(el => el.classList.remove('movement-ended'));
 
       game.endTurn(allegiance);
-      const { troopAllegiance, troopNumber } = records.at(0).dataset;
-      game.select({ dataset: { allegiance: troopAllegiance, number: troopNumber }});
+      game.select(records.at(0));
     })
   );
 
diff --git a/src/modules/counter.js b/src/modules/counter.js
index f7b1d56..591f09b 100644
--- a/src/modules/counter.js
+++ b/src/modules/counter.js
@@ -7,12 +7,8 @@ export default class Counter {
     this.selectedClass = 'selected';
   }
 
-  dataSelector(troopNumber, allegiance) {
-    return `[data-number="${troopNumber}"][data-allegiance="${allegiance}"]`;
-  }
-
-  selector(troopNumber, allegiance) {
-    return `.counter${this.dataSelector(troopNumber, allegiance)}`;
+  dataSelector({ dataset: { allegiance, number }}) {
+    return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
   }
 
   position(x, y) {
@@ -23,28 +19,24 @@ export default class Counter {
     return `.counter[data-x="${x}"][data-x="${y}"]`;
   }
 
-  traceSelector(troopNumber, allegiance) {
-    return `polyline.move-trace${this.dataSelector(troopNumber, allegiance)}`;
-  }
-
-  getCounters() {
-    return this.svg.querySelectorAll(`.counter[data-allegiance][data-number]:not(.clone)`);
+  traceSelector(counter) {
+    return `polyline.move-trace${this.dataSelector(counter)}`;
   }
 
-  getClones(al, n) {
-    return this.svg.querySelectorAll(`.counter.clone[data-allegiance="${al}"][data-number="${n}"]`);
+  getClones(counter) {
+    return this.svg.querySelectorAll(`.counter.clone${this.dataSelector(counter)}`);
   }
 
-  getCounter(al, n) {
-    return this.svg.querySelector(`.counter[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`);
+  getCounter(selected) {
+    return this.svg.querySelector(`.counter${this.dataSelector(selected)}:not(.clone)`);
   }
 
-  getCounterAndClones(al, n) {
-    return this.svg.querySelectorAll(`.counter[data-allegiance="${al}"][data-number="${n}"]`);
+  getCounterAndClones(counter) {
+    return this.svg.querySelectorAll(`.counter${this.dataSelector(counter)}`);
   }
 
-  getTrace({ dataset: { allegiance, number } }) {
-    return this.svg.querySelector(this.traceSelector(number, allegiance));
+  getTrace(counter) {
+    return this.svg.querySelector(this.traceSelector(counter));
   }
 
   getCellPosition(cell) {
@@ -65,13 +57,13 @@ export default class Counter {
   }
 
   place(selected, cell) {
-    const { allegiance: troopAllegiance, number: troopNumber } = selected.dataset;
-
     let points,
-      counterNodeList = this.getCounterAndClones(troopAllegiance, troopNumber);
+      counterNodeList = this.getCounterAndClones(selected);
+
+    console.log(selected, counterNodeList);
 
     if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
-      let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));
+      let trace = this.svg.querySelector(this.traceSelector(selected));
 
       let prevCoords = [
         selected.parentElement.dataset.x,
@@ -102,8 +94,8 @@ export default class Counter {
 
         points = `${previous.x},${previous.y} ${current.x},${current.y}`;
 
-        trace.dataset.number = troopNumber;
-        trace.dataset.allegiance = troopAllegiance;
+        trace.dataset.number = selected.dataset.number;
+        trace.dataset.allegiance = selected.dataset.allegiance;
         trace.classList.add('move-trace');
 
         this.getBoard().prepend(trace);
@@ -118,28 +110,25 @@ export default class Counter {
     }
   }
 
-  removeClones({ dataset: { allegiance, number }}) {
-    this.getClones(allegiance, number).forEach(el => {
-      el.remove()
-    });
+  removeClones(counter) {
+    this.getClones(counter).forEach(c => c.remove());
   }
 
-  endMove(el) {
-    const { number, allegiance } = el.dataset,
-      trace = this.svg.querySelector(this.traceSelector(number, allegiance)),
-      proneCounter = el.querySelector('[href="#counter-prone"]');
+  endMove(counter) {
+    const trace = this.svg.querySelector(this.traceSelector(counter)),
+      proneCounter = counter.querySelector('[href="#counter-prone"]');
 
     if (trace) {
       trace.remove();
     }
 
-    delete el.dataset.previous;
+    delete counter.dataset.previous;
 
     if (proneCounter) {
       proneCounter.dataset.preexisting = '';
     }
 
-    this.removeClones(el);
+    this.removeClones(counter);
   }
 
   hasProne(counter) {
diff --git a/src/modules/game.js b/src/modules/game.js
index d6059ae..2810fba 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -50,8 +50,8 @@ export default class Game {
     return this.svg.querySelector('line.sight-line');
   }
 
-  getExistingArcs(al, n) {
-    return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${n}"][data-allegiance="${al}"]`);
+  getExistingArcs({ dataset: { allegiance, number }}) {
+    return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${number}"][data-allegiance="${allegiance}"]`);
   }
 
   getUnclippedFiringArcs() {
@@ -99,14 +99,14 @@ export default class Game {
     }
   }
 
-  select({ dataset: { allegiance, number } }) {
-    const counter = this.counter.getCounter(allegiance, number);
+  select(selected) {
+    const counter = this.counter.getCounter(selected);
 
     if (counter) {
       this.unSelect();
       this.placing.push(counter);
       counter.classList.add(this.counter.selectedClass);
-      this.getExistingArcs(allegiance, number).forEach(el => el.removeAttribute('clip-path'));
+      this.getExistingArcs(counter).forEach(el => el.removeAttribute('clip-path'));
       this.selectCallback({ prone: this.counter.hasProne(counter), ...counter.dataset });
     }
   }
@@ -185,8 +185,6 @@ export default class Game {
           contents: this.getCellContents(cell)
         };
 
-        console.log(state);
-
         let toPlace = this.placing.pop();
 
         if (isGrenade(toPlace)) {