Use JS for damage indicator changes instead of CSS
This commit is contained in:
parent
460027e965
commit
4229c732bc
@ -1,64 +1,18 @@
|
|||||||
.damage-selector, .damage-effect-indicator, label {
|
.damage-effect-indicator.bruise {
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-selector, .damage-effect-indicator {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-selector {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 1px solid black;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-effect-indicator {
|
|
||||||
position: absolute;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: block;
|
|
||||||
pointer-events: none;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-selector.clear {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-selector.bruise {
|
|
||||||
background-color: orange;
|
background-color: orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
.damage-selector.lethal {
|
.damage-effect-indicator.lethal {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
label input[type="radio"] {
|
.damage-effect-indicator {
|
||||||
position: absolute;
|
width: 20px;
|
||||||
opacity: 0;
|
height: 30px;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: none;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
border: 1px solid black;
|
||||||
|
|
||||||
label:first-of-type {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
label:has(input:checked) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
label:has(+ label input:checked) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
label:has(input:checked) + label {
|
|
||||||
display: block;
|
display: block;
|
||||||
|
user-select: none;
|
||||||
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
@ -13,18 +13,6 @@
|
|||||||
<slot name="firing-modifier"></slot><br>
|
<slot name="firing-modifier"></slot><br>
|
||||||
<slot name="movement-points"></slot>
|
<slot name="movement-points"></slot>
|
||||||
</span>
|
</span>
|
||||||
<label>
|
|
||||||
<input type="radio" name="damage" checked>
|
|
||||||
<span class="damage-selector lethal"></span>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="damage">
|
|
||||||
<span class="damage-selector clear"></span>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="damage">
|
|
||||||
<span class="damage-selector bruise"></span>
|
|
||||||
</label>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template id="soldier-record-block">
|
<template id="soldier-record-block">
|
||||||
|
@ -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(
|
customElements.define(
|
||||||
'damage-block',
|
'damage-block',
|
||||||
class extends HTMLSpanElement {
|
class extends HTMLSpanElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
let template = document.getElementById('damage-block');
|
const template = document.querySelector('#damage-block'),
|
||||||
let templateContent = template.content;
|
templateContent = template.content,
|
||||||
|
shadowRoot = this.attachShadow({ mode: "open" });
|
||||||
|
|
||||||
const shadowRoot = this.attachShadow({ mode: "open" });
|
|
||||||
shadowRoot.appendChild(templateContent.cloneNode(true));
|
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' }
|
{ extends: 'span' }
|
||||||
);
|
);
|
||||||
|
|
||||||
customElements.define(
|
customElements.define(
|
||||||
'soldier-record-block',
|
'soldier-record-block',
|
||||||
SoldierRecordBlock,
|
class extends HTMLDivElement {
|
||||||
{ extends: 'div'}
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
const template = document.querySelector('#soldier-record-block'),
|
||||||
|
templateContent = template.content,
|
||||||
|
shadowRoot = this.attachShadow({ mode: "open" });
|
||||||
|
|
||||||
|
shadowRoot.appendChild(templateContent.cloneNode(true));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ extends: 'div' }
|
||||||
);
|
);
|
22
src/index.js
22
src/index.js
@ -3,18 +3,23 @@ import Game from './modules/game.js';
|
|||||||
|
|
||||||
const PanZoom = new function () {
|
const PanZoom = new function () {
|
||||||
const vb = 'viewBox';
|
const vb = 'viewBox';
|
||||||
|
let svg;
|
||||||
|
|
||||||
function storeLatestViewBoxVal(svg) {
|
function storeViewBoxVal() {
|
||||||
|
localStorage.setItem(vb, svg.getAttribute(vb));
|
||||||
|
}
|
||||||
|
|
||||||
|
function observeViewBoxChanges() {
|
||||||
const observer = new MutationObserver(mutations => {
|
const observer = new MutationObserver(mutations => {
|
||||||
if (mutations.find(m => m.target == svg && m.attributeName == vb)) {
|
if (mutations.find(m => m.target == svg && m.attributeName == vb)) {
|
||||||
localStorage.setItem(vb, svg.getAttribute(vb));
|
storeViewBoxVal(svg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
observer.observe(svg, { attributes: true });
|
observer.observe(svg, { attributes: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
function restoreViewboxVal(svg) {
|
function restoreViewBoxVal() {
|
||||||
const storedVbVal = localStorage.getItem(vb);
|
const storedVbVal = localStorage.getItem(vb);
|
||||||
|
|
||||||
if (storedVbVal) {
|
if (storedVbVal) {
|
||||||
@ -22,9 +27,7 @@ const PanZoom = new function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.start = function (svg) {
|
function addEventListeners() {
|
||||||
restoreViewboxVal(svg);
|
|
||||||
|
|
||||||
svg.addEventListener('wheel', e => {
|
svg.addEventListener('wheel', e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
@ -36,8 +39,13 @@ const PanZoom = new function () {
|
|||||||
|
|
||||||
pan(svg, e);
|
pan(svg, e);
|
||||||
}, { passive: false });
|
}, { passive: false });
|
||||||
|
}
|
||||||
|
|
||||||
storeLatestViewBoxVal(svg);
|
this.start = function (el) {
|
||||||
|
svg = el;
|
||||||
|
restoreViewBoxVal();
|
||||||
|
addEventListeners();
|
||||||
|
observeViewBoxChanges();
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -142,7 +142,6 @@ export default class Game {
|
|||||||
|
|
||||||
this.setUpSightLine(this);
|
this.setUpSightLine(this);
|
||||||
this.setUpCounter(this);
|
this.setUpCounter(this);
|
||||||
// this.setUpRecordSheet();
|
|
||||||
this.setUpCells();
|
this.setUpCells();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -343,7 +342,6 @@ export default class Game {
|
|||||||
|
|
||||||
if (selected) {
|
if (selected) {
|
||||||
this.Counter.endMove(selected);
|
this.Counter.endMove(selected);
|
||||||
// this.RecordSheet.endMove();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -557,7 +555,6 @@ export default class Game {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
// this.RecordSheet.select(e.target);
|
|
||||||
container.Counter.select(e.target);
|
container.Counter.select(e.target);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user