| 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-07-10 17:35:18 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-10 17:35:18 -0700 |
| commit | b3f902f012e04facad489c613b5c577a1788b570 (patch) | |
| tree | a0dd26414256b88cd800424cc8cee91a918cb34b /src | |
| parent | 4cf7aaab807f36721416eedfe5f9fab3f0c55e20 (diff) | |
Build scenarios from scenario files
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.js | 46 | ||||
| -rw-r--r-- | src/index.js.test | 13 | ||||
| -rw-r--r-- | src/modules/scenario.js | 28 | ||||
| -rw-r--r-- | src/radial.js | 20 |
4 files changed, 64 insertions, 43 deletions
diff --git a/src/index.js b/src/index.js index 98a3c1b..e6efe5f 100644 --- a/src/index.js +++ b/src/index.js @@ -19,12 +19,12 @@ const mapPlaceholder = document.querySelector('.map-placeholder'), proneToggle = document.getElementById('toggle-prone-counter'), contentVisToggleEl = document.querySelector('#edge-inputs input[type="checkbox"].visible'), // fileName = localStorage.getItem('map') || 'scenario-side_show', - fileName = localStorage.getItem('map') || 'radial', + fileName = localStorage.getItem('map') || 'scenario-side_show', map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`, + scenarioRequest = requestResource(map), fileInputEl = document.querySelector('input[type="file"]'), dice = document.querySelectorAll('.die'), mapResourceEl = document.querySelector('object'), - scenarioRequest = requestResource(map), d6 = { 1: 'one', @@ -55,10 +55,28 @@ async function buildScenario(req) { gameboard.stop(); recordSheet.stop(); - const svg = scenarioTemplate.querySelector('svg').cloneNode(true); - document.querySelector('object').contentDocument.querySelector('svg').replaceWith(svg); + // const svg = scenarioTemplate.querySelector('svg').cloneNode(true); + + const svg = document.querySelector('object').contentDocument.querySelector('svg'); await build(svg, req); + const scenario = await req; + + const attrNames = { + 'primary-weapon': 'weapon', + 'troop-number': 'number', + 'squad-number': 'squad' + }; + + const scenarioUnits = scenario.querySelectorAll('svg g.counter'); + + scenarioUnits.forEach(cntr => { + cntr.querySelectorAll('use').forEach(use => { + const [attr] = use.classList; + const val = use.getAttributeNS(null, 'href').split('#').pop().split('-').pop(); + cntr.setAttributeNS(null, `data-${attrNames[attr]}`, val); + }); + }); mapResourceEl.style.opacity = 1; mapPlaceholder.style.opacity = 0; @@ -67,25 +85,7 @@ async function buildScenario(req) { gameboard.start(svg); // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits()); - const units = [ - { dataset: { allegiance: 'attacker', number: 1, squad: 1, weapon: 'blazer' }}, - { dataset: { allegiance: 'attacker', number: 2, squad: 1, weapon: 'rifle' }}, - { dataset: { allegiance: 'attacker', number: 3, squad: 1, weapon: 'rifle' }}, - { dataset: { allegiance: 'attacker', number: 4, squad: 1, weapon: 'smg' }}, - { dataset: { allegiance: 'attacker', number: 5, squad: 1, weapon: 'smg' }}, - { dataset: { allegiance: 'attacker', number: 6, squad: 1, weapon: 'smg' }}, - { dataset: { allegiance: 'attacker', number: 7, squad: 1, weapon: 'smg' }}, - - { dataset: { allegiance: 'defender', number: 1, squad: 1, weapon: 'blazer' }}, - { dataset: { allegiance: 'defender', number: 2, squad: 1, weapon: 'rifle' }}, - { dataset: { allegiance: 'defender', number: 3, squad: 1, weapon: 'rifle' }}, - { dataset: { allegiance: 'defender', number: 4, squad: 1, weapon: 'smg' }}, - { dataset: { allegiance: 'defender', number: 5, squad: 1, weapon: 'smg' }}, - { dataset: { allegiance: 'defender', number: 6, squad: 1, weapon: 'smg' }}, - { dataset: { allegiance: 'defender', number: 7, squad: 1, weapon: 'smg' }}, - ] - - recordSheet.start(null, units); + recordSheet.start(null, scenarioUnits); } function updateTurnCounter() { diff --git a/src/index.js.test b/src/index.js.test deleted file mode 100644 index f420f22..0000000 --- a/src/index.js.test +++ /dev/null @@ -1,13 +0,0 @@ -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/scenario.js b/src/modules/scenario.js index bde8cf3..c15f500 100644 --- a/src/modules/scenario.js +++ b/src/modules/scenario.js @@ -1,3 +1,6 @@ +import counters from './assets/images/counters.svg'; +import mapsheets from './assets/images/mapsheets.svg'; + async function loadScript(scenario, svg, script) { return new Promise((resolve, reject) => { const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script'); @@ -54,6 +57,8 @@ export async function build(svg, request) { const startLocs = scenario.querySelector('.start-locations'); const externalResourceEls = Array.from(scenario.querySelectorAll('use[href*=".svg"')); + scenario.querySelectorAll('defs > *').forEach(el => defs.append(svg.ownerDocument.importNode(el, true))); + const refs = externalResourceEls.reduce((acc, el) => { const href = el.getAttributeNS(null, 'href'); const [filename] = href.match(/.+\.svg/); @@ -65,8 +70,16 @@ export async function build(svg, request) { return acc; }, {}); + console.log('refs', refs); + console.log(counters.split('/').pop().split('-').shift()); + + const hashedFilenames = { + 'counters.svg': counters, + 'mapsheets.svg': mapsheets + } + await Promise.all( - Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`)) + Object.keys(refs).map(filename => requestResource(hashedFilenames[filename])) ).then(result => { Object.keys(refs).forEach((filename, index) => { const external = result[index]; @@ -85,11 +98,14 @@ export async function build(svg, request) { }); }); - 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)) + //); + + // startLocs.querySelectorAll('.counter').forEach(el => console.log(el)); + //console.log(startLocs); - if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true)); + //if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true)); const scenarioGrid = scenario.querySelector('.grid'); @@ -97,7 +113,7 @@ export async function build(svg, request) { grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true)); } - defs.replaceWith(scenario.querySelector('defs')); + //defs.replaceWith(scenario.querySelector('defs')); await loadScript(scenario, svg, 'radial') return loadScript(scenario, svg, 'map'); diff --git a/src/radial.js b/src/radial.js index 7288640..e7811fd 100644 --- a/src/radial.js +++ b/src/radial.js @@ -590,11 +590,28 @@ function findScalar(arr) { }); } +const mapsheets = [mapsheet1, mapsheet2, mapsheet3, mapsheet4].reduce((acc, ms) => { + acc[ms.id] = ms; + return acc; +}, {}); + +console.log(mapsheets); + let sheets = []; +const scenarioMapsheets = document.querySelectorAll('.grid [class^="mapsheet"]'); + +sheets = [...scenarioMapsheets].map(m => { + const [mapName] = m.classList; + return [mapsheets[mapName]]; +}); + +scenarioMapsheets.forEach(el => el.remove()); +document.querySelectorAll('use[href^="#building"]').forEach(el => el.remove()); + // sheets = [[mapsheet1]]; // sheets = [[mapsheet2]]; -sheets = [[mapsheet2], [mapsheet3]]; +// sheets = [[mapsheet2], [mapsheet3]]; // sheets = [[mapsheet2], [mapsheet1], [mapsheet3]]; // drawMapsheet(grid, mapsheet2, vectorAdd({ q: 0, r: 0, s: 0 }, { q: 1, r: -2, s: 1 }, 6)); @@ -628,6 +645,7 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => { }) }); + const circle = document.createElementNS(xmlns, 'circle'); circle.setAttributeNS(null, 'r', 5); circle.setAttributeNS(null, 'fill', 'green'); |