2 files changed, 16 insertions, 13 deletions
diff --git a/src/modules/game/firing_arc.js b/src/modules/game/firing_arc.js
index 7a82c43..5a9e5b2 100644
--- a/src/modules/game/firing_arc.js
+++ b/src/modules/game/firing_arc.js
@@ -190,13 +190,14 @@ function calcPoints(e, aimLine, grid, size) {
   return { aimPt, outlinePoints, arcPoints };
 }
 
-function setDataAttrs({ dataset: { allegiance, number }}, el) {
+function setDataAttrs({ dataset: { allegiance, number, squad }}, el) {
   el.dataset.allegiance = allegiance;
   el.dataset.number = number;
+  el.dataset.squad = squad;
 }
 
-function getClipPathId({ dataset: { allegiance, number }}) {
-  return `clip-path-${allegiance}-${number}`;
+function getClipPathId({ dataset: { allegiance, number, squad }}) {
+  return `clip-path-${allegiance}-${squad}-${number}`;
 }
 
 function getUnclipped(svg) {
@@ -310,8 +311,11 @@ function clear(svg, allegiance) {
   svg.querySelectorAll(selector).forEach(el => el.remove());
 }
 
-function get(svg, { dataset: { allegiance, number }}) {
-  return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
+function get(svg, { dataset: { allegiance, number, squad }}) {
+  return svg.querySelectorAll(
+    `#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"][data-squad="${squad}"],
+    #firing-arcs line`
+  );
 }
 
 function toggleVisibility(svg, allegiance) {
@@ -322,20 +326,19 @@ function toggleVisibility(svg, allegiance) {
   firingArcVisibility[allegiance] = !vis;
 }
 
-function toggleCounterVisibility(svg, { dataset: { number, allegiance }}, vis) {
-  const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
+function toggleCounterVisibility(svg, counter, vis) {
+  const cp = svg.querySelector(`#${getClipPathId(counter)}`),
     display = vis ? 'none' : '';
 
   if (cp) {
-    cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
+    cp.style.display = firingArcVisibility[counter.dataset.allegiance] ? 'none' : display;
   }
 }
 
 function clipAll(svg) {
   getUnclipped(svg).forEach(el => {
-    const { number, allegiance } = el.dataset,
-      clipPathId = `clip-path-${allegiance}-${number}`,
-      isVisible = firingArcVisibility[allegiance];
+    const clipPathId = getClipPathId(el),
+      isVisible = firingArcVisibility[el.dataset.allegiance];
 
     if (isVisible) {
       svg.querySelector(`#${clipPathId}`).style.display = 'none';
diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js
index a71ceba..8407621 100644
--- a/src/modules/game/soldier.js
+++ b/src/modules/game/soldier.js
@@ -3,8 +3,8 @@ import { extractWeaponFromRecord, isRecord } from '../record_sheet.js';
 
 const selectedClass = 'selected';
 
-function dataSelector({ dataset: { allegiance, number }}) {
-  return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
+function dataSelector({ dataset: { allegiance, number, squad }}) {
+  return `[data-number="${number}"][data-allegiance="${allegiance}"][data-squad="${squad}"]`;
 }
 
 function traceSelector(counter) {