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

Move more firing arc logic to its module

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent 5eadfa0c87
commit bfd656314c
2 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/modules/firingArc.js
View File

@ -165,11 +165,16 @@ function position(e) {
}
export default class FiringArc {
#firingArcVisibility = {
davion: false,
liao: false
};
constructor(svg) {
this.svg = svg;
}
set(size, allegiance, number, { x, y }) {
set(size, { dataset: { allegiance, number }}, { x, y }) {
const svgns = "http://www.w3.org/2000/svg";
let existingArcs = this.svg.querySelectorAll(
@ -246,4 +251,50 @@ export default class FiringArc {
firingArc.addEventListener('click', firingArcPlacementListener);
firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
}
clear(allegiance) {
const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
this.svg.querySelectorAll(selector).forEach(el => el.remove());
}
get({ dataset: { allegiance, number }}) {
return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${number}"][data-allegiance="${allegiance}"]`);
}
getUnclipped() {
return this.svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');
}
toggleVisibility(allegiance) {
const vis = this.#firingArcVisibility[allegiance],
clipPaths = this.svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
this.#firingArcVisibility[allegiance] = !vis;
}
toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
const cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`),
display = vis ? 'none' : '';
if (cp) {
cp.style.display = this.#firingArcVisibility[allegiance] ? 'none' : display;
}
}
clipAll() {
let unclipped = this.getUnclipped();
unclipped.forEach(el => {
const { number, allegiance } = el.dataset,
clipPathId = `clip-path-${allegiance}-${number}`,
isVisible = this.#firingArcVisibility[allegiance];
if (isVisible) {
this.svg.querySelector(`#${clipPathId}`).style.display = 'none';
}
el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
});
}
}

61
src/modules/game.js
View File

@ -8,11 +8,6 @@ export default class Game {
info;
placing = [];
#firingArcVisibility = {
davion: false,
liao: false
};
constructor(svg) {
this.svg = svg;
this.firingArc = new FiringArc(svg);
@ -50,14 +45,6 @@ export default class Game {
return this.svg.querySelector('line.sight-line');
}
getExistingArcs({ dataset: { allegiance, number }}) {
return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${number}"][data-allegiance="${allegiance}"]`);
}
getUnclippedFiringArcs() {
return this.svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');
}
getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
return { x, y };
}
@ -106,7 +93,7 @@ export default class Game {
this.unSelect();
this.placing.push(counter);
counter.classList.add(this.counter.selectedClass);
this.getExistingArcs(counter).forEach(el => el.removeAttribute('clip-path'));
this.firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
this.selectCallback({ prone: this.counter.hasProne(counter), ...counter.dataset });
}
}
@ -118,13 +105,12 @@ export default class Game {
this.placing = [];
this.getSelected().classList.remove(this.counter.selectedClass);
this.sightLine.clear();
this.clipFiringArcs();
this.firingArc.clipAll();
}
}
endTurn(allegiance) {
const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
this.svg.querySelectorAll(selector).forEach(el => el.remove());
this.firingArc.clear(allegiance);
}
toggleProne() {
@ -137,27 +123,7 @@ export default class Game {
}
toggleFiringArcVisibility(allegiance) {
const vis = this.#firingArcVisibility[allegiance],
clipPaths = this.svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
this.#firingArcVisibility[allegiance] = !vis;
}
clipFiringArcs() {
let unclipped = this.getUnclippedFiringArcs();
unclipped.forEach(el => {
const { number, allegiance } = el.dataset,
clipPathId = `clip-path-${allegiance}-${number}`,
isVisible = this.#firingArcVisibility[allegiance];
if (isVisible) {
this.svg.querySelector(`#${clipPathId}`).style.display = 'none';
}
el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
});
this.firingArc.toggleVisibility(allegiance);
}
setUpCells() {
@ -327,12 +293,7 @@ export default class Game {
let occupant = this.getCellOccupant(cell);
if (occupant) {
const { number, allegiance } = occupant.dataset;
const cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`);
if (cp) {
cp.style.display = 'none';
}
this.firingArc.toggleCounterVisibility(occupant, true);
}
});
@ -346,12 +307,7 @@ export default class Game {
let occupant = this.getCellOccupant(cell);
if (occupant) {
let { number, allegiance } = occupant.dataset,
cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`);
if (cp) {
cp.style.display = this.#firingArcVisibility[allegiance] ? 'none' : '';
}
this.firingArc.toggleCounterVisibility(occupant, false);
}
});
});
@ -362,10 +318,7 @@ export default class Game {
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
if (isOnBoard(counter)) {
const { allegiance, number } = counter.dataset,
cellPosition = this.getCellPosition(counter.parentElement);
this.firingArc.set(size, allegiance, number, cellPosition);
this.firingArc.set(size, counter, this.getCellPosition(counter.parentElement));
}
}