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

Remove 'reveal pattern' from counter module

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-27 12:34:07 -07:00
parent 25c74d9a8e
commit b88945ced6
2 changed files with 116 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/modules/game.js
View File

@ -1,6 +1,6 @@
import * as firingArc from './game/firingArc.js'; import * as firingArc from './game/firingArc.js';
import * as sightLine from './game/sightLine.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"; const svgns = "http://www.w3.org/2000/svg";
@ -113,7 +113,7 @@ function drawSightLine(sourceCell, targetCell) {
let svg, distanceCallback, proneFlagCallback, selectCallback; let svg, distanceCallback, proneFlagCallback, selectCallback;
let board, counterMod, let board,
placing = []; placing = [];
export function setDistanceCallback(callback) { export function setDistanceCallback(callback) {
@ -131,7 +131,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');
counterMod = Counter(svg, board);
getCells(svg).forEach(cell => { getCells(svg).forEach(cell => {
cell.addEventListener('click', e => { cell.addEventListener('click', e => {
@ -147,7 +146,7 @@ export function start(el) {
if (isGrenade(toPlace)) { if (isGrenade(toPlace)) {
state.hex.after(toPlace); state.hex.after(toPlace);
} else if (toPlace && !state.occupant) { } else if (toPlace && !state.occupant) {
counterMod.place(toPlace, cell); counterMod.place(svg, toPlace, cell);
placing.push(toPlace); placing.push(toPlace);
const lockedSl = getLockedSightLine(svg); const lockedSl = getLockedSightLine(svg);
@ -159,11 +158,11 @@ export function start(el) {
} else if (toPlace && state.occupant) { } else if (toPlace && state.occupant) {
if (toPlace === state.occupant) { if (toPlace === state.occupant) {
if ('previous' in toPlace.dataset) { if ('previous' in toPlace.dataset) {
const trace = counterMod.getTrace(toPlace); const trace = counterMod.getTrace(svg, toPlace);
toPlace.remove(); toPlace.remove();
toPlace = getCounterAtGridIndex(...toPlace.dataset.previous.split(',')); toPlace = getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
toPlace.classList.remove('clone'); toPlace.classList.remove('clone');
toPlace.classList.add(counterMod.selectedClass); toPlace.classList.add(counterMod.getSelectedClass());
if (!('previous' in toPlace.dataset)) { if (!('previous' in toPlace.dataset)) {
trace.remove(); trace.remove();
} else { } else {
@ -188,11 +187,11 @@ export function start(el) {
if (isClone(state.occupant).of(toPlace)) { if (isClone(state.occupant).of(toPlace)) {
if (!('previous' in state.occupant.dataset)) { if (!('previous' in state.occupant.dataset)) {
state.occupant.classList.remove('clone'); state.occupant.classList.remove('clone');
state.occupant.classList.add(counterMod.selectedClass); state.occupant.classList.add(counterMod.getSelectedClass());
toPlace.remove(); toPlace.remove();
toPlace = state.occupant; toPlace = state.occupant;
counterMod.removeClones(toPlace); counterMod.removeClones(svg, toPlace);
counterMod.getTrace(toPlace).remove(); counterMod.getTrace(svg, toPlace).remove();
const lockedSl = getLockedSightLine(svg); const lockedSl = getLockedSightLine(svg);
if (!lockedSl) { if (!lockedSl) {
@ -202,7 +201,7 @@ export function start(el) {
} }
} else { } else {
const index = getGridIndex(state.occupant), const index = getGridIndex(state.occupant),
trace = counterMod.getTrace(toPlace), trace = counterMod.getTrace(svg, toPlace),
pos = getCellPosition(cell), pos = getCellPosition(cell),
points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');; points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
@ -283,18 +282,18 @@ export function start(el) {
}); });
// debug // debug
const c = counterMod.getCounter({ dataset: { allegiance: 'davion', number: '1' }}); const c = counterMod.getCounter(svg, { dataset: { allegiance: 'davion', number: '1' }});
counterMod.place(c, getCell(17, 25)); counterMod.place(svg, c, getCell(17, 25));
select(c); select(c);
} }
export function select(selected) { export function select(selected) {
const counter = counterMod.getCounter(selected); const counter = counterMod.getCounter(svg, selected);
if (counter) { if (counter) {
unSelect(); unSelect();
placing.push(counter); placing.push(counter);
counter.classList.add(counterMod.selectedClass); counter.classList.add(counterMod.getSelectedClass());
firingArc.get(svg, 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 });
} }
@ -305,7 +304,7 @@ export function unSelect() {
if (selected) { if (selected) {
placing = []; placing = [];
getSelected().classList.remove(counterMod.selectedClass); getSelected().classList.remove(counterMod.getSelectedClass());
clearSightLine(); clearSightLine();
firingArc.clipAll(svg); firingArc.clipAll(svg);
} }
@ -315,7 +314,7 @@ export function endMove() {
const selected = getSelected(); const selected = getSelected();
if (selected) { if (selected) {
counterMod.endMove(selected); counterMod.endMove(svg, selected);
unSelect(); unSelect();
} }
} }

213
src/modules/game/counter.js
View File

@ -30,116 +30,105 @@ function getCounterAndClones(svg, counter) {
return svg.querySelectorAll(`.counter${dataSelector(counter)}`); return svg.querySelectorAll(`.counter${dataSelector(counter)}`);
} }
export default function (svg, board) { export function getCounter(svg, selected) {
function getCounter(selected) { return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`); }
}
export function getTrace(svg, counter) {
function getTrace(counter) { return svg.querySelector(traceSelector(counter));
return svg.querySelector(traceSelector(counter)); }
}
export function place(svg, selected, cell) {
function place(selected, cell) { let points,
let points, counterNodeList = getCounterAndClones(svg, selected);
counterNodeList = getCounterAndClones(svg, selected);
if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) { let trace = svg.querySelector(traceSelector(selected));
let trace = svg.querySelector(traceSelector(selected));
let prevCoords = [
let prevCoords = [ selected.parentElement.dataset.x,
selected.parentElement.dataset.x, selected.parentElement.parentElement.dataset.y
selected.parentElement.parentElement.dataset.y ]
]
let clone = selected.cloneNode(true);
let clone = selected.cloneNode(true); clone.classList.remove(selectedClass);
clone.classList.remove(selectedClass); clone.classList.add('clone');
clone.classList.add('clone');
selected.dataset.previous = prevCoords;
selected.dataset.previous = prevCoords; selected.parentElement.appendChild(clone);
selected.parentElement.appendChild(clone); cell.appendChild(selected);
cell.appendChild(selected);
selected.childNodes.forEach(n => {
selected.childNodes.forEach(n => { if (n.classList.contains('removed')) {
if (n.classList.contains('removed')) { n.remove();
n.remove(); } else if ('preexisting' in n.dataset) {
} else if ('preexisting' in n.dataset) { delete n.dataset.preexisting;
delete n.dataset.preexisting; }
} });
});
let previous = getCellPosition(clone.parentElement),
let previous = getCellPosition(clone.parentElement), current = getCellPosition(selected.parentElement);
current = getCellPosition(selected.parentElement);
if (!trace) {
if (!trace) { trace = document.createElementNS(svgns, 'polyline');
trace = document.createElementNS(svgns, 'polyline');
points = `${previous.x},${previous.y} ${current.x},${current.y}`;
points = `${previous.x},${previous.y} ${current.x},${current.y}`;
trace.dataset.number = selected.dataset.number;
trace.dataset.number = selected.dataset.number; trace.dataset.allegiance = selected.dataset.allegiance;
trace.dataset.allegiance = selected.dataset.allegiance; trace.classList.add('move-trace');
trace.classList.add('move-trace');
svg.querySelector('.board').prepend(trace);
board.prepend(trace); } else {
} else { points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
points = `${trace.getAttribute('points')} ${current.x},${current.y}`; }
}
trace.setAttributeNS(null, 'points', points);
trace.setAttributeNS(null, 'points', points); } else {
} else { selected.removeAttribute('data-x');
selected.removeAttribute('data-x'); cell.appendChild(selected);
cell.appendChild(selected); }
} }
}
export function removeClones(svg, counter) {
function removeClones(counter) { getClones(svg, counter).forEach(c => c.remove());
getClones(svg, counter).forEach(c => c.remove()); }
}
export function endMove(svg, counter) {
function endMove(counter) { const trace = svg.querySelector(traceSelector(counter)),
const trace = svg.querySelector(traceSelector(counter)), proneCounter = counter.querySelector('[href="#counter-prone"]');
proneCounter = counter.querySelector('[href="#counter-prone"]');
if (trace) {
if (trace) { trace.remove();
trace.remove(); }
}
delete counter.dataset.previous;
delete counter.dataset.previous;
if (proneCounter) {
if (proneCounter) { proneCounter.dataset.preexisting = '';
proneCounter.dataset.preexisting = ''; }
}
removeClones(counter);
removeClones(counter); }
}
export function hasProne(counter) {
function hasProne(counter) { return !!counter.querySelector('[href="#counter-prone"]');
return !!counter.querySelector('[href="#counter-prone"]'); }
}
export function toggleProne(counter) {
function toggleProne(counter) { let proneCounter = counter.querySelector('[href="#counter-prone"]');
let proneCounter = counter.querySelector('[href="#counter-prone"]');
if (!proneCounter) {
if (!proneCounter) { proneCounter = document.createElementNS(svgns, 'use');
proneCounter = document.createElementNS(svgns, 'use'); proneCounter.setAttributeNS(null, 'href', '#counter-prone');
proneCounter.setAttributeNS(null, 'href', '#counter-prone'); counter.appendChild(proneCounter);
counter.appendChild(proneCounter); } else if ('preexisting' in proneCounter.dataset) {
} else if ('preexisting' in proneCounter.dataset) { proneCounter.classList.toggle('removed');
proneCounter.classList.toggle('removed'); } else {
} else { proneCounter.remove();
proneCounter.remove(); }
} }
}
export function getSelectedClass() {
return { return selectedClass;
get selectedClass() {
return selectedClass;
},
endMove,
getCounter,
hasProne,
toggleProne,
place,
getTrace,
removeClones
};
} }