WIP: auto-pan map to selected counter

src/modules/gameboard.js

@@ -1,15 +1,14 @@
 import * as firingArc from './game/firing_arc.js';
 import * as sightLine from './game/sight_line.js';
 import * as soldier from './game/soldier.js';
-import { Observable } from "./observable";
+import { Observable } from './observable';
+
+
+import { manualPan } from 'pan-zoom';
 
 let svg,
   placing = [];
 
-const top = {
-  collection: new Map()
-};
-
 const frontmostStore = new Map();
 
 function getCellContents(cell) {
@@ -194,6 +193,11 @@ function select(data) {
   if (isSelected || !data) return;
 
   counter.classList.add(soldier.getSelectedClass());
+  const gb = svg.querySelector('.gameboard');
+
+  // TODO check if counter is on board before calling
+  manualPan(gb, counter);
+
   firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
   placing.push(counter);
 }
@@ -215,8 +219,8 @@ export function start(el) {
   // For when the pointer leaves the window
   document.querySelector('object').addEventListener('pointerout', e => {
     if (clearHexDialog.open) return;
-    console.log('object pointerout');
-    console.log('Left map... CLEARING HOVERS');
+    //console.log('object pointerout');
+    //console.log('Left map... CLEARING HOVERS');
     svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
 
     [...frontmost.children].forEach(child => {
@@ -236,7 +240,7 @@ export function start(el) {
 
     // Pointer moves outside the edge of the grid
     if (!targetCell) {
-      console.log('No target cell... CLEARING HOVERS');
+      //console.log('No target cell... CLEARING HOVERS');
       svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
 
       [...frontmost.children].forEach(child => {
@@ -257,7 +261,7 @@ export function start(el) {
         // 's contents that is in frontmost, whose parent cell is not already highlighted
         !(targetCell.classList.contains('frontmost') && frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover'))
       ].every(e => e)) {
-        console.log('Target cell missing hover... CLEARING HOVERS AND ADDING TO TARGET CELL');
+        //console.log('Target cell missing hover... CLEARING HOVERS AND ADDING TO TARGET CELL');
         svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
 
         if (placing[0]?.getAttributeNS(null, 'class') === 'mech-template') {
@@ -299,7 +303,7 @@ export function start(el) {
       getActiveSightLine(svg) && clearSightLine();
     }
 
-    console.log('frontmost contents', frontmost.children);
+    //console.log('frontmost contents', frontmost.children);
   });
 
   grid.addEventListener('click', clickHandler);
@@ -378,17 +382,24 @@ export function start(el) {
   //cell2.classList.add('hover');
   //
 
-  //soldier.place(
-  //  svg,
-  //  soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 1 }}, 'hsplaser'),
-  //  getCell(-2, 3, -1, 0)
-  //);
-  //
-  //soldier.place(
-  //  svg,
-  //  soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 5 }}, 'rifle'),
-  //  getCell(-3, 3, 0, 0)
-  //);
+  const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, 'blazer');
+
+
+  soldier.place(svg, trooper1, getCell(-3, 9, -6, 0));
+
+  soldier.place(
+    svg,
+    soldier.createCounter({ dataset: { allegiance: 'defender', number: 1, squad: 1 }}, 'blazer'),
+    getCell(1, -8, 7, 0)
+  );
+
+  const t1Rect = trooper1.getBoundingClientRect();
+
+  setTimeout(() => {
+    const t1Rect = trooper1.getBoundingClientRect();
+    console.log('trooper', trooper1, trooper1.getBoundingClientRect());
+
+  }, 10);
 
   // Add some counters in an unoccupied cell
   //const countersCell = getCell(-1, 1, 0, 0);

src/modules/pan-zoom.js

@@ -19,6 +19,9 @@ function addEventListeners(svg, el) {
       pan(svg, el, e), { passive: false };
     }
   });
+  svg.addEventListener('pointermove', e => {
+    console.log('clientX,clientY', `${e.clientX},${e.clientY}`);
+  });
 }
 
 function storePanZoomVal(transformMatrix) {