Build scenarios from data in SVG files

src/radial.js

@@ -438,7 +438,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, features)
       acc = new Map([...acc, ...buildingGrid]);
     });
 
-    for (let child of buildingTemplate.children) {
+    for (let child of buildingTemplate.querySelector('.structure').children) {
       const use = document.createElementNS(xmlns, 'use');
       use.setAttributeNS(null, 'href', `#${child.id}`);
       child.classList.forEach(className => use.classList.add(className));
@@ -559,27 +559,29 @@ function findMult(arr) {
     }).map(([m, v]) => [m > -1 ? m + 1 : m, v]);
 }
 
-function findScalar(arr) {
+function findScalar(arr, width, height) {
   let pos;
   let neg;
 
   if (arr.length % 2) {
-    pos = -13;
-    neg = -13;
+    pos = -height;
+    neg = -height;
   } else {
-    pos = -7;
-    neg = -6;
+    const vert = Math.floor(height / 2);
+    pos = -vert - height % 2;
+    neg = -vert;
   }
 
   return arr.map(([mult, v]) => {
     let hpos, hneg;
 
     if (v.length % 2) {
-      hpos = 33;
-      hneg = 33;
+      hpos = width;
+      hneg = width;
     } else {
-      hpos = 16;
-      hneg = 17;
+      const horz = Math.floor(width / 2);
+      hpos = horz;
+      hneg = horz + width % 2;
     }
 
     const row = v.map(([hmult, hv]) => [hmult < 0 ? hmult * hneg : hmult * hpos, hv]);
@@ -594,38 +596,48 @@ const mapsheets = [mapsheet1, mapsheet2, mapsheet3, mapsheet4].reduce((acc, ms)
 
 let sheets = [];
 
-const msGrps = [...document.querySelectorAll('.grid .mapsheets > *')].map(g => [...g.querySelectorAll('[class^="mapsheet"]')]);
+const mapsheetsContainer = document.querySelector('.grid .mapsheets');
+let { width, height } = mapsheetsContainer.dataset;
+width = width ? +width - 1 : 33;
+height = height ? +height : 13;
+
+const mapRect = {
+  left: width ? Math.floor(+width / 2) : 17,
+  right: width ? Math.floor(+width / 2) + +width % 2 : 17,
+  top: height ? height - 1: 13,
+  bottom: height ? height : 14
+};
+
+const msGrps = [...document.querySelectorAll('.grid .mapsheets > *')].map(g =>
+  [...g.querySelectorAll('[class^="mapsheet"]')]
+);
 
 sheets = msGrps.map(msG => {
   return msG.map(mapsheetEl => {
     const mapsheetDef = document.querySelector(`defs #${mapsheetEl.getAttributeNS(null, 'class')}`);
-    const buildings = mapsheetDef.querySelectorAll('[class^="building"]');
+    const buildings = mapsheetDef.children;
+    const offset = height % 2 ? 'left' : 'right';
 
     const mapsheet = {
       id: mapsheetDef.id,
-      grid: generateRadialCoords(
-        new Map(),
-        { q: 0, r: 0, s: 0 },
-        'left' in mapsheetDef.dataset ? toRect(mapsheetDef.dataset) : { left: 17, top: 13, right: 17, bottom: 14 },
-        'left'
-      ),
+      grid: generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, mapRect, offset),
       buildings: [...buildings].map(bld => {
         const bldId = bld.getAttributeNS(null, 'class');
         const bldDef = document.querySelector(`defs #${bldId}`);
 
+        const grid = [...bldDef.querySelectorAll('.footprint g')].reduce((acc, coordEl) => {
+          acc = generateRadialCoords(acc, toRad(coordEl.dataset), toRect(coordEl.dataset), coordEl.dataset.offset);
+          return acc;
+        }, new Map());
+
+        const { q: dq, r: dr, s: ds } = toRad(bld.dataset);
+        const position = bld.dataset.rotate ? rotate180({ q: +dq, r: +dr, s: +ds }) : ({ q, r, s }) => ({ q: q + +dq, r: r + +dr, s: s + +ds });
+
         return {
           type: bld.getAttributeNS(null, 'class'),
-          elevationLevels: range(0, 1),
-          grid: generateRadialCoords(
-            new Map(),
-            { q: 0, r: 0, s: 0 },
-            toRect(bldDef.dataset),
-            'left'
-          ),
-          position: ({ q, r, s }) => {
-            const { q: dq, r: dr, s: ds } = toRad(bld.dataset);
-            return { q: q + +dq, r: r + +dr, s: s + +ds };
-          }
+          elevationLevels: bld.dataset.el ? range(...bld.dataset.el?.split(',').map(n => +n)) : range(0, 1),
+          grid: grid,
+          position: position
         }
       })
     }
@@ -634,7 +646,7 @@ sheets = msGrps.map(msG => {
   });
 });
 
-sheets = []
+// sheets = []
 
 const scenarioMapsheets = document.querySelectorAll('.grid [class^="mapsheet"]');
 
@@ -671,7 +683,7 @@ document.querySelectorAll('use[href^="#building"]').forEach(el => el.remove());
 
 let finalGrid = new Map();
 
-findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
+findScalar(findMult(sheets), +width + 1, +height).forEach(([vscalar, row]) => {
   const vertMapVect = function (coords) {
     return vectorAdd(coords, { q: 1, r: -2, s: 1 }, vscalar);
   }
@@ -714,12 +726,12 @@ function toRad({ q, r, s }) {
   return { q: +q, r: +r, s: +s };
 }
 
-const mapsheetEls = document.querySelectorAll('.grid .mapsheet');
+// const mapsheetEls = document.querySelectorAll('.grid .mapsheet');
 
-drawHexes(addGroup(grid, 'elevation-0'), translateCoords(generateRadialCoords(
-  new Map(),
-  { q: 5, r: -4, s: -1 },
-  { left: 2, top: 4, right: 3, bottom: 5 }
-  , 'both'
-), ({ q, r, s }) => ({ q, r, s })), true);
+// drawHexes(addGroup(grid, 'elevation-0'), translateCoords(generateRadialCoords(
+//   new Map(),
+//   { q: 5, r: -4, s: -1 },
+//   { left: 2, top: 4, right: 3, bottom: 5 }
+//   , 'both'
+// ), ({ q, r, s }) => ({ q, r, s })), true);
 // ), ({ q, r, s }) => ({ q: -r, r: -s, s: -q })), true);