6 files changed, 44 insertions, 38 deletions
diff --git a/public/assets/css/damage_block.css b/public/assets/css/damage_block.css
index cc7e4dc..4bad577 100644
--- a/public/assets/css/damage_block.css
+++ b/public/assets/css/damage_block.css
@@ -16,3 +16,8 @@
   user-select: none;
   font-family: monospace;
 }
+
+span {
+  margin: 0;
+  font-size: smaller;
+}
diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css
index ed9d18e..5fb8c7c 100644
--- a/public/assets/css/soldier_record_block.css
+++ b/public/assets/css/soldier_record_block.css
@@ -1,5 +1,5 @@
 span {
-  font-size: smaller;
+  font-size: 10px;
   font-family: monospace;
   margin-right: 1em;
 }
@@ -8,18 +8,22 @@ span {
   text-align: center;
 }
 
-.physical-status-track span {
+.physical-status-track damage-block {
   margin: 0;
   padding: 0;
   display: inline-block;
   vertical-align: middle;
 }
 
-.physical-status-track span[slot="block-number"] {
+.physical-status-track damage-block[slot="block-number"] {
   font-family: serif;
   font-size: unset;
 }
 
+.physical-status-track damage-block span {
+  margin: 0;
+}
+
 ul {
   margin: 0;
   padding: 0;
diff --git a/public/index.html b/public/index.html
index b78df5b..1471cdc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,11 @@
   <head>
     <title>Infantry Combat Solo Basic</title>
     <link rel="stylesheet" href="assets/css/style.css">
+    <script>
+      const source = new EventSource('/esbuild');
+      source.addEventListener('change', () => location.reload());
+      // source.addEventListener('message', (e) => console.log(e));
+    </script>
   </head>
   <body>
     <template id="damage-block">
@@ -19,61 +24,61 @@
       <link rel="stylesheet" href="assets/css/soldier_record_block.css">
 
       <p class="physical-status-track">
-        <span is="damage-block">
+        <damage-block>
           <span slot="block-number">10</span>
           <span slot="movement-points">8</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">9</span>
           <span slot="movement-points">8</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">8</span>
           <span slot="movement-points">8</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">7</span>
           <span slot="movement-points">8</span>
           <span slot="firing-modifier">+1</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">6</span>
           <span slot="movement-points">7</span>
           <span slot="firing-modifier">+1</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">5</span>
           <span slot="movement-points">7</span>
           <span slot="firing-modifier">+2</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">4</span>
           <span slot="movement-points">6</span>
           <span slot="firing-modifier">+2</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">3</span>
           <span slot="movement-points">6</span>
           <span slot="firing-modifier">+2</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">2</span>
           <span slot="movement-points">5</span>
           <span slot="firing-modifier">+3</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">1</span>
           <span slot="movement-points">4</span>
           <span slot="firing-modifier">+3</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">0</span>
           <span slot="movement-points">None</span>
           <span slot="firing-modifier">0</span>
-        </span>
-        <span is="damage-block">
+        </damage-block>
+        <damage-block>
           <span slot="block-number">DEAD</span>
-        </span>
+        </damage-block>
       </p>
 
       <p>
@@ -243,11 +248,6 @@
 
     <input type="file" accept="image/svg+xml"/>
 
-    <script>
-      const source = new EventSource('/esbuild');
-      source.addEventListener('change', () => location.reload());
-      // source.addEventListener('message', (e) => console.log(e));
-    </script>
     <script src="index.js"></script>
     <script src="soldier_record_block.js"></script>
   </body>
diff --git a/src/index.js b/src/index.js
index 7f914d4..87c9bfb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,6 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   proneToggle = document.getElementById('toggle-prone-counter'),
   contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
-  // fileName = localStorage.getItem('map') || (env === 'test' ? 'test_map' : 'map1'),
   fileName = localStorage.getItem('map') || 'scenario-side_show',
   map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
   fileInputEl = document.querySelector('input[type="file"]'),
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 53f6d83..f786112 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -82,7 +82,7 @@ function createRecord(unit) {
   const { dataset: { allegiance, number, squad }} = unit,
     primaryWeapon = unit.querySelector('.primary-weapon'),
     pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
-    div = document.createElement('div', { is: 'soldier-record-block' }),
+    div = document.createElement('soldier-record-block'),
     spans = Array(6).fill('span').map(t => document.createElement(t)),
     [tn, sn, pwt, pwd, pwrs, pwrl] = spans;
 
diff --git a/src/soldier_record_block.js b/src/soldier_record_block.js
index 3931649..120b3bc 100644
--- a/src/soldier_record_block.js
+++ b/src/soldier_record_block.js
@@ -1,6 +1,6 @@
 customElements.define(
   'damage-block',
-  class extends HTMLSpanElement {
+  class extends HTMLElement {
     constructor() {
       super();
 
@@ -32,12 +32,11 @@ customElements.define(
       }
     }
   },
-  { extends: 'span' }
 );
 
 customElements.define(
   'soldier-record-block',
-  class extends HTMLDivElement {
+  class extends HTMLElement {
     constructor() {
       super();
 
@@ -52,5 +51,4 @@ customElements.define(
       this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());
     }
   },
-  { extends: 'div' }
 );