53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
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));
|
|
}
|
|
},
|
|
{ extends: 'div' }
|
|
);
|