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.querySelectorAll('.grenades *').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());
}
},
{ extends: 'div' }
);