Organize public directory contents into assets folders

src/index.js

@@ -10,7 +10,7 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   proneToggle = document.getElementById('toggle-prone-counter'),
   contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
   object = document.querySelector('object'),
-  fileName = `${localStorage.getItem('map') || 'map1'}.svg`,
+  fileName = `assets/images/${localStorage.getItem('map') || 'map1'}.svg`,
 
   toggleContentVis = (function () {
     document.querySelectorAll('#content div').forEach(div => {
@@ -132,5 +132,5 @@ object.addEventListener('load', load);
 objectDataObserver.observe(object, { attributeFilter: ['data'] });
 
 if (object.getAttribute('data') !== fileName) {
-  object.data = fileName;
+  object.data = `assets/images/${fileName}`;
 }

src/modules/map_select_dialog.js

@@ -34,7 +34,7 @@ export function init() {
         e.preventDefault();
         localStorage.removeItem('pan-zoom');
         localStorage.setItem('map', selectEl.value);
-        document.querySelector('object').data = `${selectEl.value}.svg`;
+        document.querySelector('object').data = `assets/images/${selectEl.value}.svg`;
         mapDialog.close();
       });
     }

src/soldier_record_block.js

@@ -0,0 +1,56 @@
+customElements.define(
+  'damage-block',
+  class extends HTMLSpanElement {
+    constructor() {
+      super();
+
+      const template = document.querySelector('#damage-block'),
+        templateContent = template.content,
+        shadowRoot = this.attachShadow({ mode: "open" });
+
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+
+    connectedCallback() {
+      const el = this.shadowRoot.querySelector('.damage-effect-indicator');
+
+      el.addEventListener('click', e => {
+        e.stopPropagation()
+
+        this.#cycleThroughDamageStates(el);
+      });
+    }
+
+    #cycleThroughDamageStates(el) {
+      if (el.classList.contains('bruise')) {
+        el.classList.remove('bruise');
+        el.classList.add('lethal');
+      } else if (el.classList.contains('lethal')) {
+        el.classList.remove('lethal');
+      } else {
+        el.classList.add('bruise');
+      }
+    }
+  },
+  { extends: 'span' }
+);
+
+customElements.define(
+  'soldier-record-block',
+  class extends HTMLDivElement {
+    constructor() {
+      super();
+
+      const template = document.querySelector('#soldier-record-block'),
+        templateContent = template.content,
+        shadowRoot = this.attachShadow({ mode: "open" });
+
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+
+    connectedCallback() {
+      this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());
+    }
+  },
+  { extends: 'div' }
+);