From 9e653d068141fa2a969bdc440a1b0a1a63c620c6 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc <Catalin.Mititiuc@gmail.com>
Date: Thu, 4 Apr 2024 09:04:05 -0700
Subject: [PATCH] Add prone counters

---
 index.html | 37 ++++++++++++++++++++++++++++---------
 index.js   | 43 ++++++++++++++++++++++++++++++++++++-------
 style.css  | 44 +++++++++++---------------------------------
 3 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index b5ef012..11b9ea7 100644
--- a/index.html
+++ b/index.html
@@ -151,18 +151,35 @@
         <defs>
           <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
 
-          <symbol id="counter-base" viewBox="-5 -5 10 10" width="10" height="10">
+          <symbol id="counter-base" viewBox="-6 -6 12 12" width="12" height="12">
             <circle cx="0" cy="0" r="5" />
           </symbol>
 
-          <g id="t-1" class="troop-counter"><use href="#counter-base" /><text>1</text></g>
-          <g id="t-2" class="troop-counter"><use href="#counter-base" /><text>2</text></g>
-          <g id="t-3" class="troop-counter"><use href="#counter-base" /><text>3</text></g>
-          <g id="t-4" class="troop-counter"><use href="#counter-base" /><text>4</text></g>
-          <g id="t-5" class="troop-counter"><use href="#counter-base" /><text>5</text></g>
-          <g id="t-6" class="troop-counter"><use href="#counter-base" /><text>6</text></g>
-          <g id="t-7" class="troop-counter"><use href="#counter-base" /><text>7</text></g>
+          <g id="t-1" class="troop-counter-template"><use href="#counter-base" /><text>1</text></g>
+          <g id="t-2" class="troop-counter-template"><use href="#counter-base" /><text>2</text></g>
+          <g id="t-3" class="troop-counter-template"><use href="#counter-base" /><text>3</text></g>
+          <g id="t-4" class="troop-counter-template"><use href="#counter-base" /><text>4</text></g>
+          <g id="t-5" class="troop-counter-template"><use href="#counter-base" /><text>5</text></g>
+          <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>
 
+          <g id="davion-1" class="troop-counter"><use href="#t-1" /></g>
+          <g id="davion-2" class="troop-counter"><use href="#t-2" /></g>
+          <g id="davion-3" class="troop-counter"><use href="#t-3" /></g>
+          <g id="davion-4" class="troop-counter"><use href="#t-4" /></g>
+          <g id="davion-5" class="troop-counter"><use href="#t-5" /></g>
+          <g id="davion-6" class="troop-counter"><use href="#t-6" /></g>
+          <g id="davion-7" class="troop-counter"><use href="#t-7" /></g>
+
+          <g id="liao-1" class="troop-counter"><use href="#t-1" /></g>
+          <g id="liao-2" class="troop-counter"><use href="#t-2" /></g>
+          <g id="liao-3" class="troop-counter"><use href="#t-3" /></g>
+          <g id="liao-4" class="troop-counter"><use href="#t-4" /></g>
+          <g id="liao-5" class="troop-counter"><use href="#t-5" /></g>
+          <g id="liao-6" class="troop-counter"><use href="#t-6" /></g>
+          <g id="liao-7" class="troop-counter"><use href="#t-7" /></g>
+
+          <image id="counter-prone" href="counter_prone.jpg" width="10px" />
           <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>
@@ -194,7 +211,7 @@
           <g id="counters"></g>
         </g>
 
-        <image style="image-rendering: pixelated" href="rendered_numbers.png" x="0" y="-46" width="182" height="22" opacity="0.5" />
+        <image href="rendered_numbers.png" x="0" y="-46" width="182" height="22" opacity="0.5" />
 
         <use href="#n1" x="1" y="-40" opacity="0.5" />
         <use href="#n2" x="19" y="-40" opacity="0.5" />
@@ -222,6 +239,8 @@
         <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" />
       </div>
 
       <div id="record-sheet">
