Web Dev Solutions

Catalin Mititiuc

From ea2ff860fa53620491385685330e99c71ffc7581 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Thu, 18 Apr 2024 19:13:37 -0700 Subject: Use checkboxes for grenades --- public/index.html | 35 +++++++++++++++++++---------------- public/soldier_record_block.css | 20 ++++++++++++++++++++ public/soldier_record_block.js | 5 +++++ public/style.css | 33 +++++++++++++++++++++++++-------- 4 files changed, 69 insertions(+), 24 deletions(-) diff --git a/public/index.html b/public/index.html index dbb14a9..68acea4 100644 --- a/public/index.html +++ b/public/index.html @@ -83,9 +83,12 @@
  • Short 1-27
  • Long 28-75
    • -

    +

    Hand Grenades - + + + +

    @@ -186,49 +189,49 @@ 17th Kestral Mechanized Infantry -->

    - 1 + 1 Rifle 4L 1-27 28-75
    - 2 + 2 Rifle 4L 1-27 28-75
    - 3 + 3 SMG 3L 1-15 16-25
    - 4 + 4 SMG 3L 1-15 16-25
    - 5 + 5 SMG 3L 1-15 16-25
    - 6 + 6 SMG 3L 1-15 16-25
    - 7 + 7 Blazer 4L 1-17 @@ -250,49 +253,49 @@ Aldebaran Home Guard -->

    - 1 + 1 Rifle 4L 1-27 28-75
    - 2 + 2 Rifle 4L 1-27 28-75
    - 3 + 3 SMG 3L 1-15 16-25
    - 4 + 4 SMG 3L 1-15 16-25
    - 5 + 5 SMG 3L 1-15 16-25
    - 6 + 6 SMG 3L 1-15 16-25
    - 7 + 7 Blazer 4L 1-17 diff --git a/public/soldier_record_block.css b/public/soldier_record_block.css index 47bf583..fb1d322 100644 --- a/public/soldier_record_block.css +++ b/public/soldier_record_block.css @@ -33,3 +33,23 @@ ul li { p { margin: 0; } + +.grenades input { + display: none; +} + +.grenades svg { + width: 14px; + height: 14px; + vertical-align: bottom; +} + +.grenades svg circle { + fill: none; + stroke: black; + stroke-width: 2px; +} + +.grenades input:checked + svg circle { + fill: gray; +} diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js index fd1c661..0bf5a9a 100644 --- a/public/soldier_record_block.js +++ b/public/soldier_record_block.js @@ -47,6 +47,11 @@ customElements.define( shadowRoot.appendChild(templateContent.cloneNode(true)); } + + connectedCallback() { + // this.shadowRoot.querySelectorAll('.grenades *').forEach(el => el.addEventListener('click', e => e.stopPropagation())); + this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation()); + } }, { extends: 'div' } ); diff --git a/public/style.css b/public/style.css index 167254b..00d9d74 100644 --- a/public/style.css +++ b/public/style.css @@ -355,19 +355,36 @@ button.set-firing-arc img { background-color: white; } -.soldier-record [slot="troop-number"] { - color: white; +.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] svg { + fill: green; +} + +.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] svg { + fill: red; +} + +.soldier-record [slot="troop-number"] svg { + width: 20px; + height: 20px; + background-color: initial; + vertical-align: middle; +} + +.soldier-record [slot="troop-number"] svg text { + fill: white; + text-anchor: middle; + font-size: 10px; font-weight: bold; - border-radius: 10px; - padding: 0 4px; + transform: translateY(3.5px); + font-family: monospace; } -.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] { - background-color: red; +.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] img { + fill: red; } -.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] { - background-color: green; +.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] img { + fill: green; } .soldier-record.selected { -- cgit v1.2.3