Render different building elevation levels when selected

public/radial.html

@@ -118,6 +118,14 @@
       fill: lightblue;
     }
 
+    .building .elevation-2 use {
+      fill: lightgreen;
+    }
+
+    .building .elevation-3 use {
+      fill: lightpink;
+    }
+
     .view-elevation-roof .floor {
       fill: darkgray;
     }
@@ -126,7 +134,7 @@
       display: none;
     }
 
-    .building [class^="elevation"] {
+    .building > * {
       display: none;
     }
 
@@ -134,16 +142,65 @@
       display: none;
     }
 
-    [data-view-elevation="-1"] .building .elevation-basement {
+    [data-view-elevation="-1"] .building > * {
+      display: none;
+    }
+
+    [data-view-elevation="-1"] .building > .elevation-basement,
+    [data-view-elevation="-1"] .building > .elevation-basement ~ .structure {
       display: inline;
     }
 
+    [data-view-elevation="0"] .building .elevation-0,
+    [data-view-elevation="0"] .building .elevation-0 ~ .structure {
+      display: inline;
+    }
+
+    [data-view-elevation="1"] .building .elevation-1,
+    [data-view-elevation="1"] .building .elevation-1 ~ .structure {
+      display: inline;
+    }
+
+    [data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'] {
+      display: none;
+    }
+
+    [data-view-elevation="1"] .building .elevation-1 + .structure .floor {
+      fill: gray;
+    }
+
+    [data-view-elevation="2"] .building .elevation-2,
+    [data-view-elevation="2"] .building .elevation-2 ~ .structure {
+      display: inline;
+    }
+
+    [data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'] {
+      display: none;
+    }
+
+    [data-view-elevation="2"] .building .elevation-2 + .structure .floor {
+      fill: gray;
+    }
+
+    [data-view-elevation="3"] .building .elevation-3,
+    [data-view-elevation="3"] .building .elevation-3 ~ .structure {
+      display: inline;
+    }
+
+    [data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'] {
+      display: none;
+    }
+
+    [data-view-elevation="3"] .building .elevation-3 + .structure .floor {
+      fill: gray;
+    }
+
     [data-view-elevation="0"] .elevation-0 {
       display: inline;
     }
 
-    [data-view-elevation="1"]>.elevation-0,
+    [data-view-elevation="1"] > .elevation-0,
-    [data-view-elevation="1"]>.elevation-1 {
+    [data-view-elevation="1"] > .elevation-1 {
       display: inline;
     }
 
@@ -431,6 +488,8 @@
 
   <div class="select-elevation">
     <button>🡅</button>
+    <input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
+    <label for="select-elevation-3">3</label>
     <input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
     <label for="select-elevation-2">2</label>
     <input type="radio" id="select-elevation-1" name="select-elevation" value="1" />

src/radial.js

@@ -332,16 +332,19 @@ let mapsheet1 = {
   buildings: [
     {
       type: 'building2',
+      elevationLevels: range(0, 1),
       grid: buildingHexes.bld2,
       position: ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })
     },
     {
       type: 'building3',
+      elevationLevels: range(-1, 2),
       grid: new Map(buildingHexes.bld3),
       position: ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 })
     },
     {
       type: 'building4',
+      elevationLevels: range(0, 1),
       grid: generateRadialCoords(
         new Map(),
         { q: 0, r: 0, s: 0 },
@@ -357,11 +360,13 @@ let mapsheet1 = {
     },
     {
       type: 'building6',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld6),
       position: rotate180({ q: -13, r: 7, s: 6 })
     },
     {
       type: 'terrain',
+      elevationLevels: range(0, 0),
       grid: generateRadialCoords(
         new Map(),
         { q: 0, r: 0, s: 0 },
@@ -378,36 +383,43 @@ let mapsheet2 = {
   buildings: [
     {
       type: 'building1',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld1),
       position: ({ q, r, s }) => ({ q: q, r: r + 7, s: s - 7 })
     },
     {
       type: 'building2',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld2),
       position: ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })
     },
     {
       type: 'building3',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld3),
       position: ({ q, r, s }) => ({ q: q - 14, r: r + 5, s: s + 9 })
     },
     {
       type: 'building4',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld4),
       position: ({ q, r, s }) => ({ q: q - 8, r: r + 6, s: s + 2 })
     },
     {
       type: 'building5',
+      elevationLevels: range(-1, 3),
       grid: new Map(buildingHexes.bld5),
       position: ({ q, r, s }) => ({ q: q + 13, r: r - 6, s: s - 7 })
     },
     {
       type: 'building6',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld6),
       position: ({ q, r, s }) => ({ q: q + 7, r: r - 6, s: s - 1 })
     },
     {
       type: 'building7',
+      elevationLevels: range(-1, 3),
       grid: new Map(buildingHexes.bld7),
       position: ({ q, r, s }) => ({ q: q - 6, r: r - 5, s: s + 11 }),
     },
