3 files changed, 45 insertions, 91 deletions
diff --git a/public/damage_block.css b/public/damage_block.css
index f050e36..cc7e4dc 100644
--- a/public/damage_block.css
+++ b/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;
 }
diff --git a/public/index.html b/public/index.html
index 718654c..a7e84e0 100644
--- a/public/index.html
+++ b/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">
diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js
index b2465ab..fd1c661 100644
--- a/public/soldier_record_block.js
+++ b/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'}
-);
-\ No newline at end of file
+  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' }
+);