Add a map.js

.gitignore

@@ -2,3 +2,4 @@
 *.tgz
 dist
 node_modules
+build

dev-server.cjs

@@ -2,7 +2,8 @@ const { createServer } = require('esbuild-server');
 const server = createServer(
   {
     bundle: true,
-    entryPoints: ['src/index.js']
+    entryPoints: ['src/index.js', 'src/map.js'],
+    outdir: 'build'
   },
   {
     static: 'public',

src/map.js

@@ -0,0 +1,58 @@
+const svgns = "http://www.w3.org/2000/svg";
+const svg = document.querySelector('svg');
+const cellTemplate = svg.querySelector('#hex');
+const gb = svg.querySelector('.gameboard');
+const bg = svg.querySelector('#background');
+const imageMaps = svg.querySelector('#image-maps');
+const grid = gb.querySelector('.grid');
+const dataset = document.currentScript.dataset;
+
+if ('cols' in dataset && 'rows' in dataset) {
+  createCells(grid, dataset, cellTemplate.id);
+  setElAttrs(bg, calcComputedBboxFor(imageMaps));
+  svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));
+}
+
+function setElAttrs(el, attrs) {
+  for (key in attrs) {
+    el.setAttributeNS(null, key, attrs[key]);
+  }
+}
+
+function formatForViewBox({ x, y, width, height }) {
+  return `${x} ${y} ${width} ${height}`;
+}
+
+function calcComputedBboxFor(el) {
+  const { x, y, width, height } = el.getBBox();
+  const originPt = new DOMPoint(x, y);
+  const maxPt = new DOMPoint(width + x, height + y);
+
+  const sequence = getComputedStyle(el).transform.match(/-?\d+\.?\d*/g);
+  const mtx = new DOMMatrix(sequence || '');
+
+  const { x: originPtX, y: originPtY } = originPt.matrixTransform(mtx);
+  const { x: maxPtX, y: maxPtY } = maxPt.matrixTransform(mtx);
+
+  return { x: originPtX, y: originPtY, width: maxPtX - originPtX, height: maxPtY - originPtY };
+}
+
+function createCells(container, { cols, rows }, templateId) {
+  for (let rowNum = 0; rowNum < +rows; rowNum++) {
+    const row = document.createElementNS(svgns, 'g');
+    row.dataset.y = rowNum;
+
+    for (let colNum = 0; colNum < +cols; colNum++) {
+      const cell = document.createElementNS(svgns, 'g');
+      cell.dataset.x = colNum;
+
+      const cellShape = document.createElementNS(svgns, 'use');
+      cellShape.setAttribute('href', `#${templateId}`);
+
+      cell.appendChild(cellShape);
+      row.appendChild(cell);
+    }
+
+    container.appendChild(row);
+  }
+}