Add a sight line module

src/modules/game.js

@@ -1,4 +1,5 @@
 import FiringArc from './firingArc.js';
+import SightLine from './sightLine.js';
 
 const svgns = "http://www.w3.org/2000/svg";
 
@@ -10,86 +11,6 @@ function radToDeg(radians) {
   return radians * 180 / Math.PI;
 }
 
-function evenr_to_axial(x, y) {
-  return { q: x - (y + (y & 1)) / 2, r: y };
-}
-
-function axial_to_evenr(q, r) {
-  return { x: q + (r + (r & 1)) / 2, y: r };
-}
-
-function axial_distance(q1, r1, q2, r2) {
-  return (Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2;
-}
-
-function offset_distance(x1, y1, x2, y2) {
-  let { q: q1, r: r1 } = evenr_to_axial(x1, y1),
-    { q: q2, r: r2 } = evenr_to_axial(x2, y2);
-
-  return axial_distance(q1, r1, q2, r2);
-}
-
-function cube_to_axial(q, r, s) {
-  return { q: q, r: r };
-}
-
-function axial_to_cube(q, r) {
-  return { q: q, r: r, s: -q - r };
-}
-
-function cube_round(q, r, s) {
-  rQ = Math.round(q);
-  rR = Math.round(r);
-  rS = Math.round(s);
-
-  let q_diff = Math.abs(rQ - q),
-    r_diff = Math.abs(rR - r),
-    s_diff = Math.abs(rS - s);
-
-  if (q_diff > r_diff && q_diff > s_diff) {
-    rQ = -rR - rS;
-  } else if (r_diff > s_diff) {
-    rR = -rQ - rS;
-  } else {
-    rS = -rQ - rR;
-  }
-
-  return { q: rQ, r: rR, s: rS };
-}
-
-function axial_round(q, r) {
-  let cube = axial_to_cube(q, r),
-    round = cube_round(cube.q, cube.r, cube.s),
-    axial = cube_to_axial(round.q, round.r, round.s);
-
-  return { q: axial.q, r: axial.r };
-}
-
-function lerp(a, b, t) {
-  return a + (b - a) * t;
-}
-
-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) {
-  let axial1 = evenr_to_axial(x1, y1),
-    axial2 = evenr_to_axial(x2, y2),
-    n = offset_distance(x1, y1, x2, y2),
-    results = [];
-
-  for (let i = 0; i <= n; i++) {
-    let lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i),
-      round = axial_round(lerp.q, lerp.r),
-      { x, y } = axial_to_evenr(round.q, round.r);
-
-    results.push([x, y]);
-  }
-
-  return results;
-}
-
 export default class Game {
   info;
   placing = [];
@@ -102,8 +23,8 @@ export default class Game {
   constructor(svg) {
     this.svg = svg;
     this.firingArc = new FiringArc(svg);
+    this.sightLine = new SightLine(svg);
 
-    this.setUpSightLine(this);
     this.setUpCounter(this);
     this.setUpCells();
   }
@@ -160,10 +81,6 @@ export default class Game {
     return this.svg.querySelector('.board');
   }
 
-  getActiveHexes() {
-    return this.svg.querySelectorAll('use[href="#hex"].active');
-  }
-
   getCellPosition(cell) {
     let pt = new DOMPoint(0, 0),
       transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
@@ -177,6 +94,13 @@ export default class Game {
     return pt;
   }
 
+  /**
+   * @param {(count: [number]) => void} fn
+   */
+  set distanceCallback(fn) {
+    this.sightLine.distanceCallback = fn;
+  }
+
   endMove() {
     const selected = this.getSelected();
 
@@ -250,9 +174,9 @@ export default class Game {
 
           if (sl) {
             if (sl.classList.contains('active')) {
-              this.SightLine.clear();
+              this.sightLine.clear();
             } else {
-              this.SightLine.update(point);
+              this.sightLine.update(point, this.getCellPosition(point.parentElement));
             }
           }
         }
@@ -276,7 +200,7 @@ export default class Game {
           sl.classList.toggle('active');
 
           if (sl.classList.contains('active')) {
-            this.SightLine.clear();
+            this.sightLine.clear();
           } else {
             group.querySelector(`use[href="#hex"]`).classList.add('sight-line-target');
           }
@@ -294,7 +218,7 @@ export default class Game {
             sourceCell = selected.parentElement;
 
           if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != group) {
-            this.SightLine.draw(sourceCell, group);
+            this.sightLine.draw(sourceCell, group);
           }
         }
       });
@@ -303,7 +227,7 @@ export default class Game {
         let sl = this.svg.querySelector('.sight-line.active');
 
         if (sl && sl.classList.contains('active')) {
-          this.SightLine.clear();
+          this.sightLine.clear();
         }
       });
     });
