diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro index a4324a7b..561cc4db 100644 --- a/src/components/maps/WorldMap.astro +++ b/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
+ +
diff --git a/src/components/maps/overlay/CountryOverlay.astro b/src/components/maps/overlay/CountryOverlay.astro new file mode 100644 index 00000000..88ca24dd --- /dev/null +++ b/src/components/maps/overlay/CountryOverlay.astro @@ -0,0 +1,1377 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 200 + KM + 200 + KM + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Vidament + Mer Kalamys + Océan Frigalien + Océan Magorien + Merd’émeraude + Mer Téniréenne + Mer Téniréenne + Golfe deverre + Côte cendrée + Œil du Dragon + Comté desHautes-Berges + Comté deNacride + Comté desBasses-Berges + Comté deRougefer + Comté deQuillon + Comtéd’Héraldie + Comtéde Corambre + Comtéd’Émerose + Républiquede Sakâr + Terres Unies deSyaltha + Comtéde Ternâcre + Comtéde Mireloin + Comtéde Pergaré + Comtéd’Asharos + Marais Hurlants + Plaines depoussière + Difaeal’pyris + Forêt deVerglas + Bois deBorélis + L’Humeur d’Aldys + Comté deLagarde + Porgale + Boisde Kiam + Handany + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue index a06d4cbe..6ca9dbde 100644 --- a/src/components/maps/overlay/SearchMarkers.vue +++ b/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('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("") 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('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 } @@ -125,7 +175,7 @@ function resetQueryValue() { - @@ -219,9 +269,11 @@ function resetQueryValue() {