Added nanostore logic to centralise data

src/components/maps/WorldMap.astro

@@ -1,12 +1,10 @@
 ---
-import type { MapMarker } from '@/types/Leaflet';
+import { allTasks } from 'nanostores';
+import { $world } from './worldStore';
 
-interface Props {
-    markers: MapMarker[];
-    players?: MapMarker;
-}
-
-const { markers, players } = Astro.props
+$world.listen(() => {})
+await allTasks()
+const { markers, players } = $world.get()
 ---
 
 <div class="world-wrapper">

src/components/maps/WorldMapOverlay.astro

@@ -1,13 +1,12 @@
 ---
+import { allTasks } from 'nanostores';
+import { $world } from './worldStore';
+
 import SearchMarkers from "./overlay/SearchMarkers.vue";
-import type { MapMarker } from '@/types/Leaflet';
 
-interface Props {
-    markers: MapMarker[];
-    players?: MapMarker;
-}
-
-const { markers, players } = Astro.props
+$world.listen(() => {})
+await allTasks()
+const { markers, players } = $world.get()
 ---
 
 <div class="world-overlay">

src/components/maps/overlay/SearchMarkers.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import type { MapMarker } from '@/types/Leaflet';
+import { allTasks } from 'nanostores';
+import { useStore } from '@nanostores/vue'
+import { $world, flyTo } from '../worldStore';
+
 import { useFocus, useMagicKeys, whenever } from '@vueuse/core';
 import { computed, onMounted, ref } from 'vue';
 
-const props = defineProps<{
-    markers?: MapMarker[],
-    players?: MapMarker,
-}>()
+$world.listen(() => {})
+await allTasks()
+
+const { markers, players, lastCoords } = useStore($world).value
 
 // Search functions
 const qInput = ref()
@@ -25,7 +28,7 @@ const shouldBeActive = computed(() => {
 const q = ref<string>("")
 
 const filteredMarkers = computed(() => {
-    return props.markers?.filter(m => {
+    return markers?.filter(m => {
         const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g)
 
         const queryString = new String(q.value).replace(unifier, "").toLocaleLowerCase()
@@ -46,13 +49,13 @@ whenever(shortcutKeyCombo, () => {
 })
 
 // Player geolocation
-const searchBar = ref()
 function handlePlayerTarget () {
-    // Emit event to store ? to dom ?
+    flyTo(players.markerCoords)
 }
 </script>
 
 <template>
+    {{ lastCoords }}
     <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
         <div class="input-w">
             <i class="search-icon ph-fill ph-magnifying-glass"></i>

src/components/maps/worldStore.ts

@@ -0,0 +1,30 @@
+import { deepMap, onMount, task, action } from 'nanostores'
+import type { MapCoords, MapMarker } from '../../types/Leaflet';
+
+export const $world = deepMap({
+    markers: [] as MapMarker[],
+    players: {} as MapMarker,
+    lastCoords: {
+        y: 0,
+        x: 0,
+    }
+})
+
+export const flyTo = action($world, 'fly-to', (store, coords: MapCoords) => {
+    store.setKey('lastCoords', coords)
+    return store.get()
+})
+
+// Fetch initial data
+onMount($world, () => {
+    // Fetch all markers
+    task(async () => {
+        const m = await fetch('http://localhost:4321/api/markers.json')
+        $world.setKey('markers', await m.json())
+    })
+    // Fetch all player data
+    task(async () => {
+        const p = await fetch('http://localhost:4321/api/players.json')
+        $world.setKey('players', await p.json())
+    })
+})

src/types/Leaflet.ts

@@ -1,11 +1,12 @@
 export type MapMarkerGroup = "capitals" | "cities" | "towns" | "landmarks";
+export type MapCoords = {
+    x: number,
+    y: number,
+}
 
 export type MapMarker = {
     title: string,
-    markerCoords: {
-        x: number,
-        y: number,
-    }
+    markerCoords: MapCoords,
     description?: string,
     link?: string,
     group?: MapMarkerGroup,
@@ -13,10 +14,7 @@ export type MapMarker = {
 
 export type PlayerMarker = {
     title: string,
-    markerCoords: {
-        x: number,
-        y: number,
-    }
+    markerCoords: MapCoords,
     description?: string,
     link?: string,
 }