Import mapsheets.svg

author: Catalin Mititiuc <webdevcat@proton.me> 2024-05-28 14:45:20 -0700
committer: Catalin Mititiuc <webdevcat@proton.me> 2024-05-28 14:45:20 -0700
commit: e8fbe161e473a949f776f89d94e9816a64cd3114 (patch)
tree: 5def4f8e9e499d3280bc83c5f23edd642850193c /public/assets
parent: a34cd1a5414eec5a059c5f20a3940bf4ef6b977e (diff)
5 files changed, 34 insertions, 59 deletions
diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg
index 2254d3d..ec9cff6 100644
--- a/public/assets/images/counters.svg
+++ b/public/assets/images/counters.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="6"/>
+    <circle id="counter-base" style="stroke: none;" cx="0" cy="0" r="5"/>
 
     <g id="semi-auto">
       <line x1="-2" y1="1" x2="2" y2="1"/>
diff --git a/public/assets/images/mapsheets.svg b/public/assets/images/mapsheets.svg
index 44b5c2f..d5fa1fa 100644
--- a/public/assets/images/mapsheets.svg
+++ b/public/assets/images/mapsheets.svg
@@ -453,7 +453,7 @@
     </g>
     <g class="building4" style="transform: translate(100.5px, 83px)">
       <use href="#building4"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-21.5px, -39px)" href="#bed"/>
         <use style="transform: translate(22px, -51px)" href="#bed"/>
         <use style="transform: translate(21.25px, 33px) rotate(-90deg)" href="#desk"/>
@@ -471,7 +471,7 @@
     </g>
     <g class="building2" style="transform: translate(92px, 281px)">
       <use href="#building2"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-28.25px, -19.75px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(-11.25px, 32.75px)" href="#couch"/>
 
@@ -491,7 +491,7 @@
     </g>
     <g class="building3" style="transform: translate(441.5px, 100.5px)">
       <use style="transform: rotate(180deg)" href="#building3"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-1.75px, -26.5px)" href="#couch"/>
         <use style="transform: translate(-8px, 15.5px)" href="#couch"/>
         <use style="transform: translate(20.5px, 36.75px)" href="#cabinet"/>
@@ -513,7 +513,7 @@
     </g>
     <g class="building6" style="transform: translate(440.75px, 288.5px)">
       <use style="transform: rotate(180deg)" href="#building6"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-8px, 40px)" href="#bed"/>
         <use style="transform: translate(-12px, -42px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(10px, 40.25px) rotate(180deg)" href="#desk"/>
@@ -528,7 +528,7 @@
   <g id="map2">
     <g class="building1" style="transform: translate(220px, 280px)">
       <use href="#building1"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-22.5px, -49px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(-22.5px, 37px)" href="#bed"/>
         <use style="transform: translate(22.5px, 50.5px)" href="#bed"/>
@@ -544,7 +544,7 @@
     </g>
     <g class="building2" style="transform: translate(108px, 282px)">
       <use href="#building2"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <rect class="couch" x="-46" y="11" width="8.5" height="16"/>
         <rect class="couch" x="-15.5" y="36" width="16" height="8.5"/>
         <rect class="coffee-table" x="3.5" y="-54.5" width="5" height="9.5"/>
@@ -562,7 +562,7 @@
     </g>
     <g class="building3" style="transform: translate(485.5px, 264.5px)">
       <use style="transform: rotate(180deg)" href="#building3"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-2px, -28.5px)" href="#couch"/>
         <use style="transform: translate(-18px, 12.5px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(17.75px, 35.25px)" href="#cabinet"/>
@@ -576,7 +576,7 @@
     </g>
     <g class="building4" style="transform: translate(377.25px, 278.75px)">
       <use href="#building4"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-13.5px, -39px)" href="#bed"/>
         <use style="transform: translate(12px, -51px)" href="#bed"/>
         <use style="transform: translate(23.5px, 48px) rotate(180deg)" href="#desk"/>
