Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-06-11 18:03:00 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-06-11 18:03:00 -0700
commitf079181a2c274b243c74e66e5c516b789e39c29e (patch)
treee18303f4abb443c7f6246f606a87f9e828aba2b4 /src
parent0a2c97ee4b30d23ce108a9060b9fd131e93c5284 (diff)
Fix toggle content vis
Diffstat (limited to 'src')
-rw-r--r--src/index.js150
1 files changed, 26 insertions, 124 deletions
diff --git a/src/index.js b/src/index.js
index c7e040a..28df43f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -26,6 +26,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
},
toggleContentVis = (function () {
+ document.querySelector('#content').style.minWidth = this.checked ? '' : 0;
+
document.querySelectorAll('#content > div').forEach(div => {
if (this.checked) {
div.style.display = div.id == 'record-sheet' ? 'flex' : 'block';
@@ -39,52 +41,33 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
let mapResourceEl = document.querySelector('object');
-async function requestScenario(url) {
- return new Promise((res, rej) => {
+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) {
- res(request.response);
+ resolve(request.response);
} else {
- rej(Error('Image didn\'t load successfully; error code:' + request.statusText));
+ reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
}
};
+
request.onerror = function() {
- rej(Error('There was a network error.'));
+ reject(Error('There was a network error.'));
};
request.send();
});
}
-const scenarioRequest = requestScenario(map);
-
-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.style.opacity = 1;
- // next.data = data;
- // mapPlaceholder.after(next);
- // current.remove();
-
- buildScenario(requestScenario(data));
-}
+const scenarioRequest = requestResource(map);
async function buildScenario(req) {
- console.log('req', req);
-
- console.log('fresh template', scenarioTemplate.querySelector('svg'));
-
const svg = scenarioTemplate.querySelector('svg').cloneNode(true);
- // console.log('document', document.querySelector('object').contentDocument);
-
document.querySelector('object').contentDocument.querySelector('svg').remove();
document.querySelector('object').contentDocument.append(svg);
@@ -93,9 +76,6 @@ async function buildScenario(req) {
const scenario = await req;
const startLocs = scenario.querySelector('.start-locations');
-
- console.log(scenario);
-
const gb = svg.querySelector('.gameboard');
const grid = svg.querySelector('.grid');
@@ -113,7 +93,7 @@ async function buildScenario(req) {
}, {});
await Promise.all(
- Object.keys(refs).map(filename => requestScenario(`assets/images/${filename}`))
+ Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`))
).then(result => {
const defs = svg.querySelector('defs');
@@ -127,11 +107,17 @@ async function buildScenario(req) {
});
const refsQuery = [...refs[filename]].join(', ');
- external.querySelectorAll(refsQuery).forEach(node => defs.append(svg.ownerDocument.importNode(node, true)));
+
+ 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)));
+ 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');
@@ -143,7 +129,6 @@ async function buildScenario(req) {
async function loadScript() {
return new Promise((resolve, reject) => {
const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
- // const scriptEl = svg.ownerDocument.importNode(scenario.querySelector('script'));
scriptEl.onload = () => {
console.log('map.js loaded');
@@ -168,18 +153,12 @@ async function buildScenario(req) {
await loadScript();
- // this.style.opacity = 1;
- // mapPlaceholder.style.opacity = 0;
+ mapResourceEl.style.opacity = 1;
+ mapPlaceholder.style.opacity = 0;
panzoom.start(svg);
gameboard.start(svg);
recordSheet.start(startLocs, gameboard.getUnits());
-
- const mapContainer = document.querySelector('#map-container');
- const mapContainerRect = mapContainer.getBoundingClientRect();
-
- console.log('mapContainer', mapContainer);
- console.log('mapContainerRect', mapContainerRect);
}
function updateTurnCounter() {
@@ -230,88 +209,10 @@ async function load() {
;
scenarioTemplate = this.contentDocument.cloneNode(svg);
- buildScenario(scenarioRequest);
- // const scenario = await scenarioRequest;
- // 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 => requestScenario(`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(node));
- // });
- // });
-
- // scenario.querySelectorAll('use.mapsheet').forEach(el => gb.prepend(el));
- // grid.before(scenario.querySelector('.start-locations'));
-
- // async function loadScript() {
- // return new Promise((resolve, reject) => {
- // const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
- // // const scriptEl = svg.ownerDocument.importNode(scenario.querySelector('script'));
-
- // scriptEl.onload = () => {
- // console.log('map.js loaded');
- // resolve();
- // };
-
- // scriptEl.onerror = () => {
- // reject(Error('Script failed to load.'));
- // };
-
- // scriptEl.dataset.rows = scenario.querySelector('script').dataset.rows;
- // scriptEl.dataset.cols = scenario.querySelector('script').dataset.cols;
- // scriptEl.setAttributeNS(null, 'href', '../../map.js');
- // svg.append(scriptEl);
- // });
- // }
-
- // await loadScript();
+ await buildScenario(scenarioRequest);
this.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
- // URL.revokeObjectURL(this.data);
-
- // const linkEl = document.createElement('link');
- // linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
- // linkEl.setAttribute('rel', 'stylesheet');
- // linkEl.setAttribute('href', '../../assets/css/map.css');
- // linkEl.setAttribute('type', 'text/css');
-
- // linkEl.onload = function (e) {
- // console.log('map.css loaded');
- // };
-
- // svg.prepend(linkEl);
-
- // panzoom.start(svg);
- // gameboard.start(svg);
- // recordSheet.start(startLocs, gameboard.getUnits());
}
document.querySelectorAll('.end-turn').forEach(el =>
@@ -387,8 +288,6 @@ document.querySelector('input[type="file"]').addEventListener('change', e => {
};
reader.readAsText(file);
-
- // loadScenario(URL.createObjectURL(file));
});
document.querySelector('#roll-dice').addEventListener('click', () => {
@@ -407,13 +306,16 @@ mapSelectDialog
.selectCurrentOptionOnPageLoad()
.showOnClick()
.updateValueOnSelection()
- .changeMapOnConfirm(loadScenario);
+ .changeMapOnConfirm(data => {
+ mapPlaceholder.style.opacity = 1;
+ mapResourceEl.style.opacity = 0;
+ buildScenario(requestResource(data));
+ });
mapResourceEl.addEventListener('load', load);
// mapResourceEl.data = map;
// mapResourceEl = null;
-
dice.forEach(el => {
el.classList.add(roll(d6));