| 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> | 2024-05-19 21:32:42 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-19 21:42:39 -0700 |
| commit | c692bc90207c4b04771f953ce5924100a1889cae (patch) | |
| tree | 01afbbc26ec34bc7746631c6fd611b23ad6d18d1 /src | |
| parent | ff7e88457c72f9cca9d2fdd965d8a4fd0e3de48a (diff) | |
Simplify loading scenarios
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.js | 34 | ||||
| -rw-r--r-- | src/modules/map_select_dialog.js | 4 |
2 files changed, 17 insertions, 21 deletions
diff --git a/src/index.js b/src/index.js index 9765c41..c71cc16 100644 --- a/src/index.js +++ b/src/index.js @@ -24,25 +24,22 @@ const mapPlaceholder = document.querySelector('.map-placeholder'), }); localStorage.setItem('content-visibility', this.checked); - }).bind(contentVisToggleEl), - - mapResourceObserver = new MutationObserver(function () { - const current = document.querySelector('object'); - const resource = current.getAttribute('data'); - const next = document.createElement('object'); - next.setAttribute('type', 'image/svg+xml'); - next.style.opacity = 0; - next.addEventListener('load', load); - mapPlaceholder.after(next); - mapPlaceholder.style.opacity = 1; - next.data = resource; - this.disconnect(); - current.remove(); - this.observe(next, { attributeFilter: ['data'] }); - }); + }).bind(contentVisToggleEl); let mapResourceEl = document.querySelector('object'); +function loadScenario(data) { + const current = document.querySelector('object'); + const next = document.createElement('object'); + next.setAttribute('type', 'image/svg+xml'); + next.style.opacity = 0; + next.addEventListener('load', load); + mapPlaceholder.after(next); + mapPlaceholder.style.opacity = 1; + next.data = data; + current.remove(); +} + function updateTurnCounter() { const turnCounter = document.getElementById('turn-count'); @@ -161,11 +158,10 @@ mapSelectDialog .selectCurrentOptionOnPageLoad() .showOnClick() .updateValueOnSelection() - .changeMapOnConfirm(); + .changeMapOnConfirm(loadScenario); mapResourceEl.addEventListener('load', load); mapResourceEl.data = map; -mapResourceObserver.observe(mapResourceEl, { attributeFilter: ['data'] }); mapResourceEl = null; document.querySelector('#download-save').addEventListener('click', e => { @@ -187,5 +183,5 @@ document.querySelector('#upload-save').addEventListener('click', () => { document.querySelector('input[type="file"]').addEventListener('change', e => { const [file] = fileInputEl.files; - document.querySelector('object').data = URL.createObjectURL(file); + loadScenario(URL.createObjectURL(file)) }); diff --git a/src/modules/map_select_dialog.js b/src/modules/map_select_dialog.js index fc8eecc..2a4622a 100644 --- a/src/modules/map_select_dialog.js +++ b/src/modules/map_select_dialog.js @@ -29,12 +29,12 @@ export function init() { return this; }, - changeMapOnConfirm() { + changeMapOnConfirm(loadFn) { confirmBtn.addEventListener('click', e => { e.preventDefault(); localStorage.removeItem('pan-zoom'); localStorage.setItem('map', selectEl.value); - document.querySelector('object').data = `assets/images/${selectEl.value}.svg`; + loadFn(`assets/images/${selectEl.value}.svg`); mapDialog.close(); }); } |