WIP: split hexes and building structure into different layers

public/assets/css/map.css

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

public/assets/css/radial.css

@@ -47,7 +47,7 @@ use[href="#hex"] {
   display: inline;
   opacity: 1;
   fill: #ffffff;
-  fill-opacity: 0.5;
+  /* fill-opacity: 0.5; */
   /* fill: url(#asterisk); */
   stroke: none;
 }
@@ -72,6 +72,14 @@ use[href="#hex"] {
   display: none;
 }
 
+[data-view-elevation="-1"] [class*="elevation"] {
+  display: none;
+}
+
+[data-view-elevation="-1"] #background {
+  fill: #333;
+}
+
 [data-view-elevation="-1"] .building .elevation-basement {
   display: inline;
 }
@@ -84,14 +92,21 @@ use[href="#hex"] {
   display: inline;
 }
 
-[data-view-elevation="2"] .building .elevation-2 {
+[data-view-elevation="2"] .building .elevation-2,
+[data-view-elevation="2"] .building .elevation-1:last-child {
   display: inline;
 }
 
-[data-view-elevation="3"] .building .elevation-3 {
+[data-view-elevation="3"] .building .elevation-3,
+[data-view-elevation="3"] .building .elevation-1:last-child,
+[data-view-elevation="3"] .building .elevation-2:last-child {
   display: inline;
 }
 
+#dots {
+  pointer-events: none;
+}
+
 /*
 [data-view-elevation="-1"] .building > *,
 [data-view-elevation="-1"] .building > .structure > * {

public/assets/images/radial.svg

@@ -23,6 +23,9 @@
       <use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
     </pattern>
 
+    <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+    <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+
     <g id="building8" class="building">
       <path id="building8-floor" class="floor" d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z" />
       <path id="building8-outer-wall" class="outer-wall" d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z m 77.94,30 v 15 h 69.28 v -15 m -86.6,37.5 v 7.5 m 0,-60 V -75 M 73.61,-112.5 V -75 M -90.93,-37.5 H 90.93 m 0,45 H -90.93 m 173.2,45 v -15 h 43.3 m -112.58,0 h -43.3 v 60 m 43.3,-45 v -45 m -69.28,30 h -60.62 m 60.62,30 h -60.62 m 60.62,-60 v 90" />

public/assets/images/scenario_template.svg

@@ -47,9 +47,9 @@
     <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
   </defs>
 
-  <g class="gameboard">
+  <g class="gameboard" data-view-elevation="0">
     <rect id="background"/>
-
+    <g class="buildings"/>
     <rect id="dots" fill="url(#asterisk)"/>
 
     <g id="firing-arcs">
@@ -57,6 +57,6 @@
       <g id="lines"/>
     </g>
 
-    <g class="grid" data-view-elevation="0"/>
+    <g class="grid"/>
   </g>
 </svg>