Remove 'reveal pattern' from firing arc module
This commit is contained in:
parent
25a79c4be5
commit
77f9f8afa4
@ -1,4 +1,4 @@
|
|||||||
import FiringArc from './game/firingArc.js';
|
import * as firingArc from './game/firingArc.js';
|
||||||
import SightLine from './game/sightLine.js';
|
import SightLine from './game/sightLine.js';
|
||||||
import Counter from './game/counter.js';
|
import Counter from './game/counter.js';
|
||||||
|
|
||||||
@ -112,7 +112,7 @@ function drawSightLine(sourceCell, targetCell) {
|
|||||||
|
|
||||||
let svg, distanceCallback, proneFlagCallback, selectCallback;
|
let svg, distanceCallback, proneFlagCallback, selectCallback;
|
||||||
|
|
||||||
let board, firingArc, sightLine, counterMod,
|
let board, sightLine, counterMod,
|
||||||
placing = [];
|
placing = [];
|
||||||
|
|
||||||
export function setDistanceCallback(callback) {
|
export function setDistanceCallback(callback) {
|
||||||
@ -130,7 +130,6 @@ export function setSelectCallback(callback) {
|
|||||||
export function start(el) {
|
export function start(el) {
|
||||||
svg = el;
|
svg = el;
|
||||||
board = svg.querySelector('.board');
|
board = svg.querySelector('.board');
|
||||||
firingArc = FiringArc(svg, board);
|
|
||||||
sightLine = SightLine(board);
|
sightLine = SightLine(board);
|
||||||
counterMod = Counter(svg, board);
|
counterMod = Counter(svg, board);
|
||||||
|
|
||||||
@ -264,7 +263,7 @@ export function start(el) {
|
|||||||
let occupant = getCellOccupant(cell);
|
let occupant = getCellOccupant(cell);
|
||||||
|
|
||||||
if (occupant) {
|
if (occupant) {
|
||||||
firingArc.toggleCounterVisibility(occupant, true);
|
firingArc.toggleCounterVisibility(svg, occupant, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -278,7 +277,7 @@ export function start(el) {
|
|||||||
let occupant = getCellOccupant(cell);
|
let occupant = getCellOccupant(cell);
|
||||||
|
|
||||||
if (occupant) {
|
if (occupant) {
|
||||||
firingArc.toggleCounterVisibility(occupant, false);
|
firingArc.toggleCounterVisibility(svg, occupant, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -296,7 +295,7 @@ export function select(selected) {
|
|||||||
unSelect();
|
unSelect();
|
||||||
placing.push(counter);
|
placing.push(counter);
|
||||||
counter.classList.add(counterMod.selectedClass);
|
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 });
|
selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -308,7 +307,7 @@ export function unSelect() {
|
|||||||
placing = [];
|
placing = [];
|
||||||
getSelected().classList.remove(counterMod.selectedClass);
|
getSelected().classList.remove(counterMod.selectedClass);
|
||||||
clearSightLine();
|
clearSightLine();
|
||||||
firingArc.clipAll();
|
firingArc.clipAll(svg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -322,7 +321,7 @@ export function endMove() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function endTurn(allegiance) {
|
export function endTurn(allegiance) {
|
||||||
firingArc.clear(allegiance);
|
firingArc.clear(svg, allegiance);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function toggleProne() {
|
export function toggleProne() {
|
||||||
@ -335,7 +334,7 @@ export function toggleProne() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function toggleFiringArcVisibility(allegiance) {
|
export function toggleFiringArcVisibility(allegiance) {
|
||||||
firingArc.toggleVisibility(allegiance);
|
firingArc.toggleVisibility(svg, allegiance);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setFiringArc(size) {
|
export function setFiringArc(size) {
|
||||||
@ -343,7 +342,7 @@ export function setFiringArc(size) {
|
|||||||
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
|
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
|
||||||
|
|
||||||
if (isOnBoard(counter)) {
|
if (isOnBoard(counter)) {
|
||||||
firingArc.set(size, counter, getCellPosition(counter.parentElement));
|
firingArc.set(svg, size, counter, getCellPosition(counter.parentElement));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -270,9 +270,8 @@ function create(x, y, size, counter, { arcContainer, arcLayer, outlineLayer }) {
|
|||||||
return { aimLine, firingArc, firingArcOutline };
|
return { aimLine, firingArc, firingArcOutline };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function (svg) {
|
function set(svg, size, counter, { x, y }) {
|
||||||
function set(size, counter, { x, y }) {
|
get(svg, counter).forEach(el => el.remove());
|
||||||
get(counter).forEach(el => el.remove());
|
|
||||||
|
|
||||||
const { grid, containers } = queryContainers(svg),
|
const { grid, containers } = queryContainers(svg),
|
||||||
{ aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
|
{ aimLine, firingArc, firingArcOutline } = create(x, y, size, counter, containers);
|
||||||
@ -305,35 +304,35 @@ export default function (svg) {
|
|||||||
firingArc.addEventListener('click', placementListener, { once: true });
|
firingArc.addEventListener('click', placementListener, { once: true });
|
||||||
firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
|
firingArc.addEventListener('contextmenu', cancelPlacementListener, { once: true });
|
||||||
svg.addEventListener('mousemove', positionListener);
|
svg.addEventListener('mousemove', positionListener);
|
||||||
}
|
}
|
||||||
|
|
||||||
function clear(allegiance) {
|
function clear(svg, allegiance) {
|
||||||
const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
|
const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
|
||||||
svg.querySelectorAll(selector).forEach(el => el.remove());
|
svg.querySelectorAll(selector).forEach(el => el.remove());
|
||||||
}
|
}
|
||||||
|
|
||||||
function get({ dataset: { allegiance, number }}) {
|
function get(svg, { dataset: { allegiance, number }}) {
|
||||||
return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
|
return svg.querySelectorAll(`#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"], #firing-arcs line`);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleVisibility(allegiance) {
|
function toggleVisibility(svg, allegiance) {
|
||||||
const vis = firingArcVisibility[allegiance],
|
const vis = firingArcVisibility[allegiance],
|
||||||
clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
|
clipPaths = svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
|
||||||
|
|
||||||
clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
|
clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
|
||||||
firingArcVisibility[allegiance] = !vis;
|
firingArcVisibility[allegiance] = !vis;
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleCounterVisibility({ dataset: { number, allegiance }}, vis) {
|
function toggleCounterVisibility(svg, { dataset: { number, allegiance }}, vis) {
|
||||||
const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
|
const cp = svg.querySelector(`#clip-path-${allegiance}-${number}`),
|
||||||
display = vis ? 'none' : '';
|
display = vis ? 'none' : '';
|
||||||
|
|
||||||
if (cp) {
|
if (cp) {
|
||||||
cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
|
cp.style.display = firingArcVisibility[allegiance] ? 'none' : display;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function clipAll() {
|
function clipAll(svg) {
|
||||||
getUnclipped(svg).forEach(el => {
|
getUnclipped(svg).forEach(el => {
|
||||||
const { number, allegiance } = el.dataset,
|
const { number, allegiance } = el.dataset,
|
||||||
clipPathId = `clip-path-${allegiance}-${number}`,
|
clipPathId = `clip-path-${allegiance}-${number}`,
|
||||||
@ -345,7 +344,6 @@ export default function (svg) {
|
|||||||
|
|
||||||
el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
|
el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
return { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { set, clear, get, toggleVisibility, toggleCounterVisibility, clipAll };
|
||||||
|
Loading…
x
Reference in New Issue
Block a user