From 651c21b8ecb7626dbd5cb91948a74f7772133e4b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 14 Oct 2023 19:22:49 +0200
Subject: [PATCH 01/10] Added marker display when flown to marker

And also refactored some event listeners
---
 src/components/maps/WorldMap.astro            | 30 ++++++++++++++-----
 src/components/maps/overlay/SearchMarkers.vue | 19 +++++-------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 620f3f59..68a13063 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -42,6 +42,8 @@ const layerGroups = {
     landmarks: L.layerGroup(),
 };
 
+const flyToDuration = 1.2; // In seconds
+
 /**
  * Build all markers and their related info
  */
@@ -114,6 +116,16 @@ for (let i = 0; i < markers.length; i++) {
     }
 
     marker.addTo(layerGroups[m.group])
+
+    /**
+     * Display popup of marker
+     */
+    document.addEventListener(`fly-to-${m.title}`, () => {
+        map.flyTo(coords, 5, { duration: flyToDuration })
+        setTimeout(() => {
+            marker.openPopup()
+        }, flyToDuration * 1000)
+    })
 }
 
 /**
@@ -141,6 +153,16 @@ if ( players ) {
         <p>${players.description}</p>
     `;
     playerMarker.bindPopup(popupContent).openPopup();
+
+    /**
+     * Flying to players
+     */
+    document.addEventListener('fly-to-players', () => {
+        map.flyTo(playersPosition, 5, { duration: flyToDuration })
+        setTimeout(() => {
+            playerMarker.openPopup()
+        }, flyToDuration * 1000)
+    })
 }
 
 map.fitBounds(layer.getBounds());
