Tree grove and map 4 building

public/assets/css/map.css

@@ -405,7 +405,7 @@ g[data-y="76"] { --i: 76; }
 }
 
 .building, #terrain {
-  /* opacity: 0.5; */
+  opacity: 1;
 }
 
 .building .floor {

public/assets/images/map1.svg

@@ -28,41 +28,22 @@
     <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
       <rect x="-8.66" y="-15" width="17.32" height="30"/>
 
-      <!-- <line x1="-5" y1="-15" x2="5" y2="-15" /> -->
       <use y="-15" href="#ast-line"/>
-      <!-- <line style="transform-origin: 0 -15px; transform: rotate(60deg)" x1="-5" y1="-15" x2="5" y2="-15" /> -->
       <use y="-15" style="transform-origin: 0 -15px; transform: rotate(60deg)" href="#ast-line"/>
-      <!-- <line style="transform-origin: 0 -15px; transform: rotate(-60deg)" x1="-5" y1="-15" x2="5" y2="-15" /> -->
       <use y="-15" style="transform-origin: 0 -15px; transform: rotate(-60deg)" href="#ast-line"/>
-      <!-- <line x1="-5" y1="15" x2="5" y2="15" /> -->
       <use y="15" href="#ast-line"/>
-      <!-- <line style="transform-origin: 0 15px; transform: rotate(60deg)" x1="-5" y1="15" x2="5" y2="15" /> -->
       <use y="15" style="transform-origin: 0 15px; transform: rotate(60deg)" href="#ast-line"/>
-      <!-- <line style="transform-origin: 0 15px; transform: rotate(-60deg)" x1="-5" y1="15" x2="5" y2="15" /> -->
       <use y="15" style="transform-origin: 0 15px; transform: rotate(-60deg)" href="#ast-line"/>
 
-      <!-- <line x1="3.66" y1="0" x2="10" y2="0" /> -->
       <use x="8.66" href="#ast-line"/>
-      <!-- <line style="transform-origin: 8.66px 0; transform: rotate(60deg)" x1="3.66" y1="0" x2="10" y2="0" /> -->
       <use x="8.66" style="transform-origin: 8.66px 0; transform: rotate(60deg)" href="#ast-line"/>
-      <!-- <line style="transform-origin: 8.66px 0; transform: rotate(-60deg)" x1="3.66" y1="0" x2="10" y2="0" /> -->
       <use x="8.66" style="transform-origin: 8.66px 0; transform: rotate(-60deg)" href="#ast-line"/>
-      <!-- <line x1="-10" y1="0" x2="-3.66" y2="0" /> -->
       <use x="-8.66" href="#ast-line"/>
-      <!-- <line style="transform-origin: -8.66px 0; transform: rotate(60deg)" x1="-10" y1="0" x2="-3.66" y2="0" /> -->
       <use x="-8.66" style="transform-origin: -8.66px 0; transform: rotate(60deg)" href="#ast-line"/>
-      <!-- <line style="transform-origin: -8.66px 0; transform: rotate(-60deg)" x1="-10" y1="0" x2="-3.66" y2="0" /> -->
       <use x="-8.66" style="transform-origin: -8.66px 0; transform: rotate(-60deg)" href="#ast-line"/>
     </pattern>
 
-    <g id="hex">
+    <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
-      <polygon points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
-      <!-- <circle cx="0" cy="0" r="2"/> -->
-      <!-- <line x1="-1" y1="0" x2="1" y2="0" />
-      <line x1="-1" y1="0" x2="1" y2="0" />
-      <line x1="-1" y1="0" x2="1" y2="0" /> -->
-    </g>
-
     <circle id="counter-base" cx="0" cy="0" r="5"/>
 
     <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
@@ -484,7 +465,6 @@
     <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>
 
-
   <!-- <g id="image-maps">
     <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
     <image class="map-scans" href="row.jpg" width="2284" height="55" y="1505" />

public/assets/images/map2.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-150 -150 600 800" 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="http://localhost:8080/assets/css/map.css" type="text/css" />
   <style>
     #image-maps image {
       transform: none;
@@ -46,8 +46,49 @@
   <g class="gameboard">
     <g id="terrain">
       <use x="251" y="524" href="#tree"/>
+      <use x="237.75" y="531.25" href="#tree"/>
+      <use x="268.5" y="523.75" href="#tree"/>
+      <use x="290" y="516" href="#tree"/>
+      <use x="302.75" y="523.75" href="#tree"/>
+      <use x="277.25" y="538.75" href="#tree"/>
+      <use x="298.5" y="546.25" href="#tree"/>
+      <use x="320.25" y="554" href="#tree"/>
+      <use x="246.75" y="561" href="#tree"/>
+      <use x="273" y="561.25" href="#tree"/>
+      <use x="255.25" y="575.75" href="#tree"/>
+      <use x="289.75" y="576.25" href="#tree"/>
+      <use x="237.75" y="590.25" href="#tree"/>
+      <use x="272.5" y="590.75" href="#tree"/>
+      <use x="307" y="590.75" href="#tree"/>
+      <use x="272.75" y="606" href="#tree"/>
+      <use x="298.5" y="605.5" href="#tree"/>
+      <use x="238.5" y="621.5" href="#tree"/>
+      <use x="264.25" y="621" href="#tree"/>
+      <use x="315.5" y="620.75" href="#tree"/>
+
       <use style="transform: translate(245px, 514px) rotate(28deg)" href="#bush"/>
       <use style="transform: translate(243.5px, 542px) rotate(-145deg)" href="#bush"/>
+      <use style="transform: translate(278px, 513px) rotate(110deg)" href="#bush"/>
+      <use style="transform: translate(308.5px, 513.5px) rotate(-140deg)" href="#bush"/>
+      <use style="transform: translate(317.5px, 520.75px) rotate(110deg)" href="#bush"/>
+      <use style="transform: translate(324.5px, 531px) rotate(-150deg)" href="#bush"/>
+      <use style="transform: translate(311.5px, 543.5px) rotate(100deg)" href="#bush"/>
+      <use style="transform: translate(240.5px, 571.5px) rotate(-110deg)" href="#bush"/>
+      <use style="transform: translate(260.25px, 561px) rotate(165deg)" href="#bush"/>
+      <use style="transform: translate(312.5px, 562.75px) rotate(-175deg)" href="#bush"/>
+      <use style="transform: translate(325px, 574.5px) rotate(110deg)" href="#bush"/>
+      <use style="transform: translate(268.25px, 578.5px) rotate(-130deg)" href="#bush"/>
+      <use style="transform: translate(277.25px, 572.75px) rotate(-70deg)" href="#bush"/>
+      <use style="transform: translate(308.75px, 573.5px) rotate(-80deg)" href="#bush"/>
+      <use style="transform: translate(318.5px, 587px) rotate(120deg)" href="#bush"/>
+      <use style="transform: translate(234px, 605.25px) rotate(170deg)" href="#bush"/>
+      <use style="transform: translate(244.25px, 600.5px) rotate(145deg)" href="#bush"/>
+      <use style="transform: translate(255px, 605.5px) rotate(-170deg)" href="#bush"/>
+      <use style="transform: translate(259.5px, 592.75px) rotate(100deg)" href="#bush"/>
+      <use style="transform: translate(285px, 615px) rotate(0deg)" href="#bush"/>
+      <use style="transform: translate(295.5px, 629.25px) rotate(0deg)" href="#bush"/>
+      <use style="transform: translate(303px, 620px) rotate(0deg)" href="#bush"/>
+      <use style="transform: translate(311.5px, 605px) rotate(-70deg)" href="#bush"/>
     </g>
     <g id="firing-arcs">
       <g id="shapes"/>
@@ -103,5 +144,5 @@
     </g>
     <g class="grid"/>
   </g>
-  <script data-cols="33" data-rows="77"></script>
+  <script data-cols="33" data-rows="77" href="http://localhost:8080/map.js"/>
 </svg>

public/assets/images/map3.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-150 -150 600 800" 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="http://localhost:8080/assets/css/map.css" type="text/css" />
   <style>
     #image-maps image {
       transform: translate(-10px, 0px);
@@ -24,6 +24,48 @@
 
     <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">
+      <polygon class="floor" points="
+        -95.625,-108.625 -47.625,-108.625 -38.625,-93.625 70,-93.625 78.4,-108.625 113,-108.625
+        113,-89 89.625,-40 89.625,8.625 122.2,8.625 122.2,94 78.75,94 78.75,59.75 7.75,59.75
+        -17.25,108.75 -122.25,108.75 -122.25,9 -95.625,9
+      "/>
+      <path style="stroke-width: 2;" class="walls" d="
+        M -95.625 -108.625 h 48 l 9 15 h 108.5 l 8.5 -15 h 34.5
+        v 19.5 l -23.25 49 v 48.75 h 32.5 v 85.25
+        h -43.25 v -34.25 h -71 l -25 49 h -105
+        v -99.5 h 26.5 z
+        m 60 15 v 30.5 m 0 18 v 15.5 m 105.5 -64 v 30 m -14.75 -8.5 v 9 h -69 v -8
+        M -95.625 -29.5 h 185 m 0 38.25 h -185
+        m -26 31.75 h 60.5 m -60.5 35 h 60.5 m 0 33 v -99.75
+        m 69 0 v 50.75 m 0 -19.25 h -42.5 v 68 m 113.5 -40 v -28.75 h 43
+      "/>
+      <path style="stroke: white;" class="walls" d="
+        M -95.625 -108.625 h 48 l 9 15 h 108.5 l 8.5 -15 h 34.5
+        v 19.5 l -23.25 49 v 48.75 h 32.5 v 85.25
+        h -43.25 v -34.25 h -71 l -25 49 h -105
+        v -99.5 h 26.5 z
+        m 60 15 v 30.5 m 0 18 v 15.5 m 105.5 -64 v 30 m -14.75 -8.5 v 9 h -69 v -8
+        M -95.625 -29.5 h 185 m 0 38.25 h -185
+        m -26 31.75 h 60.5 m -60.5 35 h 60.5 m 0 33 v -99.75
+        m 69 0 v 50.75 m 0 -19.25 h -42.5 v 68 m 113.5 -40 v -28.75 h 43
+      "/>
+      <path class="windows" d="
+        M -78.25 -108.625 h 10 m 50 15 h 14 m 39 0 h 10 m 35 -15 h 10
+        m 23.1 4.5 v 10 m -23.2 81.5 v 10 m 12 11.2 h 16.5 m 4 19 v 10 m 0 24 v 10
+        m -21.25 22.25 h -17 m -19.5 -34.25 h -14.5 m -51 17.5 l -4.5 9
+        m -116.5 3 v -10 m 0 -24 v -10 m 0 -23 v -10 m 26.5 -14.5 v -10 m 0 -35 v -10 m 0 -20 v -10
+      "/>
+      <path class="door-edges" d="
+        M 89.6 -27.5 v 10 m 6.75 57 h 10 m -57.75 -30.75 h -16.5 m -24.25 36.25 v 10
+        m -42.5 20.75 v 10 m -26.5 1.75 v -10 m -24 -2 h -10 m 0 -35 h 10 m 100 -70 h 15.5
+      "/>
+      <path class="doors" d="
+        M 89.6 -25 v 5 m 9 59.5 h 5.5 m -57.75 -30.75 h -12 m -26.5 38.75 v 5.25
+        m -42.5 25.5 v 5 m -26.5 1.75 v -5 m -26 -4.5 h -6 m .25 -35 h 5.5 m 104.5 -70 h 11
+      "/>
+    </g>
   </defs>
 
   <rect id="background"/>
@@ -34,6 +76,9 @@
   </g>
 
   <g class="gameboard">
+    <g id="buildings">
+      <use x="263.125" y="188.625" href="#building8"/>
+    </g>
     <g id="firing-arcs">
       <g id="shapes"/>
       <g id="lines"/>
@@ -88,5 +133,5 @@
     </g>
     <g class="grid"/>
   </g>
-  <script data-cols="33" data-rows="25"></script>
+  <script data-cols="33" data-rows="25" href="http://localhost:8080/map.js"/>
 </svg>