Web Dev Solutions

Catalin Mititiuc

From b5143808d2d907102346413e70aa28641effcacc Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sun, 24 Mar 2024 16:42:49 -0700 Subject: WIP: template work --- index.js | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) (limited to 'index.js') 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'); -- cgit v1.2.3