Handle clicks in grid-top cell

public/assets/css/map.css

@@ -265,9 +265,7 @@ g[data-y]:nth-child(odd) {
   transform: scale(var(--scale));
 }
 
-[data-x]:hover use[href="#hex"],
+.grid-top:hover use[href="#hex"] {
-[data-q][data-r][data-s][data-t]:hover use[href="#hex"],
-[data-q][data-r][data-s][data-t].hover use[href="#hex"] {
   opacity: 1;
   fill: orange;
   stroke: black;
@@ -512,21 +510,21 @@ g.counter use[class^="counter-"] {
 }
 
 [data-q][data-r][data-s][data-t] > use[class^="counter-"],
-.grid-top > use[class^="counter-"] {
+.grid-top .container > use[class^="counter-"] {
   --translateX: calc(var(--x) / 6 - 5px);
   --translateY: calc(var(--y) / 6 - 5px);
 }
 
 [data-q][data-r][data-s][data-t]:hover > g.counter ~ use[class^="counter-"],
 [data-q][data-r][data-s][data-t].hover > g.counter ~ use[class^="counter-"],
-.grid-top > g.counter ~ use[class^="counter-"] {
+.grid-top .container > g.counter ~ use[class^="counter-"] {
   --translateX: calc(var(--x) * 2 - 5px);
   --translateY: calc(var(--y) * 2 - 5px);
 }
 
 [data-q][data-r][data-s][data-t]:hover > use[class^="counter-"],
 [data-q][data-r][data-s][data-t].hover > use[class^="counter-"],
-.grid-top > use[class^="counter-"] {
+.grid-top .container > use[class^="counter-"] {
   --translateX: calc(var(--x) * 1.5 - 5px);
   --translateY: calc(var(--y) * 1.5 - 5px);
 }

public/assets/images/scenario_template.svg

@@ -63,6 +63,9 @@
     </g>
 
     <g class="grid"/>
-    <g class="grid-top"/>
+    <g class="grid-top">
+      <use href="#hex"/>
+      <g class="container"/>
+    </g>
   </g>
 </svg>

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')) {
+      console.log(['pointerenter', cell]);
-        [...top.container.children].forEach(child => {
-          if (!cell.contains(child)) {
-            top.collection.get(child).parent.append(child);
-            top.collection.delete(child);
-          }
-        });
 
-        top.container.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
+      top.cell = cell;
 
-        [...cell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex').forEach(child => {
+      [...top.container.children].forEach(child => {
-          if (!top.container.contains(child)) {
+        top.collection.get(child).parent.append(child);
-            top.collection.set(child, { parent: cell });
+        top.collection.delete(child);
-            top.container.append(child);
+      });
-          }
-        });
-        svg.querySelectorAll('g.hover').forEach(el => el.classList.remove('hover'));
-        cell.classList.add('hover');
-      }
 
+      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) {
+      //if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) {
-        [...top.container.children].forEach(child => {
+      //  [...top.container.children].forEach(child => {
-          top.collection.get(child).parent.append(child);
+      //    top.collection.get(child).parent.append(child);
-          top.collection.delete(child);
+      //    top.collection.delete(child);
-        });
+      //  });
-
+      //
-        cell.classList.remove('hover');
+      //  cell.classList.remove('hover');
-        getActiveSightLine(svg) && clearSightLine();
+      //  getActiveSightLine(svg) && clearSightLine();
-
+      //
-        const occupant = getCellOccupant(cell);
+      //  const occupant = getCellOccupant(cell);
-
+      //
-        if (occupant) {
+      //  if (occupant) {
-          firingArc.toggleCounterVisibility(svg, occupant, false);
+      //    firingArc.toggleCounterVisibility(svg, occupant, false);
-        }
+      //  }
-      }
+      //}
-    });
+    //});
   });
 
   //const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]');