index : btroops | |
Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
aboutsummaryrefslogtreecommitdiff |
diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/modules/gameboard.js | 33 | ||||
-rw-r--r-- | src/modules/pan-zoom.js | 20 |
2 files changed, 30 insertions, 23 deletions
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')); diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js index 5e224e8..76c77f6 100644 --- a/src/modules/pan-zoom.js +++ b/src/modules/pan-zoom.js @@ -1,27 +1,17 @@ import { pan, zoom } from 'pan-zoom'; -const storageKey = 'pan-zoom', - zoomFactor = 0.25; +const storageKey = 'pan-zoom'; +const zoomFactor = 0.25; function restorePanZoomVal(el) { const storedPanZoomVal = localStorage.getItem(storageKey); - if (storedPanZoomVal) { - el.style.transform = storedPanZoomVal; - } + if (storedPanZoomVal) el.style.transform = storedPanZoomVal; } function addEventListeners(svg, el) { - svg.addEventListener('wheel', e => zoom(el, e, zoomFactor), { passive: false }); - svg.addEventListener('pointerdown', e => { - if (e.button === 0) { - e.target.setPointerCapture(e.pointerId); - pan(svg, el, e), { passive: false }; - } - }); - svg.addEventListener('pointermove', e => { - console.log('clientX,clientY', `${e.clientX},${e.clientY}`); - }); + svg.addEventListener('wheel', zoom(el, zoomFactor), { passive: false }); + svg.addEventListener('pointerdown', pan(el), { passive: false }); } function storePanZoomVal(transformMatrix) { |