Remove 'reveal pattern' from firing arc module

2024-04-27 12:03:48 -07:00
parent 25a79c4be5
commit 77f9f8afa4
2 changed files with 82 additions and 85 deletions
--- 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 }) {
+function set(svg, size, counter, { x, y }) {
+  get(svg, 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);
+
+    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);
+  }
+
+  function cancelPlacementListener(e) {
+    e.preventDefault();
+
    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);
-
-      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);
-    }
-
-    function cancelPlacementListener(e) {
-      e.preventDefault();
-
-      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);
+    grid.removeAttribute('style');
+    svg.removeEventListener('mousemove', positionListener);
  }

-  function clear(allegiance) {
-    const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
-    svg.querySelectorAll(selector).forEach(el => el.remove());
-  }
-
-  function get({ dataset: { allegiance, number }}) {
-    return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
-  }
-
-  function toggleVisibility(allegiance) {
-    const vis = firingArcVisibility[allegiance],
-      clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
-
-    clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
-    firingArcVisibility[allegiance] = !vis;
-  }
-
-  function toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
-    const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
-      display = vis ? 'none' : '';
-
-    if (cp) {
-      cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
-    }
-  }
-
-  function clipAll() {
-    getUnclipped(svg).forEach(el => {
-      const { number, allegiance } = el.dataset,
-        clipPathId = `clip-path-${allegiance}-${number}`,
-        isVisible = firingArcVisibility[allegiance];
-
-      if (isVisible) {
-        svg.querySelector(`#${clipPathId}`).style.display = 'none';
-      }
-
-      el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
-    });
-  }
-
-  return { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
+  grid.style.pointerEvents = 'none';
+  firingArc.addEventListener('click', placementListener, { once: true });
+  firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
+  svg.addEventListener('mousemove', positionListener);
 }
+
+function clear(svg, allegiance) {
+  const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
+  svg.querySelectorAll(selector).forEach(el => el.remove());
+}
+
+function get(svg, { dataset: { allegiance, number }}) {
+  return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
+}
+
+function toggleVisibility(svg, allegiance) {
+  const vis = firingArcVisibility[allegiance],
+    clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
+
+  clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
+  firingArcVisibility[allegiance] = !vis;
+}
+
+function toggleCounterVisibility(svg, { dataset: { number, allegiance }}, vis) {
+  const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
+    display = vis ? 'none' : '';
+
+  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];
+
+    if (isVisible) {
+      svg.querySelector(`#${clipPathId}`).style.display = 'none';
+    }
+
+    el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
+  });
+}
+
+export { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };