Fix elevation view styles

public/assets/css/map.css

@@ -15,7 +15,7 @@ text {
 }
 
 use[href="#hex"] {
-  opacity: 0.5;
+  opacity: 0;
   fill: transparent;
   fill-opacity: 0.5;
   stroke-width: 0.5px;
@@ -392,11 +392,7 @@ g[data-y="76"] { --i: 76; }
   /* fill: inherit; */
 }
 
-.building path {
+.furniture, .stairs {
-  fill: none;
-}
-
-.furniture {
   fill: rgb(104, 185, 181);
 }
 

public/assets/css/radial.css

@@ -67,20 +67,6 @@ use[href="#hex"] {
   stroke-linecap: square;
 }
 
-.view-elevation-roof .doors,
-.view-elevation-roof .inner-wall,
-.view-elevation-roof .outer-wall {
-  display: none;
-}
-
-/* [class^="elevation"] {
-  display: none;
-}
-
-[class="elevation-0"] {
-  display: inline;
-} */
-
 .elevation-basement {
   fill: lightgray;
   display: none;
@@ -157,7 +143,8 @@ use[href="#hex"] {
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"],
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor,
 [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .doors:not(.exits),
-[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits) {
+[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits),
+[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture {
   display: inline;
 }
 
@@ -171,7 +158,12 @@ use[href="#hex"] {
   display: inline;
 }
 
-[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'] {
+[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'],
+[data-view-elevation="1"] .building .elevation-1 + .structure .doors,
+[data-view-elevation="1"] .building .elevation-1 + .structure .door-edges,
+[data-view-elevation="1"] .building .elevation-1 + .structure .windows,
+[data-view-elevation="1"] .building .elevation-1 + .structure .furniture,
+[data-view-elevation="1"] .building .elevation-1 ~ .structure .exits {
   display: none;
 }
 
@@ -184,7 +176,12 @@ use[href="#hex"] {
   display: inline;
 }
 
-[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'] {
+[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'],
+[data-view-elevation="2"] .building .elevation-2 + .structure .doors,
+[data-view-elevation="2"] .building .elevation-2 + .structure .door-edges,
+[data-view-elevation="2"] .building .elevation-2 + .structure .windows,
+[data-view-elevation="2"] .building .elevation-2 + .structure .furniture,
+[data-view-elevation="2"] .building .elevation-2 ~ .structure .exits {
   display: none;
 }
 
@@ -197,7 +194,12 @@ use[href="#hex"] {
   display: inline;
 }
 
-[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'] {
+[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'],
+[data-view-elevation="3"] .building .elevation-3 + .structure .doors,
+[data-view-elevation="3"] .building .elevation-3 + .structure .door-edges,
+[data-view-elevation="3"] .building .elevation-3 + .structure .windows,
+[data-view-elevation="3"] .building .elevation-3 + .structure .furniture,
+[data-view-elevation="3"] .building .elevation-3 ~ .structure .exits {
   display: none;
 }
 
@@ -218,52 +220,11 @@ use[href="#hex"] {
   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;
-}
-
-.view-elevation-basement .doors {
-  display: none;
-}
-
 .building [class*="elevation"] use {
   /* fill-opacity: 0.33; */
   stroke: black;
 }
 
-.building {
-  /* display: none; */
-  /* opacity: 0.2 */
-}
-
 #tree .trunk {
   fill: brown;
 }

public/assets/images/scenario_template.svg

@@ -1,5 +1,6 @@
 <?xml version="1.0" standalone="no"?>
-<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="-10 -10 200 300"
+  xmlns="http://www.w3.org/2000/svg">
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
   <style>
@@ -46,7 +47,7 @@
     <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
   </defs>
 
-  <g class="gameboard" data-view-elevation="0">
+  <g class="gameboard">
     <rect id="background"/>
 
     <rect id="dots" fill="url(#asterisk)"/>
@@ -56,6 +57,6 @@
       <g id="lines"/>
     </g>
 
-    <g class="grid"/>
+    <g class="grid" data-view-elevation="0"/>
   </g>
 </svg>

src/index.js

@@ -208,13 +208,11 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
   });
 });
 
-// document.querySelectorAll('[name="select-elevation"]').forEach(el => {
+document.querySelectorAll('[name="select-elevation"]').forEach(el => {
-//   const gameboard = document.querySelector('.gameboard');
+  el.addEventListener('change', function (e) {
-
+    document.querySelector('object').contentDocument.querySelector('.grid').dataset.viewElevation = this.value;
-//   el.addEventListener('change', function (e) {
+  });
-//     gameboard.dataset.viewElevation = this.value
+});
-//   });
-// });
 
 contentVisToggleEl.addEventListener('input', toggleContentVis);
 contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');

src/modules/scenario.js

@@ -3,7 +3,7 @@ async function loadScript(scenario, svg, script) {
     const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
 
     scriptEl.onload = () => {
-      console.log('map.js loaded');
+      console.log(`${script}.js loaded`);
       resolve();
     };
 
@@ -18,7 +18,6 @@ async function loadScript(scenario, svg, script) {
       scriptEl.dataset.cols = dataset.cols;
     }
 
-    // scriptEl.setAttributeNS(null, 'href', '../../map.js');
     scriptEl.setAttributeNS(null, 'href', `../../${script}.js`);
     svg.append(scriptEl);
   });