@@ -190,14 +212,6 @@ const rulerOptions = {
 const measureControl = L.control.measure(rulerOptions);
 measureControl.addTo(map);
 
-/**
- * Flying to points of interests
- */
- document.addEventListener('fly-to', (e) => {
-    const targetCoords = e.detail
-    map.flyTo([targetCoords.y, targetCoords.x], 5)
-})
-
 /**
  * DEBUGS
  */
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 5c210204..45e25c04 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -9,7 +9,7 @@ import { computed, onMounted, ref, onUpdated } from 'vue';
 $world.listen(() => {})
 await allTasks()
 
-const { markers, players } = useStore($world).value
+const { markers } = useStore($world).value
 
 // Search functions
 const qInput = ref()
@@ -23,10 +23,10 @@ const shouldBeActive = computed(() => q.value.length > 0)
 
 const q = ref<string>("")
 
+const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g)
+
 const filteredMarkers = computed(() => {
     return markers?.filter(m => {
-        const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g)
-
         const queryString = new String(q.value).replace(unifier, "").toLocaleLowerCase()
         const hitTitle = m.title.replace(unifier, "").toLocaleLowerCase().includes(queryString)
         const hitDesc = m.description?.replace(unifier, "").toLocaleLowerCase().includes(queryString)
@@ -54,7 +54,7 @@ whenever(eraseKeyCombo, () => {
  */
 onMounted(() => {
     const playerBtnRef = document.querySelector('[data-to-players]')
-    const flyToPlayers = new CustomEvent('fly-to', { bubbles: true, detail: players.markerCoords })
+    const flyToPlayers = new CustomEvent(`fly-to-players`, { bubbles: true })
 
     playerBtnRef?.addEventListener('click', () => {
         playerBtnRef.dispatchEvent(flyToPlayers)
@@ -71,12 +71,9 @@ onUpdated(() => {
     markerBtnRefs.forEach((btn) => {
         const { toMarker } = (btn as HTMLButtonElement).dataset
         if (!toMarker) return
-        const rawCoords = toMarker?.split(',')
-        const detail = {
-            x: rawCoords[0],
-            y: rawCoords[1]
-        }
-        const flyToMarker = new CustomEvent('fly-to', { bubbles: true, detail })
+        const flyToMarker = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })
+
+        console.log(flyToMarker)
 
         btn.addEventListener('click', () => btn.dispatchEvent(flyToMarker))
     })
@@ -96,7 +93,7 @@ onUpdated(() => {
 
         <ul class="search-results" v-if="shouldBeActive">
             <li v-for="m in filteredMarkers?.slice(0, 10)" :key="m.title">
-                <button class="search-item" :data-to-marker="`${m.markerCoords.x},${m.markerCoords.y}`" tabindex="0" :title="`Aller à ${m.title}`">
+                <button class="search-item" :data-to-marker="m.title" tabindex="0" :title="`Aller à ${m.title}`">
                     <span class="title">{{ m.title }}</span>
                     <span class="desc">{{ m.description }}</span>
                 </button>

From 97573efc377cf2de6f62ccce212be251ccdc0d52 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 14 Oct 2023 22:44:10 +0200
Subject: [PATCH 02/10] Replaced localhost url with actual web url

---
 astro.config.mjs                  |  3 ++-
 src/components/maps/worldStore.ts | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 7a9cfac8..401f83d1 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -10,4 +10,5 @@ export default defineConfig({
     adapter: nodeJs({
         mode: 'standalone'
     }),
-});
\ No newline at end of file
+    site: 'https://maps.alexcreates.fr'
+});
diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
index ac4eb589..95b67c10 100644
--- a/src/components/maps/worldStore.ts
+++ b/src/components/maps/worldStore.ts
@@ -1,6 +1,16 @@
 import { deepMap, onMount, task } from 'nanostores'
 import type { MapMarker, PlayerMarker } from '../../types/Leaflet';
 
+let baseUrl: string
+
+const isDev = import.meta.env.DEV;
+
+if (isDev) {
+    baseUrl = "http://localhost:4321/"
+} else {
+    baseUrl = import.meta.env.SITE
+}
+
 export const $world = deepMap({
     markers: [] as MapMarker[],
     players: {} as PlayerMarker,
@@ -12,7 +22,7 @@ onMount($world, () => {
     task(async () => {
         let m
         try {
-            m = await fetch('http://localhost:4321/api/markers.json')
+            m = await fetch(`${baseUrl}/api/markers.json`)
 
             $world.setKey('markers', await m.json())
         } catch (err) {
@@ -23,7 +33,7 @@ onMount($world, () => {
     task(async () => {
         let p
         try {
-            p = await fetch('http://localhost:4321/api/players.json')
+            p = await fetch(`${baseUrl}/api/players.json`)
 
             $world.setKey('players', await p.json())
         } catch (err) {

From 0825d04b8f8447c8ba2448c6b97177714eebc8b9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 10:04:43 +0200
Subject: [PATCH 03/10] Test with localhost setup

---
 astro.config.mjs                  | 1 -
 src/components/maps/worldStore.ts | 6 +-----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 401f83d1..fe901fbf 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -10,5 +10,4 @@ export default defineConfig({
     adapter: nodeJs({
         mode: 'standalone'
     }),
-    site: 'https://maps.alexcreates.fr'
 });
diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
index 95b67c10..e81bb7c3 100644
--- a/src/components/maps/worldStore.ts
+++ b/src/components/maps/worldStore.ts
@@ -5,11 +5,7 @@ let baseUrl: string
 
 const isDev = import.meta.env.DEV;
 
-if (isDev) {
-    baseUrl = "http://localhost:4321/"
-} else {
-    baseUrl = import.meta.env.SITE
-}
+baseUrl = "http://localhost:4321/"
 
 export const $world = deepMap({
     markers: [] as MapMarker[],

From 8e11c4c1a52fec72a0cf32e4ce22758f99cfffda Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 10:24:36 +0200
Subject: [PATCH 04/10] Fixed trailing slash issue

---
 src/components/maps/worldStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
index e81bb7c3..abe8dc0b 100644
--- a/src/components/maps/worldStore.ts
+++ b/src/components/maps/worldStore.ts
@@ -5,7 +5,7 @@ let baseUrl: string
 
 const isDev = import.meta.env.DEV;
 
-baseUrl = "http://localhost:4321/"
+baseUrl = "http://localhost:4321"
 
 export const $world = deepMap({
     markers: [] as MapMarker[],

From b6128f55258141abb8dfe0e19eee869d2a2f8302 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 10:26:49 +0200
Subject: [PATCH 05/10] Added official URL

---
 astro.config.mjs                  | 1 +
 src/components/maps/worldStore.ts | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index fe901fbf..401f83d1 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -10,4 +10,5 @@ export default defineConfig({
     adapter: nodeJs({
         mode: 'standalone'
     }),
+    site: 'https://maps.alexcreates.fr'
 });
diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
index abe8dc0b..3c5e1d4e 100644
--- a/src/components/maps/worldStore.ts
+++ b/src/components/maps/worldStore.ts
@@ -5,7 +5,11 @@ let baseUrl: string
 
 const isDev = import.meta.env.DEV;
 
-baseUrl = "http://localhost:4321"
+if (isDev) {
+    baseUrl = "http://localhost:4321"
+} else {
+    baseUrl = import.meta.env.SITE
+}
 
 export const $world = deepMap({
     markers: [] as MapMarker[],

From 0445cad2a5e978c524ab9b53fa7fbc9d9953fadf Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 11:04:26 +0200
Subject: [PATCH 06/10] Added defer to see if it does anything on prod server

---
 src/components/maps/WorldMap.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 68a13063..4be945a9 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -11,7 +11,7 @@ const { markers, players } = $world.get()
     <div id="world"></div>
 </div>
 
-<script lang="ts" define:vars={{ markers, players }}>
+<script lang="ts" define:vars={{ markers, players }} defer>
 const mapHeight = 15168;
 const mapWidth = 14658;
 

From 42324fa6702a02b261cc8a9770d6d624903a5e9e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 11:17:31 +0200
Subject: [PATCH 07/10] Removed debug log

---
 src/components/maps/overlay/SearchMarkers.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 45e25c04..b2f91f28 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -73,8 +73,6 @@ onUpdated(() => {
         if (!toMarker) return
         const flyToMarker = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })
 
-        console.log(flyToMarker)
-
         btn.addEventListener('click', () => btn.dispatchEvent(flyToMarker))
     })
 })

From feb6753de308485d74f4463c539fcfd17937681f Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 11:27:39 +0200
Subject: [PATCH 08/10] Fixed width not being 100%

---
 src/components/maps/WorldMap.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index 4be945a9..5050dfd6 100644
--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -236,6 +236,7 @@ body {
 
     #world {
         height: 100%;
+        width: 100%;
     }
 }
 

From b6f0e88238047fc9378e4167d3e0af885054030d Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 11:41:46 +0200
Subject: [PATCH 09/10] Fixed CSS loading issue

---
 src/assets/scss/_reset.scss       | 1 -
 src/assets/scss/theme.scss        | 2 ++
 src/components/maps/worldStore.ts | 2 +-
 src/layouts/Layout.astro          | 4 ++--
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/assets/scss/_reset.scss b/src/assets/scss/_reset.scss
index 35f54b71..c7919dbc 100644
--- a/src/assets/scss/_reset.scss
+++ b/src/assets/scss/_reset.scss
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /***
     The new CSS reset - version 1.8.5 (last updated 14.6.2023)
     GitHub page: https://github.com/elad2412/the-new-css-reset
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index 9e1fe5a0..a7949554 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -1,3 +1,5 @@
+@charset "utf-8";
+
 @use 'reset';
 @use 'leaflet';
 
diff --git a/src/components/maps/worldStore.ts b/src/components/maps/worldStore.ts
index 3c5e1d4e..95b67c10 100644
--- a/src/components/maps/worldStore.ts
+++ b/src/components/maps/worldStore.ts
@@ -6,7 +6,7 @@ let baseUrl: string
 const isDev = import.meta.env.DEV;
 
 if (isDev) {
-    baseUrl = "http://localhost:4321"
+    baseUrl = "http://localhost:4321/"
 } else {
     baseUrl = import.meta.env.SITE
 }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e0b772fd..cc6e11bf 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -38,6 +38,6 @@ const { title } = Astro.props;
 	</body>
 </html>
 
-<style lang="scss">
-    @use '../assets/scss/theme.scss';
+<style lang="scss" is:global>
+    @import '../assets/scss/theme.scss';
 </style>

From 0484d39f3b803cda29cec1f39998929d200b2995 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 15 Oct 2023 11:47:09 +0200
Subject: [PATCH 10/10] Added temp description

---
 src/layouts/Layout.astro | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index cc6e11bf..4003f4db 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,7 +10,8 @@ const { title } = Astro.props;
 <html lang="fr">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
+        <meta name="author" content="Alexis Pelé" />
+		<meta name="description" content="Carte du monde connu de Léim, centrée sur l'Alliance Kaldélienne" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title} — Leim Wiki</title>