Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/index.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-06-12 16:27:33 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-06-12 16:30:50 -0700
commit6200e19de180f9c340b3b60147087623c8821637 (patch)
treefdd829d84f332a095666ebd457c7065c8f297bc2 /src/index.js
parent2d30b5f842e957f93eaa95ce224faaffd312666e (diff)
Extract scenario-build function into separate module
Diffstat (limited to 'src/index.js')
-rw-r--r--src/index.js109
1 files changed, 5 insertions, 104 deletions
diff --git a/src/index.js b/src/index.js
index 6b05c03..6b7e930 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ 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';
globalThis.svgns = 'http://www.w3.org/2000/svg';
@@ -49,121 +50,21 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
let scenarioTemplate;
-async function requestResource(url) {
- return new Promise((resolve, reject) => {
- const request = new XMLHttpRequest();
- request.open('GET', url, true);
- request.responseType = 'document';
-
- request.onload = function() {
- if (request.status === 200) {
- resolve(request.response);
- } else {
- reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
- }
- };
-
- request.onerror = function() {
- reject(Error('There was a network error.'));
- };
-
- request.send();
- });
-}
-
-async function loadScript(scenario, svg) {
- return new Promise((resolve, reject) => {
- const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
-
- scriptEl.onload = () => {
- console.log('map.js loaded');
- resolve(scriptEl);
- };
-
- scriptEl.onerror = () => {
- reject(Error('Script failed to load.'));
- };
-
- const oldScript = scenario.querySelector('script');
-
- if ('cols' in oldScript.dataset && 'rows' in oldScript.dataset) {
- scriptEl.dataset.rows = oldScript.dataset.rows;
- scriptEl.dataset.cols = oldScript.dataset.cols;
- }
-
- scriptEl.setAttributeNS(null, 'href', '../../map.js');
- svg.append(scriptEl);
- });
-}
-
async function buildScenario(req) {
- const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
-
- document.querySelector('object').contentDocument.querySelector('svg').remove();
- document.querySelector('object').contentDocument.append(svg);
-
gameboard.stop();
recordSheet.stop();
- const scenario = await req;
- const startLocs = scenario.querySelector('.start-locations');
- const gb = svg.querySelector('.gameboard');
- const grid = svg.querySelector('.grid');
-
- const externalResourceEls = Array.from(scenario.querySelectorAll('use[href*=".svg"'));
-
- const refs = externalResourceEls.reduce((acc, el) => {
- const href = el.getAttributeNS(null, 'href');
- const [filename] = href.match(/.+\.svg/);
- const fragmentIdentifier = href.split('.svg').pop();
-
- (acc[filename] ??= new Set()).add(fragmentIdentifier);
- el.setAttributeNS(null, 'href', fragmentIdentifier);
-
- return acc;
- }, {});
-
- await Promise.all(
- Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`))
- ).then(result => {
- const defs = svg.querySelector('defs');
-
- Object.keys(refs).forEach((filename, index) => {
- const external = result[index];
-
- refs[filename].forEach(fragmentIdentifier => {
- external
- .querySelectorAll(`${fragmentIdentifier} use`)
- .forEach(el => refs[filename].add(el.getAttributeNS(null, 'href')));
- });
-
- const refsQuery = [...refs[filename]].join(', ');
-
- external.querySelectorAll(refsQuery).forEach(node =>
- defs.append(svg.ownerDocument.importNode(node, true))
- );
- });
- });
-
- scenario.querySelectorAll('use.mapsheet').forEach(el =>
- gb.querySelector('#background').after(svg.ownerDocument.importNode(el, true))
- );
-
- if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true));
-
- const scenarioGrid = scenario.querySelector('.grid');
+ const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
+ document.querySelector('object').contentDocument.querySelector('svg').replaceWith(svg);
- if (scenarioGrid) {
- grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true));
- }
+ await build(svg, req);
- await loadScript(scenario, svg);
mapResourceEl.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
panzoom.start(svg);
gameboard.start(svg);
- recordSheet.start(startLocs, gameboard.getUnits());
+ recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
}
function updateTurnCounter() {