Add additional params to observable calls; reveal counter and record logic on selections

node_modules/pan-zoom/src/modules/pan.js

@@ -35,7 +35,7 @@ export function manualPan(gb, counter) {
 
   gb.style.transition = 'transform 0.5s';
   gb.style.transform = mtx.multiply(getTranslateMatrix(startPt, movePt));
-  gb.addEventListener('transitionend', () => gb.style.transition = '');
+  gb.addEventListener('transitionend', () => gb.style.transition = '', { once: true });
 }
 
 export default function (svg, el, e) {

src/index.js

@@ -172,8 +172,7 @@ document.querySelectorAll('.end-turn').forEach(el =>
     gameboard.clearFiringArcs(opponent);
 
     if (opponentRecords.length > 0) {
-      Observable.notify('select', opponentRecords.at(0));
+      Observable.notify('select', opponentRecords.at(0), { revealCounter: true, revealRecord: true });
-      //firstOpponentRecord.scrollIntoView({ behavior: 'smooth' });
     }
   })
 );

src/modules/gameboard.js

@@ -181,10 +181,10 @@ function hasPreviousMoveInHistory(counter) {
 }
 
 function selectOffBoard() {
-  Observable.notify('select', this);
+  Observable.notify('select', this, { revealRecord: true });
 }
 
-function select(data) {
+function select(data, opts) {
   const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
   const isSelected = data && data.classList && data.classList.contains('selected');
 
@@ -192,12 +192,12 @@ function select(data) {
 
   if (isSelected || !data) return;
 
+  if (opts?.revealCounter) {
+    const gb = svg.querySelector('.gameboard');
+    if (gb.contains(counter)) manualPan(gb, counter);
+  }
+
   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);
 }
@@ -362,10 +362,10 @@ export function start(el) {
       if (toPlace === occupant) {
         Observable.notify('select');
       } else {
-        Observable.notify('select', occupant);
+        Observable.notify('select', occupant, { revealRecord: true });
       }
     } else if (!toPlace && occupant) {
-      Observable.notify('select', occupant);
+      Observable.notify('select', occupant, { revealRecord: true });
     }
 
     const selected = getSelected();

src/modules/observable.js

@@ -1,8 +1,8 @@
 const observers = {};
 
 export const Observable = Object.freeze({
-  notify: (event, data) => {
+  notify: (event, ...data) => {
-    (observers[event] || []).forEach((observer) => observer(data))
+    (observers[event] || []).forEach((observer) => observer(...data))
   },
 
   subscribe: (event, func) => {

src/modules/record_sheet.js

@@ -359,7 +359,7 @@ function reveal(record) {
     record.scrollIntoView({ behavior: 'smooth' });
 }
 
-function select(data) {
+function select(data, opts) {
   const record = data && getRecord(data);
   const isSelected = record?.classList.contains('selected');
 
@@ -367,7 +367,7 @@ function select(data) {
 
   if (isSelected || !data) return;
 
-  reveal(record);
+  if (opts?.revealRecord) reveal(record);
   record.classList.add('selected');
 }
 
@@ -381,7 +381,7 @@ function endMove() {
     selected.classList.toggle('movement-ended');
     deselect();
 
-    if (next) Observable.notify('select', next);
+    if (next) Observable.notify('select', next, { revealCounter: true, revealRecord: true });
   }
 }
 
@@ -421,7 +421,7 @@ export function start(startLoc, units) {
   }
 
   document.querySelectorAll('.soldier-record').forEach(el =>
-    el.addEventListener('click', () => Observable.notify('select', el))
+    el.addEventListener('click', () => Observable.notify('select', el, { revealCounter: true }))
   );
 
   Observable.subscribe('select', select);