@@ -351,9 +275,9 @@ export default class Game {
               counter.setAttributeNS(null, 'y', 0);
 
               if (!lockedSl) {
-                container.SightLine.clear();
+                container.sightLine.clear();
               } else {
-                container.SightLine.update(this);
+                container.sightLine.update(this, container.getCellPosition(this.parentElement));
               }
 
               container.proneFlagCallback(!!this.parentElement.querySelector('[href="#counter-prone"]'));
@@ -426,9 +350,9 @@ export default class Game {
               let sl = container.svg.querySelector('.sight-line');
 
               if (sl) {
-                container.SightLine.update(clone)
+                container.sightLine.update(clone, this.getCellPosition(clone.parentElement));
               } else {
-                container.SightLine.draw(this.parentElement, clone.parentElement);
+                container.sightLine.draw(this.parentElement, clone.parentElement);
               }
 
               const proneCounter = this.parentElement.querySelector('[href="#counter-prone"]');
@@ -491,7 +415,7 @@ export default class Game {
 
           selected.classList.remove(selectedClass);
           selected.removeAttribute('style');
-          container.SightLine.clear();
+          container.sightLine.clear();
 
           container
             .svg
@@ -628,116 +552,6 @@ export default class Game {
     this.getCounters().forEach(c => this.Counter.addEventListeners(c));
   }
 
-  setUpSightLine(ptGrp) {
-    const grid = this.svg.querySelector('.board');
-
-    this.SightLine = new function() {
-      this.clear = function() {
-        let sl = grid.querySelector('line.sight-line');
-        let target = grid.querySelector(`use[href="#hex"].sight-line-target`);
-
-        if (sl) {
-          sl.remove();
-        }
-
-        if (target) {
-          target.classList.remove('sight-line-target');
-        }
-
-        this.clearHexes();
-      };
-
-      this.clearHexes = function() {
-        if (ptGrp.distanceCallback) {
-          ptGrp.distanceCallback();
-        }
-
-        ptGrp.getActiveHexes().forEach(el => el.classList.remove('active'));
-      };
-
-      this.draw = function (source, target) {
-        ptGrp.SightLine.clear();
-
-        let pt = new DOMPoint(0, 0),
-          transform = getComputedStyle(source).transform.match(/-?\d+\.?\d*/g),
-          mtx = new DOMMatrix(transform);
-
-        pt = pt.matrixTransform(mtx);
-
-        transform = getComputedStyle(source.parentElement).transform.match(/-?\d+\.?\d*/g);
-        mtx = new DOMMatrix(transform);
-        pt = pt.matrixTransform(mtx);
-
-        let slX1 = pt.x,
-          slY1 = pt.y;
-
-        pt = new DOMPoint(0, 0);
-        transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g);
-        mtx = new DOMMatrix(transform);
-
-        pt = pt.matrixTransform(mtx);
-
-        transform = getComputedStyle(target.parentElement).transform.match(/-?\d+\.?\d*/g);
-        mtx = new DOMMatrix(transform);
-        pt = pt.matrixTransform(mtx);
-
-        let slX2 = pt.x,
-          slY2 = pt.y;
-
-        let sightLine = document.createElementNS(svgns, 'line');
-
-        sightLine.classList.add('sight-line');
-        sightLine.classList.add('active');
-        sightLine.setAttributeNS(null, 'x1', slX1);
-        sightLine.setAttributeNS(null, 'y1', slY1);
-        sightLine.setAttributeNS(null, 'x2', slX2);
-        sightLine.setAttributeNS(null, 'y2', slY2);
-
-        ptGrp.getBoard().appendChild(sightLine);
-
-        let coords = [
-          source.dataset.x,
-          source.parentElement.dataset.y,
-          target.dataset.x,
-          target.parentElement.dataset.y
-        ].map(n => parseInt(n));
-
-        this.drawHexes(...coords);
-      };
-
-      this.update = function (cell) {
-        const sl = ptGrp.svg.querySelector('.sight-line'),
-          target = ptGrp.svg.querySelector('.sight-line-target').parentElement,
-          { x, y } = ptGrp.getCellPosition(cell.parentElement),
-          x1 = cell.parentElement.dataset.x,
-          y1 = cell.parentElement.parentElement.dataset.y,
-          x2 = target.dataset.x,
-          y2 = target.parentElement.dataset.y;
-
-        sl.setAttributeNS(null, 'x1', x);
-        sl.setAttributeNS(null, 'y1', y);
-
-        this.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
-      }
-
-      this.drawHexes = function (...coords) {
-        this.clearHexes()
-
-        if (ptGrp.distanceCallback) {
-          ptGrp.distanceCallback(offset_distance(...coords));
-        }
-
-        let lineCoords = linedraw(...coords);
-
-        let s = lineCoords
-          .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
-          .join(', ');
-
-        ptGrp.svg.querySelectorAll(s).forEach(p => p.classList.add('active'));
-      };
-    }
-  }
-
   setFiringArc(size) {
     const counter = this.getSelected();
 
@@ -753,6 +567,7 @@ export default class Game {
     let counter = document.createElementNS(svgns, 'use');
     counter.setAttributeNS(null, 'href', '#counter-grenade');
     counter.addEventListener('click', () => counter.remove());
+
     this.placing.push(counter);
   }
 }

src/modules/sightLine.js

@@ -0,0 +1,199 @@
+const svgns = "http://www.w3.org/2000/svg";
+
+function evenr_to_axial(x, y) {
+  return { q: x - (y + (y & 1)) / 2, r: y };
+}
+
+function axial_to_evenr(q, r) {
+  return { x: q + (r + (r & 1)) / 2, y: r };
+}
+
+function axial_distance(q1, r1, q2, r2) {
+  return (Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2;
+}
+
+function offset_distance(x1, y1, x2, y2) {
+  let { q: q1, r: r1 } = evenr_to_axial(x1, y1),
+    { q: q2, r: r2 } = evenr_to_axial(x2, y2);
+
+  return axial_distance(q1, r1, q2, r2);
+}
+
+function cube_to_axial(q, r, s) {
+  return { q: q, r: r };
+}
+
+function axial_to_cube(q, r) {
+  return { q: q, r: r, s: -q - r };
+}
+
+function cube_round(q, r, s) {
+  rQ = Math.round(q);
+  rR = Math.round(r);
+  rS = Math.round(s);
+
+  let q_diff = Math.abs(rQ - q),
+    r_diff = Math.abs(rR - r),
+    s_diff = Math.abs(rS - s);
+
+  if (q_diff > r_diff && q_diff > s_diff) {
+    rQ = -rR - rS;
+  } else if (r_diff > s_diff) {
+    rR = -rQ - rS;
+  } else {
+    rS = -rQ - rR;
+  }
+
+  return { q: rQ, r: rR, s: rS };
+}
+
+function axial_round(q, r) {
+  let cube = axial_to_cube(q, r),
+    round = cube_round(cube.q, cube.r, cube.s),
+    axial = cube_to_axial(round.q, round.r, round.s);
+
+  return { q: axial.q, r: axial.r };
+}
+
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+
+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) {
+  let axial1 = evenr_to_axial(x1, y1),
+    axial2 = evenr_to_axial(x2, y2),
+    n = offset_distance(x1, y1, x2, y2),
+    results = [];
+
+  for (let i = 0; i <= n; i++) {
+    let lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i),
+      round = axial_round(lerp.q, lerp.r),
+      { x, y } = axial_to_evenr(round.q, round.r);
+
+    results.push([x, y]);
+  }
+
+  return results;
+}
+
+export default class SightLine {
+  constructor(svg) {
+    this.svg = svg;
+  }
+
+  getBoard() {
+    return this.svg.querySelector('.board');
+  }
+
+  getActiveHexes() {
+    return this.svg.querySelectorAll('use[href="#hex"].active');
+  }
+
+  clear() {
+    const board = this.getBoard(),
+      sl = board.querySelector('line.sight-line'),
+      target = board.querySelector(`use[href="#hex"].sight-line-target`);
+
+    if (sl) {
+      sl.remove();
+    }
+
+    if (target) {
+      target.classList.remove('sight-line-target');
+    }
+
+    this.clearHexes();
+  }
+
+  clearHexes() {
+    if (this.distanceCallback) {
+      this.distanceCallback();
+    }
+
+    this.getActiveHexes().forEach(el => el.classList.remove('active'));
+  }
+
+  draw(source, target) {
+    this.clear();
+
+    let pt = new DOMPoint(0, 0),
+      transform = getComputedStyle(source).transform.match(/-?\d+\.?\d*/g),
+      mtx = new DOMMatrix(transform);
+
+    pt = pt.matrixTransform(mtx);
+
+    transform = getComputedStyle(source.parentElement).transform.match(/-?\d+\.?\d*/g);
+    mtx = new DOMMatrix(transform);
+    pt = pt.matrixTransform(mtx);
+
+    let slX1 = pt.x,
+      slY1 = pt.y;
+
+    pt = new DOMPoint(0, 0);
+    transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g);
+    mtx = new DOMMatrix(transform);
+
+    pt = pt.matrixTransform(mtx);
+
+    transform = getComputedStyle(target.parentElement).transform.match(/-?\d+\.?\d*/g);
+    mtx = new DOMMatrix(transform);
+    pt = pt.matrixTransform(mtx);
+
+    let slX2 = pt.x,
+      slY2 = pt.y;
+
+    let sightLine = document.createElementNS(svgns, 'line');
+
+    sightLine.classList.add('sight-line');
+    sightLine.classList.add('active');
+    sightLine.setAttributeNS(null, 'x1', slX1);
+    sightLine.setAttributeNS(null, 'y1', slY1);
+    sightLine.setAttributeNS(null, 'x2', slX2);
+    sightLine.setAttributeNS(null, 'y2', slY2);
+
+    this.getBoard().appendChild(sightLine);
+
+    let coords = [
+      source.dataset.x,
+      source.parentElement.dataset.y,
+      target.dataset.x,
+      target.parentElement.dataset.y
+    ].map(n => parseInt(n));
+
+    this.drawHexes(...coords);
+  }
+
+  update(cell, { x, y }) {
+    const sl = this.svg.querySelector('.sight-line'),
+      target = this.svg.querySelector('.sight-line-target').parentElement,
+      x1 = cell.parentElement.dataset.x,
+      y1 = cell.parentElement.parentElement.dataset.y,
+      x2 = target.dataset.x,
+      y2 = target.parentElement.dataset.y;
+
+    sl.setAttributeNS(null, 'x1', x);
+    sl.setAttributeNS(null, 'y1', y);
+
+    this.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
+  }
+
+  drawHexes(...coords) {
+    this.clearHexes()
+
+    if (this.distanceCallback) {
+      this.distanceCallback(offset_distance(...coords));
+    }
+
+    let lineCoords = linedraw(...coords);
+
+    let s = lineCoords
+      .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+      .join(', ');
+
+    this.svg.querySelectorAll(s).forEach(p => p.classList.add('active'));
+  }
+}