Add weapon icons to record sheet

public/assets/css/soldier_record_block.css

@@ -27,7 +27,6 @@ ul {
 
 ul li {
   display: inline;
-  margin-left: 1em;
 }
 
 p {

public/assets/css/style.css

@@ -196,8 +196,10 @@ g#grid {
   transform: rotate(180deg);
 }
 
-#counter-base {
+.weapon-symbol :not(use[href="#counter-base"]) {
-  r: inherit;
+  stroke: white;
+  stroke-width: 0.75;
+  fill: none;
 }
 
 g.troop-counter-template, g.troop-counter-template use {
@@ -306,22 +308,26 @@ button.set-firing-arc img {
   background-color: white;
 }
 
-.soldier-record[data-allegiance="attacker"] [slot="troop-number"] svg {
+.soldier-record span[slot] {
+  margin-right: .4em;
+}
+
+.soldier-record[data-allegiance="attacker"] svg {
   fill: blue;
 }
 
-.soldier-record[data-allegiance="defender"] [slot="troop-number"] svg {
+.soldier-record[data-allegiance="defender"] svg {
   fill: red;
 }
 
-.soldier-record [slot="troop-number"] svg {
+.soldier-record svg {
   width: 20px;
   height: 20px;
   background-color: initial;
   vertical-align: middle;
 }
 
-.soldier-record [slot="troop-number"] svg text {
+.soldier-record svg text {
   fill: white;
   text-anchor: middle;
   font-size: 10px;
@@ -330,14 +336,6 @@ button.set-firing-arc img {
   font-family: monospace;
 }
 
-.soldier-record[data-allegiance="defender"] [slot="troop-number"] img {
-  fill: red;
-}
-
-.soldier-record[data-allegiance="attacker"] [slot="troop-number"] img {
-  fill: blue;
-}
-
 .soldier-record.selected {
   background-color: khaki;
 }

public/assets/images/counters.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <circle id="counter-base" cx="0" cy="0" r="6"/>
+
+    <g id="semi-auto">
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="auto">
+      <line x1="-2" y1="0" x2="2" y2="0"/>
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+  </defs>
+
+  <g id="rifle" class="weapon-symbol">
+    <use href="#counter-base"/>
+    <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 id="smg" class="weapon-symbol">
+    <use 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>
+
+  <g id="blazer" class="weapon-symbol">
+    <use 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>
+</svg>

public/index.html

@@ -76,7 +76,10 @@
         </span>
       </p>
 
-      <p><span>Troop Number</span> <slot name="troop-number">1</slot></p>
+      <p>
+        <span>Troop Number</span> <slot name="troop-number">1</slot>
+        <span>Squad Number</span> <slot name="squad-number">1</slot>
+      </p>
       <p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
       <ul>
         <li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>

src/modules/record_sheet.js

@@ -20,31 +20,42 @@ const weapons = {
 }
 
 function createIcon(number) {
-  const svgns = 'http://www.w3.org/2000/svg';
+  const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t));
-  const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
 
-  icon.setAttributeNS(null, 'viewBox', '-5 -5 10 10')
+  icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
   icon.setAttribute('xmlns', svgns);
 
-  circle.setAttributeNS(null, 'cx', 0);
+  use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
-  circle.setAttributeNS(null, 'cy', 0);
-  circle.setAttributeNS(null, 'r', 5);
 
   text.textContent = number;
 
-  icon.appendChild(circle);
+  icon.appendChild(use);
   icon.appendChild(text);
 
   return icon;
 }
 
+function createWeaponIcon(type) {
+  const [icon, use] = ['svg', 'use'].map(t => document.createElementNS(svgns, t));
+
+  icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
+  icon.setAttribute('xmlns', svgns);
+  icon.classList.add('weapon-icon');
+
+  use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
+
+  icon.appendChild(use);
+
+  return icon;
+}
+
 function createRecord(unit) {
-  const { dataset: { allegiance, number }} = unit,
+  const { dataset: { allegiance, number, squad }} = unit,
     primaryWeapon = unit.querySelector('.primary-weapon'),
     pw = primaryWeapon?.getAttribute('href').replace('#', '') || 'rifle',
     div = document.createElement('div', { is: 'soldier-record-block' }),
-    spans = Array(5).fill('span').map(t => document.createElement(t)),
+    spans = Array(6).fill('span').map(t => document.createElement(t)),
-    [tn, pwt, pwd, pwrs, pwrl] = spans;
+    [tn, sn, pwt, pwd, pwrs, pwrl] = spans;
 
   div.setAttribute('class', 'soldier-record');
   div.dataset.number = number;
@@ -53,8 +64,12 @@ function createRecord(unit) {
   tn.setAttribute('slot', 'troop-number');
   tn.appendChild(createIcon(number));
 
+  sn.setAttribute('slot', 'squad-number');
+  sn.appendChild(createIcon(squad || 1));
+
   pwt.setAttribute('slot', 'primary-weapon-type');
-  pwt.textContent = weapons[pw].name;
+  pwt.textContent = ' ' + weapons[pw].name;
+  pwt.prepend(createWeaponIcon(pw));
 
   pwd.setAttribute('slot', 'primary-weapon-damage');
   pwd.textContent = weapons[pw].damage;