From 2ebee9f3e8ab6f789856757d0a0e7a8af8c5a052 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 Jan 2025 21:14:33 +0100
Subject: [PATCH] Fixed custom markers appearing on other maps

---
 src/components/maps/AldysMap.astro            |  6 +++---
 src/components/maps/AldysMapOverlay.astro     |  2 +-
 src/components/maps/BamastMap.astro           |  6 +++---
 src/components/maps/BamastMapOverlay.astro    |  2 +-
 src/components/maps/overlay/MarkerCreator.vue | 14 ++++++++++----
 src/components/maps/overlay/SearchMarkers.vue |  9 ++++++---
 6 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/maps/AldysMap.astro b/src/components/maps/AldysMap.astro
index 479fd74d..239c8f2f 100644
--- a/src/components/maps/AldysMap.astro
+++ b/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>
@@ -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 })
 
@@ -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
 
diff --git a/src/components/maps/AldysMapOverlay.astro b/src/components/maps/AldysMapOverlay.astro
index 02e810fe..aab70afc 100644
--- a/src/components/maps/AldysMapOverlay.astro
+++ b/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">
diff --git a/src/components/maps/BamastMap.astro b/src/components/maps/BamastMap.astro
index 04d4071a..94825d2a 100644
--- a/src/components/maps/BamastMap.astro
+++ b/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>
@@ -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 })
 
@@ -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
 
diff --git a/src/components/maps/BamastMapOverlay.astro b/src/components/maps/BamastMapOverlay.astro
index dfbf14ce..4a054760 100644
--- a/src/components/maps/BamastMapOverlay.astro
+++ b/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">
diff --git a/src/components/maps/overlay/MarkerCreator.vue b/src/components/maps/overlay/MarkerCreator.vue
index 30a46ea3..1ea2bb79 100644
--- a/src/components/maps/overlay/MarkerCreator.vue
+++ b/src/components/maps/overlay/MarkerCreator.vue
@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 import type { MapMarker } from '@/types/Leaflet';
 import { onClickOutside, useCssVar, useLocalStorage, useMouse } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, defineProps } from 'vue'
 
 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
     })
 })
 
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index ab5bd88d..7d077f4e 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/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
     })
 })