Merge branch 'dev'

README.md

@@ -2,4 +2,4 @@
 Repository for interactive maps using Leim's Wiki data
 
 ## Demo
-Live demo available at https://maps.alexcreates.fr/
+Live demo available at https://maps.alexcreates.fr

package.json

@@ -1,7 +1,7 @@
 {
   "name": "leim-maps",
   "type": "module",
-  "version": "2.0.0",
+  "version": "1.2.4",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,14 +10,14 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/sitemap": "^3.0.4",
-    "@astrojs/vue": "^4.0.8",
-    "@types/leaflet": "^1.9.8",
-    "@vueuse/core": "^10.7.1",
-    "astro": "^4.1.2",
-    "vue": "^3.4.14"
+    "@astrojs/sitemap": "^3.1.6",
+    "@astrojs/vue": "^4.5.0",
+    "@types/leaflet": "^1.9.12",
+    "@vueuse/core": "^10.9.0",
+    "astro": "^4.13.1",
+    "vue": "^3.4.27"
   },
   "devDependencies": {
-    "sass": "^1.68.0"
+    "sass": "^1.77.0"
   }
 }

src/assets/scss/_leaflet.scss

@@ -58,11 +58,11 @@
                     border-bottom-left-radius: 0;
                     border-bottom-right-radius: 0;
 
+                    @include text.stroke(2, #18181b);
+
                     &::before {
                         display: none;
                     }
-
-                    @include text.stroke(2, #18181b);
                 }
             }
         }

src/components/maps/WorldMap.astro

