diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js index db5fd3d..8e2725d 100644 --- a/src/modules/game/soldier.js +++ b/src/modules/game/soldier.js @@ -25,6 +25,56 @@ function getClones(svg, counter) { return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`); } +function addMoveToHistory(selected) { + const clone = selected.cloneNode(true); + clone.classList.remove(selectedClass); + clone.classList.add('clone'); + selected.parentElement.appendChild(clone); + + return clone; +} + +function updatePlacement(cell, selected, clone) { + const prevCoords = [ + clone.parentElement.dataset.x, + clone.parentElement.parentElement.dataset.y + ] + + selected.dataset.previous = prevCoords; + cell.appendChild(selected); + + selected.childNodes.forEach(n => { + if (n.classList.contains('removed')) { + n.remove(); + } else if ('preexisting' in n.dataset) { + delete n.dataset.preexisting; + } + }); +} + +function createTrace(previous, current, selected) { + const trace = document.createElementNS(svgns, 'polyline'); + + trace.dataset.number = selected.dataset.number; + trace.dataset.allegiance = selected.dataset.allegiance; + trace.classList.add('move-trace'); + trace.setAttributeNS(null, 'points', `${previous.x},${previous.y} ${current.x},${current.y}`); + + return trace; +} + +export function handleTrace(svg, selected, clone, current) { + let trace = getTrace(svg, selected); + + if (!trace) { + trace = createTrace(getCellPosition(clone.parentElement), current, selected); + svg.querySelector('.gameboard').prepend(trace); + } else { + const points = `${trace.getAttribute('points')} ${current.x},${current.y}`; + trace.setAttributeNS(null, 'points', points); + } +} + export function getAllCounters(container) { return container.querySelectorAll('g.counter[data-allegiance][data-number]'); } @@ -39,48 +89,9 @@ export function getTrace(svg, counter) { export function place(svg, selected, cell) { if (svg.querySelector('.grid').contains(selected)) { - 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), - points; - - 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('.gameboard').prepend(trace); - } else { - points = `${trace.getAttribute('points')} ${current.x},${current.y}`; - } - - trace.setAttributeNS(null, 'points', points); + const clone = addMoveToHistory(selected); + updatePlacement(cell, selected, clone) + handleTrace(svg, selected, clone, getCellPosition(cell)); } else { selected.removeAttribute('data-x'); cell.appendChild(selected);