1 files changed, 90 insertions, 44 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 5cf0c51..26e6c44 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -207,23 +207,71 @@ function endMove() {
   }
 }
 
-async function returnToParent(top) {
-  //[...top.container.children].forEach(child => {
-  top.container.querySelectorAll('*:not(use[href="#hex"]').forEach(child => {
-    top.collection.get(child).parent.append(child);
-    top.collection.delete(child);
-  });
-}
-
 export function start(el) {
   svg = el;
-  top.container = svg.querySelector('.grid-top');
+  const gridTop = svg.querySelector('.grid-top');
+  top.container = svg.querySelector('.grid-top > .container');
+  const topHex = svg.querySelector('.grid-top > use[href="#hex"]');
+
+  gridTop.addEventListener('pointerleave', e => {
+    // Work around webkit bug https://bugs.webkit.org/show_bug.cgi?id=233432
+    const elUnderCursor = svg.parentNode.elementFromPoint(e.clientX, e.clientY);
+    if (!e.target.contains(elUnderCursor)) {
+      console.log(['pointerleave', gridTop]);
+      [...top.container.children].forEach(child => {
+        top.collection.get(child).parent.append(child);
+        top.collection.delete(child);
+      });
+
+      top.cell = null;
+    }
+  });
+
+  topHex.addEventListener('click', clickHandler);
 
   const startingLocations = svg.querySelector('.start-locations');
   startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
 
+  function clickHandler(e) {
+    console.log('top hex click event');
+    //const occupant = getCellOccupant(this);
+    const occupant = svg.querySelector('.grid-top .container .counter')
+    let toPlace = placing.pop();
+
+    if (isCounter(toPlace) || isMechTemplate(toPlace)) {
+      //getHex(this).after(toPlace);
+      top.collection.set(toPlace, { parent: top.cell });
+      top.container.append(toPlace);
+      //if (isCounter(toPlace)) arrangeCounters(this);
+      if (isCounter(toPlace)) arrangeCounters(top.container);
+      removeEventListener("keydown", handleMechTemplateRotation);
+    } else if (toPlace && !occupant) {
+      //soldier.place(svg, toPlace, this);
+      top.collection.set(toPlace, { parent: top.cell });
+      top.container.append(toPlace);
+      //toPlace.removeEventListener('click', selectOffBoard);
+      placing.push(toPlace);
+      //getLockedSightLine(svg) ? updateSightLine(this) : clearSightLine();
+    } else if (toPlace && occupant) {
+      if (toPlace === occupant) {
+        Observable.notify('select');
+      } else {
+        Observable.notify('select', occupant);
+      }
+    } else if (!toPlace && occupant) {
+      Observable.notify('select', occupant);
+    } else {
+      console.log(['removing this contents', this]);
+      getCellContents(this).forEach(el => el.remove());
+    }
+
+    const selected = getSelected();
+    //Observable.notify('proneflag', selected && soldier.hasProne(selected));
+  }
+
   getCells(svg).forEach(cell => {
     cell.addEventListener('click', e => {
+      console.log('cell clickevent');
       const occupant = getCellOccupant(cell);
       let toPlace = placing.pop();
 
@@ -293,26 +341,23 @@ export function start(el) {
     });
 
     cell.addEventListener('pointerover', () => {
-      if (!cell.classList.contains('hover')) {
-        [...top.container.children].forEach(child => {
-          if (!cell.contains(child)) {
-            top.collection.get(child).parent.append(child);
-            top.collection.delete(child);
-          }
-        });
+      console.log(['pointerenter', cell]);
 
-        top.container.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
+      top.cell = cell;
 
-        [...cell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex').forEach(child => {
-          if (!top.container.contains(child)) {
-            top.collection.set(child, { parent: cell });
-            top.container.append(child);
-          }
-        });
-        svg.querySelectorAll('g.hover').forEach(el => el.classList.remove('hover'));
-        cell.classList.add('hover');
-      }
+      [...top.container.children].forEach(child => {
+        top.collection.get(child).parent.append(child);
+        top.collection.delete(child);
+      });
+
+      top.container.parentElement.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
+
+      [...cell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex').forEach(child => {
+        top.collection.set(child, { parent: cell });
+        top.container.append(child);
+      });
 
+      let occupant = svg.querySelector('.grid-top .container .counter');
       const selected = getSelected();
 
       if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') {
@@ -324,32 +369,33 @@ export function start(el) {
         drawSightLine(selected.parentElement, cell);
       }
 
-      let occupant = getCellOccupant(cell);
+      occupant = getCellOccupant(cell);
 
       if (occupant) {
         firingArc.toggleCounterVisibility(svg, occupant, true);
       }
     });
 
-    cell.addEventListener('pointerout', e => {
+    //cell.addEventListener('pointerout', e => {
+    //  console.log('pointerout');
       // If pointerout was not triggered by hovering over an element on that
       // game hex
-      if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) {
-        [...top.container.children].forEach(child => {
-          top.collection.get(child).parent.append(child);
-          top.collection.delete(child);
-        });
-
-        cell.classList.remove('hover');
-        getActiveSightLine(svg) && clearSightLine();
-
-        const occupant = getCellOccupant(cell);
-
-        if (occupant) {
-          firingArc.toggleCounterVisibility(svg, occupant, false);
-        }
-      }
-    });
+      //if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) {
+      //  [...top.container.children].forEach(child => {
+      //    top.collection.get(child).parent.append(child);
+      //    top.collection.delete(child);
+      //  });
+      //
+      //  cell.classList.remove('hover');
+      //  getActiveSightLine(svg) && clearSightLine();
+      //
+      //  const occupant = getCellOccupant(cell);
+      //
+      //  if (occupant) {
+      //    firingArc.toggleCounterVisibility(svg, occupant, false);
+      //  }
+      //}
+    //});
   });
 
   //const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]');