Add a sight line module
This commit is contained in:
parent
0407095ec3
commit
733c061587
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
199
src/modules/sightLine.js
Normal file
199
src/modules/sightLine.js
Normal file
@ -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'));
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user