Try to simplify trooper counter

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;