1 files changed, 31 insertions, 12 deletions
diff --git a/src/radial.js b/src/radial.js
index 4812e1f..92e2ae9 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -364,9 +364,10 @@ let mapsheet1 = {
       grid: new Map(buildingHexes.bld6),
       position: rotate180({ q: -13, r: 7, s: 6 })
     },
+  ],
+  features: [
     {
       type: 'terrain',
-      elevationLevels: range(0, 0),
       grid: generateRadialCoords(
         new Map(),
         { q: 0, r: 0, s: 0 },
@@ -503,16 +504,8 @@ function rotate180(coords) {
   };
 }
 
-function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps }) {
-  const container = document.createElementNS(xmlns, 'g');
-  container.id = id;
-  gameboard.appendChild(container);
-
-  const gridContainer = document.createElementNS(xmlns, 'g');
-  gridContainer.classList.add('elevation-0');
-  container.appendChild(gridContainer);
-
-  const buildingHexes = buildings.reduce((acc, building) => {
+function drawBuildings(mapsheet, container, { q: pq, r: pr, s: ps }) {
+  return mapsheet.buildings.reduce((acc, building) => {
     const buildingContainer = document.createElementNS(xmlns, 'g');
     buildingContainer.classList.add(`building`);
     buildingContainer.classList.add(building.type);
@@ -549,12 +542,38 @@ function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps
 
     return acc;
   }, new Map());
+}
 
-  grid = translateCoords(grid, ({ q, r, s }) => ({ q: q + pq, r: r + pr, s: s + ps }));
+function drawMapsheet(gameboard, mapsheet, position) {
+  const container = document.createElementNS(xmlns, 'g');
+  container.id = mapsheet.id;
+  gameboard.appendChild(container);
+
+  const gridContainer = document.createElementNS(xmlns, 'g');
+  gridContainer.classList.add('elevation-0');
+  container.appendChild(gridContainer);
+
+  const buildingHexes = drawBuildings(mapsheet, container, position);
+
+  const grid = translateCoords(mapsheet.grid, ({ q, r, s }) =>
+    ({ q: q + position.q, r: r + position.r, s: s + position.s })
+  );
 
   for ([coords, v] of buildingHexes) grid.delete(coords);
   drawHexes(gridContainer, grid, true);
 
+  (mapsheet.features || []).forEach(feature => {
+    const origin = feature.position({ q: 0, r: 0, s: 0 });
+    const { x, y } = radialToScreenCoords({ q: origin.q + position.q, r: origin.r + position.r, s: origin.s + position.s });
+    const use = document.createElementNS(xmlns, 'use');
+
+    use.setAttributeNS(null, 'href', `#${feature.type}`);
+    use.setAttributeNS(null, 'x', x);
+    use.setAttributeNS(null, 'y', y);
+
+    gridContainer.appendChild(use);
+  });
+
   return new Map([...grid, ...buildingHexes]);
   // return { id, grid, buildings };
 }