2 files changed, 57 insertions, 20 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 067f5c3..6c10e2e 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -44,7 +44,7 @@ polyline.move-trace {
 }
 
 #background {
-  fill: #bacae3;
+  /* fill: #bacae3; */
 }
 
 #map2 {
@@ -400,8 +400,12 @@ g[data-y="76"] { --i: 76; }
   transform: scale(0.9);
 }
 
+#buildings {
+  /* display: none; */
+}
+
 .building, #terrain {
-  opacity: 1;
+  /* opacity: 0.5; */
 }
 
 .building .floor {
diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg
index 3109b9e..63663e0 100644
--- a/public/assets/images/map1.svg
+++ b/public/assets/images/map1.svg
@@ -5,24 +5,56 @@
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 52; }
 
-    g#hex line {
-      opacity: 1;
+    #background {
+      stroke: #304b75;
     }
 
-    g#hex line {
-      stroke-width: 0.2px;
-      transform: scale(1.2);
+    pattern use {
+      stroke: black;
+      stroke-width: 0.3px;
     }
 
-    g#hex line:nth-child(2) {
-      transform: rotate(60deg) scale(1.2);
+    pattern rect {
+      fill: #bacae3;
     }
 
-    g#hex line:nth-child(3) {
-      transform: rotate(-60deg) scale(1.2);
+    .building .floor {
+      opacity: 0.3;
     }
   </style>
   <defs>
+    <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
+
+    <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 points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
       <!-- <circle cx="0" cy="0" r="2"/> -->
@@ -452,30 +484,31 @@
     <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>
 
-  <rect id="background"/>
 
-  <g id="image-maps">
+  <!-- <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" />
     <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518"/>
-  </g>
+  </g> -->
+
+  <rect id="background" fill="url(#asterisk)"/>
 
   <g class="gameboard">
     <g id="buildings">
-      <use x="359.75" y="488.75" href="#building1"/>
-      <use x="219" y="280" href="#building1"/>
+      <use x="359" y="488.75" href="#building1"/>
+      <use x="220" y="280" href="#building1"/>
       <use x="108" y="282" href="#building2"/>
-      <use style="transform: translate(184.5px, 467px) rotate(180deg)" href="#building2"/>
+      <use style="transform: translate(185px, 467px) rotate(180deg)" href="#building2"/>
       <use x="51.25" y="456" href="#building3"/>
       <use style="transform: translate(485.5px, 264.5px) rotate(180deg)" href="#building3"/>
       <use x="377.25" y="278.75" href="#building4"/>
-      <use style="transform: translate(500px, 486px) rotate(180deg)" href="#building4"/>
+      <use style="transform: translate(499px, 486px) rotate(180deg)" href="#building4"/>
       <use x="103" y="84.75" href="#building5"/>
-      <use x="102" y="684.75" href="#building5"/>
+      <use x="103" 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"/>
-      <use x="418" y="696" href="#building7"/>
+      <use x="419" y="696" href="#building7"/>
     </g>
     <g id="firing-arcs">
       <g id="shapes"/>