Allow placing a counter that doesn't already exist

src/modules/game/soldier.js

@@ -63,6 +63,18 @@ function createTrace(previous, current, selected) {
   return trace;
 }
 
+export function createCounter(selected) {
+  const use = document.createElementNS(svgns, 'use');
+  const g = document.createElementNS(svgns, 'g');
+  use.setAttributeNS(null, 'href', `#t-${selected.dataset.number}`);
+  g.classList.add('counter');
+  g.dataset.allegiance = selected.dataset.allegiance;
+  g.dataset.number = selected.dataset.number;
+  g.appendChild(use);
+
+  return g;
+}
+
 export function handleTrace(svg, selected, clone, current) {
   let trace = getTrace(svg, selected);
 

src/modules/gameboard.js

@@ -234,6 +234,7 @@ export function start(el) {
           selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
 
         svg.querySelectorAll(selector).forEach(el => el.remove());
+        selectCallback();
       }
     });
 
@@ -272,16 +273,19 @@ export function start(el) {
 }
 
 export function select(selected) {
-  const counter = soldier.getCounter(svg, selected);
+  unSelect();
+  let counter = soldier.getCounter(svg, selected);
 
   if (counter) {
-    unSelect();
+    firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
+  } else {
+    counter = soldier.createCounter(selected);
+  }
+
   placing.push(counter);
   counter.classList.add(soldier.getSelectedClass());
-    firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
   selectCallback && selectCallback({ prone: soldier.hasProne(counter), ...counter.dataset });
 }
-}
 
 export function unSelect() {
   const selected = getSelected();

src/modules/record_sheet.js

@@ -94,12 +94,17 @@ export function getSelected() {
 }
 
 export function select(data) {
-  const selector =
-  `#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`
-
   unSelect();
+
+  if (!data) {
+    return;
+  }
+
+  const { allegiance: al, number: n } = data,
+    selector = `.soldier-record[data-number="${n}"][data-allegiance="${al}"]`;
+
   document.querySelector(selector).classList.add('selected');
-  document.getElementById('toggle-prone-counter').checked = data.prone;
+  document.querySelector('#toggle-prone-counter').checked = data.prone;
 }
 
 export function endMove() {