Use JS for damage indicator changes instead of CSS

public/damage_block.css

@@ -1,64 +1,18 @@
-.damage-selector, .damage-effect-indicator, label {
-  width: 20px;
-}
-
-.damage-selector, .damage-effect-indicator {
-  height: 30px;
-}
-
-.damage-selector {
-  margin: 0;
-  padding: 0;
-  border: 1px solid black;
-  display: inline-block;
-}
-
-.damage-effect-indicator {
-  position: absolute;
-  margin: 0;
-  padding: 0;
-  display: block;
-  pointer-events: none;
-  font-family: monospace;
-}
-
-.damage-selector.clear {
-  background-color: white;
-}
-
-.damage-selector.bruise {
+.damage-effect-indicator.bruise {
   background-color: orange;
 }
 
-.damage-selector.lethal {
+.damage-effect-indicator.lethal {
   background-color: red;
 }
 
-label input[type="radio"] {
-  position: absolute;
-  opacity: 0;
-  margin: 0;
-  padding: 0;
-}
-
-label {
-  display: none;
+.damage-effect-indicator {
+  width: 20px;
+  height: 30px;
   margin: 0 auto;
   padding: 0;
-}
-
-label:first-of-type {
-  display: block;
-}
-
-label:has(input:checked) {
-  display: none;
-}
-
-label:has(+ label input:checked) {
-  display: none;
-}
-
-label:has(input:checked) + label {
+  border: 1px solid black;
   display: block;
+  user-select: none;
+  font-family: monospace;
 }

public/index.html

@@ -13,18 +13,6 @@
         <slot name="firing-modifier"></slot><br>
         <slot name="movement-points"></slot>
       </span>
-      <label>
-        <input type="radio" name="damage" checked>
-        <span class="damage-selector lethal"></span>
-      </label>
-      <label>
-        <input type="radio" name="damage">
-        <span class="damage-selector clear"></span>
-      </label>
-      <label>
-        <input type="radio" name="damage">
-        <span class="damage-selector bruise"></span>
-      </label>
     </template>
 
     <template id="soldier-record-block">

public/soldier_record_block.js

@@ -1,40 +1,52 @@
-class SoldierRecordBlock extends HTMLDivElement {
-  constructor() {
-    super();
-
-    let template = document.getElementById('soldier-record-block');
-    let templateContent = template.content;
-
-    const shadowRoot = this.attachShadow({ mode: "open" });
-    shadowRoot.appendChild(templateContent.cloneNode(true));
-
-    // console.log(shadowRoot)
-
-    // this.shadowRoot
-    //   .querySelectorAll('p:has(input[type="number"]), .physical-status-track')
-    //   .forEach(el => el.addEventListener('click', e => e.stopPropagation()))
-    //   ;
-  }
-}
-
 customElements.define(
   'damage-block',
   class extends HTMLSpanElement {
     constructor() {
       super();
 
-      let template = document.getElementById('damage-block');
-      let templateContent = template.content;
+      const template = document.querySelector('#damage-block'),
+        templateContent = template.content,
+        shadowRoot = this.attachShadow({ mode: "open" });
 
-      const 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',
-  SoldierRecordBlock,
-  { extends: 'div'}
+  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));
+    }
+  },
+  { extends: 'div' }
 );

src/index.js

@@ -3,18 +3,23 @@ import Game from './modules/game.js';
 
 const PanZoom = new function () {
   const vb = 'viewBox';
+  let svg;
 
-  function storeLatestViewBoxVal(svg) {
+  function storeViewBoxVal() {
+    localStorage.setItem(vb, svg.getAttribute(vb));
+  }
+
+  function observeViewBoxChanges() {
     const observer = new MutationObserver(mutations => {
       if (mutations.find(m => m.target == svg && m.attributeName == vb)) {
-        localStorage.setItem(vb, svg.getAttribute(vb));
+        storeViewBoxVal(svg);
       }
     });
 
     observer.observe(svg, { attributes: true });
   }
 
-  function restoreViewboxVal(svg) {
+  function restoreViewBoxVal() {
     const storedVbVal = localStorage.getItem(vb);
 
     if (storedVbVal) {
@@ -22,9 +27,7 @@ const PanZoom = new function () {
     }
   }
 
-  this.start = function (svg) {
-    restoreViewboxVal(svg);
-
+  function addEventListeners() {
     svg.addEventListener('wheel', e => {
       e.preventDefault();
 
@@ -36,8 +39,13 @@ const PanZoom = new function () {
 
       pan(svg, e);
     }, { passive: false });
+  }
 
-    storeLatestViewBoxVal(svg);
+  this.start = function (el) {
+    svg = el;
+    restoreViewBoxVal();
+    addEventListeners();
+    observeViewBoxChanges();
   };
 };
 

src/modules/game.js

@@ -142,7 +142,6 @@ export default class Game {
 
     this.setUpSightLine(this);
     this.setUpCounter(this);
-    // this.setUpRecordSheet();
     this.setUpCells();
   }
 
@@ -343,7 +342,6 @@ export default class Game {
 
     if (selected) {
       this.Counter.endMove(selected);
-      // this.RecordSheet.endMove();
     }
   }
 
@@ -557,7 +555,6 @@ export default class Game {
             }
           } else {
             e.stopPropagation();
-            // this.RecordSheet.select(e.target);
             container.Counter.select(e.target);
           }
         },