Refactor cell event listeners

src/modules/game/soldier.js

@@ -45,7 +45,7 @@ export function place(svg, selected, cell) {
   let points,
     counterNodeList = getCounterAndClones(svg, selected);
 
-  if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {
+  if (counterNodeList.length > 0 && svg.querySelector('.grid').contains(selected)) {
     let trace = svg.querySelector(traceSelector(selected));
 
     let prevCoords = [

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();
+      const 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);
-        }
+      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) {