- Troop Number: 1
- Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75
- HG: 4
+
+ 1
+ Rifle
+ 4L
+ 1-27
+ 28-75
-
- Troop Number: 2
- Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25
- HG: 4
+
+ 2
+ SMG
+ 3L
+ 1-15
+ 16-25
-
- Troop Number: 3
- Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105
- HG: 4
+
+ 3
+ Blazer
+ 4L
+ 1-17
+ 18-105
diff --git a/index.js b/index.js
index 695eae5..15764a1 100644
--- a/index.js
+++ b/index.js
@@ -8,29 +8,29 @@ class SoldierRecordBlock extends HTMLDivElement {
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true));
- customElements.define(
- 'damage-block',
- class extends HTMLSpanElement {
- constructor() {
- super();
-
- let template = document.getElementById('damage-block');
- let templateContent = template.content;
-
- const shadowRoot = this.attachShadow({ mode: "open" });
- shadowRoot.appendChild(templateContent.cloneNode(true));
- }
- },
- { extends: 'span' }
- );
-
this.shadowRoot
- .querySelector('input[type="number"]')
- .addEventListener('click', e => e.stopPropagation())
+ .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 shadowRoot = this.attachShadow({ mode: "open" });
+ shadowRoot.appendChild(templateContent.cloneNode(true));
+ }
+ },
+ { extends: 'span' }
+);
+
customElements.define(
'soldier-record-block',
SoldierRecordBlock,
@@ -313,8 +313,6 @@ document.querySelectorAll('.soldier-record').forEach(el =>
})
);
-document.querySelectorAll('#record-sheet .damage').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
-
document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
diff --git a/soldier_record_block.css b/soldier_record_block.css
index 02b5241..12925b2 100644
--- a/soldier_record_block.css
+++ b/soldier_record_block.css
@@ -4,7 +4,7 @@ span {
margin-right: 1em;
}
-.damage span {
+.physical-status-track span {
margin: 0;
padding: 0;
display: inline-block;
@@ -12,7 +12,7 @@ span {
vertical-align: middle;
}
-.damage span[slot="block-number"] {
+.physical-status-track span[slot="block-number"] {
font-family: serif;
font-size: unset;
}
diff --git a/style.css b/style.css
index 0f08fff..51481b9 100644
--- a/style.css
+++ b/style.css
@@ -45,10 +45,11 @@ rect#map {
}
polygon.firing-arc {
- /* opacity: 0.1; */
- fill: transparent;
+ opacity: 0.1;
+ fill: black;
+ /* fill: transparent;
stroke-width: 2px;
- stroke: black;
+ stroke: black; */
}
button.set-firing-arc img {
@@ -65,10 +66,8 @@ line.ruler {
stroke-width: 0.25in;
}
-.soldier-record span {
- font-size: smaller;
- font-family: monospace;
- margin-right: 1em;
+.soldier-record {
+ display: inline-block;
}
.soldier-record ul {