Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-24 16:18:49 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-24 16:18:49 -0700
commitaccff86ae105908dcd740ebfc1f0e1af5d26d366 (patch)
tree3699d6e2149afb4773581becf1ad8e4bb170016c
parent62a745d59f27c55f2c3689d2bebdc11684621e7b (diff)
Move more firing arc logic to its module
Diffstat
-rw-r--r--src/modules/firingArc.js53
-rw-r--r--src/modules/game.js61
2 files changed, 59 insertions, 55 deletions
diff --git a/src/modules/firingArc.js b/src/modules/firingArc.js
index 109e04f..5e5d84a 100644
--- a/src/modules/firingArc.js
+++ b/src/modules/firingArc.js
@@ -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})`);
+ });
+ }
}
diff --git a/src/modules/game.js b/src/modules/game.js
index 2810fba..fe15055 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -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));
}
}