Use checkboxes for grenades

public/index.html

@@ -83,9 +83,12 @@
         <li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
         <li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
       </ul>
-      <p>
+      <p class="grenades">
         <span>Hand Grenades</span>
-        <input type="number" min="0" max="4" value="4" />
+        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
+        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
+        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
+        <label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
       </p>
     </template>
 
@@ -186,49 +189,49 @@
             17th Kestral Mechanized Infantry -->
           </p>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
-            <span slot="troop-number">1</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
-            <span slot="troop-number">2</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
-            <span slot="troop-number">3</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="davion">
-            <span slot="troop-number">4</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="davion">
-            <span slot="troop-number">5</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="davion">
-            <span slot="troop-number">6</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="davion">
-            <span slot="troop-number">7</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
             <span slot="primary-weapon-type">Blazer</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-17</span>
@@ -250,49 +253,49 @@
             Aldebaran Home Guard -->
           </p>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
-            <span slot="troop-number">1</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
-            <span slot="troop-number">2</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
             <span slot="primary-weapon-type">Rifle</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-27</span>
             <span slot="primary-weapon-range-long">28-75</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
-            <span slot="troop-number">3</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="liao">
-            <span slot="troop-number">4</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="liao">
-            <span slot="troop-number">5</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="liao">
-            <span slot="troop-number">6</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
             <span slot="primary-weapon-type">SMG</span>
             <span slot="primary-weapon-damage">3L</span>
             <span slot="primary-weapon-range-short">1-15</span>
             <span slot="primary-weapon-range-long">16-25</span>
           </div>
           <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="liao">
-            <span slot="troop-number">7</span>
+            <span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
             <span slot="primary-weapon-type">Blazer</span>
             <span slot="primary-weapon-damage">4L</span>
             <span slot="primary-weapon-range-short">1-17</span>

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;
+}

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' }
 );

public/style.css

@@ -355,19 +355,36 @@ button.set-firing-arc img {
   background-color: white;
 }
 
-.soldier-record [slot="troop-number"] {
+.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] svg {
-  color: white;
+  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;
+  transform: translateY(3.5px);
-  padding: 0 4px;
+  font-family: monospace;
 }
 
-.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] {
+.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] img {
-  background-color: red;
+  fill: red;
 }
 
-.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] {
+.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] img {
-  background-color: green;
+  fill: green;
 }
 
 .soldier-record.selected {