Merge branch 'dev' into main

astro.config.mjs

@@ -1,8 +1,13 @@
 import { defineConfig } from 'astro/config';
+import nodeJs from '@astrojs/node';
 
 import vue from "@astrojs/vue";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [vue()]
+    integrations: [vue()],
+    output: 'server',
+    adapter: nodeJs({
+        mode: 'standalone'
+    }),
 });

package-lock.json

@@ -8,6 +8,7 @@
       "name": "leim-maps",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/node": "^6.0.3",
         "@astrojs/vue": "^3.0.1",
         "@nanostores/vue": "^0.10.0",
         "@types/leaflet": "^1.9.6",
@@ -66,6 +67,18 @@
         "astro": "^3.2.3"
       }
     },
+    "node_modules/@astrojs/node": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-6.0.3.tgz",
+      "integrity": "sha512-3isB8ETX3WabAh8pY1HMnbt4e8HV9noVP4X52SlF+GycIt7YOXsUSzditjROZkrZOSfWhzsTaHh7EqbdVXqzrw==",
+      "dependencies": {
+        "send": "^0.18.0",
+        "server-destroy": "^1.0.1"
+      },
+      "peerDependencies": {
+        "astro": "^3.2.3"
+      }
+    },
     "node_modules/@astrojs/prism": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-3.0.0.tgz",
