1 files changed, 73 insertions, 97 deletions
diff --git a/src/modules/game/sightLine.js b/src/modules/game/sightLine.js
index 4790bd8..83cab9b 100644
--- a/src/modules/game/sightLine.js
+++ b/src/modules/game/sightLine.js
@@ -1,4 +1,6 @@
-const svgns = "http://www.w3.org/2000/svg";
+const svgns = "http://www.w3.org/2000/svg",
+  targetClassName = 'sight-line-target',
+  activeClassName = 'active';
 
 function evenr_to_axial(x, y) {
   return { q: x - (y + (y & 1)) / 2, r: y };
@@ -13,26 +15,26 @@ function axial_distance(q1, r1, q2, r2) {
 }
 
 function offset_distance(x1, y1, x2, y2) {
-  let { q: q1, r: r1 } = evenr_to_axial(x1, y1),
+  const { 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 cube_to_axial(q, r, _) {
+  return { q, r };
 }
 
 function axial_to_cube(q, r) {
-  return { q: q, r: r, s: -q - r };
+  return { q, r, s: -q - r };
 }
 
 function cube_round(q, r, s) {
-  rQ = Math.round(q);
-  rR = Math.round(r);
-  rS = Math.round(s);
+  let rQ = Math.round(q),
+    rR = Math.round(r),
+    rS = Math.round(s);
 
-  let q_diff = Math.abs(rQ - q),
+  const q_diff = Math.abs(rQ - q),
     r_diff = Math.abs(rR - r),
     s_diff = Math.abs(rS - s);
 
@@ -48,7 +50,7 @@ function cube_round(q, r, s) {
 }
 
 function axial_round(q, r) {
-  let cube = axial_to_cube(q, r),
+  const 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);
 
@@ -64,13 +66,13 @@ function axial_lerp(q1, r1, q2, r2, t) {
 }
 
 function linedraw(x1, y1, x2, y2) {
-  let axial1 = evenr_to_axial(x1, y1),
+  const 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),
+    const 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);
 
@@ -81,119 +83,93 @@ function linedraw(x1, y1, x2, y2) {
 }
 
 export default class SightLine {
-  constructor(svg) {
+  #board;
+  #lockTarget;
+  #activeHexes = [];
+  sightLine;
+
+  constructor(svg, board) {
     this.svg = svg;
+    this.#board = board;
   }
 
-  getBoard() {
-    return this.svg.querySelector('.board');
-  }
+  #drawHexes(...coords) {
+    this.#clearHexes()
 
-  getActiveHexes() {
-    return this.svg.querySelectorAll('use[href="#hex"].active');
-  }
+    if (this.distanceCallback) {
+      this.distanceCallback(offset_distance(...coords));
+    }
 
-  clear() {
-    const board = this.getBoard(),
-      sl = board.querySelector('line.sight-line'),
-      target = board.querySelector(`use[href="#hex"].sight-line-target`);
+    const lineCoords = linedraw(...coords),
 
-    if (sl) {
-      sl.remove();
-    }
+      selector = lineCoords
+        .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+        .join(', '),
 
-    if (target) {
-      target.classList.remove('sight-line-target');
-    }
+      hexes = this.svg.querySelectorAll(selector);
 
-    this.clearHexes();
+    hexes.forEach(p => p.classList.add(activeClassName));
+    this.#activeHexes = hexes;
   }
 
-  clearHexes() {
+  #clearHexes() {
     if (this.distanceCallback) {
       this.distanceCallback();
     }
 
-    this.getActiveHexes().forEach(el => el.classList.remove('active'));
+    this.#activeHexes.forEach(el => el.classList.remove(activeClassName));
+    this.#activeHexes = [];
   }
 
-  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);
+  clear() {
+    if (this.sightLine) {
+      this.sightLine.remove();
+      delete this.sightLine;
+    }
 
-    pt = pt.matrixTransform(mtx);
+    if (this.#lockTarget) {
+      this.#lockTarget.classList.remove(targetClassName);
+      this.#lockTarget = undefined;
+    }
 
-    transform = getComputedStyle(target.parentElement).transform.match(/-?\d+\.?\d*/g);
-    mtx = new DOMMatrix(transform);
-    pt = pt.matrixTransform(mtx);
+    this.#clearHexes();
+  }
 
-    let slX2 = pt.x,
-      slY2 = pt.y;
+  draw(source, target) {
+    this.clear();
 
-    let sightLine = document.createElementNS(svgns, 'line');
+    const 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);
+    sightLine.classList.add(activeClassName);
+    sightLine.setAttributeNS(null, 'x1', source.position.x);
+    sightLine.setAttributeNS(null, 'y1', source.position.y);
+    sightLine.setAttributeNS(null, 'x2', target.position.x);
+    sightLine.setAttributeNS(null, 'y2', target.position.y);
+
+    this.sightLine = sightLine;
+    this.#board.appendChild(sightLine);
+    this.#drawHexes(+source.index.x, +source.index.y, +target.index.x, +target.index.y);
   }
 
-  update(cell, { x, y }) {
-    const sl = this.svg.querySelector('.sight-line'),
-      target = this.svg.querySelector('.sight-line-target').parentElement,
-      x1 = cell.dataset.x,
-      y1 = cell.parentElement.dataset.y,
-      x2 = target.dataset.x,
-      y2 = target.parentElement.dataset.y;
+  update(source) {
+    const { dataset: { x }, parentElement: { dataset: { y }}} = this.#lockTarget;
 
-    sl.setAttributeNS(null, 'x1', x);
-    sl.setAttributeNS(null, 'y1', y);
+    this.sightLine.setAttributeNS(null, 'x1', source.position.x);
+    this.sightLine.setAttributeNS(null, 'y1', source.position.y);
 
-    this.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
+    this.#drawHexes(+source.index.x, +source.index.y, +x, +y);
   }
 
-  drawHexes(...coords) {
-    this.clearHexes()
-
-    if (this.distanceCallback) {
-      this.distanceCallback(offset_distance(...coords));
+  toggleLock(cell) {
+    if (this.#lockTarget) {
+      this.sightLine.classList.add(activeClassName);
+      this.#lockTarget.classList.remove(targetClassName);
+      this.#lockTarget = undefined;
+    } else {
+      this.sightLine.classList.remove(activeClassName);
+      cell.classList.add(targetClassName);
+      this.#lockTarget = cell;
     }
-
-    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'));
   }
 }