Merge branch 'dev' into main

astro.config.mjs

@@ -10,4 +10,5 @@ export default defineConfig({
     adapter: nodeJs({
         mode: 'standalone'
     }),
+    site: 'https://maps.alexcreates.fr'
 });

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

src/assets/scss/theme.scss

@@ -1,3 +1,5 @@
+@charset "utf-8";
+
 @use 'reset';
 @use 'leaflet';
 

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;
 
@@ -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
  */
@@ -222,6 +236,7 @@ body {
 
     #world {
         height: 100%;
+        width: 100%;
     }
 }
 

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,7 @@ 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 })
 
         btn.addEventListener('click', () => btn.dispatchEvent(flyToMarker))
     })
@@ -96,7 +91,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>

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) {

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>
@@ -38,6 +39,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>