Remove 'reveal pattern' from counter module
This commit is contained in:
parent
25c74d9a8e
commit
b88945ced6
@ -1,6 +1,6 @@
|
||||
import * as firingArc from './game/firingArc.js';
|
||||
import * as sightLine from './game/sightLine.js';
|
||||
import Counter from './game/counter.js';
|
||||
import * as counterMod from './game/counter.js';
|
||||
|
||||
const svgns = "http://www.w3.org/2000/svg";
|
||||
|
||||
@ -113,7 +113,7 @@ function drawSightLine(sourceCell, targetCell) {
|
||||
|
||||
let svg, distanceCallback, proneFlagCallback, selectCallback;
|
||||
|
||||
let board, counterMod,
|
||||
let board,
|
||||
placing = [];
|
||||
|
||||
export function setDistanceCallback(callback) {
|
||||
@ -131,7 +131,6 @@ export function setSelectCallback(callback) {
|
||||
export function start(el) {
|
||||
svg = el;
|
||||
board = svg.querySelector('.board');
|
||||
counterMod = Counter(svg, board);
|
||||
|
||||
getCells(svg).forEach(cell => {
|
||||
cell.addEventListener('click', e => {
|
||||
@ -147,7 +146,7 @@ export function start(el) {
|
||||
if (isGrenade(toPlace)) {
|
||||
state.hex.after(toPlace);
|
||||
} else if (toPlace && !state.occupant) {
|
||||
counterMod.place(toPlace, cell);
|
||||
counterMod.place(svg, toPlace, cell);
|
||||
placing.push(toPlace);
|
||||
const lockedSl = getLockedSightLine(svg);
|
||||
|
||||
@ -159,11 +158,11 @@ export function start(el) {
|
||||
} else if (toPlace && state.occupant) {
|
||||
if (toPlace === state.occupant) {
|
||||
if ('previous' in toPlace.dataset) {
|
||||
const trace = counterMod.getTrace(toPlace);
|
||||
const trace = counterMod.getTrace(svg, toPlace);
|
||||
toPlace.remove();
|
||||
toPlace = getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
|
||||
toPlace.classList.remove('clone');
|
||||
toPlace.classList.add(counterMod.selectedClass);
|
||||
toPlace.classList.add(counterMod.getSelectedClass());
|
||||
if (!('previous' in toPlace.dataset)) {
|
||||
trace.remove();
|
||||
} else {
|
||||
@ -188,11 +187,11 @@ export function start(el) {
|
||||
if (isClone(state.occupant).of(toPlace)) {
|
||||
if (!('previous' in state.occupant.dataset)) {
|
||||
state.occupant.classList.remove('clone');
|
||||
state.occupant.classList.add(counterMod.selectedClass);
|
||||
state.occupant.classList.add(counterMod.getSelectedClass());
|
||||
toPlace.remove();
|
||||
toPlace = state.occupant;
|
||||
counterMod.removeClones(toPlace);
|
||||
counterMod.getTrace(toPlace).remove();
|
||||
counterMod.removeClones(svg, toPlace);
|
||||
counterMod.getTrace(svg, toPlace).remove();
|
||||
const lockedSl = getLockedSightLine(svg);
|
||||
|
||||
if (!lockedSl) {
|
||||
@ -202,7 +201,7 @@ export function start(el) {
|
||||
}
|
||||
} else {
|
||||
const index = getGridIndex(state.occupant),
|
||||
trace = counterMod.getTrace(toPlace),
|
||||
trace = counterMod.getTrace(svg, toPlace),
|
||||
pos = getCellPosition(cell),
|
||||
points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
|
||||
|
||||
@ -283,18 +282,18 @@ export function start(el) {
|
||||
});
|
||||
|
||||
// debug
|
||||
const c = counterMod.getCounter({ dataset: { allegiance: 'davion', number: '1' }});
|
||||
counterMod.place(c, getCell(17, 25));
|
||||
const c = counterMod.getCounter(svg, { dataset: { allegiance: 'davion', number: '1' }});
|
||||
counterMod.place(svg, c, getCell(17, 25));
|
||||
select(c);
|
||||
}
|
||||
|
||||
export function select(selected) {
|
||||
const counter = counterMod.getCounter(selected);
|
||||
const counter = counterMod.getCounter(svg, selected);
|
||||
|
||||
if (counter) {
|
||||
unSelect();
|
||||
placing.push(counter);
|
||||
counter.classList.add(counterMod.selectedClass);
|
||||
counter.classList.add(counterMod.getSelectedClass());
|
||||
firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
|
||||
selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
|
||||
}
|
||||
@ -305,7 +304,7 @@ export function unSelect() {
|
||||
|
||||
if (selected) {
|
||||
placing = [];
|
||||
getSelected().classList.remove(counterMod.selectedClass);
|
||||
getSelected().classList.remove(counterMod.getSelectedClass());
|
||||
clearSightLine();
|
||||
firingArc.clipAll(svg);
|
||||
}
|
||||
@ -315,7 +314,7 @@ export function endMove() {
|
||||
const selected = getSelected();
|
||||
|
||||
if (selected) {
|
||||
counterMod.endMove(selected);
|
||||
counterMod.endMove(svg, selected);
|
||||
unSelect();
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,116 +30,105 @@ function getCounterAndClones(svg, counter) {
|
||||
return svg.querySelectorAll(`.counter${dataSelector(counter)}`);
|
||||
}
|
||||
|
||||
export default function (svg, board) {
|
||||
function getCounter(selected) {
|
||||
return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
|
||||
}
|
||||
|
||||
function getTrace(counter) {
|
||||
return svg.querySelector(traceSelector(counter));
|
||||
}
|
||||
|
||||
function place(selected, cell) {
|
||||
let points,
|
||||
counterNodeList = getCounterAndClones(svg, selected);
|
||||
|
||||
if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
|
||||
let trace = svg.querySelector(traceSelector(selected));
|
||||
|
||||
let prevCoords = [
|
||||
selected.parentElement.dataset.x,
|
||||
selected.parentElement.parentElement.dataset.y
|
||||
]
|
||||
|
||||
let clone = selected.cloneNode(true);
|
||||
clone.classList.remove(selectedClass);
|
||||
clone.classList.add('clone');
|
||||
|
||||
selected.dataset.previous = prevCoords;
|
||||
selected.parentElement.appendChild(clone);
|
||||
cell.appendChild(selected);
|
||||
|
||||
selected.childNodes.forEach(n => {
|
||||
if (n.classList.contains('removed')) {
|
||||
n.remove();
|
||||
} else if ('preexisting' in n.dataset) {
|
||||
delete n.dataset.preexisting;
|
||||
}
|
||||
});
|
||||
|
||||
let previous = getCellPosition(clone.parentElement),
|
||||
current = getCellPosition(selected.parentElement);
|
||||
|
||||
if (!trace) {
|
||||
trace = document.createElementNS(svgns, 'polyline');
|
||||
|
||||
points = `${previous.x},${previous.y} ${current.x},${current.y}`;
|
||||
|
||||
trace.dataset.number = selected.dataset.number;
|
||||
trace.dataset.allegiance = selected.dataset.allegiance;
|
||||
trace.classList.add('move-trace');
|
||||
|
||||
board.prepend(trace);
|
||||
} else {
|
||||
points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
|
||||
}
|
||||
|
||||
trace.setAttributeNS(null, 'points', points);
|
||||
} else {
|
||||
selected.removeAttribute('data-x');
|
||||
cell.appendChild(selected);
|
||||
}
|
||||
}
|
||||
|
||||
function removeClones(counter) {
|
||||
getClones(svg, counter).forEach(c => c.remove());
|
||||
}
|
||||
|
||||
function endMove(counter) {
|
||||
const trace = svg.querySelector(traceSelector(counter)),
|
||||
proneCounter = counter.querySelector('[href="#counter-prone"]');
|
||||
|
||||
if (trace) {
|
||||
trace.remove();
|
||||
}
|
||||
|
||||
delete counter.dataset.previous;
|
||||
|
||||
if (proneCounter) {
|
||||
proneCounter.dataset.preexisting = '';
|
||||
}
|
||||
|
||||
removeClones(counter);
|
||||
}
|
||||
|
||||
function hasProne(counter) {
|
||||
return !!counter.querySelector('[href="#counter-prone"]');
|
||||
}
|
||||
|
||||
function toggleProne(counter) {
|
||||
let proneCounter = counter.querySelector('[href="#counter-prone"]');
|
||||
|
||||
if (!proneCounter) {
|
||||
proneCounter = document.createElementNS(svgns, 'use');
|
||||
proneCounter.setAttributeNS(null, 'href', '#counter-prone');
|
||||
counter.appendChild(proneCounter);
|
||||
} else if ('preexisting' in proneCounter.dataset) {
|
||||
proneCounter.classList.toggle('removed');
|
||||
} else {
|
||||
proneCounter.remove();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
get selectedClass() {
|
||||
return selectedClass;
|
||||
},
|
||||
endMove,
|
||||
getCounter,
|
||||
hasProne,
|
||||
toggleProne,
|
||||
place,
|
||||
getTrace,
|
||||
removeClones
|
||||
};
|
||||
export function getCounter(svg, selected) {
|
||||
return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
|
||||
}
|
||||
|
||||
export function getTrace(svg, counter) {
|
||||
return svg.querySelector(traceSelector(counter));
|
||||
}
|
||||
|
||||
export function place(svg, selected, cell) {
|
||||
let points,
|
||||
counterNodeList = getCounterAndClones(svg, selected);
|
||||
|
||||
if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
|
||||
let trace = svg.querySelector(traceSelector(selected));
|
||||
|
||||
let prevCoords = [
|
||||
selected.parentElement.dataset.x,
|
||||
selected.parentElement.parentElement.dataset.y
|
||||
]
|
||||
|
||||
let clone = selected.cloneNode(true);
|
||||
clone.classList.remove(selectedClass);
|
||||
clone.classList.add('clone');
|
||||
|
||||
selected.dataset.previous = prevCoords;
|
||||
selected.parentElement.appendChild(clone);
|
||||
cell.appendChild(selected);
|
||||
|
||||
selected.childNodes.forEach(n => {
|
||||
if (n.classList.contains('removed')) {
|
||||
n.remove();
|
||||
} else if ('preexisting' in n.dataset) {
|
||||
delete n.dataset.preexisting;
|
||||
}
|
||||
});
|
||||
|
||||
let previous = getCellPosition(clone.parentElement),
|
||||
current = getCellPosition(selected.parentElement);
|
||||
|
||||
if (!trace) {
|
||||
trace = document.createElementNS(svgns, 'polyline');
|
||||
|
||||
points = `${previous.x},${previous.y} ${current.x},${current.y}`;
|
||||
|
||||
trace.dataset.number = selected.dataset.number;
|
||||
trace.dataset.allegiance = selected.dataset.allegiance;
|
||||
trace.classList.add('move-trace');
|
||||
|
||||
svg.querySelector('.board').prepend(trace);
|
||||
} else {
|
||||
points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
|
||||
}
|
||||
|
||||
trace.setAttributeNS(null, 'points', points);
|
||||
} else {
|
||||
selected.removeAttribute('data-x');
|
||||
cell.appendChild(selected);
|
||||
}
|
||||
}
|
||||
|
||||
export function removeClones(svg, counter) {
|
||||
getClones(svg, counter).forEach(c => c.remove());
|
||||
}
|
||||
|
||||
export function endMove(svg, counter) {
|
||||
const trace = svg.querySelector(traceSelector(counter)),
|
||||
proneCounter = counter.querySelector('[href="#counter-prone"]');
|
||||
|
||||
if (trace) {
|
||||
trace.remove();
|
||||
}
|
||||
|
||||
delete counter.dataset.previous;
|
||||
|
||||
if (proneCounter) {
|
||||
proneCounter.dataset.preexisting = '';
|
||||
}
|
||||
|
||||
removeClones(counter);
|
||||
}
|
||||
|
||||
export function hasProne(counter) {
|
||||
return !!counter.querySelector('[href="#counter-prone"]');
|
||||
}
|
||||
|
||||
export function toggleProne(counter) {
|
||||
let proneCounter = counter.querySelector('[href="#counter-prone"]');
|
||||
|
||||
if (!proneCounter) {
|
||||
proneCounter = document.createElementNS(svgns, 'use');
|
||||
proneCounter.setAttributeNS(null, 'href', '#counter-prone');
|
||||
counter.appendChild(proneCounter);
|
||||
} else if ('preexisting' in proneCounter.dataset) {
|
||||
proneCounter.classList.toggle('removed');
|
||||
} else {
|
||||
proneCounter.remove();
|
||||
}
|
||||
}
|
||||
|
||||
export function getSelectedClass() {
|
||||
return selectedClass;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user