Merge branch 'dev' into main
This commit is contained in:
Alexis
@@ -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'
|
||||
}),
|
||||
});
|
||||
171
package-lock.json
generated
171
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -89,15 +89,22 @@ for (let i = 0; i < markers.length; i++) {
|
||||
}
|
||||
|
||||
const marker = L.marker(coords, { icon: markerIcon }).addTo(map);
|
||||
const popupContent = `
|
||||
<b>
|
||||
<a href="${m.link}" target="_blank">
|
||||
let popupContent = "";
|
||||
if (m.link) {
|
||||
popupContent = `
|
||||
<a href="${m.link}" target="_blank" class="title">
|
||||
${m.title}
|
||||
</a>
|
||||
</b>
|
||||
<br>
|
||||
${m.description}
|
||||
<p>${m.description}</p>
|
||||
`;
|
||||
} 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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -19,11 +19,7 @@ onMounted(() => {
|
||||
isFocused.value = true
|
||||
})
|
||||
|
||||
const shouldBeActive = computed(() => {
|
||||
if (q.value.length > 0) {
|
||||
return isFocused
|
||||
}
|
||||
})
|
||||
const shouldBeActive = computed(() => q.value.length > 0)
|
||||
|
||||
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%;
|
||||
min-width: 20rem;
|
||||
width: calc(100% - 3rem);
|
||||
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>
|
||||
@@ -1,21 +1,33 @@
|
||||
import { deepMap, onMount, task, action } from 'nanostores'
|
||||
import type { MapCoords, MapMarker } from '../../types/Leaflet';
|
||||
import { deepMap, onMount, task } from 'nanostores'
|
||||
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
|
||||
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
|
||||
try {
|
||||
p = await fetch('http://localhost:4321/api/players.json')
|
||||
|
||||
$world.setKey('players', await p.json())
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -38,6 +38,6 @@ const { title } = Astro.props;
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global lang="scss">
|
||||
@import '../assets/scss/theme.scss';
|
||||
<style lang="scss">
|
||||
@use '../assets/scss/theme.scss';
|
||||
</style>
|
||||
|
||||
@@ -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."
|
||||
}
|
||||
@@ -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} />
|
||||
<WorldMap markers={landData} players={playerCoords} />
|
||||
<WorldMapOverlay />
|
||||
<WorldMap />
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user