Web Dev Solutions

Catalin Mititiuc

From a80728f16f90616d93dcc9ed932528b35e2ef62d Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Fri, 24 May 2024 15:59:17 -0700 Subject: WIP: mock selenium response --- src/index.js | 32 ++++++++++++++++---------------- src/index.js.test | 13 +++++++++++++ src/modules/record_sheet.js | 26 ++++++++++++++++++++++++-- 3 files changed, 53 insertions(+), 18 deletions(-) create mode 100644 src/index.js.test (limited to 'src') diff --git a/src/index.js b/src/index.js index 604f877..8b24625 100644 --- a/src/index.js +++ b/src/index.js @@ -93,28 +93,28 @@ 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', 'http://localhost:8080/assets/css/map.css'); - // linkEl.setAttribute('type', 'text/css'); + 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'); + linkEl.onload = function (e) { + console.log('map.css loaded'); - // if (scriptEl) { - // scriptEl.onload = function () { - // console.log('map.js loaded'); + if (scriptEl) { + scriptEl.onload = function () { + console.log('map.js loaded'); - // }; - // scriptEl.setAttribute('href', 'http://localhost:8080/map.js'); - // } - // }; + }; + scriptEl.setAttribute('href', '../../map.js'); + } + }; - // svg.prepend(linkEl); + svg.prepend(linkEl); this.style.opacity = 1; mapPlaceholder.style.opacity = 0; diff --git a/src/index.js.test b/src/index.js.test new file mode 100644 index 0000000..f420f22 --- /dev/null +++ b/src/index.js.test @@ -0,0 +1,13 @@ +const svgns = 'http://www.w3.org/2000/svg'; +const [icon, use] = ['svg', 'use'].map(t => document.createElementNS(svgns, t)); + +icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12'); +icon.setAttribute('xmlns', svgns); +icon.classList.add('weapon-icon'); + +// use.setAttributeNS(null, 'href', `assets/images/counters.svg#rifle`); +use.setAttributeNS(null, 'href', `assets/images/counters2.svg#smg`); + +icon.appendChild(use); + +document.querySelector('body').appendChild(icon); diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 9fbca9d..185a96c 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -1,4 +1,15 @@ import { Observable } from "./observable"; +// import counters from '../../public/assets/images/counters.svg'; +// import svg from '../../public/assets/images/counters.svg'; + +// const doc = new DOMParser().parseFromString(svg, 'image/svg+xml'); +// const rifle = document.importNode(doc.querySelector('#rifle'), true); +// const smg = document.importNode(doc.querySelector('#smg'), true); + +// console.log('svg', counters); +// console.log('doc', doc); +// console.log('imported svg', rifle); +// console.log('imported svg', smg); const weapons = { rifle: { @@ -21,13 +32,15 @@ const weapons = { } } +const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join(''); + function createIcon(number) { const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t)); icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12'); icon.setAttribute('xmlns', svgns); - use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`); + use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`); text.textContent = number; @@ -37,6 +50,13 @@ function createIcon(number) { return icon; } +// 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 +} + function createWeaponIcon(type) { const [icon, use] = ['svg', 'use'].map(t => document.createElementNS(svgns, t)); @@ -44,9 +64,11 @@ function createWeaponIcon(type) { icon.setAttribute('xmlns', svgns); icon.classList.add('weapon-icon'); - use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`); + use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`); + // use.setAttributeNS(null, 'href', `${counters}#${type}`); icon.appendChild(use); + // icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true)); return icon; } -- cgit v1.2.3