Make counter's firing arc visible on mouseover

index.js

@@ -375,7 +375,6 @@ const Counter = new function() {
       },
 
       clickClone = function() {
-        console.log('clone counter click fires');
         let { troopNumber, troopAllegiance, x, y } = this.dataset,
             [xAttr, yAttr] = this.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
 
@@ -404,7 +403,27 @@ const Counter = new function() {
       },
 
       pointerOver = function() {
-        // console.log('pointer over counter', this);
+        let { troopNumber, troopAllegiance } = this.dataset;
+            cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`);
+
+        if (cp) {
+          cp.style.display = 'none';
+        }
+      },
+
+      pointerOut = function() {
+        let { troopNumber, troopAllegiance } = this.dataset;
+            cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`);
+
+        if (cp) {
+          let isVisible =
+            document
+              .getElementById('toggle-firing-arc-vis')
+              .querySelector(`input[data-allegiance="${troopAllegiance}"]`)
+              .checked;
+
+          cp.style.display = isVisible ? 'none' : '';
+        }
       },
 
       click = function() {
@@ -545,7 +564,6 @@ const Counter = new function() {
       }
 
       trace.setAttributeNS(null, 'points', points);
-      counter.addEventListener('pointerover', pointerOver);
       counter.addEventListener('click', clickClone);
     } else {
       counter = document.createElementNS(svgns, 'use'),
@@ -561,6 +579,7 @@ const Counter = new function() {
       counter.style.pointerEvents = 'auto';
 
       counter.addEventListener('pointerover', pointerOver);
+      counter.addEventListener('pointerout', pointerOut);
       counter.addEventListener('click', click);
       counter.addEventListener('dblclick', dblClick);
     }