| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-28 14:45:20 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-28 14:45:20 -0700 |
| commit | e8fbe161e473a949f776f89d94e9816a64cd3114 (patch) | |
| tree | 5def4f8e9e499d3280bc83c5f23edd642850193c /src | |
| parent | a34cd1a5414eec5a059c5f20a3940bf4ef6b977e (diff) | |
Import mapsheets.svg
Diffstat (limited to 'src')
| -rw-r--r-- | src/import_mapsheets.js | 8 | ||||
| -rw-r--r-- | src/index.js | 45 | ||||
| -rw-r--r-- | src/modules/record_sheet.js | 9 |
3 files changed, 43 insertions, 19 deletions
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)); |