Try to simplify trooper counter

public/assets/css/map.css

@@ -47,10 +47,6 @@ polyline.move-trace {
   /* fill: #bacae3; */
 }
 
-#counter-base {
-  r: inherit;
-}
-
 g.troop-counter, g.counter, g.troop-counter use {
   r: inherit;
 }
@@ -59,7 +55,7 @@ g.troop-counter-template, g.troop-counter-template use {
   r: inherit;
 }
 
-g.weapon-symbol {
+g.weapon-symbol :not(use[href="#counter-base"]) {
   stroke: white;
   stroke-width: 0.5px;
 }
@@ -107,18 +103,27 @@ g[data-allegiance="attacker"].clone {
   fill: rgb(126, 126, 255);
 }
 
-text.counter, #troop-counter text {
+.counter, #troop-counter text {
+  /* transform: translateY(4px); */
+}
+
+g.counter use.troop-number, g.counter use.squad-number {
   font-size: 12px;
   font-weight: bold;
-  fill: white;
+  font-family: monospace;
-  font-family: sans-serif;
   cursor: default;
   text-anchor: middle;
-  transform: translateY(4px);
   pointer-events: none;
   user-select: none;
+  --text-fill: white;
+  --translateY: 4px;
 }
 
+/* .primary-weapon {
+  stroke: white;
+  stroke-width: 0.5px;
+} */
+
 polygon.firing-arc[data-allegiance="defender"] {
   fill: red;
 }
@@ -167,17 +172,6 @@ g.counter use {
   r: 5px;
 }
 
-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;
 }
@@ -194,7 +188,7 @@ g.counter .troop-number, g.counter .squad-number {
   transform: translate(var(--translateX), 0) scale(var(--scale));
 }
 
