Toggle allegiance firing arc visibility

index.html

@@ -141,6 +141,12 @@
     </div>
 
     <div id="map-container">
+      <div id="toggle-firing-arc-vis">
+        <div>davion</div>
+        <input type="checkbox" data-allegiance="davion" />
+        <div>liao</div>
+        <input type="checkbox" data-allegiance="liao" />
+      </div>
       <svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />

index.js

@@ -928,6 +928,12 @@ recordSheetVisibility.addEventListener('input', e => {
   localStorage.setItem('recordsVisibility', recordSheetVisibility.checked);
 });
 
+document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {
+  let clipPaths = svg.querySelectorAll(`clipPath[data-troop-allegiance="${el.dataset.allegiance}"]`);
+
+  clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : '');
+}));
+
 (function debug() {
   function drawLine(x1, y1, x2, y2) {
     let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`);

style.css

@@ -194,6 +194,18 @@ image.map-scans {
   text-align: right;
 }
 
+#toggle-firing-arc-vis {
+  position: absolute;
+  right: 0;
+  padding-top: 20px;
+}
+
+#toggle-firing-arc-vis div {
+  margin-top: 10px;
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+}
+
 /* circle.counter {
   stroke: transparent;
   stroke-width: 0.5in;