From e8fbe161e473a949f776f89d94e9816a64cd3114 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Tue, 28 May 2024 14:45:20 -0700 Subject: Import mapsheets.svg --- package.json | 1 + public/assets/images/counters.svg | 2 +- public/assets/images/mapsheets.svg | 38 +++++++------- public/assets/images/scenario-dragon_hunting.svg | 26 +++------ .../assets/images/scenario-race_against_time.svg | 9 ++-- public/assets/images/scenario-side_show.svg | 18 +------ public/index.html | 3 ++ public/index.html.test | 14 ----- server.cjs | 61 ++++++++++++++++++++-- src/import_mapsheets.js | 8 +++ src/index.js | 45 ++++++++++------ src/modules/record_sheet.js | 9 +++- 12 files changed, 138 insertions(+), 96 deletions(-) delete mode 100644 public/index.html.test create mode 100644 src/import_mapsheets.js diff --git a/package.json b/package.json index 3c0548c..43111f7 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg index 2254d3d..ec9cff6 100644 --- a/public/assets/images/counters.svg +++ b/public/assets/images/counters.svg @@ -1,7 +1,7 @@ diff --git a/public/index.html b/public/index.html index e952f81..4a5752d 100644 --- a/public/index.html +++ b/public/index.html @@ -246,6 +246,9 @@ + diff --git a/public/index.html.test b/public/index.html.test deleted file mode 100644 index e7cde7d..0000000 --- a/public/index.html.test +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - diff --git a/server.cjs b/server.cjs index 1910f2b..b41f7eb 100644 --- a/server.cjs +++ b/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 }, diff --git a/src/import_mapsheets.js b/src/import_mapsheets.js new file mode 100644 index 0000000..2e1b0fc --- /dev/null +++ b/src/import_mapsheets.js @@ -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); +}); diff --git a/src/index.js b/src/index.js index 8b24625..9ed2d90 100644 --- a/src/index.js +++ b/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); + // }); + + // 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); + // svg.prepend(linkEl); this.style.opacity = 1; mapPlaceholder.style.opacity = 0; diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 185a96c..61cea98 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -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)); -- cgit v1.2.3