2 files changed, 31 insertions, 53 deletions
diff --git a/src/index.js b/src/index.js
index df48274..a951084 100644
--- a/src/index.js
+++ b/src/index.js
@@ -85,10 +85,10 @@ async function buildScenario(req) {
   // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
   recordSheet.start(null, scenarioUnits);
 
-  const [trooper] = gameboard.getUnits();
-  Observable.notify('select', trooper);
-  gameboard.setCounter('prone');
-  gameboard.setCounter('1st-floor');
+  //const [trooper] = gameboard.getUnits();
+  //Observable.notify('select', trooper);
+  //gameboard.setCounter('prone');
+  //gameboard.setCounter('1st-floor');
 }
 
 function updateTurnCounter() {
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 530a7f5..e3db1a5 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -288,7 +288,7 @@ export function start(el) {
         top.collection.set(cell, { parent: cell.parentElement });
         top.container.append(cell);
       }
-      console.log(top.container.children[0].children);
+
       const selected = getSelected();
 
       if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') {
@@ -320,21 +320,21 @@ export function start(el) {
 
   // debug //
   // Add a trooper counter
-  const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+  //const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
   // const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
-  const cell = getCell(0, 0, 0, 0);
-  const trooper = soldier.createCounter(attacker, 'blazer');
-  soldier.place(svg, trooper, cell);
+  //const cell = getCell(0, 0, 0, 0);
+  //const trooper = soldier.createCounter(attacker, 'blazer');
+  //soldier.place(svg, trooper, cell);
 
   // Add some counters in an unoccupied cell
-  const countersCell = getCell(-1, 1, 0, 0);
-  setCounter('grenade');
-  setCounter('prone');
-  setCounter('1st-floor');
-  const e = new PointerEvent('click');
-  countersCell.dispatchEvent(e);
-  countersCell.dispatchEvent(e);
-  countersCell.dispatchEvent(e);
+  //const countersCell = getCell(-1, 1, 0, 0);
+  //setCounter('grenade');
+  //setCounter('prone');
+  //setCounter('1st-floor');
+  //const e = new PointerEvent('click');
+  //countersCell.dispatchEvent(e);
+  //countersCell.dispatchEvent(e);
+  //countersCell.dispatchEvent(e);
   ///////////
 
   Observable.subscribe('select', select);
@@ -376,44 +376,28 @@ export function setFiringArc() {
 
 export function setCounter(name) {
   const selected = getSelected();
-
   const counter = document.createElementNS(svgns, 'use');
+
   counter.addEventListener('click', e => {
     e.stopPropagation()
+    const container = counter.parentElement;
     counter.remove()
+    arrangeCounters(container);
   });
-  //counter.setAttributeNS(null, 'href', '#counter-grenade');
+
   counter.setAttributeNS(null, 'href', `#counter-${name}`);
   counter.classList.add(`counter-${name}`);
 
   if (selected) {
-    const icons = [...selected.querySelectorAll('use[class^="counter-"]'), counter];
-    const length = 12;
-    const gravity = 1;
-    const lateralForce = gravity;
-    const rads = Math.atan(lateralForce / gravity);
-    const mult = icons.length % 2 ? index => Math.ceil(index / 2) : index => Math.floor(index / 2) + 0.5;
-    const iconBestFitCount = 8;
-    const divider = icons.length > iconBestFitCount ? iconBestFitCount / icons.length : 1;
-
-    icons
-      .map((icon, index) => [icon, (index % 2 ? -1 : 1) * mult(index)])
-      .sort(([_ic1, i1], [_ic2, i2]) => i1 < i2)
-      .forEach(([icon, index]) => {
-        const theta = rads * index * divider;
-        const x = length * Math.sin(theta);
-        const y = length * Math.cos(theta);
-        icon.setAttributeNS(null, 'style', `--x: ${x}px; --y: ${y}px`);
-        //selected.appendChild(icon);
-        if (!selected.contains(icon)) selected.append(icon);
-      });
+    selected.append(counter);
+    arrangeCounters(selected);
   }
   else
     placing.push(counter);
 }
 
-function arrangeCounters(cell) {
-  const counters = cell.querySelectorAll('[class^="counter-"]');
+function arrangeCounters(container) {
+  const counters = container.querySelectorAll('[class^="counter-"]');
   const length = 12;
   const gravity = 1;
   const lateralForce = gravity;
@@ -422,18 +406,12 @@ function arrangeCounters(cell) {
   const deflection = counters.length > bestFitCount ? 2 * Math.PI / counters.length : Math.atan(lateralForce / gravity);
 
   counters.forEach((counter, index, arr) => {
-      const mult = index - arr.length / 2 + 0.5;
-      const theta = deflection * mult;
-      const x = length * Math.sin(theta);
-      const y = length * Math.cos(theta);
-      //counter.setAttributeNS(null, 'x', 0);
-      //counter.setAttributeNS(null, 'y', 10);
-      //counter.setAttributeNS(null, 'transform', `rotate(${theta * 180 / Math.PI})`);
-      //counter.setAttributeNS(null, 'style', `y: 10px; transform-origin: 5px 0; transform: translateX(-5px) rotate(${theta * 180 / Math.PI}deg)`);
-      counter.setAttributeNS(null, 'style', `--x: ${-x}px; --y: ${y}px`);
-      //counter.setAttributeNS(null, 'style', `x: 0; y: 10px;`);
-    });
-  console.log(counters);
+    const mult = index - arr.length / 2 + 0.5;
+    const theta = deflection * mult;
+    const x = length * Math.sin(theta);
+    const y = length * Math.cos(theta);
+    counter.setAttributeNS(null, 'style', `--x: ${-x}px; --y: ${y}px`);
+  });
 }
 
 function handleMechTemplateRotation(event) {