1 files changed, 41 insertions, 0 deletions
diff --git a/index.js b/index.js
index fc3d4d5..695eae5 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,42 @@
+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));
+
+    customElements.define(
+      'damage-block',
+      class extends HTMLSpanElement {
+        constructor() {
+          super();
+
+          let template = document.getElementById('damage-block');
+          let templateContent = template.content;
+
+          const shadowRoot = this.attachShadow({ mode: "open" });
+          shadowRoot.appendChild(templateContent.cloneNode(true));
+        }
+      },
+      { extends: 'span' }
+    );
+
+    this.shadowRoot
+      .querySelector('input[type="number"]')
+      .addEventListener('click', e => e.stopPropagation())
+      ;
+  }
+}
+
+customElements.define(
+  'soldier-record-block',
+  SoldierRecordBlock,
+  { extends: 'div'}
+);
+
 function isEven(n) {
   return n % 2 === 0;
 }
@@ -274,6 +313,8 @@ document.querySelectorAll('.soldier-record').forEach(el =>
   })
 );
 
+document.querySelectorAll('#record-sheet .damage').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
+
 document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {
   let selectedSoldier = document.querySelector('.soldier-record.selected');