1 files changed, 47 insertions, 19 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 693c783..f909d1f 100644
--- a/src/modules/gameboard.js
+++ b/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) {
-  [...top.container.children].forEach(piece => {
-    top.collection.get(piece).parent.append(piece);
-    top.collection.delete(piece);
+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 startingLocations = svg.querySelector('.start-locations');
   startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
 
-  const top = {
-    container: svg.querySelector('.grid-top'),
-    collection: new Map()
-  };
+  svg.addEventListener('pointerout', e => console.log('pointerout svg'));
 
   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);
-        if (isCounter(toPlace)) arrangeCounters(cell);
+        //getHex(cell).after(toPlace);
+        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)) {
-        returnPieces(top);
-        top.collection.set(cell, { parent: cell.parentElement });
-        top.container.append(cell);
+      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);
+          }
+        });
+
+        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 trooper = soldier.createCounter(attacker, 'blazer');
+  const cell = getCell(0, 0, 0, 0);
+  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));
   }
 }