Building layouts complete

public/assets/css/map.css

@@ -387,10 +387,6 @@ g[data-y="76"] { --i: 76; }
 [data-x="31"] { --i: 31; }
 [data-x="32"] { --i: 32; }
 
-#terrain {
-  opacity: 0.5;
-}
-
 #tree .trunk {
   fill: brown;
 }
@@ -404,13 +400,13 @@ g[data-y="76"] { --i: 76; }
   transform: scale(0.9);
 }
 
-.building {
+.building, #terrain {
-  opacity: 0.5;
+  opacity: 1;
 }
 
 .building .floor {
-  /* fill: white; */
+  fill: white;
-  fill: none;
+  /* fill: none; */
 }
 
 .building path {

public/assets/images/map1.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-18 -150 2320 3360" xmlns="http://www.w3.org/2000/svg">
-  <!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="/assets/css/map.css" type="text/css"/> -->
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" />
   <style>
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 52; }
@@ -136,6 +136,7 @@
     </g>
 
     <g id="building2" class="building">
+      <polygon class="floor" points="-33.5,-60.5 33.5,-60.5 33.5,-34 52,-3.5 52,30.5 35.5,60.5 -34,60.5 -52,34.5 -52,-3.5 -33.5,-34"/>
       <path style="stroke-width: 2;" class="walls" d="
         M -33.5 -60.5 V -34 L -52 -3 V 31 L -35 60.5 H 34.5
         L 52 31.5 V -3.5 L 34.5 -34 V -60.5 Z
@@ -192,6 +193,7 @@
     </g>
 
     <g id="building3" class="building">
+      <rect class="floor" x="-32.25" y="-44" width="64.5" height="88"/>
       <path style="stroke-width: 2;" class="walls" d="
         M -32.25 -44 h 64.5 v 88 h -64 z
         m 37.5 0 v 18
@@ -230,6 +232,7 @@
     </g>
 
     <g id="building4" class="building">
+      <rect class="floor" x="-35.25" y="-62.25" width="70.5" height="124.5"/>
       <path style="stroke-width: 2;" class="walls" d="
         M -35.25 -62.25 h 70.5 v 124.5 h -70.5 z
         m 35.5 0 v 50 h -35.5
@@ -276,6 +279,7 @@
     </g>
 
     <g id="building5" class="building">
+      <rect class="floor" x="-75" y="-32.75" width="150" height="65.5"/>
       <path style="stroke-width: 2;" class="walls" d="
         M -75 -32.75 h 150 v 65.5 h -150 z
         m 0 13 h 8 m 13 0 h 7
@@ -333,6 +337,7 @@
     </g>
 
     <g id="building6" class="building">
+      <rect class="floor" x="-23" y="-58.75" width="46" height="117.5"/>
       <path style="stroke-width: 2;" class="walls" d="
         M -23 -58.75 h 46 v 117.5 h -46 z
         m 19.5 0 v 44 h 26.5
@@ -366,6 +371,84 @@
       "/>
     </g>
 
+    <g id="building7" class="building">
+      <polygon class="floor" points="
+      -113.25,-56.5 -73.25,-56.5 -50.75,-69.5 113.25,-69.5 113.25,43.5 10.75,43.5
+      5.75,32 -80.25,32 -87.25,44.5 -113.25,44.5
+      "/>
+      <path style="stroke-width: 2;" class="walls" d="
+        M -113.25 -56.5 h 40 l 22.5 -13 h 164 v 113
+        h -102.5 l -5 -11.5 h -86 l -7 12.5 h -26 z
+        m 0 38 h 13 m 19.5 1.5 h 46.5 v -52.5
+        m 0 37 h 44 v -37
+        m 0 30.5 h 37.5 v -30.5
+        m 0 30.5 h 33
+        m 0 -30.5 v 81 h 33
+        m -34.5 32 v -31.5 h -98.5 v 20
+        m 65.5 11.5 v -31.5
+        m -47 0 v 20
+        m -37 0 v -19.5 h -21 v -12 h -21.5 v 14
+        m 26.5 17.5 v -19.5
+        m -18.5 1.5 v 18
+      "/>
+      <path style="stroke: white;" class="walls" d="
+        M -113.25 -56.5 h 40 l 22.5 -13 h 164 v 113
+        h -102.5 l -5 -11.5 h -86 l -7 12.5 h -26 z
+        m 0 38 h 13 m 19.5 1.5 h 46.5 v -52.5
+        m 0 37 h 44 v -37
+        m 0 30.5 h 37.5 v -30.5
+        m 0 30.5 h 33
+        m 0 -30.5 v 81 h 33
+        m -34.5 32 v -31.5 h -98.5 v 20
+        m 65.5 11.5 v -31.5
+        m -47 0 v 20
+        m -37 0 v -19.5 h -21 v -12 h -21.5 v 14
+        m 26.5 17.5 v -19.5
+        m -18.5 1.5 v 18
+      "/>
+      <path class="windows" d="
+        M -94.75 -56.5 h 10.25
+        m 19 -4.5 l 9 -5.25
+        m 32 -3.25 h 10
+        m 77 0 h 10
+        m 40.75 2 v 9.5
+        m 0 32.75 v 10
+        m -5.5 58.75 h -10.5
+        m -24.5 0 h -10
+        m -25 0 h -10
+        m -17.25 -.75 l -4 -9
+        m -87.75 0 l -5 9
+        m -27 -.5 v -10
+        m 0 -63.5 v -10
+      "/>
+      <path class="door-edges" d="
+        M 12 -69.5 h 10
+        m -3 30.5 h 10
+        m 24.25 0 h 10
+        m 17 13.25 v 10
+        m 21 27.25 h -16
+        m -12.5 .5 h -10
+        m -24.5 0 h -10
+        m -31.75 0 h -14
+        m -22.75 .5 h -12
+        m 25 -45 h 16
+        M -113.25 -9.5 v 10
+      "/>
+      <path class="doors" d="
+        M 14.5 -69.5 h 5
+        m 2 30.5 h 5
+        m 29.25 0 h 5
+        m 19.5 15.75 v 5
+        m 18.5 29.75 h -11
+        m -17.5 .5 h -5
+        m -29.5 0 h -5
+        m -36.75 0 h -9
+        m -27.75 .5 h -7
+        m 25 -45 h 11
+        M -113.25 -6.75 v 5
+      "/>
+    </g>
+
     <polygon id="desk" points="-26,-56 -20,-56 -20,-42 -26,-42 -27,-43 -27,-46 -29,-46 -29,-52 -27,-52 -27,-55"/>
   </defs>
 
