1 files changed, 56 insertions, 0 deletions
diff --git a/src/soldier_record_block.js b/src/soldier_record_block.js
new file mode 100644
index 0000000..3931649
--- /dev/null
+++ b/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' }
+);