ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor sight line module to extract svg queries into game module

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent fb1468982a
commit 6f510c9383
2 changed files with 80 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/modules/game.js
View File

@ -14,7 +14,7 @@ export default class Game {
const board = this.getBoard();
this.firingArc = FiringArc(svg, board);
this.sightLine = SightLine(svg, board);
this.sightLine = SightLine(board);
this.counter = new Counter(svg);
this.setUpCells();
@ -86,13 +86,6 @@ export default class Game {
return pt;
}
/**
* @param {(count: [number]) => void} fn
*/
set distanceCallback(fn) {
this.sightLine.distanceCallback = fn;
}
endMove() {
const selected = this.getSelected();
@ -120,7 +113,7 @@ export default class Game {
if (selected) {
this.placing = [];
this.getSelected().classList.remove(this.counter.selectedClass);
this.sightLine.clear();
this.clearSightLine();
this.firingArc.clipAll();
}
}
@ -177,7 +170,7 @@ export default class Game {
const lockedSl = this.getLockedSightLine();
if (!lockedSl) {
this.sightLine.clear();
this.clearSightLine();
} else {
this.updateSightLine(cell);
}
@ -200,7 +193,7 @@ export default class Game {
const lockedSl = this.getLockedSightLine();
if (!lockedSl) {
this.sightLine.clear();
this.clearSightLine();
} else {
this.updateSightLine(toPlace.parentElement);
}
@ -221,7 +214,7 @@ export default class Game {
const lockedSl = this.getLockedSightLine();
if (!lockedSl) {
this.sightLine.clear();
this.clearSightLine();
} else {
this.updateSightLine(cell);
}
@ -296,7 +289,7 @@ export default class Game {
let sl = this.getActiveSightLine();
if (sl) {
this.sightLine.clear();
this.clearSightLine();
}
let occupant = this.getCellOccupant(cell);
@ -326,17 +319,35 @@ export default class Game {
updateSightLine(cell) {
const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell,
source = { index: { x: sX, y: sY }, position: this.getCellPosition(cell) };
{ dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = this.sightLine.lockTarget;
this.sightLine.update(source);
const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY)
.map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
.join(', ');
const hexes = this.svg.querySelectorAll(selector);
this.sightLine.hexes = hexes;
this.sightLine.update(this.getCellPosition(cell));
this.distanceCallback && this.distanceCallback(hexes.length - 1);
}
drawSightLine(sourceCell, targetCell) {
const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
{ dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell,
source = { index: { x: sX, y: sY }, position: this.getCellPosition(sourceCell) },
target = { index: { x: tX, y: tY }, position: this.getCellPosition(targetCell) };
{ dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
this.sightLine.draw(source, target);
const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY)
.map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
.join(', ');
const hexes = this.svg.querySelectorAll(selector);
this.sightLine.hexes = hexes;
this.sightLine.drawLine(this.getCellPosition(sourceCell), this.getCellPosition(targetCell));
this.distanceCallback && this.distanceCallback(hexes.length - 1);
}
clearSightLine() {
this.sightLine.hexes = [];
this.sightLine.clear();
this.distanceCallback && this.distanceCallback();
}
}

125
src/modules/game/sightLine.js
View File

@ -65,7 +65,7 @@ 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) {
function calcIndexes(x1, y1, x2, y2) {
const axial1 = evenr_to_axial(x1, y1),
axial2 = evenr_to_axial(x2, y2),
n = offset_distance(x1, y1, x2, y2),
@ -95,89 +95,64 @@ function create({ x: x1, y: y1 }, { x: x2, y: y2 }) {
return sightLine;
}
export default function(svg, board) {
let activeHexes = [],
lockTarget,
distanceCallback,
sightLine;
function drawHexes(...coords) {
clearHexes();
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(', ');
activeHexes = svg.querySelectorAll(selector);
activeHexes.forEach(p => p.classList.add(activeClassName));
}
function clearHexes() {
distanceCallback && distanceCallback();
activeHexes.forEach(el => el.classList.remove(activeClassName));
activeHexes = [];
}
function clear() {
if (sightLine) {
sightLine.remove();
sightLine = null;
}
if (lockTarget) {
lockTarget.classList.remove(targetClassName);
lockTarget = null;
}
clearHexes();
}
function draw(source, target) {
clear();
sightLine = create(source.position, target.position);
board.appendChild(sightLine);
drawHexes(+source.index.x, +source.index.y, +target.index.x, +target.index.y);
}
function update(source) {
const { dataset: { x }, parentElement: { dataset: { y }}} = lockTarget;
sightLine.setAttributeNS(null, 'x1', source.position.x);
sightLine.setAttributeNS(null, 'y1', source.position.y);
drawHexes(+source.index.x, +source.index.y, +x, +y);
}
function toggleLock(cell) {
if (lockTarget) {
sightLine.classList.add(activeClassName);
lockTarget.classList.remove(targetClassName);
lockTarget = null;
} else {
function lock(cell, sightLine, lockTarget) {
sightLine.classList.remove(activeClassName);
cell.classList.add(targetClassName);
lockTarget = cell;
}
}
return cell;
}
function unlock(sightLine, lockTarget) {
sightLine.classList.add(activeClassName);
lockTarget.classList.remove(targetClassName);
return null;
}
export default function (board) {
let sightLine,
lockTarget,
activeHexes = [];
return {
draw,
clear,
update,
toggleLock,
calcIndexes,
drawLine: function (...positions) {
this.clear();
sightLine = create(...positions);
board.appendChild(sightLine);
},
clear: function () {
sightLine && sightLine.remove();
sightLine = null;
lockTarget && lockTarget.classList.remove(targetClassName);
lockTarget = null;
},
update: function ({ x, y }) {
sightLine.setAttributeNS(null, 'x1', x);
sightLine.setAttributeNS(null, 'y1', y);
},
toggleLock: function (cell) {
lockTarget = lockTarget ? unlock(sightLine, lockTarget) : lock(cell, sightLine, lockTarget);
},
get sightLine() {
return sightLine;
},
set distanceCallback(callback) {
distanceCallback = callback;
get lockTarget() {
return lockTarget;
},
set hexes(hexes) {
activeHexes.forEach(h => h.classList.remove(activeClassName));
hexes.forEach(h => h.classList.add(activeClassName));
activeHexes = hexes;
}
};
}