diff --git a/src/modules/game.js b/src/modules/game.js index d60eff0..5bc1fe3 100644 --- a/src/modules/game.js +++ b/src/modules/game.js @@ -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(); } } diff --git a/src/modules/game/counter.js b/src/modules/game/counter.js index 21406c8..ff9b0f4 100644 --- a/src/modules/game/counter.js +++ b/src/modules/game/counter.js @@ -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; }