Retain preexisting counters in move history

public/map.css

@@ -100,6 +100,14 @@ g.clone {
   stroke-dasharray: 1;
 }
 
+g.clone [href="#counter-prone"] {
+  opacity: 0.5;
+}
+
+.removed[href="#counter-prone"] {
+  opacity: 0.5;
+}
+
 g[data-allegiance="davion"].clone {
   fill: rgb(255, 126, 126);
 }

src/modules/counter.js

@@ -255,6 +255,14 @@ export default class Counter {
       selected.parentElement.appendChild(clone);
       point.parentElement.appendChild(selected);
 
+      selected.childNodes.forEach(n => {
+        if (n.classList.contains('removed')) {
+          n.remove();
+        } else if ('preexisting' in n.dataset) {
+          delete n.dataset.preexisting;
+        }
+      });
+
       let previous = this.getCellPosition(clone.parentElement),
         current = this.getCellPosition(selected.parentElement);
 
@@ -288,24 +296,23 @@ export default class Counter {
 
   removeClones({ dataset: { allegiance, number }}) {
     this.getClones(allegiance, number).forEach(el => {
-      const proneCounter = el.parentElement.querySelector('[href="#counter-prone"]');
-
-      if (proneCounter) {
-        proneCounter.remove();
-      }
-
       el.remove()
     });
   }
 
   endMove(el) {
-    let { number: troopNumber, allegiance: troopAllegiance } = el.dataset;
-    let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));
+    const { number, allegiance } = el.dataset,
+      trace = this.svg.querySelector(this.traceSelector(number, allegiance)),
+      proneCounter = el.querySelector('[href="#counter-prone"]');
 
     if (trace) {
       trace.remove();
     }
 
+    if (proneCounter) {
+      proneCounter.dataset.preexisting = '';
+    }
+
     this.removeClones(el);
     this.unSelect();
   }
@@ -314,7 +321,7 @@ export default class Counter {
     const isOnBoard = counter.parentElement.hasAttribute('data-x');
 
     if (isOnBoard) {
-      return !!counter.parentElement.querySelector('[href="#counter-prone"]');
+      return !!counter.querySelector('[href="#counter-prone"]');
     }
 
     return false;
@@ -328,7 +335,11 @@ export default class Counter {
         const proneCounter = selected.querySelector('[href="#counter-prone"]');
 
       if (proneCounter) {
-        proneCounter.remove();
+        if ('preexisting' in proneCounter.dataset) {
+          proneCounter.classList.toggle('removed');
+        } else {
+          proneCounter.remove();
+        }
       } else {
         const counter = document.createElementNS(svgns, 'use');
         counter.setAttributeNS(null, 'href', '#counter-prone');