2 files changed, 167 insertions, 54 deletions
diff --git a/public/radial.html b/public/radial.html
index 9dbee63..784040e 100644
--- a/public/radial.html
+++ b/public/radial.html
@@ -1,52 +1,139 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <style>
-      polygon {
-        fill: inherit;
-        stroke: black;
-        stroke-width: 0.5px;
-      }
-
-      svg {
-        border: 1px solid slategray;
-        fill: none;
-      }
-
-      text {
-        font-size: 4px;
-        text-anchor: middle;
-        user-select: none;
-        font-family: sans-serif;
-        fill: black;
-      }
-
-      .buildings .elevation-basement {
-        fill: lightgray;
-        /* display: none; */
-      }
-
-      .elevation-1 {
-        /* display: none; */
-      }
-
-      .buildings .elevation-1 {
-        fill: lightgreen;
-        /* display: none; */
-      }
-
-      .buildings .elevation-2 {
-        fill: lightpink;
-        display: none;
-      }
-    </style>
-  </head>
-  <body>
-    <svg viewBox="-300 -200 600 400" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
-      </defs>
-    </svg>
-    <script src="radial.js"></script>
-  </body>
+
+<head>
+  <style>
+    polygon {
+      fill: inherit;
+      stroke: #999;
+      stroke-width: 0.25px;
+    }
+
+    svg {
+      border: 1px solid slategray;
+      fill: none;
+    }
+
+    text {
+      font-size: 4px;
+      text-anchor: middle;
+      user-select: none;
+      font-family: sans-serif;
+      fill: black;
+      display: none;
+    }
+
+    .elevation-basement {
+      fill: lightgray;
+      display: none;
+    }
+
+    .elevation-1 {
+      /* filter: blur(.5px);
+        opacity: 0.25; */
+    }
+
+    .buildings .elevation-1,
+    .building .elevation-1 {
+      /* display: none; */
+      fill: lightgreen;
+    }
+
+    .elevation-2 {
+      fill: rgb(240, 216, 172);
+      display: none;
+    }
+
+    .elevation-roof {
+      display: none;
+    }
+
+    .building .doors {
+      display: inline;
+      fill: none;
+      fill-opacity: 1;
+      stroke: #ff9900;
+      stroke-width: 2.5;
+      stroke-linecap: square;
+      stroke-dasharray: none;
+      stroke-opacity: 1;
+    }
+
+    .building .floor {
+      opacity: 1;
+      fill: #ffffff;
+      fill-opacity: 0.5;
+      stroke: none;
+    }
+
+    .building .inner-wall {
+      fill: none;
+      stroke: #ffffff;
+      stroke-width: 1;
+      stroke-linecap: square;
+    }
+
+    .building .outer-wall {
+      fill: none;
+      stroke: #000000;
+      stroke-width: 2;
+      stroke-linecap: square;
+    }
+
+    .building.view-elevation-roof .doors,
+    .building.view-elevation-roof .inner-wall,
+    .building.view-elevation-roof .outer-wall {
+      display: none;
+    }
+
+    .building .elevation-1 {
+      display: none;
+    }
+
+    .building.view-elevation-roof .floor {
+      fill: darkgray;
+    }
+
+    .building.view-elevation-1 .elevation-1 {
+      display: inline;
+    }
+
+    .building.view-elevation-2 .elevation-2 {
+      display: inline;
+    }
+
+    .building.view-elevation-roof .elevation-roof {
+      display: inline;
+    }
+
+    .building.view-elevation-basement .elevation-basement {
+      display: inline;
+    }
+
+    .building.view-elevation-basement .doors {
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+  <svg viewBox="-300 -200 600 400" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
+    </defs>
+    <g id="building2" class="building view-elevation-1" transform="translate(-181.86, 105)">
+      <!-- <g id="building2" class=".building"> -->
+      <path class="floor"
+        d="m 38.786985,67.5 17.32,-30 v -45 l -17.32,-30 v -30 h -77.94 v 30 l -17.32,30 v 45 l 17.32,30 z" />
+      <path class="outer-wall"
+        d="m -21.833015,67.5 v -60 m 17.3200004,-75 v 30 M 17.136985,15 4.146985,7.5 m 51.96,30 -12.99,-7.5 m -38.97,-67.5 v 45 h -60.62 m 17.32,-45 h 77.94 m -69.28,105 h 69.28 l 17.32,-30 v -45 l -17.32,-30 v -30 h -77.94 v 30 l -17.32,30 v 45 l 17.32,30 z" />
+      <path class="inner-wall"
+        d="m -21.833015,67.5 v -60 m 17.3200004,-75 v 30 M 17.136985,15 4.146985,7.5 m 51.96,30 -12.99,-7.5 m -38.97,-67.5 v 45 h -60.62 m 17.32,-45 h 77.94 m -69.28,105 h 69.28 l 17.32,-30 v -45 l -17.32,-30 v -30 h -77.94 v 30 l -17.32,30 v 45 l 17.32,30 z" />
+      <path class="doors"
+        d="m 3.698745,-67.5 h 9.55648 m 7.76351,30 h 9.55648 M -4.9612546,67.5 H 4.595225 m -18.71725,-60 h 9.5564804 m -35.0357204,0 h 9.55648 m 33.74353,-75 h 9.55648 m -35.53648,30 h 9.55648 m 7.7635204,105 H 4.595225 m -18.71725,-60 h 9.5564804 m -35.0357204,0 h 9.55648" />
+    </g>
+  </svg>
+  <script src="radial.js"></script>
+</body>
+
 </html>
diff --git a/src/radial.js b/src/radial.js
index 1b015e9..5a9f875 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -168,9 +168,11 @@ const buildingCoords = [
   generateRadialCoordsRect({ rows: 8, columns: 4, odd: true }, { q: 4, r: 3, s: -7 }),
   generateRadialCoordsRect({ rows: 8, columns: 4, odd: true }, { q: -5, r: 3, s: 2 }),
   generateRadialCoordsRect({ rows: 6, columns: 3, equal: false }, { q: -12, r: 3, s: 9 }),
-  generateRadialCoordsRect({ rows: 8, columns: 4 }, { q: 10, r: 3, s: -13 }),
-  generateRadialCoordsRect({ rows: 3, columns: 1 }, { q: 9, r: 7, s: -16 }),
-  generateRadialCoordsRect({ rows: 5, columns: 1, odd: true }, { q: 5, r: 6, s: -11 }),
+
+  // hex building
+  // generateRadialCoordsRect({ rows: 8, columns: 4 }, { q: 10, r: 3, s: -13 }),
+  // generateRadialCoordsRect({ rows: 3, columns: 1 }, { q: 9, r: 7, s: -16 }),
+  // generateRadialCoordsRect({ rows: 5, columns: 1, odd: true }, { q: 5, r: 6, s: -11 }),
 ]
 
 buildingCoords.forEach(building => building.forEach(coords => grid.delete(coords)));
@@ -214,5 +216,29 @@ drawHexes(elevation1, grid);
 buildings.appendChild(bldElevationBasement);
 buildings.appendChild(bldElevation1);
 buildings.appendChild(bldElevation2);
-svg.appendChild(elevation1);
-svg.appendChild(buildings);
+
+const buildingBlah = svg.querySelector('#building2');
+
+const bld2grid = document.createElementNS(xmlns, 'g');
+drawHexes(bld2grid, generateRadialCoordsRect({ rows: 9, columns: 4, odd: true, equal: false }, { q: 4, r: -4, s: 0 }));
+drawHexes(bld2grid, generateRadialCoordsRect({ rows: 5, columns: 1 }, { q: 3, r: -1, s: -2 }));
+drawHexes(bld2grid, generateRadialCoordsRect({ rows: 5, columns: 1, odd: true }, { q: -2, r: -1, s: 3 }));
+
+const bld2elvBasement = bld2grid.cloneNode(true);
+bld2elvBasement.classList.add('elevation-basement');
+buildingBlah.querySelector('.floor').after(bld2elvBasement);
+
+const bld2elv1 = bld2grid.cloneNode(true);
+bld2elv1.classList.add('elevation-1');
+bld2elvBasement.after(bld2elv1);
+
+const bld2elv2 = bld2grid.cloneNode(true);
+bld2elv2.classList.add('elevation-2');
+bld2elv1.after(bld2elv2);
+
+const bld2elvRoof = bld2grid.cloneNode(true);
+bld2elvRoof.classList.add('elevation-roof');
+bld2elv2.after(bld2elvRoof);
+
+buildingBlah.before(elevation1);
+buildingBlah.before(buildings);