Refactor sight line module to extract svg queries into game module

src/modules/game.js

@@ -14,7 +14,7 @@ export default class Game {
     const board = this.getBoard();
 
     this.firingArc = FiringArc(svg, board);
-    this.sightLine = SightLine(svg, board);
+    this.sightLine = SightLine(board);
     this.counter = new Counter(svg);
 
     this.setUpCells();
@@ -86,13 +86,6 @@ export default class Game {
     return pt;
   }
 
-  /**
-   * @param {(count: [number]) => void} fn
-   */
-  set distanceCallback(fn) {
-    this.sightLine.distanceCallback = fn;
-  }
-
   endMove() {
     const selected = this.getSelected();
 
@@ -120,7 +113,7 @@ export default class Game {
     if (selected) {
       this.placing = [];
       this.getSelected().classList.remove(this.counter.selectedClass);
-      this.sightLine.clear();
+      this.clearSightLine();
       this.firingArc.clipAll();
     }
   }
@@ -177,7 +170,7 @@ export default class Game {
           const lockedSl = this.getLockedSightLine();
 
           if (!lockedSl) {
-            this.sightLine.clear();
+            this.clearSightLine();
           } else {
             this.updateSightLine(cell);
           }
@@ -200,7 +193,7 @@ export default class Game {
               const lockedSl = this.getLockedSightLine();
 
               if (!lockedSl) {
-                this.sightLine.clear();
+                this.clearSightLine();
               } else {
                 this.updateSightLine(toPlace.parentElement);
               }
@@ -221,7 +214,7 @@ export default class Game {
                 const lockedSl = this.getLockedSightLine();
 
                 if (!lockedSl) {
-                  this.sightLine.clear();
+                  this.clearSightLine();
                 } else {
                   this.updateSightLine(cell);
                 }
@@ -296,7 +289,7 @@ export default class Game {
         let sl = this.getActiveSightLine();
 
         if (sl) {
-          this.sightLine.clear();
+          this.clearSightLine();
         }
 
         let occupant = this.getCellOccupant(cell);
@@ -326,17 +319,35 @@ export default class Game {
 
   updateSightLine(cell) {
     const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell,
-      source = { index: { x: sX, y: sY }, position: this.getCellPosition(cell) };
+      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = this.sightLine.lockTarget;
 
-    this.sightLine.update(source);
+    const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY)
+      .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+      .join(', ');
+
+    const hexes = this.svg.querySelectorAll(selector);
+    this.sightLine.hexes = hexes;
+    this.sightLine.update(this.getCellPosition(cell));
+    this.distanceCallback && this.distanceCallback(hexes.length - 1);
   }
 
   drawSightLine(sourceCell, targetCell) {
     const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
-      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell,
+      { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
-      source = { index: { x: sX, y: sY }, position: this.getCellPosition(sourceCell) },
-      target = { index: { x: tX, y: tY }, position: this.getCellPosition(targetCell) };
 
-    this.sightLine.draw(source, target);
+    const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY)
+      .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+      .join(', ');
+
+    const hexes = this.svg.querySelectorAll(selector);
+    this.sightLine.hexes = hexes;
+    this.sightLine.drawLine(this.getCellPosition(sourceCell), this.getCellPosition(targetCell));
+    this.distanceCallback && this.distanceCallback(hexes.length - 1);
+  }
+
+  clearSightLine() {
+    this.sightLine.hexes = [];
+    this.sightLine.clear();
+    this.distanceCallback && this.distanceCallback();
   }
 }

src/modules/game/sightLine.js

@@ -65,7 +65,7 @@ function axial_lerp(q1, r1, q2, r2, t) {
   return { q: lerp(q1, q2, t), r: lerp(r1, r2, t) };
 }
 
-function linedraw(x1, y1, x2, y2) {
+function calcIndexes(x1, y1, x2, y2) {
   const axial1 = evenr_to_axial(x1, y1),
     axial2 = evenr_to_axial(x2, y2),
     n = offset_distance(x1, y1, x2, y2),
@@ -95,89 +95,64 @@ function create({ x: x1, y: y1 }, { x: x2, y: y2 }) {
   return sightLine;
 }
 
-export default function(svg, board) {
+function lock(cell, sightLine, lockTarget) {
-  let activeHexes = [],
-    lockTarget,
-    distanceCallback,
-    sightLine;
-
-  function drawHexes(...coords) {
-    clearHexes();
-    distanceCallback && distanceCallback(offset_distance(...coords));
-
-    const lineCoords = linedraw(...coords),
-
-      selector = lineCoords
-        .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
-        .join(', ');
-
-    activeHexes = svg.querySelectorAll(selector);
-    activeHexes.forEach(p => p.classList.add(activeClassName));
-  }
-
-  function clearHexes() {
-    distanceCallback && distanceCallback();
-
-    activeHexes.forEach(el => el.classList.remove(activeClassName));
-    activeHexes = [];
-  }
-
-  function clear() {
-    if (sightLine) {
-      sightLine.remove();
-      sightLine = null;
-    }
-
-    if (lockTarget) {
-      lockTarget.classList.remove(targetClassName);
-      lockTarget = null;
-    }
-
-    clearHexes();
-  }
-
-  function draw(source, target) {
-    clear();
-
-    sightLine = create(source.position, target.position);
-    board.appendChild(sightLine);
-
-    drawHexes(+source.index.x, +source.index.y, +target.index.x, +target.index.y);
-  }
-
-  function update(source) {
-    const { dataset: { x }, parentElement: { dataset: { y }}} = lockTarget;
-
-    sightLine.setAttributeNS(null, 'x1', source.position.x);
-    sightLine.setAttributeNS(null, 'y1', source.position.y);
-
-    drawHexes(+source.index.x, +source.index.y, +x, +y);
-  }
-
-  function toggleLock(cell) {
-    if (lockTarget) {
-      sightLine.classList.add(activeClassName);
-      lockTarget.classList.remove(targetClassName);
-      lockTarget = null;
-    } else {
   sightLine.classList.remove(activeClassName);
   cell.classList.add(targetClassName);
-      lockTarget = cell;
+
-    }
+  return cell;
-  }
+}
+
+function unlock(sightLine, lockTarget) {
+  sightLine.classList.add(activeClassName);
+  lockTarget.classList.remove(targetClassName);
+
+  return null;
+}
+
+export default function (board) {
+  let sightLine,
+    lockTarget,
+    activeHexes = [];
 
   return {
-    draw,
+    calcIndexes,
-    clear,
+
-    update,
+    drawLine: function (...positions) {
-    toggleLock,
+      this.clear();
+
+      sightLine = create(...positions);
+      board.appendChild(sightLine);
+    },
+
+    clear: function () {
+      sightLine && sightLine.remove();
+      sightLine = null;
+
+      lockTarget && lockTarget.classList.remove(targetClassName);
+      lockTarget = null;
+    },
+
+    update: function ({ x, y }) {
+      sightLine.setAttributeNS(null, 'x1', x);
+      sightLine.setAttributeNS(null, 'y1', y);
+    },
+
+    toggleLock: function (cell) {
+      lockTarget = lockTarget ? unlock(sightLine, lockTarget) : lock(cell, sightLine, lockTarget);
+    },
 
     get sightLine() {
       return sightLine;
     },
 
-    set distanceCallback(callback) {
+    get lockTarget() {
-      distanceCallback = callback;
+      return lockTarget;
+    },
+
+    set hexes(hexes) {
+      activeHexes.forEach(h => h.classList.remove(activeClassName));
+      hexes.forEach(h => h.classList.add(activeClassName));
+      activeHexes = hexes;
     }
   };
 }