Added nanostore logic to centralise data

package-lock.json

@@ -9,9 +9,11 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/vue": "^3.0.1",
+        "@nanostores/vue": "^0.10.0",
         "@types/leaflet": "^1.9.6",
         "@vueuse/core": "^10.5.0",
         "astro": "^3.2.0",
+        "nanostores": "^0.9.3",
         "vue": "^3.3.4"
       },
       "devDependencies": {
@@ -927,6 +929,28 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nanostores/vue": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@nanostores/vue/-/vue-0.10.0.tgz",
+      "integrity": "sha512-832RAUbzRfHPs1CdqVEwfvgB2+RD/INji4Zo8bUSEfRO2pQRMMeq479gydnohGpRaa0oNwlfKo7TGFXCghq/1g==",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "@nanostores/logger": ">=0.2.3",
+        "@vue/devtools-api": ">=6.5.0",
+        "nanostores": ">=0.9.2",
+        "vue": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "@nanostores/logger": {
+          "optional": true
+        },
+        "@vue/devtools-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4046,6 +4070,20 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nanostores": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-0.9.3.tgz",
+      "integrity": "sha512-KobZjcVyNndNrb5DAjfs0WG0lRcZu5Q1BOrfTOxokFLi25zFrWPjg+joXC6kuDqNfSt9fQwppyjUBkRPtsL+8w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
+      }
+    },
     "node_modules/napi-build-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",

package.json

@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@astrojs/vue": "^3.0.1",
+    "@nanostores/vue": "^0.10.0",
     "@types/leaflet": "^1.9.6",
     "@vueuse/core": "^10.5.0",
     "astro": "^3.2.0",
+    "nanostores": "^0.9.3",
     "vue": "^3.3.4"
   },
   "devDependencies": {

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,
 }