Merge branch 'dev' into main

src/components/maps/WorldMap.astro

@@ -1,4 +1,5 @@
 ---
+import CountryOverlay from './overlay/CountryOverlay.astro';
 import type { MapMarker, PlayerMarker } from '@/types/Leaflet';
 
 import markersData from '@/components/maps/data/markers.json'
@@ -10,6 +11,8 @@ const players = playersData as PlayerMarker
 
 <div class="world-wrapper">
     <div id="world"></div>
+
+    <!-- <CountryOverlay /> -->
 </div>
 
 <script lang="ts" define:vars={{ markers, players }} defer>
@@ -47,7 +50,7 @@ L.control.zoom({
 }).addTo(map)
 
 // Layers
-const layer = L.tileLayer.zoomify('/zoomify/aldys-nord/{g}/{z}-{x}-{y}.jpg', {
+const baseTileLayer = L.tileLayer.zoomify('/zoomify/aldys-nord/{g}/{z}-{x}-{y}.jpg', {
     width: mapWidth,
     height: mapHeight,
 }).addTo(map)
@@ -194,7 +197,7 @@ if ( players && Object.keys(players).length > 0 ) {
     })
 }
 
-map.fitBounds(layer.getBounds())
+map.fitBounds(baseTileLayer.getBounds())
 
 /**
  * RULER
@@ -241,6 +244,18 @@ const rulerOptions = {
 const measureControl = L.control.measure(rulerOptions)
 measureControl.addTo(map)
 
+/**
+ * SVG LAYERS
+ */
+// const svgElement = document.getElementById('svg-overlay')
+// const latLngBounds = L.latLngBounds([baseTileLayer.getBounds().getSouth() + 0.9875, baseTileLayer.getBounds().getWest()], [baseTileLayer.getBounds().getNorth(), baseTileLayer.getBounds().getEast() - 1.675]);
+
+// const svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
+//     opacity: 0.25,
+//     interactive: true,
+//     zIndex: 10,
+// }).addTo(map);
+
 /**
  * UTILITIES
  */
@@ -288,8 +303,7 @@ function convertScaleToY(y) {
 map.addEventListener('click', (event) => {
     const lat = convertScaleToY(event.latlng.lat)
     const lon = convertScaleToX(event.latlng.lng)
-    console.log(lat, lon)
-    console.log(map.getZoom())
+    console.log(lat, lon, map.getZoom())
 })
 </script>
     

src/components/maps/overlay/SearchMarkers.vue

@@ -14,16 +14,29 @@ const markers = props.markers
 const qInput = ref()
 const { focused: isFocused } = useFocus(qInput)
 
+/**
+ * Available advanced search modes
+ * Currently only groups MapMarkerGroup and string "query"
+ */
+ type SearchMode = "query" | MapMarkerGroup
+
+const currentSearchMode = ref<SearchMode>('query')
+
 onMounted(() => {
     isFocused.value = true
 })
 
-const shouldBeActive = computed(() => q.value.length > 0 || currentSearchMode.value !== "query")
+const hasQuery = computed(() => q.value.length > 0)
+const shouldBeActive = computed(() => hasQuery.value || currentSearchMode.value !== "query")
 
 const q = ref<string>("")
 
 const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g)
 
