Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/modules/game/firingArc.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-27 12:03:48 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-27 12:03:48 -0700
commit77f9f8afa41b56d4b3be3e3390ff7c24ff224d9e (patch)
treef9cb20fa9d56d8d1078e9bb484843f508f45b24a /src/modules/game/firingArc.js
parent25a79c4be5b50546147d61184e60bc63292a074c (diff)
Remove 'reveal pattern' from firing arc module
Diffstat (limited to 'src/modules/game/firingArc.js')
-rw-r--r--src/modules/game/firingArc.js120
1 files changed, 59 insertions, 61 deletions
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 };