Move more firing arc logic to its module

src/modules/firingArc.js

@@ -165,11 +165,16 @@ function position(e) {
 }
 
 export default class FiringArc {
+  #firingArcVisibility = {
+    davion: false,
+    liao: false
+  };
+
   constructor(svg) {
     this.svg = svg;
   }
 
-  set(size, allegiance, number, { x, y }) {
+  set(size, { dataset: { allegiance, number }}, { x, y }) {
     const svgns = "http://www.w3.org/2000/svg";
 
     let existingArcs = this.svg.querySelectorAll(
@@ -246,4 +251,50 @@ export default class FiringArc {
     firingArc.addEventListener('click', firingArcPlacementListener);
     firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
   }
+
+  clear(allegiance) {
+    const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
+    this.svg.querySelectorAll(selector).forEach(el => el.remove());
+  }
+
+  get({ dataset: { allegiance, number }}) {
+    return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${number}"][data-allegiance="${allegiance}"]`);
+  }
+
+  getUnclipped() {
+    return this.svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');
+  }
+
+  toggleVisibility(allegiance) {
+    const vis = this.#firingArcVisibility[allegiance],
+      clipPaths = this.svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
+
+    clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
+    this.#firingArcVisibility[allegiance] = !vis;
+  }
+
+  toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
+    const cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`),
+      display = vis ? 'none' : '';
+
+    if (cp) {
+      cp.style.display = this.#firingArcVisibility[allegiance] ? 'none' : display;
+    }
+  }
+
+  clipAll() {
+    let unclipped = this.getUnclipped();
+
+    unclipped.forEach(el => {
+      const { number, allegiance } = el.dataset,
+        clipPathId = `clip-path-${allegiance}-${number}`,
+        isVisible = this.#firingArcVisibility[allegiance];
+
+      if (isVisible) {
+        this.svg.querySelector(`#${clipPathId}`).style.display = 'none';
+      }
+
+      el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
+    });
+  }
 }

src/modules/game.js

@@ -8,11 +8,6 @@ export default class Game {
   info;
   placing = [];
 
-  #firingArcVisibility = {
-    davion: false,
-    liao: false
-  };
-
   constructor(svg) {
     this.svg = svg;
     this.firingArc = new FiringArc(svg);
@@ -50,14 +45,6 @@ export default class Game {
     return this.svg.querySelector('line.sight-line');
   }
 
-  getExistingArcs({ dataset: { allegiance, number }}) {
-    return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${number}"][data-allegiance="${allegiance}"]`);
-  }
-
-  getUnclippedFiringArcs() {
-    return this.svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');
-  }
-
   getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
     return { x, y };
   }
@@ -106,7 +93,7 @@ export default class Game {
       this.unSelect();
       this.placing.push(counter);
       counter.classList.add(this.counter.selectedClass);
-      this.getExistingArcs(counter).forEach(el => el.removeAttribute('clip-path'));
+      this.firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
       this.selectCallback({ prone: this.counter.hasProne(counter), ...counter.dataset });
     }
   }
@@ -118,13 +105,12 @@ export default class Game {
       this.placing = [];
       this.getSelected().classList.remove(this.counter.selectedClass);
       this.sightLine.clear();
-      this.clipFiringArcs();
+      this.firingArc.clipAll();
     }
   }
 
   endTurn(allegiance) {
-    const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
+    this.firingArc.clear(allegiance);
-    this.svg.querySelectorAll(selector).forEach(el => el.remove());
   }
 
   toggleProne() {
@@ -137,27 +123,7 @@ export default class Game {
   }
 
   toggleFiringArcVisibility(allegiance) {
-    const vis = this.#firingArcVisibility[allegiance],
+    this.firingArc.toggleVisibility(allegiance);
-      clipPaths = this.svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
-
-    clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
-    this.#firingArcVisibility[allegiance] = !vis;
-  }
-
-  clipFiringArcs() {
-    let unclipped = this.getUnclippedFiringArcs();
-
-    unclipped.forEach(el => {
-      const { number, allegiance } = el.dataset,
-        clipPathId = `clip-path-${allegiance}-${number}`,
-        isVisible = this.#firingArcVisibility[allegiance];
-
-      if (isVisible) {
-        this.svg.querySelector(`#${clipPathId}`).style.display = 'none';
-      }
-
-      el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
-    });
   }
 
   setUpCells() {
@@ -327,12 +293,7 @@ export default class Game {
         let occupant = this.getCellOccupant(cell);
 
         if (occupant) {
-          const { number, allegiance } = occupant.dataset;
+          this.firingArc.toggleCounterVisibility(occupant, true);
-          const cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`);
-
-          if (cp) {
-            cp.style.display = 'none';
-          }
         }
       });
 
@@ -346,12 +307,7 @@ export default class Game {
         let occupant = this.getCellOccupant(cell);
 
         if (occupant) {
-          let { number, allegiance } = occupant.dataset,
+          this.firingArc.toggleCounterVisibility(occupant, false);
-            cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`);
-
-          if (cp) {
-            cp.style.display = this.#firingArcVisibility[allegiance] ? 'none' : '';
-          }
         }
       });
     });
@@ -362,10 +318,7 @@ export default class Game {
       isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
 
     if (isOnBoard(counter)) {
-      const { allegiance, number } = counter.dataset,
+      this.firingArc.set(size, counter, this.getCellPosition(counter.parentElement));
-        cellPosition = this.getCellPosition(counter.parentElement);
-
-      this.firingArc.set(size, allegiance, number, cellPosition);
     }
   }