-g.selected use[href="#counter-base"] {
+g.selected use.primary-weapon {
   animation: 1s selected 0.25s linear infinite;
   stroke-width: 2px;
   stroke: yellow;

public/assets/css/style.css

@@ -181,11 +181,18 @@ polygon.firing-arc[data-allegiance="attacker"] {
   fill: blue;
 }
 
-.weapon-icon {
+.soldier-record svg use {
+  r: 5px;
+  stroke: none;
+}
+
+
+.soldier-record svg.weapon-icon use {
   stroke: white;
   stroke-width: 0.5px;
 }
 
+
 .soldier-record svg {
   width: 20px;
   height: 20px;
@@ -210,12 +217,6 @@ polygon.firing-arc[data-allegiance="attacker"] {
   font-family: monospace;
 }
 
-.weapon-symbol :not(use[href="#counter-base"]) {
-  stroke: white;
-  stroke-width: 0.5;
-  fill: none;
-}
-
 .soldier-record.selected {
   background-color: khaki;
 }

public/assets/images/counters.svg

@@ -1,7 +1,36 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="5"/>
+    <circle id="counter-base" style="r: inherit; stroke: none;" cx="0" cy="0" r="5"/>
+
+    <g style="r: inherit;" id="number-1">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">1</text>
+    </g>
+    <g id="number-2">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">2</text>
+    </g>
+    <g id="number-3">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">3</text>
+    </g>
+    <g id="number-4">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">4</text>
+    </g>
+    <g id="number-5">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">5</text>
+    </g>
+    <g id="number-6">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">6</text>
+    </g>
+    <g id="number-7">
+      <use href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">7</text>
+    </g>
 
     <g id="semi-auto">
       <line x1="-2" y1="1" x2="2" y2="1"/>
@@ -15,22 +44,22 @@
     </g>
   </defs>
 
-  <g id="rifle" class="weapon-symbol">
+  <g id="rifle" style="r: inherit;" class="weapon-symbol">
-    <use href="#counter-base"/>
+    <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>
 
-  <g id="smg" class="weapon-symbol">
+  <g id="smg" style="r: inherit;" class="weapon-symbol">
-    <use href="#counter-base"/>
+    <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>
 
-  <g id="blazer" class="weapon-symbol">
+  <g id="blazer" style="r: inherit;" class="weapon-symbol">
-    <use href="#counter-base"/>
+    <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"/>

public/assets/images/scenario-side_show.svg

@@ -25,7 +25,6 @@
   </style>
   <defs>
     <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
-    <circle id="counter-base" cx="0" cy="0" r="5"/>
 
     <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
 
@@ -45,13 +44,36 @@
       <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
     </pattern>
 
-    <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+    <circle id="counter-base" style="r: inherit;" cx="0" cy="0" r="5"/>
-    <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+
-    <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+    <g style="r: inherit;" id="number-1">
-    <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+      <use style="r: inherit;" href="#counter-base"/>
-    <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">1</text>
-    <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+    </g>
-    <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+    <g style="r: inherit;" id="number-2">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">2</text>
+    </g>
+    <g style="r: inherit;" id="number-3">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">3</text>
+    </g>
+    <g style="r: inherit;" id="number-4">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">4</text>
+    </g>
+    <g style="r: inherit;" id="number-5">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">5</text>
+    </g>
+    <g style="r: inherit;" id="number-6">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">6</text>
+    </g>
+    <g style="r: inherit;" id="number-7">
+      <use style="r: inherit;" href="#counter-base"/>
+      <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">7</text>
+    </g>
 
     <g id="semi-auto">
       <line x1="-2" y1="1" x2="2" y2="1"/>
@@ -64,19 +86,22 @@
       <line x1="-2" y1="2" x2="2" y2="2"/>
     </g>
 
-    <g id="rifle" class="weapon-symbol">
+    <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 points="-2,-3.5 0,-5 2,-3.5"/>
+      <polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/>
     </g>
 
-    <g id="smg" class="weapon-symbol">
+    <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>
 
-    <g id="blazer" class="weapon-symbol">
+    <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"/>
@@ -114,51 +139,104 @@
     <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">
+          <g class="counter selected" 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"/>
+            <use class="primary-weapon" href="#blazer"/>
-            <!-- <use data-href="counters.svg#rifle"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/> -->
+            <use class="troop-number" href="#number-1"/>
+            <use class="squad-number" href="#number-1"/>
           </g>
         </g>
         <g data-x="14">
-          <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 class="counter" data-allegiance="attacker" data-number="2">
+            <use class="primary-weapon" href="#rifle"/>
+            <use class="troop-number" href="#number-2"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="15">
-          <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 class="counter" data-allegiance="attacker" data-number="3">
+            <use class="primary-weapon" href="#rifle"/>
+            <use class="troop-number" href="#number-3"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="16">
-          <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 class="counter" data-allegiance="attacker" data-number="4">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-4"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="17">
-          <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 class="counter" data-allegiance="attacker" data-number="5">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-5"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="18">
-          <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 class="counter" data-allegiance="attacker" data-number="6">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-6"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="19">
-          <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 class="counter" data-allegiance="attacker" data-number="7">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-7"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
       </g>
       <g data-edge="south">
         <g data-x="13">
-          <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 class="counter" data-allegiance="defender" data-number="1">
+            <use class="primary-weapon" href="#blazer"/>
+            <use class="troop-number" href="#number-1"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="14">
-          <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 class="counter" data-allegiance="defender" data-number="2">
+            <use class="primary-weapon" href="#rifle"/>
+            <use class="troop-number" href="#number-2"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="15">
-          <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 class="counter" data-allegiance="defender" data-number="3">
+            <use class="primary-weapon" href="#rifle"/>
+            <use class="troop-number" href="#number-3"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="16">
-          <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 class="counter" data-allegiance="defender" data-number="4">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-4"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="17">
-          <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 class="counter" data-allegiance="defender" data-number="5">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-5"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="18">
-          <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 class="counter" data-allegiance="defender" data-number="6">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-6"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
         <g data-x="19">
-          <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 class="counter" data-allegiance="defender" data-number="7">
+            <use class="primary-weapon" href="#smg"/>
+            <use class="troop-number" href="#number-7"/>
+            <use class="squad-number" href="#number-1"/>
+          </g>
         </g>
       </g>
     </g>
@@ -1952,6 +2030,6 @@
     </g>
   </g>
   <!-- <script href="http://localhost:8080/map.js"/> -->
-  <script href="../../import_mapsheets.js"/>
+  <script href="../../import_external_resources.js"/>
   <script href="../../map.js"/>
 </svg>

public/index.html

@@ -247,7 +247,7 @@
     <input type="file" accept="image/svg+xml"/>
 
     <script>
-      // new EventSource('/esbuild').addEventListener('change', () => location.reload());
+      new EventSource('/esbuild').addEventListener('change', () => location.reload());
     </script>
     <script src="index.js"></script>
     <script src="soldier_record_block.js"></script>

src/import_external_resources.js

@@ -0,0 +1,15 @@
+import mapsheets from './assets/images/mapsheets.svg';
+import counters from './assets/images/counters.svg';
+
+const files = {
+  'mapsheets.svg': mapsheets,
+  'counters.svg': counters
+}
+
+document.querySelectorAll('use[data-href*=".svg"').forEach(el => {
+  const [filename] = el.dataset.href.match(/.+\.svg/g)
+    , href = el.dataset.href.replace(filename, files[filename].split('/').pop())
+    ;
+
+  el.setAttributeNS(null, 'href', href);
+});

src/import_mapsheets.js

@@ -1,8 +0,0 @@
-import mapsheets from './assets/images/mapsheets.svg';
-
-const useEls = document.querySelectorAll('svg use[data-href*="mapsheets.svg"');
-
-useEls.forEach(el => {
-  const href = el.dataset.href.replace('mapsheets.svg', mapsheets.split('/').pop());
-  el.setAttributeNS(null, 'href', href);
-});

src/modules/record_sheet.js

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