Add 'Clear Firing Arcs' buttons

index.html

@@ -146,7 +146,11 @@
       <div>
         <!-- <img class="logo" src="logo-davion.png" /> -->
         <p>
-          Davion<br>
+          Davion
+          <button type="button" class="clear-firing-arcs" data-allegiance="davion">
+            Clear Firing Arcs
+          </button>
+          <br>
           <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
           17th Kestral Mechanized Infantry -->
         </p>
@@ -175,7 +179,11 @@
       <div>
         <!-- <img class="logo" src="logo-liao.png" /> -->
         <p>
-          Liao<br>
+          Liao
+          <button type="button" class="clear-firing-arcs" data-allegiance="liao">
+            Clear Firing Arcs
+          </button>
+          <br>
           <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
           Aldebaran Home Guard -->
         </p>

index.js

@@ -354,4 +354,12 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('
       document.querySelector('circle#point').style.display = 'none';
     }
   }
-}));
+}));
+
+document.querySelectorAll('.clear-firing-arcs').forEach(el =>
+  el.addEventListener('click', ({target: {dataset: {allegiance}}}) =>
+    document
+      .querySelectorAll(`.firing-arc[data-troop-allegiance="${allegiance}"]`)
+      .forEach(el => el.remove())
+  )
+);