From 90fe01caaf5b8e0488aef15eb5c76f1e87145797 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 9 Aug 2024 10:22:44 -0700
Subject: Extract programmatic pan coord calculations into gameboard module
---
src/modules/gameboard.js | 33 +++++++++++++++++++++++++--------
1 file changed, 25 insertions(+), 8 deletions(-)
(limited to 'src/modules/gameboard.js')
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 4218833..4407577 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -2,15 +2,13 @@ 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 { programmaticPan } from 'pan-zoom';
-
-import { manualPan } from 'pan-zoom';
+const frontmostStore = new Map();
let svg,
placing = [];
-const frontmostStore = new Map();
-
function getCellContents(cell) {
return cell.querySelectorAll('*:not(use[href="#hex"])');
}
@@ -184,6 +182,27 @@ function selectOffBoard() {
Observable.notify('select', this, { revealRecord: true });
}
+function panMapToCounter(counter) {
+ const gb = svg.querySelector('.gameboard');
+
+ if (gb.contains(counter)) {
+ const counterRect = counter.getBoundingClientRect();
+ const mapRect = svg.parentNode.defaultView.frameElement.getBoundingClientRect();
+
+ const counterCoords = {
+ clientX: counterRect.x + counterRect.width / 2,
+ clientY: counterRect.y + counterRect.height / 2
+ };
+
+ const mapViewportCenterCoords = {
+ clientX: mapRect.width / 2,
+ clientY: mapRect.height / 2
+ };
+
+ programmaticPan(gb, counterCoords, mapViewportCenterCoords);
+ }
+}
+
function select(data, opts) {
const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
const isSelected = data && data.classList && data.classList.contains('selected');
@@ -192,10 +211,8 @@ function select(data, opts) {
if (isSelected || !data) return;
- if (opts?.revealCounter && document.querySelector('#auto-center-map').checked) {
- const gb = svg.querySelector('.gameboard');
- if (gb.contains(counter)) manualPan(gb, counter);
- }
+ if (opts?.revealCounter && document.querySelector('#auto-center-map').checked)
+ panMapToCounter(counter);
counter.classList.add(soldier.getSelectedClass());
firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
--
cgit v1.2.3