From c9672206be320d7246d768c0533cee560d836741 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 14 Oct 2023 14:32:53 +0200
Subject: [PATCH] Added player popup

---
 src/assets/scss/_leaflet.scss         | 15 +++++++--------
 src/components/maps/WorldMap.astro    |  8 ++++++++
 src/components/maps/worldStore.ts     |  4 ++--
 src/pages/api/data/players.markers.ts |  1 +
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss
index 6e35fed5..99b2d9df 100644
--- a/src/assets/scss/_leaflet.scss
+++ b/src/assets/scss/_leaflet.scss
@@ -16,21 +16,20 @@
                     .title {
                         display: block;
                         font-weight: 600;
-                        text-underline-offset: 2px;
-                        text-decoration: underline;
                     }
 
                     strong.title {
                         color: #16a34a;
                     }
 
-                    a.title:hover {
-                        text-decoration: none;
-                        color: #16a34a;
-                    }
-
-                    p {
+                    a.title {
+                        text-underline-offset: 2px;
+                        text-decoration: underline;
 
+                        &:hover {
+                            text-decoration: none;
+                            color: #16a34a;
+                        }
                     }
 
                     > * + * {
diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index ae5a99c7..620f3f59 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -133,6 +133,14 @@ if ( players ) {
 
     const playerMarker = L.marker(playersPosition, { icon: playerIcon }).addTo(map)
     playerMarker.addTo(layerGroups['players'])
+
+    const popupContent = `
+        <strong class="title">
+            ${players.title}
+        </strong>
+        <p>${players.description}</p>
+    `;
+    playerMarker.bindPopup(popupContent).openPopup();
 }
 
 map.fitBounds(layer.getBounds());
diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
index 1df9a715..ac4eb589 100644
--- a/src/components/maps/worldStore.ts
+++ b/src/components/maps/worldStore.ts
@@ -1,9 +1,9 @@
 import { deepMap, onMount, task } from 'nanostores'
-import type { MapMarker } from '../../types/Leaflet';
+import type { MapMarker, PlayerMarker } from '../../types/Leaflet';
 
 export const $world = deepMap({
     markers: [] as MapMarker[],
-    players: {} as MapMarker,
+    players: {} as PlayerMarker,
 })
 
 // Fetch initial data
diff --git a/src/pages/api/data/players.markers.ts b/src/pages/api/data/players.markers.ts
index 2f08882b..b9a95b27 100644
--- a/src/pages/api/data/players.markers.ts
+++ b/src/pages/api/data/players.markers.ts
@@ -6,4 +6,5 @@ export const playerPosition: PlayerMarker = {
         x: 162.05197
     },
     title: "L'Éclipse",
+    description: "Tara Belyus, Vascylly et Adol Sulvan livrent 3 condamnés à Handany."
 }
\ No newline at end of file