WIP: solution to bringing active element to top?

public/assets/css/map.css

@@ -173,7 +173,7 @@ polygon.firing-arc[data-allegiance="attacker"] {
 /* r: 5px;*/
 /*}*/
 
-g.counter {
+g.counter, g.grid-top {
   r: 5px;
 }
 
@@ -196,6 +196,7 @@ g.counter.selected {
 
 g.counter use.primary-weapon {
   r: inherit;
+  pointer-events: none;
 }
 
 g.counter use.troop-number, g.counter use.squad-number {
@@ -264,12 +265,14 @@ g[data-y]:nth-child(odd) {
   transform: scale(var(--scale));
 }
 
-[data-x]:hover use[href="#hex"], [data-q][data-r][data-s][data-t]:hover use[href="#hex"] {
+[data-x]: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;
 }
-/**/
+
 /*[data-q][data-r][data-s][data-t] g.counter,*/
 /*[data-q][data-r][data-s][data-t] g.counter .troop-number,*/
 /*[data-q][data-r][data-s][data-t] g.counter .squad-number {*/
@@ -497,20 +500,6 @@ text.elevation {
   fill: black;
 }
 
-.radial-icon {
-  transition: cx 0.25s, cy 0.25s;
-}
-
-[data-q][data-r][data-s][data-t] .radial-icon {
-  cx: calc(var(--cx) / 20);
-  cy: calc(var(--cy) / 20);
-}
-
-[data-q][data-r][data-s][data-t]:hover .radial-icon {
-  cx: var(--cx);
-  cy: var(--cy);
-}
-
 use[class^="counter-"] {
   --scale: 1;
   --translateX: -5px;
@@ -541,14 +530,18 @@ g.counter use[class^="counter-"] {
 }
 
 /* Counters placed on a hex */
-[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-"],
+[data-q][data-r][data-s][data-t].hover > g.counter ~ use[class^="counter-"],
+.grid-top use[class^="counter-"] {
   x: calc(var(--x) * 2);
   y: calc(var(--y) * 2);
   --translateY: -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-"],
+[data-q][data-r][data-s][data-t].hover > use[class^="counter-"] {
   x: calc(var(--x) * 1.5);
   y: calc(var(--y) * 1.5);
   --translateY: -5px;
 }
+

src/modules/gameboard.js

@@ -6,6 +6,10 @@ import { Observable } from "./observable";
 let svg,
   placing = [];
 
+const top = {
+  collection: new Map()
+};
+
 function getCellContents(cell) {
   return cell.querySelectorAll('*:not(use[href="#hex"])');
 }
@@ -19,7 +23,7 @@ function getHex(cell) {
 }
 
 function getCellOccupant(cell) {
-  return cell.querySelector('.counter');
+  return cell.querySelector('.counter') || svg.querySelector('.grid-top .counter');
 }
 
 function getCells(svg) {
@@ -203,23 +207,22 @@ function endMove() {
   }
 }
 
-function returnPieces(top) {
+async function returnToParent(top) {
-  [...top.container.children].forEach(piece => {
+  //[...top.container.children].forEach(child => {
-    top.collection.get(piece).parent.append(piece);
+  top.container.querySelectorAll('*:not(use[href="#hex"]').forEach(child => {
-    top.collection.delete(piece);
+    top.collection.get(child).parent.append(child);
+    top.collection.delete(child);
   });
 }
 
 export function start(el) {
   svg = el;
+  top.container = svg.querySelector('.grid-top');
 
   const startingLocations = svg.querySelector('.start-locations');
   startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
 
-  const top = {
+  svg.addEventListener('pointerout', e => console.log('pointerout svg'));
-    container: svg.querySelector('.grid-top'),
-    collection: new Map()
-  };
 
   getCells(svg).forEach(cell => {
     cell.addEventListener('click', e => {
@@ -227,8 +230,11 @@ export function start(el) {
       let toPlace = placing.pop();
 
       if (isCounter(toPlace) || isMechTemplate(toPlace)) {
-        getHex(cell).after(toPlace);
+        //getHex(cell).after(toPlace);
-        if (isCounter(toPlace)) arrangeCounters(cell);
+        top.collection.set(toPlace, { parent: cell });
+        top.container.append(toPlace);
+        //if (isCounter(toPlace)) arrangeCounters(cell);
+        if (isCounter(toPlace)) arrangeCounters(top.container);
         removeEventListener("keydown", handleMechTemplateRotation);
       } else if (toPlace && !occupant) {
         soldier.place(svg, toPlace, cell);
@@ -289,10 +295,24 @@ export function start(el) {
     });
 
     cell.addEventListener('pointerover', () => {
-      if (!top.container.contains(cell)) {
+      if (!cell.classList.contains('hover')) {
-        returnPieces(top);
+        [...top.container.children].forEach(child => {
-        top.collection.set(cell, { parent: cell.parentElement });
+          if (!cell.contains(child)) {
-        top.container.append(cell);
+            top.collection.get(child).parent.append(child);
+            top.collection.delete(child);
+          }
+        });
+
+        top.container.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
+
+        [...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');
       }
 
       const selected = getSelected();
@@ -314,6 +334,7 @@ export function start(el) {
     });
 
     cell.addEventListener('pointerout', () => {
+      console.log('pointerout cell', cell);
       getActiveSightLine(svg) && clearSightLine();
 
       const occupant = getCellOccupant(cell);
@@ -324,16 +345,22 @@ export function start(el) {
     });
   });
 
+  //const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]');
+  //const povr = new PointerEvent('pointerover');
+  //const pout = new PointerEvent('pointerout');
+  //cell.dispatchEvent(povr);
+  //cell.dispatchEvent(pout);
+
   // debug //
   // Add a trooper counter
-  //const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+  const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
   // const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
-  //const cell = getCell(0, 0, 0, 0);
+  const cell = getCell(0, 0, 0, 0);
-  //const trooper = soldier.createCounter(attacker, 'blazer');
+  const trooper = soldier.createCounter(attacker, 'blazer');
   //const trooperSack = document.createElementNS(svgns, 'g');
   //trooperSack.classList.add('cell-contents');
   //trooperSack.append(trooper);
-  //soldier.place(svg, trooperSack, cell);
+  soldier.place(svg, trooper, cell);
 
   // Add some counters in an unoccupied cell
   //const countersCell = getCell(-1, 1, 0, 0);
@@ -379,6 +406,7 @@ export function setFiringArc() {
     isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-q');
 
   if (isOnBoard(counter)) {
+    returnToParent(top);
     firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));
   }
 }