From e33e9de5661280784d120f4692500108cf449535 Mon Sep 17 00:00:00 2001 From: Catalin Constantin Mititiuc Date: Mon, 16 Jun 2025 22:41:29 -0700 Subject: [PATCH] Remove 'reveal pattern' from firing arc module --- src/modules/game.js | 19 +++-- src/modules/game/firingArc.js | 148 +++++++++++++++++----------------- 2 files changed, 82 insertions(+), 85 deletions(-) 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 }) { +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 };