Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-26 23:55:01 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-26 23:55:01 -0700
commitd911ba9bcaa34d37cd12ad583a88c143e3c138ab (patch)
tree600e95d9ded6d62e7f52a4ea704808c12cc8dfe3
parentbcd34e76db0e169b6e6e1b2d3f50cba35666e4e1 (diff)
Refactor sight line module to extract svg queries into game module
Diffstat
-rw-r--r--src/modules/game.js49
-rw-r--r--src/modules/game/sightLine.js109
2 files changed, 72 insertions, 86 deletions
diff --git a/src/modules/game.js b/src/modules/game.js
index b2f0672..1257d90 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -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;
+
+ const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY)
+ .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+ .join(', ');
- this.sightLine.update(source);
+ 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;
+
+ 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);
+ }
- this.sightLine.draw(source, target);
+ clearSightLine() {
+ this.sightLine.hexes = [];
+ this.sightLine.clear();
+ this.distanceCallback && this.distanceCallback();
}
}
diff --git a/src/modules/game/sightLine.js b/src/modules/game/sightLine.js
index 8c3be37..94e91e5 100644
--- a/src/modules/game/sightLine.js
+++ b/src/modules/game/sightLine.js
@@ -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),
+function lock(cell, sightLine, lockTarget) {
+ sightLine.classList.remove(activeClassName);
+ cell.classList.add(targetClassName);
- selector = lineCoords
- .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
- .join(', ');
+ return cell;
+}
- activeHexes = svg.querySelectorAll(selector);
- activeHexes.forEach(p => p.classList.add(activeClassName));
- }
+function unlock(sightLine, lockTarget) {
+ sightLine.classList.add(activeClassName);
+ lockTarget.classList.remove(targetClassName);
- function clearHexes() {
- distanceCallback && distanceCallback();
+ return null;
+}
- activeHexes.forEach(el => el.classList.remove(activeClassName));
+export default function (board) {
+ let sightLine,
+ lockTarget,
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);
- }
+ return {
+ calcIndexes,
- function update(source) {
- const { dataset: { x }, parentElement: { dataset: { y }}} = lockTarget;
+ drawLine: function (...positions) {
+ this.clear();
- sightLine.setAttributeNS(null, 'x1', source.position.x);
- sightLine.setAttributeNS(null, 'y1', source.position.y);
+ sightLine = create(...positions);
+ board.appendChild(sightLine);
+ },
- drawHexes(+source.index.x, +source.index.y, +x, +y);
- }
+ clear: function () {
+ sightLine && sightLine.remove();
+ sightLine = null;
- function toggleLock(cell) {
- if (lockTarget) {
- sightLine.classList.add(activeClassName);
- lockTarget.classList.remove(targetClassName);
+ lockTarget && lockTarget.classList.remove(targetClassName);
lockTarget = null;
- } else {
- sightLine.classList.remove(activeClassName);
- cell.classList.add(targetClassName);
- lockTarget = cell;
- }
- }
+ },
- return {
- draw,
- clear,
- update,
- toggleLock,
+ 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;
}
};
}