From 77f9f8afa41b56d4b3be3e3390ff7c24ff224d9e Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 27 Apr 2024 12:03:48 -0700
Subject: Remove 'reveal pattern' from firing arc module
---
src/modules/game.js | 19 ++++---
src/modules/game/firingArc.js | 120 +++++++++++++++++++++---------------------
2 files changed, 68 insertions(+), 71 deletions(-)
(limited to 'src')
diff --git a/src/modules/game.js b/src/modules/game.js
index 6b59659..1faad8d 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -1,4 +1,4 @@
-import FiringArc from './game/firingArc.js';
+import * as firingArc from './game/firingArc.js';
import SightLine from './game/sightLine.js';
import Counter from './game/counter.js';
@@ -112,7 +112,7 @@ function drawSightLine(sourceCell, targetCell) {
let svg, distanceCallback, proneFlagCallback, selectCallback;
-let board, firingArc, sightLine, counterMod,
+let board, sightLine, counterMod,
placing = [];
export function setDistanceCallback(callback) {
@@ -130,7 +130,6 @@ export function setSelectCallback(callback) {
export function start(el) {
svg = el;
board = svg.querySelector('.board');
- firingArc = FiringArc(svg, board);
sightLine = SightLine(board);
counterMod = Counter(svg, board);
@@ -264,7 +263,7 @@ export function start(el) {
let occupant = getCellOccupant(cell);
if (occupant) {
- firingArc.toggleCounterVisibility(occupant, true);
+ firingArc.toggleCounterVisibility(svg, occupant, true);
}
});
@@ -278,7 +277,7 @@ export function start(el) {
let occupant = getCellOccupant(cell);
if (occupant) {
- firingArc.toggleCounterVisibility(occupant, false);
+ firingArc.toggleCounterVisibility(svg, occupant, false);
}
});
});
@@ -296,7 +295,7 @@ export function select(selected) {
unSelect();
placing.push(counter);
counter.classList.add(counterMod.selectedClass);
- firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
+ firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
}
}
@@ -308,7 +307,7 @@ export function unSelect() {
placing = [];
getSelected().classList.remove(counterMod.selectedClass);
clearSightLine();
- firingArc.clipAll();
+ firingArc.clipAll(svg);
}
}
@@ -322,7 +321,7 @@ export function endMove() {
}
export function endTurn(allegiance) {
- firingArc.clear(allegiance);
+ firingArc.clear(svg, allegiance);
}
export function toggleProne() {
@@ -335,7 +334,7 @@ export function toggleProne() {
}
export function toggleFiringArcVisibility(allegiance) {
- firingArc.toggleVisibility(allegiance);
+ firingArc.toggleVisibility(svg, allegiance);
}
export function setFiringArc(size) {
@@ -343,7 +342,7 @@ export function setFiringArc(size) {
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
if (isOnBoard(counter)) {
- firingArc.set(size, counter, getCellPosition(counter.parentElement));
+ firingArc.set(svg, size, counter, getCellPosition(counter.parentElement));
}
}
diff --git a/src/modules/game/firingArc.js b/src/modules/game/firingArc.js
index ffb5c27..db122a0 100644
--- a/src/modules/game/firingArc.js
+++ b/src/modules/game/firingArc.js
@@ -270,82 +270,80 @@ function create(x, y, size, counter, { arcContainer, arcLayer, outlineLayer }) {
return { aimLine, firingArc, firingArcOutline };
}
-export default function (svg) {
- function set(size, counter, { x, y }) {
- get(counter).forEach(el => el.remove());
-
- const { grid, containers } = queryContainers(svg),
- { aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
-
- function positionListener(e) {
- const { aimPt, outlinePoints, arcPoints } = calcPoints(e, aimLine, grid, size);
+function set(svg, size, counter, { x, y }) {
+ get(svg, counter).forEach(el => el.remove());
- aimLine.setAttributeNS(null, 'x2', aimPt.x);
- aimLine.setAttributeNS(null, 'y2', aimPt.y);
- firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
- firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
- }
-
- function placementListener() {
- aimLine.remove();
- firingArc.classList.remove('active');
- grid.removeAttribute('style');
- svg.removeEventListener('mousemove', positionListener);
- }
+ const { grid, containers } = queryContainers(svg),
+ { aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
- function cancelPlacementListener(e) {
- e.preventDefault();
+ function positionListener(e) {
+ const { aimPt, outlinePoints, arcPoints } = calcPoints(e, aimLine, grid, size);
- get(counter).forEach(el => el.remove());
- grid.removeAttribute('style');
- svg.removeEventListener('mousemove', positionListener);
- }
-
- grid.style.pointerEvents = 'none';
- firingArc.addEventListener('click', placementListener, { once: true });
- firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
- svg.addEventListener('mousemove', positionListener);
+ aimLine.setAttributeNS(null, 'x2', aimPt.x);
+ aimLine.setAttributeNS(null, 'y2', aimPt.y);
+ firingArcOutline.setAttributeNS(null, 'points', outlinePoints.join(' '));
+ firingArc.setAttributeNS(null, 'points', arcPoints.join(' '));
}
- function clear(allegiance) {
- const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
- svg.querySelectorAll(selector).forEach(el => el.remove());
+ function placementListener() {
+ aimLine.remove();
+ firingArc.classList.remove('active');
+ grid.removeAttribute('style');
+ svg.removeEventListener('mousemove', positionListener);
}
- function get({ dataset: { allegiance, number }}) {
- return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
+ function cancelPlacementListener(e) {
+ e.preventDefault();
+
+ get(counter).forEach(el => el.remove());
+ grid.removeAttribute('style');
+ svg.removeEventListener('mousemove', positionListener);
}
- function toggleVisibility(allegiance) {
- const vis = firingArcVisibility[allegiance],
- clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
+ grid.style.pointerEvents = 'none';
+ firingArc.addEventListener('click', placementListener, { once: true });
+ firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
+ svg.addEventListener('mousemove', positionListener);
+}
- clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
- firingArcVisibility[allegiance] = !vis;
- }
+function clear(svg, allegiance) {
+ const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
+ svg.querySelectorAll(selector).forEach(el => el.remove());
+}
- function toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
- const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
- display = vis ? 'none' : '';
+function get(svg, { dataset: { allegiance, number }}) {
+ return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
+}
- if (cp) {
- cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
- }
- }
+function toggleVisibility(svg, allegiance) {
+ const vis = firingArcVisibility[allegiance],
+ clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
- function clipAll() {
- getUnclipped(svg).forEach(el => {
- const { number, allegiance } = el.dataset,
- clipPathId = `clip-path-${allegiance}-${number}`,
- isVisible = firingArcVisibility[allegiance];
+ clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
+ firingArcVisibility[allegiance] = !vis;
+}
- if (isVisible) {
- svg.querySelector(`#${clipPathId}`).style.display = 'none';
- }
+function toggleCounterVisibility(svg, { dataset: { number, allegiance }}, vis) {
+ const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
+ display = vis ? 'none' : '';
- el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
- });
+ if (cp) {
+ cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
}
+}
+
+function clipAll(svg) {
+ getUnclipped(svg).forEach(el => {
+ const { number, allegiance } = el.dataset,
+ clipPathId = `clip-path-${allegiance}-${number}`,
+ isVisible = firingArcVisibility[allegiance];
- return { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
+ if (isVisible) {
+ svg.querySelector(`#${clipPathId}`).style.display = 'none';
+ }
+
+ el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
+ });
}
+
+export { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
--
cgit v1.2.3