Build scenarios from scenario files

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() {

src/index.js.test

@@ -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);

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))
+  //);
 
-  if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true));
+  // startLocs.querySelectorAll('.counter').forEach(el => console.log(el));
+  //console.log(startLocs);
+
+  //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');

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');