Put grid cells above buildings

public/assets/css/map.css

@@ -15,7 +15,7 @@ text {
 }
 
 use[href="#hex"] {
-  opacity: 0;
+  opacity: 0.25;
   fill: transparent;
   fill-opacity: 0.5;
   stroke-width: 0.5px;

public/assets/css/radial.css

@@ -68,78 +68,37 @@ use[href="#hex"] {
   stroke-linecap: square;
 }
 
-.elevation-basement {
+.building [class*="elevation"] {
-  fill: lightgray;
   display: none;
 }
 
-.elevation-0 use[href="#hex"] {
+[data-view-elevation="-1"] .building .elevation-basement {
-  /* fill: green; */
-}
-
-.elevation-1,
-.elevation-2 {
   display: inline;
 }
 
-.elevation-1 use[href="#hex"] {
+[data-view-elevation="0"] .building .elevation-0 {
-  fill: lightblue;
+  display: inline;
 }
 
-.elevation-2 use[href="#hex"] {
+[data-view-elevation="1"] .building .elevation-1 {
-  fill: lightpink;
+  display: inline;
 }
 
-.building .elevation-1 {
+[data-view-elevation="2"] .building .elevation-2 {
-  fill: lightblue;
+  display: inline;
 }
 
-.elevation-roof {
+[data-view-elevation="3"] .building .elevation-3 {
-  display: none;
+  display: inline;
-}
-
-.building .elevation-basement use {
-  fill: lightgray;
-}
-
-.building .elevation-0 use {
-  fill: white;
-}
-
-.building .elevation-1 use {
-  fill: lightblue;
-}
-
-.building .elevation-2 use {
-  fill: lightgreen;
-}
-
-.building .elevation-3 use {
-  fill: lightpink;
-}
-
-.view-elevation-roof .floor {
-  fill: darkgray;
-}
-
-.building .elevation-1 {
-  display: none;
-}
-
-.building > * {
-  display: none;
-}
-
-[data-view-elevation="-1"] [class^="elevation"] {
-  display: none;
 }
 
+/*
 [data-view-elevation="-1"] .building > *,
 [data-view-elevation="-1"] .building > .structure > * {
   display: none;
-}
+} */
 
-[data-view-elevation="-1"] .building > .elevation-basement,
+/* [data-view-elevation="-1"] .building > .elevation-basement,
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure,
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"],
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor,
@@ -147,9 +106,9 @@ use[href="#hex"] {
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits),
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture {
   display: inline;
-}
+} */
 
-[data-view-elevation="0"] .building .elevation-0,
+/* [data-view-elevation="0"] .building .elevation-0,
 [data-view-elevation="0"] .building .elevation-0 ~ .structure {
   display: inline;
 }
@@ -219,12 +178,7 @@ use[href="#hex"] {
 
 [data-view-elevation="1"] .building .elevation-1 {
   display: inline;
-}
+} */
-
-.building [class*="elevation"] use {
-  /* fill-opacity: 0.33; */
-  stroke: black;
-}
 
 #tree .trunk {
   fill: brown;

src/radial.js

@@ -405,6 +405,15 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
     let buildingGrid = translateCoords(building.grid, building.position);
     buildingGrid = translateCoords(buildingGrid, ({ q, r, s }) => ({ q: q + pq, r: r + pr, s: s + ps }));
 
+    const buildingTemplate = document.querySelector(`defs #${building.type}`);
+    const origin = building.position({ q: 0, r: 0, s: 0 });
+    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('structure');
+    buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
+    buildingContainer.appendChild(buildingStructure);
+
     building.elevationLevels.forEach(elevationLevel => {
       const hexContainer = document.createElementNS(xmlns, 'g');
       hexContainer.classList.add(`elevation-${elevationLevel === -1 ? 'basement' : elevationLevel}`);
@@ -415,24 +424,39 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
       acc = new Map([...acc, ...buildingGrid]);
     });
 
-    const buildingTemplate = document.querySelector(`defs #${building.type}`);
-    const origin = building.position({ q: 0, r: 0, s: 0 });
-    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('structure');
-    buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
-    buildingContainer.appendChild(buildingStructure);
-
     for (let child of buildingTemplate.children) {
       const use = document.createElementNS(xmlns, 'use');
       use.setAttributeNS(null, 'href', `#${child.id}`);
       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}`));
+
+      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}`));
+
+      if (use.classList.contains('windows'))
+        building.elevationLevels.slice(0, -1).filter(el => el >= 0).forEach(el => use.classList.add(`elevation-${el}`));
+
+      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}`));
+
+      if (use.classList.contains('furniture'))
+        building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
+
       buildingStructure.appendChild(use);
     }
 
     const furnitureEl = furniture && furniture.querySelector(`.${building.type} .furniture`);
-    if (furnitureEl) buildingStructure.appendChild(furnitureEl);
+
+    if (furnitureEl) {
+      for (let child of furnitureEl.children) {
+        (child.classList.contains('stairs') ? building.elevationLevels : building.elevationLevels.slice(0, -1)).forEach(el => child.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
+      }
+      buildingStructure.appendChild(furnitureEl);
+    }
 
     return acc;
   }, new Map());