Allow generic maps to be still generated

public/assets/images/map4.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
+  <g class="gameboard">
+    <g class="grid"></g>
+
+    <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
+      <g data-edge="north" style="--i: -2">
+        <g data-x="13">
+          <g class="counter" data-allegiance="attacker" data-number="1">
+            <use class="primary-weapon" href="counters.svg#blazer"/>
+            <use class="troop-number" href="counters.svg#number-1"/>
+            <use class="squad-number" href="counters.svg#number-1"/>
+          </g>
+        </g>
+      </g>
+
+      <g data-edge="south" style="--i: 53">
+        <g data-x="13">
+          <g class="counter" data-allegiance="defender" data-number="1">
+            <use class="primary-weapon" href="#blazer"/>
+            <use class="troop-number" href="counters.svg#number-1"/>
+            <use class="squad-number" href="counters.svg#number-1"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <script data-left="2" data-right="2" data-top="2" data-bottom="2"></script>
+</svg>

src/index.js

@@ -18,7 +18,6 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   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') || 'scenario-side_show',
   map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
   scenarioRequest = requestResource(map),

src/map.js

@@ -7,20 +7,12 @@ const imageMaps = svg.querySelector('#image-maps');
 const grid = gb.querySelector('.grid');
 const dots = gb.querySelector('#dots');
 
-if ('cols' in dataset && 'rows' in dataset) {
-  const cellTemplate = svg.querySelector('#hex');
-
-  createCells(grid, dataset, cellTemplate.id);
-}
-
 const sequence = getComputedStyle(gb).transform.match(/-?\d+\.?\d*/g);
 const mtx = new DOMMatrix(sequence || '');
 bg.style.transform = mtx;
 
 const bbox = grid.getBBox();
 
-bbox.height += 5;
-
 setElAttrs(bg, bbox);
 setElAttrs(dots, bbox)
 svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));

src/modules/scenario.js

@@ -15,11 +15,7 @@ async function loadScript(scenario, svg, script) {
     };
 
     const dataset = scenario.querySelector('script')?.dataset || {};
-
-    if ('cols' in dataset && 'rows' in dataset) {
-      scriptEl.dataset.rows = dataset.rows;
-      scriptEl.dataset.cols = dataset.cols;
-    }
+    Object.entries(dataset).forEach(([k, v]) => scriptEl.dataset[k] = v);
 
     scriptEl.setAttributeNS(null, 'href', `../../${script}.js`);
     svg.append(scriptEl);

src/modules/scenarios.js

@@ -1,6 +1,7 @@
 import sideShow from './assets/images/scenario-side_show.svg';
 import dragonHunting from './assets/images/scenario-dragon_hunting.svg';
 import raceAgainstTime from './assets/images/scenario-race_against_time.svg';
+import map4 from './assets/images/map4.svg';
 
 export const scenarios = {
   'scenario-side_show': {
@@ -15,4 +16,8 @@ export const scenarios = {
     hashed: raceAgainstTime,
     title: 'BattleTroops Scenario 3: Race Against Time',
   },
+  'map4': {
+    hashed: map4,
+    title: 'Test map'
+  }
 }

src/radial.js

@@ -646,3 +646,16 @@ function addGroup(container, className) {
   container.appendChild(g);
   return g;
 }
+
+const { left, right, top, bottom } = document.currentScript.dataset;
+
+if (left && right && top && bottom) {
+  const map = generateRadialCoords(
+    new Map(),
+    { q: 0, r: 0, s: 0 },
+    { left: +left, top: +top, right: +right, bottom: +bottom },
+    'both'
+  );
+
+  drawHexes(addGroup(grid, 'elevation-0'), map);
+}