<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter:stable;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="VUIZEE0ABWVcOXMCBGATPREbYB1jdCcV6sAi5aQ40N8D2WVSX6QR4CNz">
<title data-suffix=" · Catalin Mititiuc">
WebDevCat.me
· Catalin Mititiuc</title>
<link rel="stylesheet" id="font-bitter-css" href="//fonts.googleapis.com/css?family=Bitter:400,700" type="text/css" media="screen">
<link phx-track-static rel="stylesheet" href="/assets/app-131585bb1e255488c3d2558ee5c81330.css?vsn=d">
<link phx-track-static rel="stylesheet" href="/assets/cgit-313ed4244ed6cc8d5b67d6fbb4ab18c8.css?vsn=d">
<style>
article > * { max-width: unset; }
div#cgit table.list {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit div.content {
overflow: scroll;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.blob {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
td.linenumbers { width: 1px; }
td.lines { max-width: 1px; overflow: hidden; }
td.linenumbers pre, td.lines pre {
line-height: 1.25em;
}
pre { overflow-x: scroll; overflow-y: hidden; }
code { font-size: unset; }
</style>
<script defer phx-track-static type="text/javascript" src="/assets/app-7bb68f31e771b77e6d1026a2eca15d48.js?vsn=d">
</script>
</head>
<body class="bg-white">
<header>
<div style="display: inline-block;">
<h1><a href="/">Web Dev Solutions</a></h1>
<h3 style="text-align: left">Catalin Mititiuc</h3>
</div>
</header>
<main>
<article>
From 6200e19de180f9c340b3b60147087623c8821637 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc <webdevcat@proton.me>
Date: Wed, 12 Jun 2024 16:27:33 -0700
Subject: Extract scenario-build function into separate module
---
src/modules/scenario.js | 102 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 102 insertions(+)
create mode 100644 src/modules/scenario.js
(limited to 'src/modules/scenario.js')
diff --git a/src/modules/scenario.js b/src/modules/scenario.js
new file mode 100644
index 0000000..2483bc2
--- /dev/null
+++ b/src/modules/scenario.js
@@ -0,0 +1,102 @@
+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.onerror = () => {
+ reject(Error('Script failed to load.'));
+ };
+
+ const dataset = scenario.querySelector('script').dataset;
+
+ if ('cols' in dataset && 'rows' in dataset) {
+ scriptEl.dataset.rows = dataset.rows;
+ scriptEl.dataset.cols = dataset.cols;
+ }
+
+ scriptEl.setAttributeNS(null, 'href', '../../map.js');
+ svg.append(scriptEl);
+ });
+}
+
+export 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();
+ });
+}
+
+export async function build(svg, request) {
+ const gb = svg.querySelector('.gameboard');
+ const grid = svg.querySelector('.grid');
+
+ const scenario = await request;
+ const startLocs = scenario.querySelector('.start-locations');
+ 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');
+
+ if (scenarioGrid) {
+ grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true));
+ }
+
+ return loadScript(scenario, svg);
+}
--
cgit v1.2.3
</article>
</main>
<footer>
<p>100% Human Made, No AI Used</p>
<p>stasis 0.2.12</p>
</footer>
</body>
</html>