@@ -2045,6 +2058,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2053,6 +2074,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
@@ -2093,6 +2123,11 @@
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.537",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.537.tgz",
@@ -2103,6 +2138,14 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz",
       "integrity": "sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA=="
     },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -2161,6 +2204,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -2189,6 +2237,14 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -2300,6 +2356,14 @@
         "pkg-dir": "^4.2.0"
       }
     },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -2587,6 +2651,21 @@
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
       "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/human-signals": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@@ -4182,6 +4261,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4651,6 +4741,14 @@
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
       "optional": true
     },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -5106,11 +5204,68 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/send/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
     "node_modules/server-destroy": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
       "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
     },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
     "node_modules/sharp": {
       "version": "0.32.6",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
@@ -5256,6 +5411,14 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/stdin-discarder": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
@@ -5456,6 +5619,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/node": "^6.0.3",
     "@astrojs/vue": "^3.0.1",
     "@nanostores/vue": "^0.10.0",
     "@types/leaflet": "^1.9.6",

src/assets/scss/_leaflet.scss

@@ -8,6 +8,37 @@
     background: #f1f5f9;
 
     .leaflet-map-pane {
+        .leaflet-popup-pane {
+            .leaflet-popup-content-wrapper {
+                border-radius: .25rem;
+
+                .leaflet-popup-content {
+                    .title {
+                        display: block;
+                        font-weight: 600;
+                    }
+
+                    strong.title {
+                        color: #16a34a;
+                    }
+
+                    a.title {
+                        text-underline-offset: 2px;
+                        text-decoration: underline;
+
+                        &:hover {
+                            text-decoration: none;
+                            color: #16a34a;
+                        }
+                    }
+
+                    > * + * {
+                        margin: 0;
+                        margin-top: .4em;
+                    }
+                }
+            }
+        }
         .leaflet-tooltip-pane {
             .leaflet-tooltip {
                 &.capital-name {
@@ -30,7 +61,3 @@
         }
     }
 }
-
-.leaflet-popup-content-wrapper {
-    border-radius: .25rem;
-}

src/assets/scss/theme.scss

@@ -20,3 +20,16 @@ html {
     color: var(--slate-900);
 }
 
+a[href^='http'] {
+    padding-right: 1.25em;
+}
+
+a[href^='http']::after {
+    position: absolute;
+    content: "\e972";
+    font-family: 'Phosphor-Fill' !important;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-left: .25em;
+}

src/components/maps/WorldMap.astro

@@ -89,15 +89,22 @@ for (let i = 0; i < markers.length; i++) {
     }
 
     const marker = L.marker(coords, { icon: markerIcon }).addTo(map);
-    const popupContent = `
+    let popupContent = "";
-        <b>
+    if (m.link) {
-            <a href="${m.link}" target="_blank">
+        popupContent = `
+            <a href="${m.link}" target="_blank" class="title">
                 ${m.title}
             </a>
-        </b>
+            <p>${m.description}</p>
-        <br>
+        `;
-        ${m.description}
+    } else {
-    `;
+        popupContent = `
+            <strong class="title">
+                ${m.title}
+            </strong>
+            <p>${m.description}</p>
+        `;
+    }
     marker.bindPopup(popupContent).openPopup();
 
     const displayTooltip = m.group === 'capitals';
@@ -126,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());
@@ -204,6 +219,10 @@ body {
 .world-wrapper {
     position: fixed;
     inset: 0;
+
+    #world {
+        height: 100%;
+    }
 }
 
 .leaflet-container {

src/components/maps/WorldMapOverlay.astro

@@ -1,16 +1,9 @@
 ---
-import { allTasks } from 'nanostores';
-import { $world } from './worldStore';
-
 import SearchMarkers from "./overlay/SearchMarkers.vue";
-
-$world.listen(() => {})
-await allTasks()
-const { markers, players } = $world.get()
 ---
 
 <div class="world-overlay">
-    <SearchMarkers markers={markers} players={players} client:visible />
+    <SearchMarkers client:load />
 </div>
 
 <script>

src/components/maps/overlay/SearchMarkers.vue

@@ -19,11 +19,7 @@ onMounted(() => {
     isFocused.value = true
 })
 
-const shouldBeActive = computed(() => {
+const shouldBeActive = computed(() => q.value.length > 0)
-    if (q.value.length > 0) {
-        return isFocused
-    }
-})
 
 const q = ref<string>("")
 
@@ -49,6 +45,7 @@ whenever(shortcutKeyCombo, () => {
 })
 whenever(eraseKeyCombo, () => {
     q.value = ""
+    isFocused.value = true
 })
 
 /**
@@ -90,16 +87,16 @@ onUpdated(() => {
     <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
         <div class="input-w">
             <i class="search-icon ph-fill ph-magnifying-glass"></i>
-            <input ref="qInput" type="text" v-model="q">
+            <input ref="qInput" name="recherche" type="text" v-model="q" title="Rechercher le monde" placeholder="Ville, point d'intérêt…">
 
-            <button data-to-players class="player-btn" tabindex="1">
+            <button data-to-players class="player-btn" :tabindex="shouldBeActive ? 1 : 0" title="Aller à la position actuelle des joueurs">
                 <i class="pin-icon ph-fill ph-map-pin"></i>
             </button>
         </div>
 
         <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">
+                <button class="search-item" :data-to-marker="`${m.markerCoords.x},${m.markerCoords.y}`" tabindex="0" :title="`Aller à ${m.title}`">
                     <span class="title">{{ m.title }}</span>
                     <span class="desc">{{ m.description }}</span>
                 </button>
@@ -112,11 +109,11 @@ onUpdated(() => {
 .search-w {
     margin-bottom: 1em;
     padding: .5rem 1.2rem;
-    width: 25%;
+    width: calc(100% - 3rem);
-    min-width: 20rem;
     background: #fff;
     border: 1px solid var(--slate-400);
     border-radius: 25px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     pointer-events: all;
 
     .input-w {
@@ -134,6 +131,10 @@ onUpdated(() => {
             min-width: 10rem;
             padding-inline-start: calc($search-icon-size + $search-items-gap);
             flex-grow: 1;
+
+            &::placeholder {
+                color: var(--slate-400);
+            }
         }
 
         .search-icon {
@@ -147,12 +148,42 @@ onUpdated(() => {
         }
 
         .player-btn {
+            position: relative;
+            isolation: isolate;
             aspect-ratio: 1 / 1;
             line-height: 1;
             font-size: 1.5em;
             color: #dc2626;
             border-radius: 50%;
             cursor: pointer;
+
+            &::before {
+                display: block;
+                content: '';
+                position: absolute;
+                inset: -.4rem;
+                background-color: transparent;
+                border-radius: 50%;
+                z-index: -1;
+                outline-offset: -.2rem;
+                transition-property: background-color;
+                transition-duration: .2s;
+                transition-timing-function: ease-in-out;
+            }
+
+            &:hover {
+                &::before {
+                    background-color: var(--slate-300);
+                }
+            }
+
+            &:focus-visible {
+                &::before {
+                    background-color: var(--slate-200);
+                    outline: 1px dotted var(--slate-500);
+                    outline: 4px auto var(--slate-900);
+                }
+            }
         }
     }
 
@@ -228,4 +259,10 @@ onUpdated(() => {
         }
     }
 }
+
+@media screen and (width >= 900px) {
+    .search-w {
+        width: 29%;
+    }
+}
 </style>

src/components/maps/worldStore.ts

@@ -1,21 +1,33 @@
-import { deepMap, onMount, task, action } from 'nanostores'
+import { deepMap, onMount, task } from 'nanostores'
-import type { MapCoords, 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
 onMount($world, () => {
     // Fetch all markers
     task(async () => {
-        const m = await fetch('http://localhost:4321/api/markers.json')
+        let m
-        $world.setKey('markers', await m.json())
+        try {
+            m = await fetch('http://localhost:4321/api/markers.json')
+
+            $world.setKey('markers', await m.json())
+        } catch (err) {
+            console.log(err)
+        }
     })
     // Fetch all player data
     task(async () => {
-        const p = await fetch('http://localhost:4321/api/players.json')
+        let p
-        $world.setKey('players', await p.json())
+        try {
+            p = await fetch('http://localhost:4321/api/players.json')
+
+            $world.setKey('players', await p.json())
+        } catch (err) {
+            console.log(err)
+        }
     })
 })

src/layouts/Layout.astro

@@ -38,6 +38,6 @@ const { title } = Astro.props;
 	</body>
 </html>
 
-<style is:global lang="scss">
+<style lang="scss">
-    @import '../assets/scss/theme.scss';
+    @use '../assets/scss/theme.scss';
 </style>

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."
 }

src/pages/index.astro

@@ -2,14 +2,9 @@
 import Layout from '../layouts/Layout.astro';
 import WorldMap from '../components/maps/WorldMap.astro'
 import WorldMapOverlay from '../components/maps/WorldMapOverlay.astro'
-
-const fetchLandMarkers = await fetch('http://localhost:4321/api/markers.json');
-const fetchPlayersPosition = await fetch('http://localhost:4321/api/players.json');
-const landData = await fetchLandMarkers.json();
-const playerCoords = await fetchPlayersPosition.json();
 ---
 
 <Layout title="Cartographie">
-    <WorldMapOverlay markers={landData} players={playerCoords} />
+    <WorldMapOverlay />
-    <WorldMap markers={landData} players={playerCoords} />
+    <WorldMap />
 </Layout>