Merge branch 'dev'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "leim-maps",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/maps/AldysMap.astro

@@ -12,7 +12,7 @@ const players = playersData as PlayerMarker
 <div class="world-wrapper">
     <div id="world"></div>
 
-    <MarkerCreator client:load />
+    <MarkerCreator client:load mapKey="aldys" />
 </div>
 
 <script lang="ts" define:vars={{ markers, players }} defer>
@@ -111,8 +111,8 @@ for (let i = 0; i < markers.length; i++) {
     switch (m.group) {
         case "capitals":
             markerIcon = L.icon({
-                iconUrl: `icon/castle.png`,
+                iconUrl: `/icon/castle.png`,
-                shadowUrl: `icon/castle-shadow.png`,
+                shadowUrl: `/icon/castle-shadow.png`,
                 iconSize: [25, 25],
                 shadowSize: [35, 30],
                 iconAnchor: [12.5, 8],
@@ -122,15 +122,15 @@ for (let i = 0; i < markers.length; i++) {
         
         case "cities":
             markerIcon = L.icon({
-                iconUrl: `icon/circle.png`,
+                iconUrl: `/icon/circle.png`,
                 iconSize: [12, 12],
             })
             break
 
         case "landmarks":
             markerIcon = L.icon({
-                iconUrl: `icon/monument.png`,
+                iconUrl: `/icon/monument.png`,
-                shadowUrl: `icon/monument-shadow.png`,
+                shadowUrl: `/icon/monument-shadow.png`,
                 iconSize: [18, 18],
                 shadowSize: [32, 14],
                 iconAnchor: [12.5, 8],
@@ -140,8 +140,8 @@ for (let i = 0; i < markers.length; i++) {
 
         case "quests":
             markerIcon = L.icon({
-                iconUrl: `icon/flag.png`,
+                iconUrl: `/icon/flag.png`,
-                shadowUrl: `icon/flag-shadow.png`,
+                shadowUrl: `/icon/flag-shadow.png`,
                 iconSize: [20, 23],
                 shadowSize: [35, 30],
                 iconAnchor: [12.5, 8],
@@ -159,8 +159,8 @@ for (let i = 0; i < markers.length; i++) {
     markerIconOverride = markerIcon
     if (m.icon) {
         markerIconOverride = L.icon({
-            iconUrl: `icon/${m.icon}.png`,
+            iconUrl: `/icon/${m.icon}.png`,
-            shadowUrl: `icon/${m.icon}-shadow.png`,
+            shadowUrl: `/icon/${m.icon}-shadow.png`,
             iconSize: [25, 25],
             shadowSize: [35, 30],
             iconAnchor: [12.5, 8],
@@ -236,8 +236,8 @@ if ( players && Object.keys(players).length > 0 ) {
     ]
 
     const playerIcon = L.icon({
-        iconUrl: `icon/location-pin.png`,
+        iconUrl: `/icon/location-pin.png`,
-        shadowUrl: `icon/location-pin-shadow.png`,
+        shadowUrl: `/icon/location-pin-shadow.png`,
         iconSize: [18, 24],
         shadowSize: [20, 16],
         iconAnchor: [11, 8],
@@ -335,7 +335,7 @@ let customMarkersList = []
  * It also sends an event to refresh data on other components that use localStorage
  */
 function saveCustomMarkers() {
-    localStorage.setItem('custom-markers', JSON.stringify(customMarkersList))
+    localStorage.setItem('custom-markers-aldys', JSON.stringify(customMarkersList))
 
     const refreshCustomMarkersEvent = new CustomEvent('refresh-custom-markers', { bubbles: true })
 
@@ -360,8 +360,8 @@ function addCustomMarker(markerTitle) {
     const lat = Number(localStorage.getItem('lastHeldYPosition'))
 
     const customMarkerIconOptions = {
-        iconUrl: `icon/push-pin.png`,
+        iconUrl: `/icon/push-pin.png`,
-        shadowUrl: `icon/push-pin-shadow.png`,
+        shadowUrl: `/icon/push-pin-shadow.png`,
         iconSize: [20, 20],
         shadowSize: [30, 25],
         iconAnchor: [0, 13],
@@ -421,7 +421,7 @@ document.addEventListener('add-custom-marker', (e) => {
  * Load all custom markers onto the map
  */
 function loadCustomMarkersFromStorage() {
-    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers'))
+    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers-aldys'))
 
     if (!customMarkersData) return
 

src/components/maps/AldysMapOverlay.astro

@@ -11,7 +11,7 @@ const players = playersData as PlayerMarker
 ---
 
 <div class="world-overlay">
-    <SearchMarkers client:load markers={markers} players={players} />
+    <SearchMarkers client:load markers={markers} players={players} mapKey="aldys" />
 </div>
 
 <style lang="scss">

src/components/maps/BamastMap.astro

@@ -12,7 +12,7 @@ const players = playersData as PlayerMarker
 <div class="world-wrapper">
     <div id="world"></div>
 
-    <MarkerCreator client:load />
+    <MarkerCreator client:load mapKey="bamast" />
 </div>
 
 <script lang="ts" define:vars={{ markers, players }} defer>
@@ -111,8 +111,8 @@ for (let i = 0; i < markers.length; i++) {
     switch (m.group) {
         case "capitals":
             markerIcon = L.icon({
-                iconUrl: `icon/castle.png`,
+                iconUrl: `/icon/castle.png`,
-                shadowUrl: `icon/castle-shadow.png`,
+                shadowUrl: `/icon/castle-shadow.png`,
                 iconSize: [25, 25],
                 shadowSize: [35, 30],
                 iconAnchor: [12.5, 8],
@@ -122,15 +122,15 @@ for (let i = 0; i < markers.length; i++) {
         
         case "cities":
             markerIcon = L.icon({
-                iconUrl: `icon/circle.png`,
+                iconUrl: `/icon/circle.png`,
                 iconSize: [12, 12],
             })
             break
 
         case "landmarks":
             markerIcon = L.icon({
-                iconUrl: `icon/monument.png`,
+                iconUrl: `/icon/monument.png`,
-                shadowUrl: `icon/monument-shadow.png`,
+                shadowUrl: `/icon/monument-shadow.png`,
                 iconSize: [18, 18],
                 shadowSize: [32, 14],
                 iconAnchor: [12.5, 8],
@@ -140,8 +140,8 @@ for (let i = 0; i < markers.length; i++) {
 
         case "quests":
             markerIcon = L.icon({
-                iconUrl: `icon/flag.png`,
+                iconUrl: `/icon/flag.png`,
-                shadowUrl: `icon/flag-shadow.png`,
+                shadowUrl: `/icon/flag-shadow.png`,
                 iconSize: [20, 23],
                 shadowSize: [35, 30],
                 iconAnchor: [12.5, 8],
@@ -159,8 +159,8 @@ for (let i = 0; i < markers.length; i++) {
     markerIconOverride = markerIcon
     if (m.icon) {
         markerIconOverride = L.icon({
-            iconUrl: `icon/${m.icon}.png`,
+            iconUrl: `/icon/${m.icon}.png`,
-            shadowUrl: `icon/${m.icon}-shadow.png`,
+            shadowUrl: `/icon/${m.icon}-shadow.png`,
             iconSize: [25, 25],
             shadowSize: [35, 30],
             iconAnchor: [12.5, 8],
@@ -236,8 +236,8 @@ if ( players && Object.keys(players).length > 0 ) {
     ]
 
     const playerIcon = L.icon({
-        iconUrl: `icon/location-pin.png`,
+        iconUrl: `/icon/location-pin.png`,
-        shadowUrl: `icon/location-pin-shadow.png`,
+        shadowUrl: `/icon/location-pin-shadow.png`,
         iconSize: [18, 24],
         shadowSize: [20, 16],
         iconAnchor: [11, 8],
@@ -335,7 +335,7 @@ let customMarkersList = []
  * It also sends an event to refresh data on other components that use localStorage
  */
 function saveCustomMarkers() {
-    localStorage.setItem('custom-markers', JSON.stringify(customMarkersList))
+    localStorage.setItem('custom-markers-bamast', JSON.stringify(customMarkersList))
 
     const refreshCustomMarkersEvent = new CustomEvent('refresh-custom-markers', { bubbles: true })
 
@@ -360,8 +360,8 @@ function addCustomMarker(markerTitle) {
     const lat = Number(localStorage.getItem('lastHeldYPosition'))
 
     const customMarkerIconOptions = {
-        iconUrl: `icon/push-pin.png`,
+        iconUrl: `/icon/push-pin.png`,
-        shadowUrl: `icon/push-pin-shadow.png`,
+        shadowUrl: `/icon/push-pin-shadow.png`,
         iconSize: [20, 20],
         shadowSize: [30, 25],
         iconAnchor: [0, 13],
@@ -421,7 +421,7 @@ document.addEventListener('add-custom-marker', (e) => {
  * Load all custom markers onto the map
  */
 function loadCustomMarkersFromStorage() {
-    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers'))
+    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers-bamast'))
 
     if (!customMarkersData) return
 

src/components/maps/BamastMapOverlay.astro

@@ -11,7 +11,7 @@ const players = playersData as PlayerMarker
 ---
 
 <div class="world-overlay">
-    <SearchMarkers client:load markers={markers} players={players} />
+    <SearchMarkers client:load markers={markers} players={players} mapKey="bamast" />
 </div>
 
 <style lang="scss">

src/components/maps/data/aldys/markers.json

@@ -694,6 +694,19 @@
             "markerCoords": {
                 "x": 285.0990986858211,
                 "y": -146.08986069534564
+            },
+            "cover": "Garràn.jpg",
+            "coverAuthor": "Dmitry Dubinsky",
+            "coverLink": "https://elhour.artstation.com/projects/RYynYm?album_id=47640"
+        },
+        {
+            "group": "landmarks",
+            "title": "Ligatorium",
+            "description": "Monument qui renferme les archives royales de l'empire des Terres de Syaltha.",
+            "link": "https://alexcreates.fr/leim/index.php/Garr%C3%A0n#Ligatorium",
+            "markerCoords": {
+                "x": 283.4611668744801,
+                "y": -146.1972028485071
             }
         },
         {
@@ -744,7 +757,10 @@
             "markerCoords": {
                 "x": 326.7497076703842,
                 "y": -206.67114645854178
-            }
+            },
+            "cover": "Fasàch.jpg",
+            "coverAuthor": "Liang Mark",
+            "coverLink": "https://www.artstation.com/artwork/Jll2Jd"
         },
         {
             "group": "cities",
@@ -815,15 +831,6 @@
                 "y": -206.1154623032882
             }
         },
-        {
-            "group": "quests",
-            "title": "Les Cloches de Cantane",
-            "description": "D'étranges disparitions secouent la cité minière de Cantane, rythmées par le tintement des cloches de l'église.",
-            "markerCoords": {
-                "x": 198.0424703459088,
-                "y": -210.9293951755887
-            }
-        },
         {
             "group": "quests",
             "title": "Mémoires de fer",

src/components/maps/data/aldys/players.json

@@ -1 +1,8 @@
-{}
+{
+    "markerCoords": {
+        "x": 198.0424703459088,
+        "y": -210.9293951755887
+    },
+    "title": "Les Mines Blanches",
+    "description": "Malik, Elie et Clayron sont pris au piège dans les mines blanches après un éboulement soudain."
+}

src/components/maps/data/bamast/markers.json

@@ -8,7 +8,10 @@
             "markerCoords": {
                 "x": 119.6667886200924,
                 "y": -17.945469721492717
-            }
+            },
+            "cover": "Faranne.jpg",
+            "coverAuthor": "Pablo Mendoza Peces",
+            "coverLink": "https://www.artstation.com/artwork/dAJr1"
         },
         {
             "group": "cities",
@@ -28,7 +31,10 @@
             "markerCoords": {
                 "x": 113.52851847725508,
                 "y": -19.882939646724424
-            }
+            },
+            "cover": "Miverne.jpg",
+            "coverAuthor": "Andrei-Pervukhin",
+            "coverLink": "https://www.artstation.com/artwork/dAJr1"
         },
         {
             "group": "cities",
@@ -63,12 +69,15 @@
         {
             "group": "capitals",
             "title": "Rocheverre",
-            "description": "",
+            "description": "Capitale de l'Union Bahamienne, qui tire son nom du minerai éponyme et de ses falaises de basalt.",
             "link": "https://alexcreates.fr/leim/index.php/Rocheverre",
             "markerCoords": {
                 "x": 122.87040892704968,
                 "y": -58.7910005354329
-            }
+            },
+            "cover": "Rocheverre.jpg",
+            "coverAuthor": "Creative Intelligence Arts",
+            "coverLink": "https://www.kickstarter.com/projects/1300298569/project-phoenix-japans-indie-rpg-feat-aaa-talent"
         },
         {
             "group": "landmarks",
@@ -94,7 +103,7 @@
         {
             "group": "landmarks",
             "title": "Tours d'Anfall",
-            "description": "",
+            "description": "Institut arcanique public, faisant office d'alternative à l'Académie de la Feuille d'Or pour les étudiants des milieux plus modestes de Bamast.",
             "link": "https://alexcreates.fr/leim/index.php/Tours d'Anfall",
             "markerCoords": {
                 "x": 128.134559374788,
@@ -178,8 +187,17 @@
             "description": "",
             "link": "https://alexcreates.fr/leim/index.php/Rastys",
             "markerCoords": {
-                "x": 107.88172380301971,
+                "x": 114.06646730992365,
-                "y": -102.55907647074645
+                "y": -102.12951165200633
+            }
+        },
+        {
+            "group": "landmarks",
+            "title": "Champs communaux de Rastys",
+            "description": "Plusieurs collines côtières où le sol y est riche en nutriments. Certaines terres sont cultivées par des familles possédant des terres, mais certains champs sont publics et appartiennent à la communauté de Rastys.",
+            "markerCoords": {
+                "x": 114.62855568365849,
+                "y": -101.5674232782715
             }
         },
         {

src/components/maps/overlay/MarkerCreator.vue

@@ -7,6 +7,12 @@ const markerMenu = ref<HTMLMenuElement>()
 
 type MenuMode = "editing-marker" | "default"
 
+const props = defineProps<{
+    mapKey?: string
+}>()
+
+const customMarkersKey = props.mapKey ? `custom-markers-${props.mapKey}` : 'custom-markers'
+
 /**
  * Appearing behaviour
  */
@@ -91,14 +97,14 @@ const markerTitleInput = ref<HTMLInputElement>()
 const markerTitleInputError = ref<Error | null>()
 
 // Data from localStorage
-const customMarkersData = useLocalStorage('custom-markers', [])
+const customMarkersData = useLocalStorage(customMarkersKey, [])
 
 // Refresh from localStorage
 onMounted(() => {
-    customMarkersData.value = useLocalStorage('custom-markers', []).value
+    customMarkersData.value = useLocalStorage(customMarkersKey, []).value
 
     document.addEventListener('refresh-custom-markers', () => {
-        customMarkersData.value = useLocalStorage('custom-markers', []).value
+        customMarkersData.value = useLocalStorage(customMarkersKey, []).value
     })
 })
 

src/components/maps/overlay/SearchMapSwitch.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
-import { computed, onMounted, onUpdated, ref, watch } from 'vue';
+import { computed, onUpdated, ref, watch } from 'vue';
-import { useElementHover, useFocus, useUrlSearchParams, watchDebounced } from '@vueuse/core'
+import { useElementHover, useFocus } from '@vueuse/core'
 
 const navModel = ref(false);
 
@@ -34,12 +34,12 @@ interface MenuItem {
 const menuItems: MenuItem[] = [
     {
         name: 'Aldys',
-        img: 'https://picsum.photos/id/13/40',
+        img: '/images/aldys-cover.png',
         url: '/'
     },
     {
         name: 'Bamast',
-        img: 'https://picsum.photos/id/14/40',
+        img: '/images/bamast-cover.png',
         url: '/bamast'
     }
 ]
@@ -53,14 +53,14 @@ const menuItems: MenuItem[] = [
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM96,176a8,8,0,0,0-1.94.24L40,189.75V62.25L95.07,48.48l.93.46Zm120,17.75-55.07,13.77-.93-.46V80a8,8,0,0,0,1.94-.23L216,66.25Z"/></svg>
                 </button>
             </PopoverTrigger>
-            <PopoverContent side="bottom" :side-offset="6" :collision-padding="10" class="card">
+            <PopoverContent side="bottom" :side-offset="6" :collision-padding="10" class="card" style="z-index: 100;">
                 <PopoverArrow class="card-arrow" />
 
                 <menu class="world-menu">
                     <li v-for="item in menuItems" :key="item.name">
                         <a :href="item.url" :class="{ 'active': url?.pathname === item.url }" :tabindex="url?.pathname === item.url ? -1 : 0">
                             <figure>
-                                <img :src="item.img" alt="" width="40" height="40" loading="lazy">
+                                <img :src="item.img" alt="" width="40" height="40" loading="eager">
 
                                 <figcaption>
                                     {{ item.name }}

src/components/maps/overlay/SearchMarkers.vue

@@ -9,10 +9,13 @@ import SearchMapSwitch from './SearchMapSwitch.vue';
 const props = defineProps<{
     markers: MapMarker[],
     players: PlayerMarker,
+    mapKey?: string
 }>()
 
+const customMarkersKey = props.mapKey ? `custom-markers-${props.mapKey}` : 'custom-markers'
+
 const fixedMarkers = props.markers
-const customMarkersData = useLocalStorage('custom-markers', [])
+const customMarkersData = useLocalStorage(customMarkersKey, [])
 
 const allMarkers = computed(() => {
     return [...fixedMarkers, ...customMarkersData.value]
@@ -142,10 +145,10 @@ function handleCategorySwitch(g: MapMarkerGroup) {
  * Custom Markers handling
  */
  onMounted(() => {
-    customMarkersData.value = useLocalStorage('custom-markers', []).value
+    customMarkersData.value = useLocalStorage(customMarkersKey, []).value
 
     document.addEventListener('refresh-custom-markers', () => {
-        customMarkersData.value = useLocalStorage('custom-markers', []).value
+        customMarkersData.value = useLocalStorage(customMarkersKey, []).value
     })
 })