@@ -594,7 +594,7 @@
     </g>
     <g class="building5" style="transform: translate(103px, 84.75px)">
       <use href="#building5"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-36px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(23px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(-40.25px, -.5px) rotate(90deg)" href="#couch"/>
@@ -612,7 +612,7 @@
     </g>
     <g class="building6" style="transform: translate(224px, 85.75px)">
       <use href="#building6"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(9.5px, -40.5px)" href="#bed"/>
         <use style="transform: translate(-8px, 11.5px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(8.75px, 48.75px) rotate(180deg)" href="#desk"/>
@@ -624,7 +624,7 @@
     </g>
     <g class="building7" style="transform: translate(427.75px, 110px)">
       <use href="#building7"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-99px, -46.5px)" href="#desk"/>
         <use style="transform: translate(-106px, 22px)" href="#desk"/>
         <use style="transform: translate(-46px, -58.75px) rotate(-90deg)" href="#desk"/>
@@ -667,7 +667,7 @@
   <g id="map3">
     <g class="building1" style="transform: translate(359px, 98.5px)">
       <use href="#building1"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <rect class="couch" x="-28.75" y="-51.75" width="16" height="8.5"/>
         <rect class="coffee-table" x="12.75" y="-48.75" width="9.5" height="5"/>
         <rect class="coffee-table" x="22.75" y="-34.75" width="9.5" height="5"/>
@@ -683,7 +683,7 @@
     </g>
     <g class="building2" style="transform: translate(185px, 77.5px)">
       <use style="transform: rotate(180deg)" href="#building2"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-39px, -2.75px)" href="#couch"/>
         <use style="transform: translate(5.25px, -41px) rotate(90deg)" href="#couch"/>
 
@@ -713,7 +713,7 @@
     </g>
     <g class="building3" style="transform: translate(51.25px, 65.75px)">
       <use href="#building3"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(2.25px, 23px)" href="#couch"/>
         <use style="transform: translate(6.5px, -14px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(-18.5px, -37px)" href="#cabinet"/>
@@ -726,7 +726,7 @@
     </g>
     <g class="building4" style="transform: translate(499px, 96px)">
       <use style="transform: rotate(180deg)" href="#building4"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(13.5px, 42px)" href="#bed"/>
         <use style="transform: translate(-11.5px, 51px)" href="#bed"/>
         <use style="transform: translate(-23px, -51px)" href="#desk"/>
@@ -744,7 +744,7 @@
     </g>
     <g class="building5" style="transform: translate(103px, 294.5px)">
       <use href="#building5"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-37px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(22px, -17.25px) rotate(90deg)" href="#bed"/>
         <use style="transform: translate(-41.25px, -.5px) rotate(90deg)" href="#couch"/>
@@ -762,7 +762,7 @@
     </g>
     <g class="building6" style="transform: translate(224.5px, 275px)">
       <use style="transform: rotate(180deg)" href="#building6"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-9px, 39px)" href="#bed"/>
         <use style="transform: translate(.5px, 1px) rotate(90deg)" href="#couch"/>
         <use style="transform: translate(14px, 24.75px)" href="#couch"/>
@@ -776,7 +776,7 @@
     </g>
     <g class="building7" style="transform: translate(419px, 305.75px)">
       <use href="#building7"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-99px, -46.75px)" href="#desk"/>
         <use style="transform: translate(-106px, 21.25px)" href="#desk"/>
         <use style="transform: translate(-46.5px, -57.25px) rotate(-90deg)" href="#desk"/>
@@ -819,7 +819,7 @@
   <g id="map4">
     <g class="building8" style="transform: translate(263.125px, 188.625px)">
       <use href="#building8"/>
-      <g class="furniture" style="fill: violet;">
+      <g class="furniture" style="fill: teal;">
         <use style="transform: translate(-82px, -84px)" href="#couch"/>
         <use style="transform: translate(6px, -83.5px)" href="#couch"/>
         <use style="transform: translate(23px, -84px)" href="#couch"/>
diff --git a/public/assets/images/scenario-dragon_hunting.svg b/public/assets/images/scenario-dragon_hunting.svg
index cb33581..5f16d7a 100644
--- a/public/assets/images/scenario-dragon_hunting.svg
+++ b/public/assets/images/scenario-dragon_hunting.svg
@@ -1,6 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-15.639999389648438 -129.2300262451172 2320.879638671875 4871.5654296875" xmlns="http://www.w3.org/2000/svg">
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/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" /> -->
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
   <style>
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 78; }
@@ -60,9 +61,9 @@
   <rect id="background"/>
 
   <g class="gameboard">
