| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 14:11:22 -0800 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 14:29:37 -0800 |
| commit | 7fd054a72821cad62be4a869e2b0a3e9034543a5 (patch) | |
| tree | d16282a3b54bbc310a56ad86b7fd75392dc0f2f2 /src | |
| parent | be42c989cf5f3cc28bd3c401983a1a58e4d923c4 (diff) | |
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.js | 16 | ||||
| -rw-r--r-- | src/modules/pan-zoom.js | 33 |
2 files changed, 8 insertions, 41 deletions
diff --git a/src/index.js b/src/index.js index 66c8150..384cfea 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ -import * as panzoom from './modules/pan-zoom.js'; -import * as gameboard from './modules/gameboard.js'; -import * as recordSheet from './modules/record_sheet.js'; -import * as mapSelectDialog from './modules/map_select_dialog.js'; -import { Observable } from './modules/observable.js'; -import { requestResource, build } from './modules/scenario.js'; -import { scenarios } from './modules/scenarios.js'; +import { withRestore as panzoom } from 'pan-zoom'; +import * as gameboard from './modules/gameboard'; +import * as recordSheet from './modules/record_sheet'; +import * as mapSelectDialog from './modules/map_select_dialog'; +import { Observable } from './modules/observable'; +import { requestResource, build } from './modules/scenario'; +import { scenarios } from './modules/scenarios'; globalThis.svgns = 'http://www.w3.org/2000/svg'; @@ -79,7 +79,7 @@ async function buildScenario(req) { mapResourceEl.style.opacity = 1; mapPlaceholder.style.opacity = 0; - panzoom.start(template); + panzoom.start(template, '.gameboard'); gameboard.start(template); // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits()); diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js deleted file mode 100644 index 76c77f6..0000000 --- a/src/modules/pan-zoom.js +++ /dev/null @@ -1,33 +0,0 @@ -import { pan, zoom } from 'pan-zoom'; - -const storageKey = 'pan-zoom'; -const zoomFactor = 0.25; - -function restorePanZoomVal(el) { - const storedPanZoomVal = localStorage.getItem(storageKey); - - if (storedPanZoomVal) el.style.transform = storedPanZoomVal; -} - -function addEventListeners(svg, el) { - svg.addEventListener('wheel', zoom(el, zoomFactor), { passive: false }); - svg.addEventListener('pointerdown', pan(el), { passive: false }); -} - -function storePanZoomVal(transformMatrix) { - localStorage.setItem(storageKey, transformMatrix); -} - -function observePanZoomChanges(el) { - const observer = new MutationObserver(() => storePanZoomVal(el.style.transform)); - - observer.observe(el, { attributeFilter: ['style'] }); -} - -export function start(svg) { - const targetEl = svg.querySelector('.gameboard'); - - restorePanZoomVal(targetEl); - addEventListeners(svg, targetEl); - observePanZoomChanges(targetEl); -} |