@@ -420,36 +432,43 @@ let mapsheet3 = {
   buildings: [
     {
       type: 'building1',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld1),
       position: ({ q, r, s }) => ({ q: q - 2, r: r - 5, s: s + 7 })
     },
     {
       type: 'building2',
+      elevationLevels: range(-1, 3),
       grid: new Map(buildingHexes.bld2),
       position: rotate180({ q: 9, r: -6, s: -3 })
     },
     {
       type: 'building3',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld3),
       position: rotate180({ q: 17, r: -7, s: -10 })
     },
     {
       type: 'building4',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld4),
       position: rotate180({ q: -10, r: -5, s: 15 })
     },
     {
       type: 'building5',
+      elevationLevels: range(-1, 2),
       grid: new Map(buildingHexes.bld5),
       position: ({ q, r, s }) => ({ q: q + 6, r: r + 8, s: s - 14 })
     },
     {
       type: 'building6',
+      elevationLevels: range(0, 1),
       grid: new Map(buildingHexes.bld6),
       position: rotate180({ q: 0, r: 6, s: -6 })
     },
     {
       type: 'building7',
+      elevationLevels: range(-1, 2),
       grid: new Map(buildingHexes.bld7),
       position: ({ q, r, s }) => ({ q: q - 12, r: r + 8, s: s + 4 })
     },
@@ -462,12 +481,17 @@ let mapsheet4 = {
   buildings: [
     {
       type: 'building8',
+      elevationLevels: range(0, 2),
       grid: buildingHexes.bld8,
       position: ({ q, r, s }) => ({ q: q + 1, r: r + 1, s: s - 2 })
     },
   ]
 }
 
+function range(start, stop, step = 1) {
+  return Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+}
+
 function rotate180(coords) {
   return function ({ q, r, s }) {
     return {
@@ -497,7 +521,7 @@ function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps
     let buildingGrid = translateCoords(building.grid, building.position);
     buildingGrid = translateCoords(buildingGrid, ({ q, r, s }) => ({ q: q + pq, r: r + pr, s: s + ps }));
 
-    [-1, 0, 1].forEach(elevationLevel => {
+    building.elevationLevels.forEach(elevationLevel => {
       const hexContainer = document.createElementNS(xmlns, 'g');
       hexContainer.classList.add(`elevation-${elevationLevel === -1 ? 'basement' : elevationLevel}`);
       buildingContainer.appendChild(hexContainer);
@@ -593,12 +617,12 @@ let sheets = [];
 // sheets = [[mapsheet1]];
 // sheets = [[mapsheet3]];
 // sheets = [[mapsheet2], [mapsheet3]];
-sheets = [[mapsheet2], [mapsheet1], [mapsheet3]];
+// sheets = [[mapsheet2], [mapsheet1], [mapsheet3]];
 
-// sheets = [
+sheets = [
-//   [mapsheet2, mapsheet1],
+  [mapsheet2, mapsheet1],
-//   [mapsheet3, mapsheet4]
+  [mapsheet3, mapsheet4]
-// ];
+];
 
 findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
   const vertMapVect = function(coords) {