1 files changed, 127 insertions, 38 deletions
diff --git a/public/radial.html b/public/radial.html
index 28bfa5a..eb67c94 100644
--- a/public/radial.html
+++ b/public/radial.html
@@ -25,44 +25,11 @@
 
     use[href="#hex"] {
       stroke: #666;
-      fill: wheat;
+      /* fill: wheat; */
+      fill: navajowhite;
       /* fill: url(#asterisk); */
     }
 
-    .elevation-basement {
-      fill: lightgray;
-      display: none;
-    }
-
-    .elevation-0 {
-      /* filter: blur(.5px); */
-        /* opacity: 0.5; */
-        display: none;
-    }
-
-    .elevation-0 use[href="#hex"] {
-      /* fill: green; */
-    }
-
-    .elevation-1 {
-      /* fill: rgb(240, 216, 172); */
-      display: none;
-    }
-
-    .elevation-1 use[href="#hex"]{
-      fill: lightblue;
-    }
-
-    .elevation-roof {
-      display: none;
-    }
-
-    .buildings .elevation-0,
-    .building .elevation-0 {
-      /* display: none; */
-      fill: lightgreen;
-    }
-
     .building .doors {
       display: inline;
       fill: none;
@@ -101,12 +68,49 @@
       display: none;
     }
 
+    /* [class^="elevation"] {
+      display: none;
+    }
+
+    [class="elevation-0"] {
+      display: inline;
+    } */
+
+    .elevation-basement {
+      fill: lightgray;
+      display: none;
+    }
+
+    .elevation-0 use[href="#hex"] {
+      /* fill: green; */
+    }
+
+    .elevation-1, .elevation-2 {
+      display: inline;
+    }
+
+    .elevation-1 use[href="#hex"] {
+      fill: lightblue;
+    }
+
+    .elevation-2 use[href="#hex"] {
+      fill: lightpink;
+    }
+
+    .building .elevation-1 {
+      fill: lightblue;
+    }
+
+    .elevation-roof {
+      display: none;
+    }
+
     .building .elevation-basement use {
       fill: lightgray;
     }
 
     .building .elevation-0 use {
-      fill: lightgreen;
+      fill: white;
     }
 
     .building .elevation-1 use {
@@ -121,18 +125,59 @@
       display: none;
     }
 
+    .building [class^="elevation"] {
+      display: none;
+    }
+
+    [data-view-elevation="-1"] [class^="elevation"] {
+      display: none;
+    }
+
+    [data-view-elevation="-1"] .building .elevation-basement {
+      display: inline;
+    }
+
+    [data-view-elevation="0"] .elevation-0 {
+      display: inline;
+    }
+
+    [data-view-elevation="1"] > .elevation-0,
+    [data-view-elevation="1"] > .elevation-1 {
+      display: inline;
+    }
+
+    [data-view-elevation="1"] .building .elevation-1 {
+      display: inline;
+    }
+
     .view-elevation-0 .elevation-0 {
       display: inline;
     }
 
+    .view-elevation-1 .elevation-0 {
+      display: inline;
+    }
+
     .view-elevation-1 .elevation-1 {
       display: inline;
     }
 
+    .view-elevation-1 .building .elevation-0 {
+      display: none;
+    }
+
+    .view-elevation-1 .building .elevation-1 {
+      /* display: none; */
+    }
+
     .view-elevation-roof .elevation-roof {
       display: inline;
     }
 
+    .view-elevation-basement [class^="elevation"] {
+      display: none;
+    }
+
     .view-elevation-basement .elevation-basement {
       display: inline;
     }
@@ -150,11 +195,42 @@
       /* display: none; */
       /* opacity: 0.2 */
     }
+
+    .select-elevation {
+      position: fixed;
+      right: 0;
+      top: 50%;
+      margin-right: 10px;
+      background-color: #FFFFFF99;
+      border: 1px solid gray;
+      padding: 2px;
+      font-family: sans-serif;
+      font-size: 10pt;
+    }
+
+    .select-elevation label {
+      display: block;
+      margin: 2px 0;
+      text-align: center;
+      border: 1px solid transparent;
+      user-select: none;
+    }
+
+    .select-elevation input {
+      display: none;
+    }
+
+    input:checked + label {
+      border: 1px solid salmon;
+      border-radius: 3px;
+      background-color: #cdd9e9;
+    }
   </style>
 </head>
 
 <body>
-  <svg viewBox="-300 -400 600 800" xmlns="http://www.w3.org/2000/svg">
+  <!-- <svg viewBox="-300 -400 600 800" xmlns="http://www.w3.org/2000/svg"> -->
+  <svg viewBox="-900 -600 1800 1200" 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" />
       <line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" />
@@ -185,8 +261,21 @@
       </g>
     </defs>
 
-    <g class="gameboard view-elevation-0"></g>
+    <g class="gameboard" data-view-elevation="0"></g>
   </svg>
+
+  <div class="select-elevation">
+    <button>🡅</button>
+    <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" />
+    <label for="select-elevation-1">1</label>
+    <input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
+    <label for="select-elevation-0">0</label>
+    <input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
+    <label for="select-elevation-basement">-1</label>
+    <button>🡇</button>
+  </div>
   <script src="radial.js"></script>
 </body>