Web Dev Solutions

Catalin Mititiuc

From 00323b63ebbe461f59eb2fa05ef458c12bd9482f Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Fri, 26 Apr 2024 18:19:35 -0700 Subject: Make sight line module a function instead of a class --- src/modules/game/sightLine.js | 101 ++++++++++++++++++++++-------------------- 1 file changed, 52 insertions(+), 49 deletions(-) (limited to 'src/modules/game/sightLine.js') diff --git a/src/modules/game/sightLine.js b/src/modules/game/sightLine.js index 83cab9b..b0af107 100644 --- a/src/modules/game/sightLine.js +++ b/src/modules/game/sightLine.js @@ -82,94 +82,97 @@ function linedraw(x1, y1, x2, y2) { return results; } -export default class SightLine { - #board; - #lockTarget; - #activeHexes = []; - sightLine; - - constructor(svg, board) { - this.svg = svg; - this.#board = board; - } +function createElement({ x: x1, y: y1 }, { x: x2, y: y2 }) { + const sightLine = document.createElementNS(svgns, 'line'); + + 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); + + return sightLine; +} + +export default function(svg, board) { + let activeHexes = [], + lockTarget, + distanceCallback; - #drawHexes(...coords) { - this.#clearHexes() + function drawHexes(...coords) { + clearHexes(); - if (this.distanceCallback) { - this.distanceCallback(offset_distance(...coords)); + 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'); - - 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 = createElement(source.position, target.position); + board.appendChild(this.sightLine); - 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; + } } -- cgit v1.2.3