Make sight line module a function instead of a class

This commit is contained in:
Catalin Constantin Mititiuc 2024-04-26 18:19:35 -07:00
parent f07d120b4b
commit 00323b63eb
2 changed files with 53 additions and 51 deletions

View File

@ -12,6 +12,7 @@ export default class Game {
this.svg = svg;
const board = this.getBoard();
this.firingArc = new FiringArc(svg, board);
this.sightLine = new SightLine(svg, board);
this.counter = new Counter(svg);
@ -89,7 +90,7 @@ export default class Game {
* @param {(count: [number]) => void} fn
*/
set distanceCallback(fn) {
this.sightLine.distanceCallback = fn;
this.sightLine.setDistanceCallback(fn);
}
endMove() {
@ -104,8 +105,6 @@ export default class Game {
select(selected) {
const counter = this.counter.getCounter(selected);
console.log(counter);
if (counter) {
this.unSelect();
this.placing.push(counter);

View File

@ -82,94 +82,97 @@ function linedraw(x1, y1, x2, y2) {
return results;
}
export default class SightLine {
#board;
#lockTarget;
#activeHexes = [];
sightLine;
function createElement({ x: x1, y: y1 }, { x: x2, y: y2 }) {
const sightLine = document.createElementNS(svgns, 'line');
constructor(svg, board) {
this.svg = svg;
this.#board = board;
}
sightLine.classList.add('sight-line');
sightLine.classList.add(activeClassName);
sightLine.setAttributeNS(null, 'x1', x1);
sightLine.setAttributeNS(null, 'y1', y1);
sightLine.setAttributeNS(null, 'x2', x2);
sightLine.setAttributeNS(null, 'y2', y2);
#drawHexes(...coords) {
this.#clearHexes()
return sightLine;
}
if (this.distanceCallback) {
this.distanceCallback(offset_distance(...coords));
export default function(svg, board) {
let activeHexes = [],
lockTarget,
distanceCallback;
function drawHexes(...coords) {
clearHexes();
if (distanceCallback) {
distanceCallback(offset_distance(...coords));
}
const lineCoords = linedraw(...coords),
selector = lineCoords
.map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
.join(', '),
.join(', ');
hexes = this.svg.querySelectorAll(selector);
hexes.forEach(p => p.classList.add(activeClassName));
this.#activeHexes = hexes;
activeHexes = svg.querySelectorAll(selector);
activeHexes.forEach(p => p.classList.add(activeClassName));
}
#clearHexes() {
if (this.distanceCallback) {
this.distanceCallback();
function clearHexes() {
if (distanceCallback) {
distanceCallback();
}
this.#activeHexes.forEach(el => el.classList.remove(activeClassName));
this.#activeHexes = [];
activeHexes.forEach(el => el.classList.remove(activeClassName));
activeHexes = [];
}
clear() {
this.sightLine;
this.clear = function () {
if (this.sightLine) {
this.sightLine.remove();
delete this.sightLine;
}
if (this.#lockTarget) {
this.#lockTarget.classList.remove(targetClassName);
this.#lockTarget = undefined;
if (lockTarget) {
lockTarget.classList.remove(targetClassName);
lockTarget = null;
}
this.#clearHexes();
clearHexes();
}
draw(source, target) {
this.draw = function (source, target) {
this.clear();
const sightLine = document.createElementNS(svgns, 'line');
this.sightLine = createElement(source.position, target.position);
board.appendChild(this.sightLine);
sightLine.classList.add('sight-line');
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);
drawHexes(+source.index.x, +source.index.y, +target.index.x, +target.index.y);
}
update(source) {
const { dataset: { x }, parentElement: { dataset: { y }}} = this.#lockTarget;
this.update = function(source) {
const { dataset: { x }, parentElement: { dataset: { y }}} = lockTarget;
this.sightLine.setAttributeNS(null, 'x1', source.position.x);
this.sightLine.setAttributeNS(null, 'y1', source.position.y);
this.#drawHexes(+source.index.x, +source.index.y, +x, +y);
drawHexes(+source.index.x, +source.index.y, +x, +y);
}
toggleLock(cell) {
if (this.#lockTarget) {
this.toggleLock = function (cell) {
if (lockTarget) {
this.sightLine.classList.add(activeClassName);
this.#lockTarget.classList.remove(targetClassName);
this.#lockTarget = undefined;
lockTarget.classList.remove(targetClassName);
lockTarget = null;
} else {
this.sightLine.classList.remove(activeClassName);
cell.classList.add(targetClassName);
this.#lockTarget = cell;
lockTarget = cell;
}
}
this.setDistanceCallback = function(callback) {
distanceCallback = callback;
}
}