Troop Number: 1
Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75
diff --git a/index.js b/index.js
index fc3d4d5..695eae5 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,42 @@
+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));
+
+ 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())
+ ;
+ }
+}
+
+customElements.define(
+ 'soldier-record-block',
+ SoldierRecordBlock,
+ { extends: 'div'}
+);
+
function isEven(n) {
return n % 2 === 0;
}
@@ -274,6 +313,8 @@ 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
new file mode 100644
index 0000000..02b5241
--- /dev/null
+++ b/soldier_record_block.css
@@ -0,0 +1,32 @@
+span {
+ font-size: smaller;
+ font-family: monospace;
+ margin-right: 1em;
+}
+
+.damage span {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.damage span[slot="block-number"] {
+ font-family: serif;
+ font-size: unset;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+}
+
+ul li {
+ display: inline;
+ margin-left: 1em;
+}
+
+p {
+ margin: 0;
+}
diff --git a/style.css b/style.css
index 93552b0..0f08fff 100644
--- a/style.css
+++ b/style.css
@@ -45,7 +45,10 @@ rect#map {
}
polygon.firing-arc {
- opacity: 0.1;
+ /* opacity: 0.1; */
+ fill: transparent;
+ stroke-width: 2px;
+ stroke: black;
}
button.set-firing-arc img {
@@ -82,12 +85,30 @@ line.ruler {
margin: 0;
}
+.damage label {
+ margin: 0;
+ padding: 0;
+}
-label span {
+.damage span {
+ margin: 0;
+ padding: 0;
+}
+
+.damage > span {
display: inline-block;
- width: 10px;
- height: 10px;
+ text-align: center;
+ font-family: serif;
+ vertical-align: middle;
+}
+
+.damage-selector {
+ width: 20px;
+ height: 30px;
+ margin: 0;
+ padding: 0;
border: 1px solid black;
+ display: inline-block;
}
.damage-selector.clear {
@@ -102,8 +123,11 @@ label span {
background-color: red;
}
-label {
- display: block;
+.damage label input {
+ position: absolute;
+ opacity: 0;
+ margin: 0;
+ padding: 0;
}
/* .soldier-record p.damage span {
@@ -163,29 +187,24 @@ input:checked + label + input + label {
}
*/
-input {
- position: absolute;
- opacity: 0;
-}
-
-label span {
+label {
display: none;
}
-label:first-of-type span {
- display: inline-block;
+label:first-of-type {
+ display: block;
}
-label:has(input:checked) span {
+label:has(input:checked) {
display: none;
}
-label:has(+ label input:checked) span {
+label:has(+ label input:checked) {
display: none;
}
-label:has(input:checked) + label span {
- display: inline-block;
+label:has(input:checked) + label {
+ display: block;
}
image#img1 {
--
cgit v1.2.3