@@ -106,6 +106,7 @@ for (let i = 0; i < markers.length; i++) {
     const coords = [convertYToScale(m.markerCoords.y), convertXToScale(m.markerCoords.x)]
 
     let markerIcon
+    let markerIconOverride
 
     switch (m.group) {
         case "capitals":
@@ -154,7 +155,20 @@ for (let i = 0; i < markers.length; i++) {
             break
     }
 
-    const marker = L.marker(coords, { icon: markerIcon }).addTo(map)
+    // Handle icon override if it's specified
+    markerIconOverride = markerIcon
+    if (m.icon) {
+        markerIconOverride = L.icon({
+            iconUrl: `icon/${m.icon}.png`,
+            shadowUrl: `icon/${m.icon}-shadow.png`,
+            iconSize: [25, 25],
+            shadowSize: [35, 30],
+            iconAnchor: [12.5, 8],
+            shadowAnchor: [11, 12]
+        })
+    }
+
+    const marker = L.marker(coords, { icon: markerIconOverride }).addTo(map)
     let popupContent = ""
     if (m.link) {
         popupContent = `
@@ -443,6 +457,84 @@ function removeCustomMarker(marker, markerTitle) {
     saveCustomMarkers()
 }
 
+/**
+ * URL PARAMETERS
+ */
+
+/**
+ * From the leaflet setup, get a working param config
+ *
+ * @returns Latitude, Longitude and zoom level of the map
+ */
+ function getURLFromSetup() {
+    const centerOfMap = map.getCenter()
+
+    const lat = centerOfMap.lat
+    const lon = centerOfMap.lng
+    const zoom = parseFloat(map.getZoom().toFixed(1))
+
+    return { lat, lon, zoom }
+}
+
+/**
+ * Get leaflet coords from URL params
+ * 
+ * @returns URLSearchParams
+ */
+function getCoordsSetupFromURL() {
+    const params = new URL(document.location).searchParams
+
+    return params
+}
+
+/**
+ * Check if the params in the URL can be parsed as leaflet coordinates
+ * 
+ * @return boolean
+ */
+function hasInitialSetup() {
+    const params = new URL(document.location).searchParams
+
+    return params.has('lat') && params.has('lon')
+}
+
+/**
+ * Function to refresh the URL params
+ * 
+ * @returns void
+ */
+function setupToURL() {
+    const setup = getURLFromSetup()
+
+    const newParams = new URLSearchParams(setup)
+    const newUrl = new URL(window.location.href)
+    newUrl.search = newParams.toString()
+
+    window.history.replaceState(null, '', newUrl.toString())
+}
+
+/**
+ * Uses the URL params to setup the leaflet map
+ */
+function setupFromURL() {
+    const setup = getCoordsSetupFromURL()
+
+    map.setView({ lat: setup.get('lat'), lng: setup.get('lon') }, setup.get('zoom') | minZoom, { animate: false })
+}
+
+// Check if the map has initial params in the URL
+// If not, just setup the default URL
+if (hasInitialSetup()) {
+    setupFromURL()
+} else {
+    setupToURL()
+}
+
+// When the map stops moving, update the URL to keep it up to date
+map.on('moveend', () => {
+    setupToURL()
+})
+
 /**
  * UTILITIES
  */

src/components/maps/data/markers.json

@@ -784,6 +784,94 @@
                 "x": 105.79962111804268,
                 "y": -82.40552057309549
             }
+        },
+        {
+            "group": "landmarks",
+            "title": "Faculté de Magie Appliquée",
+            "description": "Établissement d'enseignements arcaniques tout public, mais à la qualité lacunaire.",
+            "link": "https://alexcreates.fr/leim/index.php/Facult%C3%A9_de_Magie_Appliqu%C3%A9e",
+            "markerCoords": {
+                "x": 103.96761286182101,
+                "y": -79.90785827537563
+            },
+            "icon": "graduation-cap"
+        },
+        {
+            "group": "landmarks",
+            "title": "Académie Artistique Arcanique",
+            "description": "Institut d'apprentissage public centré sur les arts.",
+            "link": "https://alexcreates.fr/leim/index.php/Acad%C3%A9mie_Artistique_Arcanique",
+            "markerCoords": {
+                "x": 75.84445789595449,
+                "y": -199.14437153165204
+            },
+            "icon": "graduation-cap"
+        },
+        {
+            "group": "landmarks",
+            "title": "Académie Centrale Kaldélienne",
+            "description": "Une des plus grandes académies dispensant des cours de magie de l'Alliance. L'examen d'entrée est public, mais les coûts de scolarité restent à la charge des étudiants.",
+            "link": "https://alexcreates.fr/leim/index.php/Acad%C3%A9mie_Centrale_Kald%C3%A9lienne",
+            "markerCoords": {
+                "x": 83.80737652386473,
+                "y": -184.52963682119173
+            },
+            "icon": "graduation-cap"
+        },
+        {
+            "group": "landmarks",
+            "title": "Grande Maison de Flamberge",
+            "description": "La plus prestigieuse école des Terres de Syaltha. La Grande Maison est une des rares entités à certifier les sal'kayas.",
+            "link": "https://alexcreates.fr/leim/index.php/Grande_Maison_de_Flamberge",
+            "markerCoords": {
+                "x": 302.23491236190273,
+                "y": -110.07337124956246
+            },
+            "icon": "graduation-cap"
+        },
+        {
+            "group": "landmarks",
+            "title": "Haute-École de Magistrature Cordouenne",
+            "description": "Institut de l'Alliance formant les magistrats, juges et politiciens de demain.",
+            "link": "https://alexcreates.fr/leim/index.php/Haute-%C3%89cole_de_Magistrature_Cordouenne",
+            "markerCoords": {
+                "x": 131.07900289783518,
+                "y": -148.801890020031
+            },
+            "icon": "graduation-cap"
+        },
+        {
+            "group": "landmarks",
+            "title": "Institut du Fer Blanc",
+            "description": "Première école militaire de l'Alliance Kaldélienne.",
+            "link": "https://alexcreates.fr/leim/index.php/Institut_du_Fer_Blanc",
+            "markerCoords": {
+                "x": 140.3159943633407,
+                "y": -191.78102982328744
+            },
+            "icon": "graduation-cap"
+        },
+        {
+            "group": "landmarks",
+            "title": "Maison d'Études de Tourgrise",
+            "description": "Établissement pluridisciplinaires axé vers les études de législations mais possèdant un cursus d'études arcaniques général.",
+            "link": "https://alexcreates.fr/leim/index.php/Maison_d%27%C3%89tudes_de_Tourgrise",
+            "markerCoords": {
+                "x": 132.82148271354282,
+                "y": -98.7924395350658
+            },
+            "icon": "graduation-cap"
+        },
+        {
+            "group": "landmarks",
+            "title": "École des Arts Spirituels",
+            "description": "Institut privé spécialisé dans les maîtrises des arcanes spirituelles.",
+            "link": "https://alexcreates.fr/leim/index.php/%C3%89cole_des_Arts_Spirituels",
+            "markerCoords": {
+                "x": 124.8585640856326,
+                "y": -95.86995303475213
+            },
+            "icon": "graduation-cap"
         }
     ]
 }

src/components/maps/overlay/SearchMarkers.vue

@@ -31,10 +31,7 @@ onMounted(() => {
 })
 
 const hasQuery = computed(() => q.value.length > 0)
-const shouldBeActive = computed(() =>
-    (hasQuery.value && currentSearchMode.value === "query" && isComponentFocused.value)
-    || currentSearchMode.value !== "query"
-)
+const shouldBeActive = computed(() => hasQuery.value || currentSearchMode.value !== "query")
 
 const q = ref<string>("")
 
@@ -227,9 +224,14 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
                         <div class="desc" v-html="m.description"></div>
 
-                        <svg v-if="m.group === 'quests'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M231.22,59.44l-80,168a8,8,0,1,1-14.44-6.88L165.62,160H32a8,8,0,0,1-5.88-13.43l42.56-46.1L26.59,61.9A8,8,0,0,1,32,48H224a8,8,0,0,1,7.22,11.44Z"/></svg>
-                        <svg v-else-if="m.group === 'capitals'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
-                        <svg v-else-if="m.group === 'landmarks'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
+                        <div v-if="m.icon">
+                            <svg v-if="m.icon === 'graduation-cap'" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 256 256"><path d="M251.76,88.94l-120-64a8,8,0,0,0-7.52,0l-120,64a8,8,0,0,0,0,14.12L32,117.87v48.42a15.91,15.91,0,0,0,4.06,10.65C49.16,191.53,78.51,216,128,216a130,130,0,0,0,48-8.76V240a8,8,0,0,0,16,0V199.51a115.63,115.63,0,0,0,27.94-22.57A15.91,15.91,0,0,0,224,166.29V117.87l27.76-14.81a8,8,0,0,0,0-14.12ZM128,200c-43.27,0-68.72-21.14-80-33.71V126.4l76.24,40.66a8,8,0,0,0,7.52,0L176,143.47v46.34C163.4,195.69,147.52,200,128,200Zm80-33.75a97.83,97.83,0,0,1-16,14.25V134.93l16-8.53ZM188,118.94l-.22-.13-56-29.87a8,8,0,0,0-7.52,14.12L171,128l-43,22.93L25,96,128,41.07,231,96Z"></path></svg>
+                        </div>
+                        <div v-else>
+                            <svg v-if="m.group === 'quests'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M231.22,59.44l-80,168a8,8,0,1,1-14.44-6.88L165.62,160H32a8,8,0,0,1-5.88-13.43l42.56-46.1L26.59,61.9A8,8,0,0,1,32,48H224a8,8,0,0,1,7.22,11.44Z"/></svg>
+                            <svg v-else-if="m.group === 'capitals'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
+                            <svg v-else-if="m.group === 'landmarks'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
+                        </div>
                     </button>
 
                     <!-- Custom marker actions -->

src/components/maps/overlay/SearchMarkersTags.vue

@@ -91,6 +91,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
 <style lang="scss" scoped>
 .tag-list {
     display: flex;
+    flex-wrap: wrap;
     gap: .5rem;
     margin-top: .5rem;
 
@@ -124,6 +125,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
         border: 1px solid var(--slate-400);
         border-radius: 100vmax;
         box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+        white-space: nowrap;
         pointer-events: all;
         cursor: pointer;
         outline: .2rem solid transparent;

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/types/Leaflet.ts

@@ -1,4 +1,5 @@
 export type MapMarkerGroup = "capitals" | "cities" | "towns" | "landmarks" | "quests" | "custom";
+export type MapMarkerIcon = "castle" | "flag" | "graduation-cap" | "location-pin" | "monument" | "push-pin"
 
 export type MapCoords = {
     x: number,
@@ -11,6 +12,7 @@ export type MapMarker = {
     description?: string,
     link?: string,
     group?: MapMarkerGroup,
+    icon?: MapMarkerIcon,
 }
 
 export type PlayerMarker = {