4 files changed, 84 insertions, 27 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 0c2fed9..99648fc 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -173,11 +173,38 @@ polygon.firing-arc[data-allegiance="attacker"] {
   stroke-opacity: inherit;
 }
 
-g.counter use, use[href*="#t-"] {
+g.counter use {
   r: 5px;
 }
 
-g.selected use {
+g.counter text.troop-number, g.counter text.squad-number {
+  fill: black;
+  font-size: 6px;
+  font-family: monospace;
+  font-weight: bold;
+  cursor: default;
+  text-anchor: middle;
+  pointer-events: none;
+  user-select: none;
+}
+
+g.counter use.troop-number, g.counter use.squad-number {
+  --scale: 0.4;
+}
+
+g.counter .troop-number {
+  --translateX: -4px;
+}
+
+g.counter .squad-number {
+  --translateX: 4px;
+}
+
+g.counter .troop-number, g.counter .squad-number {
+  transform: translate(var(--translateX), 0) scale(var(--scale));
+}
+
+g.selected use[href="#counter-base"] {
   animation: 1s selected 0.25s linear infinite;
   stroke-width: 2px;
   stroke: yellow;
@@ -186,7 +213,6 @@ g.selected use {
 
 @keyframes selected {
   50% {
-    /* stroke: yellow; */
     stroke-width: 0px;
     r: 5px;
   }
@@ -227,16 +253,23 @@ g[data-y]:nth-child(odd) {
 }
 
 [data-x]:hover use[href="#hex"] {
-  /* --scale: 0.95; */
   opacity: 1;
   fill: orange;
   stroke: black;
 }
 
-[data-x]:hover use[href*="#t-"] {
+[data-x]:hover g.counter {
   transform: scale(1.5);
 }
 
+[data-x]:hover g.counter .troop-number {
+  --translateX: -6px;
+}
+
+[data-x]:hover g.counter .squad-number {
+  --translateX: 6px;
+}
+
 [data-x] {
   --scale: 1;
   transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg
index fe64a5e..bdb6a53 100644
--- a/public/assets/images/map1.svg
+++ b/public/assets/images/map1.svg
@@ -65,7 +65,7 @@
     <symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
   </defs>
 
-  <rect id="background" x="-18" y="-10" width="2320" height="3106"/>
+  <rect id="background"/>
 
   <g id="image-maps">
     <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
@@ -81,48 +81,48 @@
     <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
       <g data-edge="north">
         <g data-x="13">
-          <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
         </g>
         <g data-x="14">
-          <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
         </g>
         <g data-x="15">
-          <g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="16">
-          <g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="17">
-          <g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="18">
-          <g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="19">
-          <g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
+          <g class="counter" data-allegiance="attacker" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
         </g>
       </g>
       <g data-edge="south">
         <g data-x="13">
-          <g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
+          <g class="counter" data-allegiance="defender" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
         </g>
         <g data-x="14">
-          <g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
+          <g class="counter" data-allegiance="defender" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
         </g>
         <g data-x="15">
-          <g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
+          <g class="counter" data-allegiance="defender" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="16">
-          <g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
+          <g class="counter" data-allegiance="defender" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="17">
-          <g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
+          <g class="counter" data-allegiance="defender" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="18">
-          <g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
+          <g class="counter" data-allegiance="defender" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
         </g>
         <g data-x="19">
-          <g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
+          <g class="counter" data-allegiance="defender" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
         </g>
       </g>
     </g>
diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js
index 1555c19..c5b2323 100644
--- a/src/modules/game/soldier.js
+++ b/src/modules/game/soldier.js
@@ -43,7 +43,7 @@ function updatePlacement(cell, selected, clone) {
   selected.dataset.previous = prevCoords;
   cell.appendChild(selected);
 
-  selected.childNodes.forEach(n => {
+  Array.from(selected.children).forEach(n => {
     if (n.classList.contains('removed')) {
       n.remove();
     } else if ('preexisting' in n.dataset) {
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 6909249..4d8aada 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -1,3 +1,24 @@
+const weapons = {
+  rifle: {
+    name: 'Rifle',
+    damage: '4L',
+    shortRange: '1-27',
+    longRange: '28-75'
+  },
+  smg: {
+    name: 'SMG',
+    damage: '3L',
+    shortRange: '1-15',
+    longRange: '16-25'
+  },
+  blazer: {
+    name: 'Blazer',
+    damage: '4L',
+    shortRange: '1-17',
+    longRange: '18-105'
+  }
+}
+
 function createIcon(number) {
   const svgns = 'http://www.w3.org/2000/svg';
   const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
@@ -17,8 +38,11 @@ function createIcon(number) {
   return icon;
 }
 
-function createRecord({ dataset: { allegiance, number }}) {
-  const div = document.createElement('div', { is: 'soldier-record-block' }),
+function createRecord(unit) {
+  const { dataset: { allegiance, number }} = unit,
+    primaryWeapon = unit.querySelector('.primary-weapon'),
+    pw = primaryWeapon.getAttribute('href').replace('#', ''),
+    div = document.createElement('div', { is: 'soldier-record-block' }),
     spans = Array(5).fill('span').map(t => document.createElement(t)),
     [tn, pwt, pwd, pwrs, pwrl] = spans;
 
@@ -30,16 +54,16 @@ function createRecord({ dataset: { allegiance, number }}) {
   tn.appendChild(createIcon(number));
 
   pwt.setAttribute('slot', 'primary-weapon-type');
-  pwt.textContent = 'Rifle';
+  pwt.textContent = weapons[pw].name;
 
   pwd.setAttribute('slot', 'primary-weapon-damage');
-  pwd.textContent = '4L';
+  pwd.textContent = weapons[pw].damage;
 
   pwrs.setAttribute('slot', 'primary-weapon-range-short');
-  pwrs.textContent = '1-27';
+  pwrs.textContent = weapons[pw].shortRange;
 
   pwrl.setAttribute('slot', 'primary-weapon-range-long');
-  pwrl.textContent = '28-75';
+  pwrl.textContent = weapons[pw].longRange;
 
   spans.forEach(el => div.appendChild(el));