1 files changed, 37 insertions, 25 deletions
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' }
+);