6 files changed, 36 insertions, 59 deletions
diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css
index 1d3ebc8..112c312 100644
--- a/public/assets/css/radial.css
+++ b/public/assets/css/radial.css
@@ -77,7 +77,7 @@ use[href="#hex"] {
 }
 
 [data-view-elevation="-1"] #background {
-  fill: #333;
+  fill: #999;
 }
 
 [data-view-elevation="-1"] .building .elevation-basement {
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 9d29894..f98baca 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -174,6 +174,7 @@ polygon.firing-arc[data-allegiance="attacker"] {
 .soldier-record svg.weapon-icon use {
   stroke: white;
   stroke-width: 0.5px;
+  r: 6px;
 }
 
 .weapon-symbol {
diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg
index da1a6d8..e9b41a7 100644
--- a/public/assets/images/counters.svg
+++ b/public/assets/images/counters.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" standalone="no"?>
-<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="-6 -6 12 24"
+  xmlns="http://www.w3.org/2000/svg">
   <defs>
     <circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
 
@@ -46,22 +47,28 @@
 
   <g id="rifle" style="r: inherit;" class="weapon-symbol">
     <use style="r: inherit;" href="#counter-base"/>
-    <use href="#semi-auto"/>
-    <line x1="0" y1="-5" x2="0" y2="5"/>
-    <polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/>
+    <g style="stroke: white; stroke-width: 0.5px; fill: none;">
+      <use href="#semi-auto" />
+      <line x1="0" y1="-5" x2="0" y2="5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
   </g>
 
   <g id="smg" style="r: inherit;" class="weapon-symbol">
     <use style="r: inherit;" href="#counter-base"/>
-    <use href="#auto"/>
-    <line x1="0" y1="-5" x2="0" y2="4.5"/>
-    <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
+    <g style="stroke: white; stroke-width: 0.5px; fill: none;">
+      <use href="#auto"/>
+      <line x1="0" y1="-5" x2="0" y2="4.5"/>
+      <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
+    </g>
   </g>
 
   <g id="blazer" style="r: inherit;" class="weapon-symbol">
     <use style="r: inherit;" href="#counter-base"/>
-    <use href="#auto"/>
-    <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
-    <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    <g style="stroke: white; stroke-width: 0.5px; fill: none;">
+      <use href="#auto"/>
+      <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
   </g>
 </svg>
diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js
index f9c67db..fc3d113 100644
--- a/src/modules/game/soldier.js
+++ b/src/modules/game/soldier.js
@@ -1,3 +1,5 @@
+import counters from './assets/images/counters.svg';
+
 const selectedClass = 'selected';
 
 function dataSelector({ dataset: { allegiance, number }}) {
@@ -53,15 +55,15 @@ function createTrace(previous, current, selected) {
   return trace;
 }
 
-export function createCounter(selected) {
+export function createCounter(selected, weapon = 'rifle') {
   const use = document.createElementNS(svgns, 'use');
   const g = document.createElementNS(svgns, 'g');
-  // use.setAttributeNS(null, 'href', `#t-${selected.dataset.number}`);
-  use.setAttributeNS(null, 'href', `counters.svg#rifle`);
+  use.setAttributeNS(null, 'href', `../../${counters}#${weapon}`);
   use.classList.add('primary-weapon');
   g.classList.add('counter');
   g.dataset.allegiance = selected.dataset.allegiance;
   g.dataset.number = selected.dataset.number;
+  g.dataset.squad = selected.dataset.squad;
   g.appendChild(use);
 
   return g;
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 45b2cb5..a716ca8 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -3,7 +3,7 @@ import * as sightLine from './game/sight_line.js';
 import * as soldier from './game/soldier.js';
 import { Observable } from "./observable";
 
-let svg, selected,
+let svg,
   placing = [];
 
 function getCellContents(cell) {
@@ -100,16 +100,6 @@ function getSightLineHexes(source, target) {
 }
 
 function updateSightLine(cell) {
-  // const CURRENT_ELEVATION_LEVEL = 0;
-  // const { q: sq, r: sr, s: ss } = cell.dataset;
-  // const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
-  // const sourceIndex = { q: +sq, r: +sr, s: +ss };
-  // const targetIndex = { q: +tq, r: +tr, s: +ts };
-
-  // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
-  //   .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
-  //   .join(', ');
-
   const hexes = getSightLineHexes(cell, sightLine.getLockTarget());
   sightLine.setHexes(hexes);
   sightLine.update(getCellPosition(cell));
@@ -117,16 +107,6 @@ function updateSightLine(cell) {
 }
 
 function drawSightLine(sourceCell, targetCell) {
-  // const CURRENT_ELEVATION_LEVEL = 0;
-  // const { q: sq, r: sr, s: ss } = sourceCell.dataset;
-  // const { q: tq, r: tr, s: ts } = targetCell.dataset;
-  // const sourceIndex = { q: +sq, r: +sr, s: +ss };
-  // const targetIndex = { q: +tq, r: +tr, s: +ts };
-
-  // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
-  //   .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
-  //   .join(', ');
-
   const hexes = getSightLineHexes(sourceCell, targetCell);
   sightLine.setHexes(hexes);
   const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
@@ -136,10 +116,12 @@ function drawSightLine(sourceCell, targetCell) {
 
 function moveBackOneStepInHistory(counter) {
   const trace = soldier.getTrace(svg, counter);
+
   counter.remove();
   counter = getCounterAtGridIndex(...counter.dataset.previous.split(','));
   counter.classList.remove('clone');
   counter.classList.add(soldier.getSelectedClass());
+
   if (!('previous' in counter.dataset)) {
     trace.remove();
   } else {
@@ -299,7 +281,7 @@ export function start(el) {
     cell.addEventListener('pointerout', () => {
       getActiveSightLine(svg) && clearSightLine();
 
-      let occupant = getCellOccupant(cell);
+      const occupant = getCellOccupant(cell);
 
       if (occupant) {
         firingArc.toggleCounterVisibility(svg, occupant, false);
@@ -308,9 +290,11 @@ export function start(el) {
   });
 
   // debug //
-  const c = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }});
-  soldier.place(svg, c, svg.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]'));
-  // soldier.place(svg, c, svg.querySelector('[data-q="-2"][data-r="-3"][data-s="5"][data-t="0"]'));
+  const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+  const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
+
+  soldier.place(svg, soldier.createCounter(attacker, 'blazer'), getCell(0, 0, 0, 0));
+  soldier.place(svg, soldier.createCounter(defender, 'rifle'), getCell(-1, 0, 1, 0));
   ///////////
 
   Observable.subscribe('select', select);
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 092870a..0f279d5 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -1,17 +1,5 @@
 import { Observable } from "./observable";
-// import counters from '../../public/assets/images/counters.svg';
-// console.log('counters', counters);
-
-// import svg from '../../public/assets/images/counters.svg';
-
-// const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
-// const rifle = document.importNode(doc.querySelector('#rifle'), true);
-// const smg = document.importNode(doc.querySelector('#smg'), true);
-
-// console.log('svg', counters);
-// console.log('doc', doc);
-// console.log('imported svg', rifle);
-// console.log('imported svg', smg);
+import counters from './assets/images/counters.svg';
 
 const weapons = {
   rifle: {
@@ -42,9 +30,7 @@ function createIcon(number) {
   icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
   icon.setAttribute('xmlns', svgns);
 
-  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
-  // use.setAttributeNS(null, 'href', `${counters}#counter-base`);
+  use.setAttributeNS(null, 'href', `./${counters}#counter-base`);
 
   text.textContent = number;
 
@@ -68,12 +54,9 @@ function createWeaponIcon(type) {
   icon.setAttribute('xmlns', svgns);
   icon.classList.add('weapon-icon');
 
-  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
-  // use.setAttributeNS(null, 'href', `${counters}#${type}`);
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
+  use.setAttributeNS(null, 'href', `${counters}#${type}`);
 
   icon.appendChild(use);
-  // icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));
 
   return icon;
 }