Render roofs below current elevation level in different color

public/assets/css/map.css

@@ -393,7 +393,7 @@ g[data-y="76"] { --i: 76; }
 }
 
 .floor {
-  fill: white;
+  /* fill: white; */
   /* fill: inherit; */
 }
 

public/assets/css/radial.css

@@ -37,7 +37,7 @@ use[href="#hex"] {
 .terrain .floor {
   display: inline;
   opacity: 1;
-  fill: #ffffff;
+  /* fill: #ffffff; */
   /* fill-opacity: 0.5; */
   /* fill: url(#asterisk); */
   stroke: none;
@@ -63,6 +63,11 @@ use[href="#hex"] {
   display: none;
 }
 
+.building use.floor {
+  fill: gray;
+  display: inline;
+}
+
 [data-view-elevation="-1"] [class*="elevation"] {
   display: none;
 }
@@ -79,21 +84,43 @@ use[href="#hex"] {
   display: inline;
 }
 
+[data-view-elevation="-1"] .building use.floor {
+  display: none;
+}
+
+[data-view-elevation="-1"] .building use.floor.elevation-basement {
+  fill: white;
+  display: inline;
+}
+
+[data-view-elevation="0"] .building use.floor.elevation-0 {
+  fill: white;
+}
+
 [data-view-elevation="1"] .building .elevation-1 {
   display: inline;
 }
 
-[data-view-elevation="2"] .building .elevation-2,
+[data-view-elevation="1"] .building use.floor.elevation-1 {
-[data-view-elevation="2"] .building .elevation-1:last-child {
+  fill: white;
+}
+
+[data-view-elevation="2"] .building .elevation-2 {
   display: inline;
 }
 
-[data-view-elevation="3"] .building .elevation-3,
+[data-view-elevation="2"] .building use.floor.elevation-2 {
-[data-view-elevation="3"] .building .elevation-1:last-child,
+  fill: white;
-[data-view-elevation="3"] .building .elevation-2:last-child {
+}
+
+[data-view-elevation="3"] .building .elevation-3 {
   display: inline;
 }
 
+[data-view-elevation="3"] .building use.floor.elevation-3 {
+  fill: white;
+}
+
 #tree .trunk {
   fill: brown;
 }

public/assets/images/radial.svg

@@ -200,7 +200,7 @@
           <use href="#cabinet" transform="rotate(90,24.325,-0.675)" id="use4673" />
           <use href="#cabinet" transform="rotate(90,-36.295758,12.229118)" id="use4674" />
           <use href="#desk" transform="rotate(90,11.175,4.175)" id="use4675" />
-          <path class="stairs" d="m -28.65,-23.55 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z" id="path4675" />
+          <path class="stairs" d="m -28.65,-23.55 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z" />
         </g>
       </g>
 

src/radial.js

@@ -217,7 +217,13 @@ buildingHexes.bld8 = [
   [{ q: -7, r: 4, s: 3 }, { left: 1, top: 1, right: 1, bottom: 1 }]
 ].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map());
 
-const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 }, 'left');
+const mapsheetHexCoords = generateRadialCoords(
+  new Map(),
+  { q: 0, r: 0, s: 0 },
+  { left: 17, top: 13, right: 17, bottom: 14 },
+  'left'
+);
+
 const gameboard = svg.querySelector('.gameboard');
 const grid = svg.querySelector('.grid');
 
@@ -399,6 +405,14 @@ function rotate180(coords) {
   };
 }
 
