From ec023057b9a02036d28da3fad86c0f5ae5796f59 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 23 Apr 2024 12:43:11 -0700
Subject: Add a sight line module
---
src/modules/game.js | 225 +++++------------------------------------------
src/modules/sightLine.js | 199 +++++++++++++++++++++++++++++++++++++++++
2 files changed, 219 insertions(+), 205 deletions(-)
create mode 100644 src/modules/sightLine.js
(limited to 'src')
diff --git a/src/modules/game.js b/src/modules/game.js
index 33f872b..c398da8 100644
--- a/src/modules/game.js
+++ b/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);
}
}
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'));
+ }
+}
--
cgit v1.2.3