From 64cbc94bdc69b7c163552f03f10308c5a9db8b6b Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Mon, 16 Jun 2025 22:41:28 -0700 Subject: [PATCH] WIP: template work --- damage_block.css | 61 ++++++++ index.html | 316 ++++++++++++++++++++++++++++++++++----- index.js | 41 +++++ soldier_record_block.css | 32 ++++ style.css | 55 ++++--- 5 files changed, 450 insertions(+), 55 deletions(-) create mode 100644 damage_block.css create mode 100644 soldier_record_block.css diff --git a/damage_block.css b/damage_block.css new file mode 100644 index 0000000..46e55a0 --- /dev/null +++ b/damage_block.css @@ -0,0 +1,61 @@ +.damage-selector, .damage-effect-indicator { + width: 20px; + 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; +} + +.damage-selector.lethal { + background-color: red; +} + +label input[type="radio"] { + position: absolute; + opacity: 0; + margin: 0; + padding: 0; +} + +label { + display: none; + margin: 0; + padding: 0; +} + +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; +} \ No newline at end of file diff --git a/index.html b/index.html index 36594b0..179d02a 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,107 @@ + + + + + + @@ -55,52 +156,189 @@ 17th Kestral Mechanized Infantry -->

- - - +

- + + 10 - + + + 9 + + + + + + 8 + + + + + + 7 + + + + + + 6 + + + + + + + 5 + + + + + + 4 + + + + + + 3 + + + + + + 2 + + + + + + 1 + + + + + + 0 + + + + + + DEAD + + + +

Troop Number 1

@@ -110,7 +348,10 @@
  • Short 1-27
  • Long 28-75
    • -

    Hand Grenades 4

    +

    + Hand Grenades + +

    Troop Number: 2
    @@ -130,6 +371,7 @@

    +
    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 {