1 files changed, 34 insertions, 40 deletions
diff --git a/src/modules/game.js b/src/modules/game.js
index a81cb5f..ff9937b 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -133,9 +133,6 @@ export default class Game {
 
   setUpCells() {
     this.getCells().forEach(cell => {
-      let group = cell,
-        point = this.getHex(cell);
-
       function isGrenade(el) {
         return el && el.getAttribute('href') === '#counter-grenade';
       }
@@ -164,7 +161,7 @@ export default class Game {
         if (isGrenade(toPlace)) {
           state.hex.after(toPlace);
         } else if (toPlace && !state.occupant) {
-          this.counter.place(point);
+          this.counter.place(this.getHex(cell));
           this.placing.push(toPlace);
           const lockedSl = this.svg.querySelector('.sight-line:not(.active)');
 
@@ -247,33 +244,6 @@ export default class Game {
         }
       });
 
-      // point.addEventListener('click', e => {
-      //   const toPlace = this.placing.pop();
-
-      //   // TODO
-      //   let existingOccupant =
-      //     this.svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
-
-      //   if (toPlace && toPlace.getAttribute('href') === '#counter-grenade') {
-      //     point.after(toPlace);
-      //     return;
-      //   }
-
-      //   if (this.getSelected() && !existingOccupant) {
-      //     let sl = this.svg.querySelector('.sight-line');
-      //     this.placing.push(toPlace);
-      //     this.counter.place(point);
-
-      //     if (sl) {
-      //       if (sl.classList.contains('active')) {
-      //         this.sightLine.clear();
-      //       } else {
-      //         this.sightLine.update(point, this.getCellPosition(point.parentElement));
-      //       }
-      //     }
-      //   }
-      // });
-
       // Logic for this event:
       // If there's a locked sightline, unlock it. Otherwise, if there's an
       // active sightline, lock it.
@@ -284,8 +254,9 @@ export default class Game {
 
       // There is a locked sightline when there is a selected soldier, its
       // counter is on the board, and one cell has the 'sight-line-target' class.
-      group.addEventListener('contextmenu', e => {
+      cell.addEventListener('contextmenu', e => {
         e.preventDefault();
+
         let sl = this.svg.querySelector('.sight-line');
 
         if (sl) {
@@ -294,14 +265,14 @@ export default class Game {
           if (sl.classList.contains('active')) {
             this.sightLine.clear();
           } else {
-            group.querySelector(`use[href="#hex"]`).classList.add('sight-line-target');
+            cell.querySelector(`use[href="#hex"]`).classList.add('sight-line-target');
           }
 
-          group.dispatchEvent(new MouseEvent('pointerover'));
+          cell.dispatchEvent(new MouseEvent('pointerover'));
         }
       });
 
-      group.addEventListener('pointerover', e => {
+      cell.addEventListener('pointerover', e => {
         let selected = this.getSelected();
 
         if (selected) {
@@ -309,26 +280,49 @@ export default class Game {
             isOnBoard = selected.parentElement.hasAttribute('data-x'),
             sourceCell = selected.parentElement;
 
-          if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != group) {
-            this.sightLine.draw(sourceCell, group);
+          if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != cell) {
+            this.sightLine.draw(sourceCell, cell);
+          }
+        }
+
+        let occupant = cell.querySelector('use[href*="#t-"');
+
+        if (occupant) {
+          const { number, allegiance } = occupant.dataset;
+          const cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`);
+
+          if (cp) {
+            cp.style.display = 'none';
           }
         }
       });
 
-      group.addEventListener('pointerout', e => {
+      cell.addEventListener('pointerout', e => {
         let sl = this.svg.querySelector('.sight-line.active');
 
         if (sl && sl.classList.contains('active')) {
           this.sightLine.clear();
         }
+
+        let occupant = cell.querySelector('use[href*="#t-"');
+
+        if (occupant) {
+          let { number, allegiance } = occupant.dataset,
+            cp = this.svg.querySelector(`#clip-path-${allegiance}-${number}`);
+
+          if (cp) {
+            cp.style.display = this.#firingArcVisibility[allegiance] ? 'none' : '';
+          }
+        }
       });
     });
   }
 
   setFiringArc(size) {
-    const counter = this.getSelected();
+    const counter = this.getSelected(),
+      isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
 
-    if (counter) {
+    if (isOnBoard(counter)) {
       const { allegiance, number } = counter.dataset,
         cellPosition = this.getCellPosition(counter.parentElement);