Make stairs visible on roof levels

public/assets/css/style.css

@@ -490,9 +490,11 @@ input#content-visibility-toggle {
 }
 
 .select-elevation input:checked+label {
-  border: 1px solid salmon;
+  border: 1px solid #666;
   border-radius: 3px;
-  background-color: #cdd9e9;
+  background-color: orangered;
+  color: white;
+  font-weight: bold;
 }
 
 div#dice {

public/assets/images/radial.svg

@@ -200,8 +200,8 @@
           <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" />
         </g>
+        <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 class="building4">
@@ -309,8 +309,8 @@
           <use href="#cabinet" transform="translate(19.900087,16.070002)" id="use4800" />
           <use href="#cabinet" transform="translate(30.31,-22.5)" id="use4801" />
           <use href="#cabinet" transform="rotate(90,15.735,23.235)" id="use4802" />
-          <path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
         </g>
+        <path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
       </g>
 
       <g class="building6">
@@ -349,8 +349,8 @@
           <use href="#cabinet" transform="translate(43.32444,-29.937889)" />
           <use href="#cabinet" transform="rotate(90,56.56,4.06)" />
           <use href="#cabinet" transform="rotate(90,44.975,19.975)" />
-          <path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
         </g>
+        <path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
       </g>
     </g>
 
@@ -384,8 +384,8 @@
           <use href="#desk" transform="translate(-2.3299985,-14.999999)" />
           <use href="#desk" transform="translate(8.520001,-55.500002)" />
           <use href="#desk" transform="translate(-26.119999,-55.500002)" />
-          <path class="stairs" d="M -6.1299992,40.399998 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z" />
         </g>
+        <path class="stairs" d="M -6.1299992,40.399998 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z" />
       </g>
 
       <g class="building3">
@@ -430,8 +430,8 @@
           <use href="#cabinet" transform="translate(19.47,15.262772)" />
           <use href="#cabinet" transform="translate(27.97,-23.75)" />
           <use href="#cabinet" transform="rotate(90,15.735,23.235)" />
-          <path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
         </g>
+        <path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
       </g>
 
       <g class="building6">
@@ -472,15 +472,14 @@
           <use href="#cabinet" transform="translate(43.32444,-29.937889)" />
           <use href="#cabinet" transform="rotate(90,56.56,4.06)" />
           <use href="#cabinet" transform="rotate(90,44.975,19.975)" />
-          <path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
         </g>
+        <path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
       </g>
     </g>
 
     <g class="mapsheet4">
       <g class="building8">
         <g class="furniture">
-          <path class="stairs" d="m 54.02,5.2499999 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
           <use href="#couch" transform="translate(-77.94,-90.000001)" />
           <use href="#couch" transform="translate(8.6600002,-87.000003)" />
           <use href="#couch" transform="translate(25.98,-87.000003)" />
@@ -518,6 +517,7 @@
           <use href="#cabinet" transform="rotate(90,-4.9251985,38.609082)" />
           <use href="#cabinet" transform="translate(90.183883,50.534279)" />
         </g>
+        <path class="stairs" d="m 54.02,5.2499999 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
       </g>
     </g>
   </defs>

public/index.html

@@ -125,6 +125,10 @@
         </label>
       </div>
 
+      <div id="toggle-grid-vis">
+        <input type="checkbox" checked />
+      </div>
+
       <div id="toggle-firing-arc-vis">
         <input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
         <label style="color: red;" for="defender-firing-arc-vis">

src/index.js

@@ -249,6 +249,12 @@ document.querySelectorAll('[name="select-elevation"]').forEach(el => {
   });
 });
 
+document.querySelector('#toggle-grid-vis input').addEventListener('change', function () {
+  const svg = document.querySelector('object').contentDocument.querySelector('svg');
+  svg.querySelector('.grid').style.display = this.checked ? 'inline' : 'none';
+  svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none';
+});
+
 contentVisToggleEl.addEventListener('input', toggleContentVis);
 contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
 toggleContentVis();

src/radial.js

@@ -413,7 +413,7 @@ function addElevationClass(element) {
   return el => element.classList.add(elevationClass(el));
 }
 
-function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture) {
+function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, features) {
   return buildings.reduce((acc, building) => {
     const buildingContainer = document.createElementNS(xmlns, 'g');
     buildingContainer.classList.add(`building`);
@@ -465,17 +465,19 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
       if ((use.classList.contains('doors') || use.classList.contains('door-edges')) && !use.classList.contains('exits'))
         building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
 
-      if (use.classList.contains('furniture'))
-        building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
-
       buildingStructure.appendChild(use);
     }
 
-    const furnitureEl = furniture && furniture.querySelector(`.${building.type} .furniture`);
+    const featuresEl = features && features.querySelector(`.${building.type}`);
 
-    if (furnitureEl) {
+    for (let child of [...featuresEl.children]) {
-      building.elevationLevels.slice(0, -1).forEach(addElevationClass(furnitureEl));
+      if (child.classList.contains('furniture'))
-      buildingStructure.appendChild(furnitureEl);
+        building.elevationLevels.slice(0, -1).forEach(addElevationClass(child));
+
+      if (child.classList.contains('stairs'))
+        building.elevationLevels.forEach(addElevationClass(child));
+
+      buildingStructure.appendChild(child);
     }
 
     return acc;