-    <use data-href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
-    <use data-href="http://localhost:8080/assets/images/mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/>
-    <use data-href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
+    <use data-href="mapsheets.svg#map2"/>
+    <use data-href="mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/>
+    <use data-href="mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/>
 
     <rect id="dots" fill="url(#asterisk)"/>
 
@@ -122,19 +123,6 @@
 
     <g class="grid"/>
   </g>
-  <script>//<![CDATA[
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
-    function getRandomIntInclusive(min, max) {
-      const minCeiled = Math.ceil(min);
-      const maxFloored = Math.floor(max);
-      return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
-    }
-
-    const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
-
-    document.querySelectorAll('[data-href]').forEach(el => {
-      el.setAttributeNS(null, 'href', el.dataset.href.split('#').join(`?v=${cacheBuster}#`));
-    });
-  //]]></script>
-  <script data-cols="33" data-rows="77" href="http://localhost:8080/map.js"/>
+  <script href="../../import_mapsheets.js"/>
+  <script data-cols="33" data-rows="77" href="../../map.js"/>
 </svg>
diff --git a/public/assets/images/scenario-race_against_time.svg b/public/assets/images/scenario-race_against_time.svg
index 93685d4..38be9fb 100644
--- a/public/assets/images/scenario-race_against_time.svg
+++ b/public/assets/images/scenario-race_against_time.svg
@@ -1,6 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-15.639999389648438 -129.2300262451172 2320.879638671875 1751.5654296875" xmlns="http://www.w3.org/2000/svg">
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/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" /> -->
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
   <style>
     g[data-edge="north"] { --i: -2; }
     g[data-edge="south"] { --i: 26; }
@@ -60,7 +61,8 @@
   <rect id="background"/>
 
   <g class="gameboard">
-    <use href="http://localhost:8080/assets/images/mapsheets.svg#map4"/>
+    <!-- <use href="http://localhost:8080/assets/images/mapsheets.svg#map4"/> -->
+    <use data-href="mapsheets.svg#map4"/>
 
     <rect id="dots" fill="url(#asterisk)"/>
 
@@ -120,5 +122,6 @@
 
     <g class="grid"/>
   </g>
-  <script data-cols="33" data-rows="25" href="http://localhost:8080/map.js"/>
+  <script href="../../import_mapsheets.js"/>
+  <script data-cols="33" data-rows="25" href="../../map.js"/>
 </svg>
diff --git a/public/assets/images/scenario-side_show.svg b/public/assets/images/scenario-side_show.svg
index 4f0739d..f18e689 100644
--- a/public/assets/images/scenario-side_show.svg
+++ b/public/assets/images/scenario-side_show.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-15.639999389648438 -109 2320.879638671875 3280" xmlns="http://www.w3.org/2000/svg">
-  <!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" /> -->
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
   <style>
     g[data-edge="north"] { --i: -2; }
@@ -102,8 +101,6 @@
   <rect id="background"/>
 
   <g class="gameboard">
-    <!-- <use href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
-    <use href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/> -->
     <use data-href="mapsheets.svg#map2"/>
     <use data-href="mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/>
 
@@ -1954,20 +1951,7 @@
       </g>
     </g>
   </g>
-  <script>//<![CDATA[
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
-    function getRandomIntInclusive(min, max) {
-      const minCeiled = Math.ceil(min);
-      const maxFloored = Math.floor(max);
-      return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
-    }
-
-    const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
-
-    document.querySelectorAll('[data-href]').forEach(el => {
-      el.setAttributeNS(null, 'href', el.dataset.href.split('#').join(`?v=${cacheBuster}#`));
-    });
-  //]]></script>
   <!-- <script href="http://localhost:8080/map.js"/> -->
+  <script href="../../import_mapsheets.js"/>
   <script href="../../map.js"/>
 </svg>
author	Catalin Mititiuc <webdevcat@proton.me>	2024-05-28 14:45:20 -0700
committer	Catalin Mititiuc <webdevcat@proton.me>	2024-05-28 14:45:20 -0700
commit	e8fbe161e473a949f776f89d94e9816a64cd3114 (patch)
tree	5def4f8e9e499d3280bc83c5f23edd642850193c /public/assets
parent	a34cd1a5414eec5a059c5f20a3940bf4ef6b977e (diff)