From 4229c732bca15f4563f596ca345d576984bc517a Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 17 Apr 2024 10:20:15 -0700
Subject: Use JS for damage indicator changes instead of CSS
---
public/soldier_record_block.js | 62 +++++++++++++++++++++++++-----------------
1 file changed, 37 insertions(+), 25 deletions(-)
(limited to 'public/soldier_record_block.js')
diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js
index b2465ab..fd1c661 100644
--- a/public/soldier_record_block.js
+++ b/public/soldier_record_block.js
@@ -1,40 +1,52 @@
-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));
-
- // console.log(shadowRoot)
-
- // this.shadowRoot
- // .querySelectorAll('p:has(input[type="number"]), .physical-status-track')
- // .forEach(el => el.addEventListener('click', e => e.stopPropagation()))
- // ;
- }
-}
-
customElements.define(
'damage-block',
class extends HTMLSpanElement {
constructor() {
super();
- let template = document.getElementById('damage-block');
- let templateContent = template.content;
+ const template = document.querySelector('#damage-block'),
+ templateContent = template.content,
+ shadowRoot = this.attachShadow({ mode: "open" });
- const 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',
- SoldierRecordBlock,
- { extends: 'div'}
-);
\ No newline at end of file
+ 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' }
+);
--
cgit v1.2.3