Add grenade counter

public/index.html

@@ -167,8 +167,10 @@
         <button type="button" class="set-firing-arc" data-size="large">
           <img src="firing_arc_large.png" height="12" /> 6 MP
         </button>
-        <br>
         Prone: <input type="checkbox" id="toggle-prone-counter" />
+        <button type="button" class="set-grenade">
+          <img src="icon_grenade.png" height="12" />
+        </button>
         Turn:
         <span id="turn-count" data-update="0">
           <span name="count">0</span>

public/map.css

@@ -86,6 +86,10 @@ g.troop-counter-template text {
   transform: translate(-5px, 6px);
 }
 
+[href="#counter-grenade"] {
+  transform: translate(-5px, -5px);
+}
+
 g#points g use.counter {
   r: 5px;
 }

public/map.svg

@@ -21,7 +21,8 @@
     <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
     <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
 
-    <image id="counter-prone" href="counter_prone.jpg" width="10px"/>
+    <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+    <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
     <image id="numbers" href="rendered_numbers.png" width="182" height="22"/>
 
     <symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers"/></symbol>
@@ -72,7 +73,7 @@
       </g>
       <g data-y="0">
         <g data-x="0"><use href="#hex"/><use class="counter" href="#t-1" data-allegiance="liao" data-number="1"/></g>
-        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/><use href="#counter-grenade"/></g>
         <g data-x="2"><use href="#hex"/></g>
         <g data-x="3"><use href="#hex"/></g>
         <g data-x="4"><use href="#hex"/></g>

src/index.js

@@ -206,6 +206,8 @@ window.addEventListener('load', () => {
     el.addEventListener('click', () => game.setFiringArc(el.dataset.size))
   );
 
+  document.querySelector('.set-grenade').addEventListener('click', () => game.setGrenade());
+
   recordSheetVisibility.addEventListener('input', e => {
     let divs = document.querySelectorAll('#content div');
 

src/modules/game.js

@@ -131,6 +131,7 @@ function linedraw(x1, y1, x2, y2) {
 
 export default class Game {
   info;
+  placing = [];
 
   #firingArcVisibility = {
     davion: false,
@@ -392,13 +393,20 @@ export default class Game {
         point = this.getHex(cell);
 
       point.addEventListener('click', e => {
+        const toPlace = this.placing.pop();
+
         // TODO
         let existingOccupant =
           this.svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
 
+        if (toPlace && toPlace.getAttribute('href') === '#counter-grenade') {
+          point.parentElement.appendChild(toPlace);
+          return;
+        }
+
         if (this.getSelected() && !existingOccupant) {
           let sl = this.svg.querySelector('.sight-line');
-
+          this.placing.push(toPlace);
           this.Counter.place(point);
 
           if (sl) {
@@ -618,6 +626,7 @@ export default class Game {
         let counter = container.getCounter(allegiance, number);
 
         if (counter) {
+          container.placing.push(counter);
           counter.classList.add(selectedClass);
           let existingArcs = container.getExistingArcs(allegiance, number);
           existingArcs.forEach(el => el.removeAttribute('clip-path'));
@@ -627,6 +636,7 @@ export default class Game {
 
       this.unSelect = function () {
         let selected = container.getSelected();
+        container.place = [];
 
         if (selected) {
           let { troopNumber, troopAllegiance } = selected.dataset;
@@ -965,4 +975,13 @@ export default class Game {
       firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
     }
   }
+
+  setGrenade() {
+    const svgns = "http://www.w3.org/2000/svg";
+
+    let counter = document.createElementNS(svgns, 'use');
+    counter.setAttributeNS(null, 'href', '#counter-grenade');
+    counter.addEventListener('click', () => counter.remove());
+    this.placing.push(counter);
+  }
 }