1 files changed, 58 insertions, 0 deletions
diff --git a/src/map.js b/src/map.js
new file mode 100644
index 0000000..7a04626
--- /dev/null
+++ b/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);
+  }
+}