+function elevationClass(el) {
+  return `elevation-${el === -1 ? 'basement' : el}`;
+}
+
+function addElevationClass(element) {
+  return el => element.classList.add(elevationClass(el));
+}
+
 function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture) {
   return buildings.reduce((acc, building) => {
     const buildingContainer = document.createElementNS(xmlns, 'g');
@@ -414,6 +428,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
     const { x, y } = radialToScreenCoords({ q: origin.q + pq, r: origin.r + pr, s: origin.s + ps });
     const transform = origin.transform || ((x, y) => `translate(${x}, ${y})`);
     const buildingStructure = document.createElementNS(xmlns, 'g');
+
     buildingStructure.classList.add('building');
     buildingStructure.classList.add(building.type);
     buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
@@ -423,7 +438,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
 
     building.elevationLevels.forEach(elevationLevel => {
       const hexContainer = document.createElementNS(xmlns, 'g');
-      hexContainer.classList.add(`elevation-${elevationLevel === -1 ? 'basement' : elevationLevel}`);
+      hexContainer.classList.add(elevationClass(elevationLevel));
       buildingContainer.appendChild(hexContainer);
 
       buildingGrid = translateCoords(buildingGrid, ({ q, r, s }) => ({ q, r, s, t: elevationLevel }));
@@ -437,21 +452,21 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
       child.classList.forEach(className => use.classList.add(className));
 
       if (use.classList.contains('floor'))
-        building.elevationLevels.forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
+        building.elevationLevels.forEach(addElevationClass(use));
 
       if (use.classList.contains('outer-wall') || use.classList.contains('inner-wall'))
-        building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
+        building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
 
       if (use.classList.contains('windows'))
-        building.elevationLevels.slice(0, -1).filter(el => el >= 0).forEach(el => use.classList.add(`elevation-${el}`));
+        building.elevationLevels.slice(0, -1).filter(el => el >= 0).forEach(addElevationClass(use));
 
       if (use.classList.contains('exits')) use.classList.add(`elevation-0`);
 
       if ((use.classList.contains('doors') || use.classList.contains('door-edges')) && !use.classList.contains('exits'))
-        building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
+        building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
 
       if (use.classList.contains('furniture'))
-        building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
+        building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
 
       buildingStructure.appendChild(use);
     }
@@ -459,9 +474,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
     const furnitureEl = furniture && furniture.querySelector(`.${building.type} .furniture`);
 
     if (furnitureEl) {
-      for (let child of furnitureEl.children) {
+      building.elevationLevels.slice(0, -1).forEach(addElevationClass(furnitureEl));
-        (child.classList.contains('stairs') ? building.elevationLevels : building.elevationLevels.slice(0, -1)).forEach(el => child.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
-      }
       buildingStructure.appendChild(furnitureEl);
     }
 
@@ -481,7 +494,12 @@ function drawMapsheet(gameboard, mapsheet, position) {
   const gridContainer = document.createElementNS(xmlns, 'g');
   gridContainer.classList.add('elevation-0');
 
-  const buildingHexes = drawBuildings(mapsheet.buildings, container, position, document.querySelector(`defs .${mapsheet.id}`));
+  const buildingHexes = drawBuildings(
+    mapsheet.buildings,
+    container,
+    position,
+    document.querySelector(`defs .${mapsheet.id}`)
+  );
 
   const grid = translateCoords(mapsheet.grid, ({ q, r, s }) =>
     ({ q: q + position.q, r: r + position.r, s: s + position.s })
@@ -492,9 +510,14 @@ function drawMapsheet(gameboard, mapsheet, position) {
 
   (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');
 
+    const { x, y } = radialToScreenCoords({
+      q: origin.q + position.q,
+      r: origin.r + position.r,
+      s: origin.s + position.s
+    });
+
     use.setAttributeNS(null, 'href', `#${feature.type}`);
     use.setAttributeNS(null, 'x', x);
     use.setAttributeNS(null, 'y', y);
@@ -522,12 +545,18 @@ function vectorAdd({ q, r, s }, { q: dq, r: dr, s: ds }, scalar) {
 function findMult(arr) {
   if (arr.length % 2)
     return arr.map((v, index) => {
-      const row = v.length % 2 ? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv]) : v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
+      const row = v.length % 2
+        ? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv])
+        : v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
+
       return [Math.floor(index - arr.length / 2) + 1, row];
     });
   else
     return arr.map((v, index) => {
-      const row = v.length % 2 ? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv]) : v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
+      const row = v.length % 2
+        ? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv])
+        : v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
+
       return [Math.floor(index - arr.length / 2), row];
     }).map(([m, v]) => [m > -1 ? m + 1 : m, v]);
 }