Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/modules/gameboard.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-30 14:12:46 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-30 14:12:46 -0700
commit09514b6c0cab3904cb4d5bc6bc8560f2293bed0e (patch)
treebb69c22c9f077de2af1eb9100806454431b7e02a /src/modules/gameboard.js
parent82d3a4b415ba920176058d615b697e84a49adabc (diff)
Refactor cell event listeners
Diffstat (limited to 'src/modules/gameboard.js')
-rw-r--r--src/modules/gameboard.js159
1 files changed, 73 insertions, 86 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 47533dd..678f828 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -113,6 +113,55 @@ function drawSightLine(sourceCell, targetCell) {
distanceCallback && distanceCallback(hexes.length - 1);
}
+function moveBackOneStepInHistory(counter) {
+ const trace = soldier.getTrace(svg, counter);
+ counter.remove();
+ counter = getCounterAtGridIndex(...counter.dataset.previous.split(','));
+ counter.classList.remove('clone');
+ counter.classList.add(soldier.getSelectedClass());
+ if (!('previous' in counter.dataset)) {
+ trace.remove();
+ } else {
+ const points = trace.getAttribute('points').split(' ');
+ points.pop();
+ trace.setAttributeNS(null, 'points', points.join(' '));
+ }
+
+ return counter;
+}
+
+function clearMoveHistory(clone, counter) {
+ clone.classList.remove('clone');
+ clone.classList.add(soldier.getSelectedClass());
+ counter.remove();
+ counter = clone;
+ soldier.removeClones(svg, counter);
+ soldier.getTrace(svg, counter).remove();
+
+ return counter;
+}
+
+function deleteClone(occupant, counter, cell) {
+ const index = getGridIndex(occupant),
+ trace = soldier.getTrace(svg, counter),
+ pos = getCellPosition(cell),
+ points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
+
+ let current = counter;
+ trace.setAttributeNS(null, 'points', points);
+
+ while (current.dataset.previous != `${index.x},${index.y}`) {
+ current = getCounterAtGridIndex(...current.dataset.previous.split(','));
+ }
+
+ current.dataset.previous = occupant.dataset.previous;
+ occupant.remove();
+}
+
+function hasPreviousMoveInHistory(counter) {
+ return 'previous' in counter.dataset;
+}
+
export function getUnits() {
return soldier.getAllCounters(svg);
}
@@ -134,84 +183,42 @@ export function start(el) {
getCells(svg).forEach(cell => {
cell.addEventListener('click', e => {
- const state = {
- placing: placing,
- hex: getHex(cell),
- occupant: getCellOccupant(cell),
- contents: getCellContents(cell)
- };
-
+ const occupant = getCellOccupant(cell);
let toPlace = placing.pop();
if (isGrenade(toPlace)) {
- state.hex.after(toPlace);
- } else if (toPlace && !state.occupant) {
+ getHex(cell).after(toPlace);
+ } else if (toPlace && !occupant) {
soldier.place(svg, toPlace, cell);
placing.push(toPlace);
getLockedSightLine(svg) ? updateSightLine(cell) : clearSightLine();
- } else if (toPlace && state.occupant) {
- if (toPlace === state.occupant) {
- if ('previous' in toPlace.dataset) {
- const trace = soldier.getTrace(svg, toPlace);
- toPlace.remove();
- toPlace = getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
- toPlace.classList.remove('clone');
- toPlace.classList.add(soldier.getSelectedClass());
- if (!('previous' in toPlace.dataset)) {
- trace.remove();
- } else {
- const points = trace.getAttribute('points').split(' ');
- points.pop();
- trace.setAttributeNS(null, 'points', points.join(' '));
- }
+ } else if (toPlace && occupant) {
+ if (toPlace === occupant) {
+ if (hasPreviousMoveInHistory(toPlace)) {
+ toPlace = moveBackOneStepInHistory(toPlace);
placing.push(toPlace);
- const lockedSl = getLockedSightLine(svg);
-
- if (!lockedSl) {
- clearSightLine();
- } else {
- updateSightLine(toPlace.parentElement);
- }
+ getLockedSightLine(svg) ? updateSightLine(toPlace.parentElement) : drawSightLine(toPlace.parentElement, cell);
} else {
unSelect();
}
- } else if (!state.occupant.classList.contains('clone')) {
- select(state.occupant);
+ } else if (!occupant.classList.contains('clone')) {
+ select(occupant);
} else {
- if (isClone(state.occupant).of(toPlace)) {
- if (!('previous' in state.occupant.dataset)) {
- state.occupant.classList.remove('clone');
- state.occupant.classList.add(soldier.getSelectedClass());
- toPlace.remove();
- toPlace = state.occupant;
- soldier.removeClones(svg, toPlace);
- soldier.getTrace(svg, toPlace).remove();
- getLockedSightLine(svg) ? updateSightLine(cell) : clearSightLine();
+ if (isClone(occupant).of(toPlace)) {
+ if (hasPreviousMoveInHistory(occupant)) {
+ deleteClone(occupant, toPlace, cell);
} else {
- const index = getGridIndex(state.occupant),
- trace = soldier.getTrace(svg, toPlace),
- pos = getCellPosition(cell),
- points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
-
- let current = toPlace;
-
- trace.setAttributeNS(null, 'points', points);
-
- while (current.dataset.previous != `${index.x},${index.y}`) {
- current = getCounterAtGridIndex(...current.dataset.previous.split(','));
- }
-
- current.dataset.previous = state.occupant.dataset.previous;
- state.occupant.remove();
+ toPlace = clearMoveHistory(occupant, toPlace);
+ getLockedSightLine(svg) ? updateSightLine(cell) : clearSightLine();
}
}
placing.push(toPlace);
}
- } else if (!toPlace && state.occupant) {
- select(state.occupant);
+ } else if (!toPlace && occupant) {
+ select(occupant);
} else {
console.log('removing cell contents');
- state.contents.forEach(el => el.remove());
+ getCellContents(cell).forEach(el => el.remove());
}
});
@@ -235,22 +242,11 @@ export function start(el) {
});
cell.addEventListener('pointerover', () => {
- // should we draw a sight line?
- // conditions:
- // we have a soldier selected
- // that soldier's counter is on the board
- // the sight line is not locked
- let selected = getSelected();
-
- if (selected) {
- let sl = getSightLine(),
- isOnBoard = selected.parentElement.hasAttribute('data-x'),
- sourceCell = selected.parentElement;
-
- if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != cell) {
- clearSightLine();
- drawSightLine(sourceCell, cell);
- }
+ const selected = getSelected();
+
+ if (selected && svg.querySelector('.grid').contains(selected) && !getLockedSightLine(svg) && cell !== selected.parentElement) {
+ clearSightLine();
+ drawSightLine(selected.parentElement, cell);
}
let occupant = getCellOccupant(cell);
@@ -261,11 +257,7 @@ export function start(el) {
});
cell.addEventListener('pointerout', () => {
- let sl = getActiveSightLine(svg);
-
- if (sl) {
- clearSightLine();
- }
+ getActiveSightLine(svg) && clearSightLine();
let occupant = getCellOccupant(cell);
@@ -274,11 +266,6 @@ export function start(el) {
}
});
});
-
- // debug
- // const c = soldier.getCounter(svg, { dataset: { allegiance: 'davion', number: '1' }});
- // soldier.place(svg, c, getCell(17, 25));
- // select(c);
}
export function select(selected) {