Add two more sight line query functions

src/modules/counter.js

@@ -1,6 +1,5 @@
 const svgns = "http://www.w3.org/2000/svg";
 
-
 export default class Counter {
   constructor(svg) {
     this.svg = svg;
@@ -60,8 +59,6 @@ export default class Counter {
     let points,
       counterNodeList = this.getCounterAndClones(selected);
 
-    console.log(selected, counterNodeList);
-
     if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
       let trace = this.svg.querySelector(this.traceSelector(selected));
 

src/modules/game.js

@@ -45,6 +45,14 @@ export default class Game {
     return this.svg.querySelector('line.sight-line');
   }
 
+  getActiveSightLine() {
+    return this.svg.querySelector('line.sight-line.active');
+  }
+
+  getLockedSightLine() {
+    return this.svg.querySelector('line.sight-line:not(.active)');
+  }
+
   getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
     return { x, y };
   }
@@ -127,26 +135,26 @@ export default class Game {
   }
 
   setUpCells() {
+    function isGrenade(el) {
+      return el && el.getAttribute('href') === '#counter-grenade';
+    }
+
+    function isClone(counter) {
+      const isClone = counter.classList.contains('clone'),
+        { allegiance: clAl, number: clNum } = counter.dataset;
+
+      return {
+        of: function ({ dataset: { allegiance, number }}) {
+          return isClone && clAl == allegiance && clNum == number;
+        }
+      };
+    }
+
     this.getCells().forEach(cell => {
-      function isGrenade(el) {
-        return el && el.getAttribute('href') === '#counter-grenade';
-      }
-
-      function isClone(counter) {
-        const isClone = counter.classList.contains('clone'),
-          { allegiance: clAl, number: clNum } = counter.dataset;
-
-        return {
-          of: function ({ dataset: { allegiance, number }}) {
-            return isClone && clAl == allegiance && clNum == number;
-          }
-        };
-      }
-
       cell.addEventListener('click', e => {
         const state = {
           placing: this.placing,
-          hex: cell.querySelector('use[href="#hex"]'),
+          hex: this.getHex(cell),
           occupant: this.getCellOccupant(cell),
           contents: this.getCellContents(cell)
         };
@@ -158,7 +166,7 @@ export default class Game {
         } else if (toPlace && !state.occupant) {
           this.counter.place(toPlace, cell);
           this.placing.push(toPlace);
-          const lockedSl = this.svg.querySelector('.sight-line:not(.active)');
+          const lockedSl = this.getLockedSightLine();
 
           if (!lockedSl) {
             this.sightLine.clear();
@@ -181,7 +189,7 @@ export default class Game {
                 trace.setAttributeNS(null, 'points', points.join(' '));
               }
               this.placing.push(toPlace);
-              const lockedSl = this.svg.querySelector('.sight-line:not(.active)');
+              const lockedSl = this.getLockedSightLine();
 
               if (!lockedSl) {
                 this.sightLine.clear();
@@ -202,7 +210,7 @@ export default class Game {
                 toPlace = state.occupant;
                 this.counter.removeClones(toPlace);
                 this.counter.getTrace(toPlace).remove();
-                const lockedSl = this.svg.querySelector('.sight-line:not(.active)');
+                const lockedSl = this.getLockedSightLine();
 
                 if (!lockedSl) {
                   this.sightLine.clear();
@@ -249,20 +257,10 @@ export default class Game {
         }
       });
 
-      // Logic for this event:
-      // If there's a locked sightline, unlock it. Otherwise, if there's an
-      // active sightline, lock it.
-
-      // There is an active sightline when there is a selected soldier, its
-      // counter is on the board, and the pointer is over a cell other than the
-      // one that counter occupies.
-
-      // There is a locked sightline when there is a selected soldier, its
-      // counter is on the board, and one cell has the 'sight-line-target' class.
       cell.addEventListener('contextmenu', e => {
         e.preventDefault();
 
-        let sl = this.svg.querySelector('.sight-line');
+        let sl = this.getSightLine();
 
         if (sl) {
           sl.classList.toggle('active');
@@ -270,7 +268,7 @@ export default class Game {
           if (sl.classList.contains('active')) {
             this.sightLine.clear();
           } else {
-            cell.querySelector(`use[href="#hex"]`).classList.add('sight-line-target');
+            this.getHex(cell).classList.add('sight-line-target');
           }
 
           cell.dispatchEvent(new MouseEvent('pointerover'));
@@ -281,7 +279,7 @@ export default class Game {
         let selected = this.getSelected();
 
         if (selected) {
-          let sl = this.svg.querySelector('.sight-line'),
+          let sl = this.getSightLine(),
             isOnBoard = selected.parentElement.hasAttribute('data-x'),
             sourceCell = selected.parentElement;
 
@@ -298,9 +296,9 @@ export default class Game {
       });
 
       cell.addEventListener('pointerout', e => {
-        let sl = this.svg.querySelector('.sight-line.active');
+        let sl = this.getActiveSightLine();
 
-        if (sl && sl.classList.contains('active')) {
+        if (sl) {
           this.sightLine.clear();
         }