Import mapsheets.svg
This commit is contained in:
parent
16fb0dab2e
commit
488ebb384b
@ -12,6 +12,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node server.cjs",
|
||||
"start:esbuildserver": "node esbuild-server.mjs",
|
||||
"test:integ": "node --trace-warnings ./node_modules/.bin/jest --detectOpenHandles --config jest.config.integ.cjs",
|
||||
"test:integ:debug": "NODE_INSPECT_RESUME_ON_START=1 node inspect ./node_modules/jest/bin/jest.js --config jest.config.integ.cjs --runInBand",
|
||||
"test": "jest"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="6"/>
|
||||
<circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="5"/>
|
||||
|
||||
<g id="semi-auto">
|
||||
<line x1="-2" y1="1" x2="2" y2="1"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -453,7 +453,7 @@
|
||||
</g>
|
||||
<g class="building4" style="transform: translate(100.5px, 83px)">
|
||||
<use href="#building4"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-21.5px, -39px)" href="#bed"/>
|
||||
<use style="transform: translate(22px, -51px)" href="#bed"/>
|
||||
<use style="transform: translate(21.25px, 33px) rotate(-90deg)" href="#desk"/>
|
||||
@ -471,7 +471,7 @@
|
||||
</g>
|
||||
<g class="building2" style="transform: translate(92px, 281px)">
|
||||
<use href="#building2"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-28.25px, -19.75px) rotate(90deg)" href="#couch"/>
|
||||
<use style="transform: translate(-11.25px, 32.75px)" href="#couch"/>
|
||||
|
||||
@ -491,7 +491,7 @@
|
||||
</g>
|
||||
<g class="building3" style="transform: translate(441.5px, 100.5px)">
|
||||
<use style="transform: rotate(180deg)" href="#building3"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-1.75px, -26.5px)" href="#couch"/>
|
||||
<use style="transform: translate(-8px, 15.5px)" href="#couch"/>
|
||||
<use style="transform: translate(20.5px, 36.75px)" href="#cabinet"/>
|
||||
@ -513,7 +513,7 @@
|
||||
</g>
|
||||
<g class="building6" style="transform: translate(440.75px, 288.5px)">
|
||||
<use style="transform: rotate(180deg)" href="#building6"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-8px, 40px)" href="#bed"/>
|
||||
<use style="transform: translate(-12px, -42px) rotate(90deg)" href="#couch"/>
|
||||
<use style="transform: translate(10px, 40.25px) rotate(180deg)" href="#desk"/>
|
||||
@ -528,7 +528,7 @@
|
||||
<g id="map2">
|
||||
<g class="building1" style="transform: translate(220px, 280px)">
|
||||
<use href="#building1"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-22.5px, -49px) rotate(90deg)" href="#couch"/>
|
||||
<use style="transform: translate(-22.5px, 37px)" href="#bed"/>
|
||||
<use style="transform: translate(22.5px, 50.5px)" href="#bed"/>
|
||||
@ -544,7 +544,7 @@
|
||||
</g>
|
||||
<g class="building2" style="transform: translate(108px, 282px)">
|
||||
<use href="#building2"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<rect class="couch" x="-46" y="11" width="8.5" height="16"/>
|
||||
<rect class="couch" x="-15.5" y="36" width="16" height="8.5"/>
|
||||
<rect class="coffee-table" x="3.5" y="-54.5" width="5" height="9.5"/>
|
||||
@ -562,7 +562,7 @@
|
||||
</g>
|
||||
<g class="building3" style="transform: translate(485.5px, 264.5px)">
|
||||
<use style="transform: rotate(180deg)" href="#building3"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-2px, -28.5px)" href="#couch"/>
|
||||
<use style="transform: translate(-18px, 12.5px) rotate(90deg)" href="#couch"/>
|
||||
<use style="transform: translate(17.75px, 35.25px)" href="#cabinet"/>
|
||||
@ -576,7 +576,7 @@
|
||||
</g>
|
||||
<g class="building4" style="transform: translate(377.25px, 278.75px)">
|
||||
<use href="#building4"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-13.5px, -39px)" href="#bed"/>
|
||||
<use style="transform: translate(12px, -51px)" href="#bed"/>
|
||||
<use style="transform: translate(23.5px, 48px) rotate(180deg)" href="#desk"/>
|
||||
@ -594,7 +594,7 @@
|
||||
</g>
|
||||
<g class="building5" style="transform: translate(103px, 84.75px)">
|
||||
<use href="#building5"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-36px, -17.25px) rotate(90deg)" href="#bed"/>
|
||||
<use style="transform: translate(23px, -17.25px) rotate(90deg)" href="#bed"/>
|
||||
<use style="transform: translate(-40.25px, -.5px) rotate(90deg)" href="#couch"/>
|
||||
@ -612,7 +612,7 @@
|
||||
</g>
|
||||
<g class="building6" style="transform: translate(224px, 85.75px)">
|
||||
<use href="#building6"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(9.5px, -40.5px)" href="#bed"/>
|
||||
<use style="transform: translate(-8px, 11.5px) rotate(90deg)" href="#couch"/>
|
||||
<use style="transform: translate(8.75px, 48.75px) rotate(180deg)" href="#desk"/>
|
||||
@ -624,7 +624,7 @@
|
||||
</g>
|
||||
<g class="building7" style="transform: translate(427.75px, 110px)">
|
||||
<use href="#building7"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-99px, -46.5px)" href="#desk"/>
|
||||
<use style="transform: translate(-106px, 22px)" href="#desk"/>
|
||||
<use style="transform: translate(-46px, -58.75px) rotate(-90deg)" href="#desk"/>
|
||||
@ -667,7 +667,7 @@
|
||||
<g id="map3">
|
||||
<g class="building1" style="transform: translate(359px, 98.5px)">
|
||||
<use href="#building1"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<rect class="couch" x="-28.75" y="-51.75" width="16" height="8.5"/>
|
||||
<rect class="coffee-table" x="12.75" y="-48.75" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="22.75" y="-34.75" width="9.5" height="5"/>
|
||||
@ -683,7 +683,7 @@
|
||||
</g>
|
||||
<g class="building2" style="transform: translate(185px, 77.5px)">
|
||||
<use style="transform: rotate(180deg)" href="#building2"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-39px, -2.75px)" href="#couch"/>
|
||||
<use style="transform: translate(5.25px, -41px) rotate(90deg)" href="#couch"/>
|
||||
|
||||
@ -713,7 +713,7 @@
|
||||
</g>
|
||||
<g class="building3" style="transform: translate(51.25px, 65.75px)">
|
||||
<use href="#building3"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(2.25px, 23px)" href="#couch"/>
|
||||
<use style="transform: translate(6.5px, -14px) rotate(90deg)" href="#couch"/>
|
||||
<use style="transform: translate(-18.5px, -37px)" href="#cabinet"/>
|
||||
@ -726,7 +726,7 @@
|
||||
</g>
|
||||
<g class="building4" style="transform: translate(499px, 96px)">
|
||||
<use style="transform: rotate(180deg)" href="#building4"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(13.5px, 42px)" href="#bed"/>
|
||||
<use style="transform: translate(-11.5px, 51px)" href="#bed"/>
|
||||
<use style="transform: translate(-23px, -51px)" href="#desk"/>
|
||||
@ -744,7 +744,7 @@
|
||||
</g>
|
||||
<g class="building5" style="transform: translate(103px, 294.5px)">
|
||||
<use href="#building5"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-37px, -17.25px) rotate(90deg)" href="#bed"/>
|
||||
<use style="transform: translate(22px, -17.25px) rotate(90deg)" href="#bed"/>
|
||||
<use style="transform: translate(-41.25px, -.5px) rotate(90deg)" href="#couch"/>
|
||||
@ -762,7 +762,7 @@
|
||||
</g>
|
||||
<g class="building6" style="transform: translate(224.5px, 275px)">
|
||||
<use style="transform: rotate(180deg)" href="#building6"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-9px, 39px)" href="#bed"/>
|
||||
<use style="transform: translate(.5px, 1px) rotate(90deg)" href="#couch"/>
|
||||
<use style="transform: translate(14px, 24.75px)" href="#couch"/>
|
||||
@ -776,7 +776,7 @@
|
||||
</g>
|
||||
<g class="building7" style="transform: translate(419px, 305.75px)">
|
||||
<use href="#building7"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-99px, -46.75px)" href="#desk"/>
|
||||
<use style="transform: translate(-106px, 21.25px)" href="#desk"/>
|
||||
<use style="transform: translate(-46.5px, -57.25px) rotate(-90deg)" href="#desk"/>
|
||||
@ -819,7 +819,7 @@
|
||||
<g id="map4">
|
||||
<g class="building8" style="transform: translate(263.125px, 188.625px)">
|
||||
<use href="#building8"/>
|
||||
<g class="furniture" style="fill: violet;">
|
||||
<g class="furniture" style="fill: teal;">
|
||||
<use style="transform: translate(-82px, -84px)" href="#couch"/>
|
||||
<use style="transform: translate(6px, -83.5px)" href="#couch"/>
|
||||
<use style="transform: translate(23px, -84px)" href="#couch"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
@ -1,6 +1,7 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg viewBox="-15.639999389648438 -129.2300262451172 2320.879638671875 4871.5654296875" xmlns="http://www.w3.org/2000/svg">
|
||||
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" />
|
||||
<!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" /> -->
|
||||
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
|
||||
<style>
|
||||
g[data-edge="north"] { --i: -2; }
|
||||
g[data-edge="south"] { --i: 78; }
|
||||
@ -60,9 +61,9 @@
|
||||
<rect id="background"/>
|
||||
|
||||
<g class="gameboard">
|
||||
<use data-href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
|
||||
<use data-href="http://localhost:8080/assets/images/mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/>
|
||||
<use data-href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
|
||||
<use data-href="mapsheets.svg#map2"/>
|
||||
<use data-href="mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/>
|
||||
<use data-href="mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
|
||||
|
||||
<rect id="dots" fill="url(#asterisk)"/>
|
||||
|
||||
@ -122,19 +123,6 @@
|
||||
|
||||
<g class="grid"/>
|
||||
</g>
|
||||
<script>//<![CDATA[
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
|
||||
function getRandomIntInclusive(min, max) {
|
||||
const minCeiled = Math.ceil(min);
|
||||
const maxFloored = Math.floor(max);
|
||||
return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
|
||||
}
|
||||
|
||||
const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
|
||||
|
||||
document.querySelectorAll('[data-href]').forEach(el => {
|
||||
el.setAttributeNS(null, 'href', el.dataset.href.split('#').join(`?v=${cacheBuster}#`));
|
||||
});
|
||||
//]]></script>
|
||||
<script data-cols="33" data-rows="77" href="http://localhost:8080/map.js"/>
|
||||
<script href="../../import_mapsheets.js"/>
|
||||
<script data-cols="33" data-rows="77" href="../../map.js"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.2 KiB |
@ -1,6 +1,7 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg viewBox="-15.639999389648438 -129.2300262451172 2320.879638671875 1751.5654296875" xmlns="http://www.w3.org/2000/svg">
|
||||
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" />
|
||||
<!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" /> -->
|
||||
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
|
||||
<style>
|
||||
g[data-edge="north"] { --i: -2; }
|
||||
g[data-edge="south"] { --i: 26; }
|
||||
@ -60,7 +61,8 @@
|
||||
<rect id="background"/>
|
||||
|
||||
<g class="gameboard">
|
||||
<use href="http://localhost:8080/assets/images/mapsheets.svg#map4"/>
|
||||
<!-- <use href="http://localhost:8080/assets/images/mapsheets.svg#map4"/> -->
|
||||
<use data-href="mapsheets.svg#map4"/>
|
||||
|
||||
<rect id="dots" fill="url(#asterisk)"/>
|
||||
|
||||
@ -120,5 +122,6 @@
|
||||
|
||||
<g class="grid"/>
|
||||
</g>
|
||||
<script data-cols="33" data-rows="25" href="http://localhost:8080/map.js"/>
|
||||
<script href="../../import_mapsheets.js"/>
|
||||
<script data-cols="33" data-rows="25" href="../../map.js"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 5.1 KiB |
@ -1,6 +1,5 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<svg viewBox="-15.639999389648438 -109 2320.879638671875 3280" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" /> -->
|
||||
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
|
||||
<style>
|
||||
g[data-edge="north"] { --i: -2; }
|
||||
@ -102,8 +101,6 @@
|
||||
<rect id="background"/>
|
||||
|
||||
<g class="gameboard">
|
||||
<!-- <use href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
|
||||
<use href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/> -->
|
||||
<use data-href="mapsheets.svg#map2"/>
|
||||
<use data-href="mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/>
|
||||
|
||||
@ -1954,20 +1951,7 @@
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<script>//<![CDATA[
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
|
||||
function getRandomIntInclusive(min, max) {
|
||||
const minCeiled = Math.ceil(min);
|
||||
const maxFloored = Math.floor(max);
|
||||
return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
|
||||
}
|
||||
|
||||
const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
|
||||
|
||||
document.querySelectorAll('[data-href]').forEach(el => {
|
||||
el.setAttributeNS(null, 'href', el.dataset.href.split('#').join(`?v=${cacheBuster}#`));
|
||||
});
|
||||
//]]></script>
|
||||
<!-- <script href="http://localhost:8080/map.js"/> -->
|
||||
<script href="../../import_mapsheets.js"/>
|
||||
<script href="../../map.js"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
@ -246,6 +246,9 @@
|
||||
|
||||
<input type="file" accept="image/svg+xml"/>
|
||||
|
||||
<script>
|
||||
// new EventSource('/esbuild').addEventListener('change', () => location.reload());
|
||||
</script>
|
||||
<script src="index.js"></script>
|
||||
<script src="soldier_record_block.js"></script>
|
||||
</body>
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, post-check=0, pre-check=0" />
|
||||
<meta http-equiv="cache-control" content="max-age=0" />
|
||||
<title>Losing my mind</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg viewBox="-6 -6 12 12" xmlns="http://www.w3.org/2000/svg" class="weapon-icon">
|
||||
<use href="assets/images/counters.svg?v=2#smg"></use>
|
||||
</svg>
|
||||
</body>
|
||||
<!-- <script src="index.js"></script> -->
|
||||
</html>
|
||||
61
server.cjs
61
server.cjs
@ -1,4 +1,7 @@
|
||||
const { createServer } = require('esbuild-server');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
|
||||
// const { IncomingMessage } = require('node:http');
|
||||
// const { URL } = require('node:url');
|
||||
// const path = require('node:path');
|
||||
@ -40,20 +43,70 @@ const { createServer } = require('esbuild-server');
|
||||
|
||||
// console.log('path', path.normalize(path.join('public', 'assets/css/damage_block.css')))
|
||||
|
||||
let version;
|
||||
|
||||
const svgUseCacheBust = {
|
||||
name: 'svgUseCacheBust',
|
||||
setup(build) {
|
||||
// build.onStart(() => {
|
||||
// version = Math.random();
|
||||
// console.log('svg use cache bust online', version);
|
||||
// const file = fs.readFileSync('./public/assets/images/scenario-side_show.svg', {encoding: 'utf-8'});
|
||||
// console.log('file', file);
|
||||
// });
|
||||
|
||||
// version = Math.random();
|
||||
build.onResolve({ filter: /\.svg$/ }, args => {
|
||||
return {
|
||||
path: path.resolve('public', args.path),
|
||||
};
|
||||
});
|
||||
|
||||
build.onEnd(result => {
|
||||
// console.log('metafile', JSON.stringify(result.metafile, null, 2));
|
||||
|
||||
// for (k in result.metafile.outputs) {
|
||||
// console.log(result.metafile.outputs[k]);
|
||||
// }
|
||||
|
||||
// const filename = Object.keys(result.metafile.outputs).find(key => {
|
||||
// return result.metafile.outputs[key].inputs['public/assets/images/scenario-side_show.svg'];
|
||||
// });
|
||||
|
||||
// console.log('filename', filename);
|
||||
|
||||
// const file = fs.readFileSync(filename, { encoding: 'utf-8' });
|
||||
|
||||
// const mapsheets = Object.keys(result.metafile.outputs).find(key => {
|
||||
// return result.metafile.outputs[key].inputs['public/assets/images/mapsheets.svg'];
|
||||
// });
|
||||
|
||||
// console.log('mapsheets', path.basename(mapsheets));
|
||||
|
||||
// const newFile = file.replaceAll('mapsheets.svg', path.basename(mapsheets));
|
||||
|
||||
// fs.writeFileSync(filename, newFile);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const server = createServer(
|
||||
{
|
||||
bundle: true,
|
||||
define: {
|
||||
'env': `"${process.env.NODE_ENV || 'dev'}"`,
|
||||
},
|
||||
entryPoints: ['src/index.js', 'src/map.js', 'src/soldier_record_block.js'],
|
||||
entryPoints: ['src/*.js'],
|
||||
// outdir: 'build',
|
||||
...(process.env.NODE_ENV !== 'test') && {
|
||||
outdir: 'build'
|
||||
},
|
||||
// loader: {
|
||||
// '.svg': 'file'
|
||||
// },
|
||||
plugins: [svgUseCacheBust],
|
||||
loader: {
|
||||
'.svg': 'file'
|
||||
},
|
||||
metafile: true,
|
||||
assetNames: 'assets/images/[name]-[hash]',
|
||||
},
|
||||
{
|
||||
// http: { IncomingMessage: Request },
|
||||
|
||||
8
src/import_mapsheets.js
Normal file
8
src/import_mapsheets.js
Normal file
@ -0,0 +1,8 @@
|
||||
import mapsheets from './assets/images/mapsheets.svg';
|
||||
|
||||
const useEls = document.querySelectorAll('svg use[data-href*="mapsheets.svg"');
|
||||
|
||||
useEls.forEach(el => {
|
||||
const href = el.dataset.href.replace('mapsheets.svg', mapsheets.split('/').pop());
|
||||
el.setAttributeNS(null, 'href', href);
|
||||
});
|
||||
45
src/index.js
45
src/index.js
@ -45,9 +45,9 @@ function loadScenario(data) {
|
||||
next.setAttribute('type', 'image/svg+xml');
|
||||
next.style.opacity = 0;
|
||||
next.addEventListener('load', load);
|
||||
mapPlaceholder.after(next);
|
||||
mapPlaceholder.style.opacity = 1;
|
||||
next.data = data;
|
||||
mapPlaceholder.after(next);
|
||||
current.remove();
|
||||
}
|
||||
|
||||
@ -93,28 +93,39 @@ function roll(die) {
|
||||
function load() {
|
||||
const svg = this.contentDocument.querySelector('svg'),
|
||||
startLocs = svg.querySelector('.start-locations')
|
||||
, scriptEl = this.contentDocument.querySelector('script')
|
||||
// , scriptEl = this.contentDocument.querySelector('script')
|
||||
;
|
||||
|
||||
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');
|
||||
// const useEls = svg.querySelectorAll('use[href*=".svg"]');
|
||||
|
||||
if (scriptEl) {
|
||||
scriptEl.onload = function () {
|
||||
console.log('map.js loaded');
|
||||
// console.log(useEls);
|
||||
|
||||
};
|
||||
scriptEl.setAttribute('href', '../../map.js');
|
||||
}
|
||||
};
|
||||
// [...new Set([...useEls].map(el => el.getAttributeNS(null, 'href').match(/^(.*?)\.svg/g).at(0)))].forEach(f => {
|
||||
// const name = `../assets/images/${f}`;
|
||||
// import(name);
|
||||
// console.log(f);
|
||||
// });
|
||||
|
||||
svg.prepend(linkEl);
|
||||
// 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');
|
||||
|
||||
// if (scriptEl) {
|
||||
// scriptEl.onload = function () {
|
||||
// console.log('map.js loaded');
|
||||
|
||||
// };
|
||||
// scriptEl.setAttribute('href', '../../map.js');
|
||||
// }
|
||||
// };
|
||||
|
||||
// svg.prepend(linkEl);
|
||||
|
||||
this.style.opacity = 1;
|
||||
mapPlaceholder.style.opacity = 0;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { Observable } from "./observable";
|
||||
// import counters from '../../public/assets/images/counters.svg';
|
||||
// console.log('counters', counters);
|
||||
|
||||
// import svg from '../../public/assets/images/counters.svg';
|
||||
|
||||
// const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
|
||||
@ -40,7 +42,9 @@ function createIcon(number) {
|
||||
icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
|
||||
icon.setAttribute('xmlns', svgns);
|
||||
|
||||
use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
|
||||
// use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
|
||||
use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
|
||||
// use.setAttributeNS(null, 'href', `${counters}#counter-base`);
|
||||
|
||||
text.textContent = number;
|
||||
|
||||
@ -64,8 +68,9 @@ function createWeaponIcon(type) {
|
||||
icon.setAttribute('xmlns', svgns);
|
||||
icon.classList.add('weapon-icon');
|
||||
|
||||
use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
|
||||
// use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
|
||||
// use.setAttributeNS(null, 'href', `${counters}#${type}`);
|
||||
use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
|
||||
|
||||
icon.appendChild(use);
|
||||
// icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user