Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/modules/game/sightLine.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-24 19:35:42 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-24 19:35:42 -0700
commit7f0c19becd5979a16d9298cae9f6ff8a6f96d9c2 (patch)
tree063c3737b276d4117edf4ee17b255b8d84a87a80 /src/modules/game/sightLine.js
parente7f7bf1f31a7e1f937eb3eda4ee735db04e6384e (diff)
More functional refactor
Diffstat (limited to 'src/modules/game/sightLine.js')
-rw-r--r--src/modules/game/sightLine.js199
1 files changed, 199 insertions, 0 deletions
diff --git a/src/modules/game/sightLine.js b/src/modules/game/sightLine.js
new file mode 100644
index 0000000..4790bd8
--- /dev/null
+++ b/src/modules/game/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.dataset.x,
+ y1 = cell.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'));
+ }
+}