ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove 'reveal pattern' from firing arc module

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent 3749477ec1
commit e33e9de566
2 changed files with 82 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/modules/game.js
View File

@ -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));
}
}

148
src/modules/game/firingArc.js
View File

@ -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 };