Style grenade indicators without svg

public/assets/css/soldier_record_block.css

@@ -45,52 +45,45 @@ p {
   display: none;
 }
 
-.grenades svg {
-  width: 14px;
-  height: 14px;
-  vertical-align: bottom;
+.grenades input + label {
+  display: inline-block;
+  width: 0.75em;
+  height: 0.75em;
+  border: 1px solid black;
+  border-radius: 50%;
+  vertical-align: middle;
 }
 
-.grenades svg circle {
-  fill: none;
-  stroke: black;
-  stroke-width: 2px;
+.grenades input:checked + label {
+  background-color: gray;
 }
 
-.grenades input:checked + svg circle {
-  fill: gray;
+.grenades input + label:hover {
+  background-color: lightgray;
+}
+
+.grenades input:checked + label:hover {
+  background-color: darkgray;
 }
 
 [slot="block-number"]:not(:last-of-type) {
   display: inline-block;
   width: 1.3em;
+  margin-bottom: 2px;
 }
 
-damage-block.armor span[slot="block-number"] {
-  border: 1px solid black;
+damage-block span[slot="block-number"] {
+  border: 1px solid transparent;
   padding: 2px;
   border-radius: 50%;
   position: relative;
 }
 
-.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover {
-  border: 1px solid orangered;
-  cursor: pointer;
+damage-block.preview span[slot="block-number"] {
+  border-color: gray;
+  background-color: silver;
 }
 
-.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before {
-  content: '🡄';  /*<⇽⭠⮈🠈  🠜  🡄*/
-  position: absolute;
-  margin-left: -1.5em;
-}
-
-.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover {
-  border: 1px solid orangered;
-  cursor: pointer;
-}
-
-.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover::after {
-  content: '🡆';  /* 🠊  🡆 */
-  position: absolute;
-  margin-left: 1em;
+damage-block.armor span[slot="block-number"] {
+  border-color: black;
 }

public/index.html

@@ -100,18 +100,10 @@
     </ul>
     <p class="grenades">
       <span>Hand Grenades</span>
-      <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>
+      <input type='checkbox' id="grenade1" checked /><label for="grenade1"></label>
+      <input type='checkbox' id="grenade2" checked /><label for="grenade2"></label>
+      <input type='checkbox' id="grenade3" checked /><label for="grenade3"></label>
+      <input type='checkbox' id="grenade4" checked /><label for="grenade4"></label>
     </p>
   </template>
 

src/modules/gameboard.js

@@ -229,7 +229,6 @@ export function start(el) {
     });
 
     getActiveSightLine(svg) && clearSightLine();
-    console.log('object', svg.querySelectorAll('.hover'));
   });
 
   svg.addEventListener('pointerover', e => {