1 files changed, 199 insertions, 0 deletions
diff --git a/src/modules/sightLine.js b/src/modules/sightLine.js
new file mode 100644
index 0000000..de88521
--- /dev/null
+++ b/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'));
+  }
+}