Add troop number and squad number when creating counters

public/assets/css/map.css

@@ -177,15 +177,15 @@ g.counter use {
 }
 
 g.counter use.troop-number, g.counter use.squad-number {
-  --scale: 0.4;
+  --scale: 0.25;
 }
 
 g.counter .troop-number {
-  --translateX: -4px;
+  --translateX: -3.5px;
 }
 
 g.counter .squad-number {
-  --translateX: 4px;
+  --translateX: 3.5px;
 }
 
 g.counter .troop-number, g.counter .squad-number {
@@ -242,16 +242,21 @@ g[data-y]:nth-child(odd) {
   stroke: black;
 }
 
-[data-x]:hover g.counter {
+[data-x]:hover g.counter,
+[data-q][data-r][data-s][data-t]:hover g.counter {
   transform: scale(1.5);
 }
 
-[data-x]:hover g.counter .troop-number {
+[data-x]:hover g.counter .troop-number,
-  --translateX: -6px;
+[data-q][data-r][data-s][data-t]:hover g.counter .troop-number {
+  --translateX: -5px;
+  --scale: 0.5;
 }
 
-[data-x]:hover g.counter .squad-number {
+[data-x]:hover g.counter .squad-number,
-  --translateX: 6px;
+[data-q][data-r][data-s][data-t]:hover g.counter .squad-number  {
+  --translateX: 5px;
+  --scale: 0.5;
 }
 
 [data-x] {

src/index.js

@@ -66,7 +66,26 @@ async function buildScenario(req) {
   panzoom.start(svg);
   gameboard.start(svg);
 
-  recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
+  // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
+  const units = [
+    { dataset: { allegiance: 'attacker', number: 1, squad: 1, weapon: 'blazer' }},
+    { dataset: { allegiance: 'attacker', number: 2, squad: 1, weapon: 'rifle' }},
+    { dataset: { allegiance: 'attacker', number: 3, squad: 1, weapon: 'rifle' }},
+    { dataset: { allegiance: 'attacker', number: 4, squad: 1, weapon: 'smg' }},
+    { dataset: { allegiance: 'attacker', number: 5, squad: 1, weapon: 'smg' }},
+    { dataset: { allegiance: 'attacker', number: 6, squad: 1, weapon: 'smg' }},
+    { dataset: { allegiance: 'attacker', number: 7, squad: 1, weapon: 'smg' }},
+
+    { dataset: { allegiance: 'defender', number: 1, squad: 1, weapon: 'blazer' }},
+    { dataset: { allegiance: 'defender', number: 2, squad: 1, weapon: 'rifle' }},
+    { dataset: { allegiance: 'defender', number: 3, squad: 1, weapon: 'rifle' }},
+    { dataset: { allegiance: 'defender', number: 4, squad: 1, weapon: 'smg' }},
+    { dataset: { allegiance: 'defender', number: 5, squad: 1, weapon: 'smg' }},
+    { dataset: { allegiance: 'defender', number: 6, squad: 1, weapon: 'smg' }},
+    { dataset: { allegiance: 'defender', number: 7, squad: 1, weapon: 'smg' }},
+  ]
+
+  recordSheet.start(null, units);
 }
 
 function updateTurnCounter() {

src/modules/game/soldier.js

@@ -57,18 +57,28 @@ function createTrace(previous, current, selected) {
 }
 
 export function createCounter(selected, weapon = 'rifle') {
-  const use = document.createElementNS(svgns, 'use');
   const g = document.createElementNS(svgns, 'g');
+  const weaponCounter = document.createElementNS(svgns, 'use');
   const assignedWeapon = isRecord(selected) ? extractWeaponFromRecord(selected) : weapon;
+  const troopNum = document.createElementNS(svgns, 'use');
+  const squadNum = document.createElementNS(svgns, 'use');
 
-  use.setAttributeNS(null, 'href', `../../${counters}#${assignedWeapon}`);
+  weaponCounter.setAttributeNS(null, 'href', `../../${counters}#${assignedWeapon}`);
-  use.classList.add('primary-weapon');
+  weaponCounter.classList.add('primary-weapon');
+
+  troopNum.setAttributeNS(null, 'href', `../../${counters}#number-${selected.dataset.number}`);
+  troopNum.classList.add('troop-number');
+
+  squadNum.setAttributeNS(null, 'href', `../../${counters}#number-${selected.dataset.squad}`);
+  squadNum.classList.add('squad-number');
 
   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);
+  g.appendChild(weaponCounter);
+  g.appendChild(troopNum);
+  g.appendChild(squadNum);
 
   return g;
 }

src/modules/gameboard.js

@@ -290,11 +290,11 @@ export function start(el) {
   });
 
   // debug //
-  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 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(attacker, 'blazer'), getCell(0, 0, 0, 0));
-  soldier.place(svg, soldier.createCounter(defender, 'rifle'), getCell(-1, 0, 1, 0));
+  // soldier.place(svg, soldier.createCounter(defender, 'rifle'), getCell(-1, 0, 1, 0));
   ///////////
 
   Observable.subscribe('select', select);

src/modules/record_sheet.js

@@ -63,15 +63,19 @@ function createWeaponIcon(type) {
 
 function createRecord(unit) {
   const { dataset: { allegiance, number, squad }} = unit,
-    primaryWeapon = unit.querySelector('.primary-weapon'),
+
-    pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
+    pw = unit.classList && unit.classList.contains('counter')
+      ? unit.querySelector('.primary-weapon').getAttributeNS(null, 'href').split('#').pop()
+      : unit.dataset.weapon || 'rifle',
+
     div = document.createElement('soldier-record-block'),
     spans = Array(6).fill('span').map(t => document.createElement(t)),
     [tn, sn, pwt, pwd, pwrs, pwrl] = spans;
 
   div.classList.add('soldier-record');
-  if (unit.classList.contains('selected')) div.classList.add('selected');
+  if (unit.classList && unit.classList.contains('selected')) div.classList.add('selected');
   div.dataset.number = number;
+  div.dataset.squad = squad;
   div.dataset.allegiance = allegiance;
 
   tn.setAttribute('slot', 'troop-number');