+/**
+ * Dropdown's markers list
+ * If the search doesn't have a query set, defaults to marker grouping
+ */
 const filteredMarkers = computed(() => {
     if (currentSearchMode.value === "query") {
         return markers?.filter(m => {
@@ -40,7 +53,16 @@ const filteredMarkers = computed(() => {
     })
 })
 
-// Key Combos
+// Limit of menu list dropdown
+const currentLimit = computed(() => {
+    if (currentSearchMode.value === "query") return 10
+    return 100
+})
+
+/**
+ * ACCESSIBILITY
+ */
+// Registered key combos
 const keys = useMagicKeys()
 const shortcutKeyCombo = keys['Shift+Period']
 const eraseKeyCombo = keys['Escape']
@@ -49,13 +71,13 @@ whenever(shortcutKeyCombo, () => {
     isFocused.value = true
 })
 whenever(eraseKeyCombo, () => {
-    resetQueryValue()
-    setSearchMode('query')
+    resetAllFields()
     isFocused.value = true
 })
 
+// If query changes and has new value...
 watch(q, (n, o) => {
-    if (n) setSearchMode('query'); 
+    if (n) setSearchMode('query')
 })
 
 /**
@@ -89,32 +111,60 @@ onUpdated(() => {
     })
 })
 
-type SearchMode = "query" | MapMarkerGroup;
+/**
+ * Advanced Search Mode
+ * Uses filters to show specific kinds of markers in the search results
+ */
 
-const currentSearchMode = ref<SearchMode>('query');
-
-// This should be refactored with better type checking
+// TODO: This should be refactored with better type checking
 // It does the job for now but will be a pain if I had another feature that uses group sorting
 const hasGroupFilter = computed(() => {
     return currentSearchMode.value !== 'query'
 })
 
-const currentLimit = computed(() => {
-    if (currentSearchMode.value === "query") return 10
-    return 100;
-})
-
-function setSearchMode(m: SearchMode) {
-    currentSearchMode.value = m;
-}
-
 function setActiveCategory(g: MapMarkerGroup) {
     resetQueryValue()
-    currentSearchMode.value = g;
+
+    if (currentSearchMode.value !== g) {
+        currentSearchMode.value = g
+    } else {
+        currentSearchMode.value = "query"
+    }
 }
 
+/**
+ * EVENTS
+ */
+// Close Button event
+function onCloseQuery() {
+    resetAllFields("focusAfter")
+}
+
+/**
+ * UTILITIES
+ */
+/**
+ * Switches current search mode
+ */
+function setSearchMode(m: SearchMode) {
+    currentSearchMode.value = m
+}
+
+/**
+ * Resets active query in field
+ */
 function resetQueryValue() {
-    q.value = "";
+    q.value = ""
+}
+
+/**
+ * Resets category and query states, default state
+ */
+function resetAllFields(actionAfter?: "focusAfter") {
+    setSearchMode('query')
+    resetQueryValue()
+
+    if (actionAfter === "focusAfter") isFocused.value = true
 }
 </script>
 
@@ -125,7 +175,7 @@ function resetQueryValue() {
                 <i class="search-icon ph-fill ph-magnifying-glass"></i>
                 <input ref="qInput" name="recherche" type="text" v-model="q" title="Rechercher le monde" placeholder="Ville, point d'intérêt…">
 
-                <button v-if="hasGroupFilter" @click="setSearchMode('query')" class="close-btn" title="Enlever le filtre">
+                <button v-if="hasGroupFilter || hasQuery" @click="onCloseQuery" class="close-btn" title="Enlever le filtre">
                     <i class="ph-light ph-x"></i>
                 </button>
 
@@ -219,9 +269,11 @@ function resetQueryValue() {
 
 <style lang="scss" scoped>
 .toolbar {
-    display: flex;
-    gap: 1.5rem;
-    align-items: start;
+    @media screen and (width >= 900px) {
+        display: flex;
+        gap: 1.5rem;
+        align-items: start;
+    }
 
     .search-w {
         padding: .5rem 1.2rem;
@@ -232,6 +284,10 @@ function resetQueryValue() {
         box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
         pointer-events: all;
 
+        @media screen and (width >= 900px) {
+            width: 25%;
+        }
+
         .input-w {
             $search-items-gap: .5rem;
             $search-icon-size: 1.2em;
@@ -436,12 +492,6 @@ function resetQueryValue() {
         }
     }
 
-    @media screen and (width >= 900px) {
-        .search-w {
-            width: 29%;
-        }
-    }
-
     /**
     * TAG LIST
     */