diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
new file mode 100644
index 00000000..48ac58d4
--- /dev/null
+++ b/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())
+ })
+})
diff --git a/src/types/Leaflet.ts b/src/types/Leaflet.ts
index 29089e52..63d4f455 100644
--- a/src/types/Leaflet.ts
+++ b/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,
}
From 085887615a27599880a5009859b1ea55ef496c54 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 13 Oct 2023 17:44:52 +0200
Subject: [PATCH 4/6] Added flyTo support ; targets players
The implementation forces Vue to attach vanilla event handlers, because their VDom doesn't bubble up and there's no way for it to easily communicate with Astro components.
Nanostores aren't an option because .astro files are rendered on the server, so the store can't be used client side (would be nice if it did tho!!!)
---
src/components/maps/WorldMap.astro | 326 +++++++++---------
src/components/maps/overlay/SearchMarkers.vue | 20 +-
src/components/maps/worldStore.ts | 9 -
3 files changed, 179 insertions(+), 176 deletions(-)
diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 717e269f..a444813d 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -12,177 +12,185 @@ const { markers, players } = $world.get()