Web Dev Solutions

Catalin Mititiuc

From a69623b0ab6baff9f968e126c25d7e961e9dde53 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 2 May 2024 11:02:10 -0700 Subject: Organize public directory contents into assets folders --- src/soldier_record_block.js | 56 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/soldier_record_block.js (limited to 'src/soldier_record_block.js') 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' } +); -- cgit v1.2.3