Fix toggle content vis
This commit is contained in:
parent
0a2c97ee4b
commit
f079181a2c
@ -7,7 +7,7 @@
|
||||
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
|
||||
<g data-edge="north" style="--i: -2">
|
||||
<g data-x="13">
|
||||
<g class="counter selected" data-allegiance="attacker" data-number="1">
|
||||
<g class="counter" data-allegiance="attacker" data-number="1">
|
||||
<use class="primary-weapon" href="counters.svg#blazer"/>
|
||||
<use class="troop-number" href="counters.svg#number-1"/>
|
||||
<use class="squad-number" href="counters.svg#number-1"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
150
src/index.js
150
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));
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user