Refactor sight line module to extract svg queries into game module

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) {
-  let activeHexes = [],
+function lock(cell, sightLine, lockTarget) {
+  sightLine.classList.remove(activeClassName);
+  cell.classList.add(targetClassName);
+
+  return cell;
+}
+
+function unlock(sightLine, lockTarget) {
+  sightLine.classList.add(activeClassName);
+  lockTarget.classList.remove(targetClassName);
+
+  return null;
+}
+
+export default function (board) {
+  let sightLine,
     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 {
-    draw,
-    clear,
-    update,
-    toggleLock,
+    calcIndexes,
+
+    drawLine: function (...positions) {
+      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) {
-      distanceCallback = callback;
+    get lockTarget() {
+      return lockTarget;
+    },
+
+    set hexes(hexes) {
+      activeHexes.forEach(h => h.classList.remove(activeClassName));
+      hexes.forEach(h => h.classList.add(activeClassName));
+      activeHexes = hexes;
     }
   };
 }