@@ -391,19 +474,8 @@
       <use x="102" y="684.75" href="#building5"/>
       <use x="224" y="85.75" href="#building6"/>
       <use style="transform: translate(224.5px, 665.25px) rotate(180deg)" href="#building6"/>
-
+      <use x="427.75" y="110" href="#building7"/>
-      <g id="building7" class="building">
+      <use x="418" y="696" href="#building7"/>
-        <path style="stroke-width: 2;" class="walls" d="
-        "/>
-        <path style="stroke: white;" class="walls" d="
-        "/>
-        <path class="windows" d="
-        "/>
-        <path class="door-edges" d="
-        "/>
-        <path class="doors" d="
-        "/>
-      </g>
     </g>
     <g id="firing-arcs">
       <g id="shapes"/>
@@ -2245,5 +2317,5 @@
       </g>
     </g>
   </g>
-  <script></script>
+  <script href="http://localhost:8080/map.js"/>
 </svg>

public/index.html

@@ -120,7 +120,7 @@
           <span class="inning-top">◓</span>
           <span class="inning-bottom">◒</span>
         </span>
-        <button id="show-dialog" type="button">Change map</button>
+        <button id="show-dialog" type="button">Scenario</button>
         <button id="download-save" type="button">Save</button>
         <button id="upload-save" type="button">Load</button>
         <button id="fullscreen" type="button">
@@ -182,7 +182,7 @@
       <form>
         <p>
           <label>
-            Map:
+            Load scenario:
             <select>
               <option value="map1">BattleTroops Scenario 1: Side Show</option>
               <option value="map2">BattleTroops Scenario 2: Dragon Hunting</option>

src/index.js

@@ -66,36 +66,37 @@ function clearMoveEndedIndicators(records) {
 
 function load() {
   const svg = this.contentDocument.querySelector('svg'),
-    startLocs = svg.querySelector('.start-locations'),
+    startLocs = svg.querySelector('.start-locations')
-    scriptEl = this.contentDocument.querySelector('script');
+    // , scriptEl = this.contentDocument.querySelector('script')
+    ;
 
-  const linkEl = document.createElement('link');
+  // const linkEl = document.createElement('link');
-  linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+  // linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
-  linkEl.setAttribute('rel', 'stylesheet');
+  // linkEl.setAttribute('rel', 'stylesheet');
-  linkEl.setAttribute('href', 'http://localhost:8080/assets/css/map.css');
+  // linkEl.setAttribute('href', 'http://localhost:8080/assets/css/map.css');
-  linkEl.setAttribute('type', 'text/css');
+  // linkEl.setAttribute('type', 'text/css');
 
-  linkEl.onload = function (e) {
+  // linkEl.onload = function (e) {
-    console.log('map.css loaded');
+  //   console.log('map.css loaded');
 
-    if (scriptEl) {
+  //   if (scriptEl) {
-      scriptEl.onload = function () {
+  //     scriptEl.onload = function () {
-        console.log('map.js loaded');
+  //       console.log('map.js loaded');
-        gameboard.start(svg);
-        recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
-      };
-      scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
-    }
-  };
 
-  svg.prepend(linkEl);
+  //     };
+  //     scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
+  //   }
+  // };
+
+  // svg.prepend(linkEl);
 
   this.style.opacity = 1;
   mapPlaceholder.style.opacity = 0;
   URL.revokeObjectURL(this.data);
 
   panzoom.start(svg);
-  recordSheet.clear();
+  gameboard.start(svg);
+  recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
 }
 
 document.querySelectorAll('.end-turn').forEach(el =>
@@ -173,7 +174,7 @@ document.querySelector('#download-save').addEventListener('click', e => {
 
   element.setAttribute('download', 'save.svg');
   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
-  element.style.display = 'none';
+  // element.style.display = 'none';
 
   // document.body.appendChild(element);
   element.click();