diff --git a/index.js b/index.js
index 38ca8c6..dd6599e 100644
--- a/index.js
+++ b/index.js
@@ -444,12 +444,15 @@ const Counter = new function() {
   this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
     this.unSelect();
 
-    let queriedCounter = container.querySelector(selector(troopNumber, troopAllegiance));
+    let counterAndClones = container.querySelectorAll(selector(troopNumber, troopAllegiance));
 
-    if (queriedCounter) {
-      queriedCounter.classList.add(selectedClass);
-      queriedCounter.style.pointerEvents = 'auto';
-    }
+    counterAndClones.forEach(el => {
+      el.style.pointerEvents = 'auto';
+
+      if (!el.classList.contains('clone')) {
+        el.classList.add(selectedClass);
+      }
+    });
   };
 
   this.unSelect = function() {
@@ -524,7 +527,7 @@ const Counter = new function() {
     } else {
       counter = document.createElementNS(svgns, 'use'),
 
-      counter.setAttributeNS(null, 'href', `#t-${troopNumber}`);
+      counter.setAttributeNS(null, 'href', `#${troopAllegiance}-${troopNumber}`);
       counter.classList.add('counter', 'selected');
       counter.setAttributeNS(null, 'x', point.getAttribute('x'));
       counter.setAttributeNS(null, 'y', point.getAttribute('y'));
@@ -563,6 +566,12 @@ const Counter = new function() {
 
     Counter.removeClones(el);
   };
+
+  this.hasProne = function(troopNumber, troopAllegiance) {
+    let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;
+
+    return !!document.querySelector(selector);
+  };
 };
 
 const RecordSheet = new function() {
@@ -580,6 +589,7 @@ const RecordSheet = new function() {
 
     if (selected) {
       selected.classList.remove('selected');
+      document.getElementById('toggle-prone-counter').checked = false;
     }
 
     clipUnclippedFiringArcs();
@@ -591,10 +601,13 @@ const RecordSheet = new function() {
   };
 
   this.select = function(el) {
-    let { troopNumber, troopAllegiance } = el.dataset;
+    let { troopNumber, troopAllegiance } = el.dataset,
+        proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
+
     this.unSelect();
 
     el.classList.add('selected');
+    document.getElementById('toggle-prone-counter').checked = proneStatus;
     existingArcs = document.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`);
     existingArcs.forEach(el => el.removeAttribute('clip-path'));
   };
@@ -934,6 +947,22 @@ document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEv
   clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : '');
 }));
 
+document.getElementById('toggle-prone-counter').addEventListener('input', function(e) {
+  let selected = RecordSheet.getSelected();
+
+  if (selected) {
+    let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`);
+
+    if (this.checked) {
+      let counter = document.createElementNS(svgns, 'use');
+      counter.setAttributeNS(null, 'href', '#counter-prone');
+      template.appendChild(counter);
+    } else {
+      template.querySelector('[href="#counter-prone"]').remove();
+    }
+  }
+});
+
 (function debug() {
   function drawLine(x1, y1, x2, y2) {
     let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`);
diff --git a/style.css b/style.css
index 0985c2f..3fc07d9 100644
--- a/style.css
+++ b/style.css
@@ -16,22 +16,13 @@ svg {
   height: 100%;
 }
 
-svg image#numbers {
+svg image {
   image-rendering: pixelated;
 }
 
-/* svg text {
-  user-select: none;
-  font-size: 4px;
-  fill: black;
-  stroke: black;
-  stroke-width: 0.2px;
-  font-weight: bold;
-  transform: translateY(6px);
-  font-family: monospace;
-  text-anchor: middle;
-  display: none;
-} */
+svg image.map-scans {
+  image-rendering: auto;
+}
 
 div#status {
   position: absolute;
@@ -206,28 +197,11 @@ image.map-scans {
   transform: rotate(180deg);
 }
 
-/* circle.counter {
-  stroke: transparent;
-  stroke-width: 0.5in;
-} */
-
-use.counter.clone {
-  /* filter: saturate(40%) brightness(4); */
-  /* filter: grayscale(0.8) */
+g.troop-counter-template use[href="#counter-base"] {
+  transform: translate(-6px, -6px);
 }
 
-g.troop-counter {
-  /* fill: inherit; */
-  /* transform: translate(-7px, -7px); */
-  /* opacity: 0.5; */
-}
-
-g.troop-counter use[href="#counter-base"] {
-  /* transform: translate(-7px, -7px); */
-  transform: translate(-5px, -5px);
-}
-
-g.troop-counter text {
+g.troop-counter-template text {
   fill: white;
   font-size: 12px;
   font-weight: bold;
@@ -240,6 +214,10 @@ g.troop-counter text {
   stroke: none;
 }
 
+g.troop-counter [href="#counter-prone"] {
+  transform: translate(-5px, 6px);
+}
+
 g#counters {
   pointer-events: none;
 }