Added more translations
This commit is contained in:
Alexis
@@ -1,11 +1,21 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import { availableLangs, defaultLang } from './src/i18n/ui';
|
||||
|
||||
import vue from "@astrojs/vue";
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [vue(), sitemap()],
|
||||
output: 'static',
|
||||
site: 'https://maps.alexcreates.fr'
|
||||
site: 'https://maps.alexcreates.fr',
|
||||
i18n: {
|
||||
locales: availableLangs,
|
||||
defaultLocale: defaultLang,
|
||||
routing: {
|
||||
prefixDefaultLocale: true,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -22,7 +22,7 @@ const {
|
||||
<div class="world-wrapper">
|
||||
<div id="world"></div>
|
||||
|
||||
<MarkerCreator client:visible mapKey={mapKey} />
|
||||
<MarkerCreator client:only="vue" mapKey={mapKey} />
|
||||
</div>
|
||||
|
||||
<script
|
||||
|
||||
@@ -21,7 +21,9 @@ const {
|
||||
---
|
||||
|
||||
<div class="world-overlay">
|
||||
<SearchMarkers client:visible mapKey={mapKey} markers={markers} players={players} searchConfig={searchConfig} />
|
||||
<SearchMarkers client:only="vue" mapKey={mapKey} markers={markers} players={players} searchConfig={searchConfig} >
|
||||
<div slot="fallback" style="height: 45px;"></div>
|
||||
</SearchMarkers>
|
||||
|
||||
<MapOverlayBreadcrumbs breadcrumbs={breadcrumbs} />
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,8 @@ import type { MapMarker } from '@/types/Leaflet';
|
||||
import { onClickOutside, useCssVar, useLocalStorage, useMouse } from '@vueuse/core'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import { t } from '@/i18n/store';
|
||||
|
||||
const markerMenu = ref<HTMLMenuElement>()
|
||||
|
||||
type MenuMode = "editing-marker" | "default"
|
||||
@@ -194,7 +196,7 @@ function setTitleError(error: Error | null) {
|
||||
<menu v-show="shouldBeShown" ref="markerMenu">
|
||||
<li>
|
||||
<button @click="switchMenuMode('editing-marker')">
|
||||
Nouveau marqueur
|
||||
{{ t('maps.markers.new') }}
|
||||
</button>
|
||||
</li>
|
||||
</menu>
|
||||
@@ -204,18 +206,18 @@ function setTitleError(error: Error | null) {
|
||||
<form @submit.prevent="handleAddCustomMarker">
|
||||
<div class="modal-head">
|
||||
<h2>
|
||||
Ajouter un marqueur personnel
|
||||
{{ t('maps.markers.addPersonal') }}
|
||||
</h2>
|
||||
<p class="modal-notice">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><path d="M142.41,40.22l87.46,151.87C236,202.79,228.08,216,215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22C119.89,29.26,136.11,29.26,142.41,40.22Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="128" y1="144" x2="128" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><circle cx="128" cy="180" r="10"/></svg>
|
||||
<span>Le marqueur sera sauvegardé mais n'apparaîtra que sur votre carte !</span>
|
||||
<span>{{ t('maps.markers.newNotice') }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="marker-name">
|
||||
Titre
|
||||
{{ t('common.title') }}
|
||||
</label>
|
||||
|
||||
<div class="form-input">
|
||||
@@ -235,7 +237,7 @@ function setTitleError(error: Error | null) {
|
||||
class="btn btn-secondary"
|
||||
:disabled="!markerTitle"
|
||||
>
|
||||
<span>Créer</span>
|
||||
<span>{{ t('common.create') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix
|
||||
import { useStore } from '@nanostores/vue';
|
||||
|
||||
import { currentLang } from '@/i18n/store';
|
||||
import { t } from '@/i18n/store';
|
||||
|
||||
const $currentLang = useStore(currentLang);
|
||||
|
||||
@@ -30,6 +31,11 @@ onUpdated(() => {
|
||||
url = new URL(window.location.href)
|
||||
})
|
||||
|
||||
interface Menu {
|
||||
name: string,
|
||||
items: MenuItem[]
|
||||
}
|
||||
|
||||
interface MenuItem {
|
||||
name: string,
|
||||
img: string,
|
||||
@@ -37,45 +43,49 @@ interface MenuItem {
|
||||
newItem?: boolean
|
||||
}
|
||||
|
||||
const worldMenuItems: MenuItem[] = [
|
||||
const menus: Menu[] = [
|
||||
{
|
||||
name: 'Aldys',
|
||||
img: '/images/aldys-cover.png',
|
||||
url: `/${$currentLang.value}/`
|
||||
name: t('continents'),
|
||||
items: [
|
||||
{
|
||||
name: 'Aldys',
|
||||
img: '/images/aldys-cover.png',
|
||||
url: `/${$currentLang.value}/`
|
||||
},
|
||||
{
|
||||
name: 'Bamast',
|
||||
img: '/images/bamast-cover.png',
|
||||
url: `/${$currentLang.value}/bamast`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Bamast',
|
||||
img: '/images/bamast-cover.png',
|
||||
url: `/${$currentLang.value}/bamast`
|
||||
name: t('cities'),
|
||||
items: [
|
||||
{
|
||||
name: 'Borélis',
|
||||
img: '/images/aldys-borelis-cover.png',
|
||||
url: `/${$currentLang.value}/aldys/borelis`
|
||||
},
|
||||
{
|
||||
name: 'Cantane',
|
||||
img: '/images/aldys-cantane-cover.png',
|
||||
url: `/${$currentLang.value}/aldys/cantane`
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: t('others'),
|
||||
items: [
|
||||
{
|
||||
name: 'Mines Blanches',
|
||||
img: '/images/aldys-cantane-mines-blanches-cover.png',
|
||||
url: `/${$currentLang.value}/aldys/cantane/mines-blanches`,
|
||||
newItem: true
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const cityMenuItems: MenuItem[] = [
|
||||
// {
|
||||
// name: 'Ambrose',
|
||||
// img: '/images/aldys-cover.png',
|
||||
// url: '/aldys/ambrose'
|
||||
// },
|
||||
{
|
||||
name: 'Borélis',
|
||||
img: '/images/aldys-borelis-cover.png',
|
||||
url: `/${$currentLang.value}/aldys/borelis`
|
||||
},
|
||||
{
|
||||
name: 'Cantane',
|
||||
img: '/images/aldys-cantane-cover.png',
|
||||
url: `/${$currentLang.value}/aldys/cantane`
|
||||
},
|
||||
]
|
||||
|
||||
const extraMenuitems: MenuItem[] = [
|
||||
{
|
||||
name: 'Mines Blanches',
|
||||
img: '/images/aldys-cantane-mines-blanches-cover.png',
|
||||
url: `/${$currentLang.value}/aldys/cantane/mines-blanches`,
|
||||
newItem: true
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -89,95 +99,37 @@ const extraMenuitems: MenuItem[] = [
|
||||
<PopoverContent side="bottom" :side-offset="6" :collision-padding="10" class="card" style="z-index: 100;">
|
||||
<PopoverArrow class="card-arrow" />
|
||||
|
||||
<div class="menu-title">
|
||||
Continents
|
||||
</div>
|
||||
<template v-for="menu in menus">
|
||||
<div class="menu-title">
|
||||
{{ menu.name }}
|
||||
</div>
|
||||
|
||||
<menu class="map-menu">
|
||||
<li v-for="item in worldMenuItems" :key="item.name">
|
||||
<a
|
||||
:href="item.url"
|
||||
:class="{ 'active': url?.pathname === item.url }"
|
||||
:tabindex="url?.pathname === item.url ? -1 : 0"
|
||||
:title="item.newItem ? 'Nouveau' : ''"
|
||||
>
|
||||
<figure>
|
||||
<div class="img-wrapper">
|
||||
<img :src="item.img" alt="" width="40" height="40" loading="eager">
|
||||
<menu class="map-menu">
|
||||
<li v-for="item in menu.items" :key="item.name">
|
||||
<a
|
||||
:href="item.url"
|
||||
:class="{ 'active': url?.pathname === item.url }"
|
||||
:tabindex="url?.pathname === item.url ? -1 : 0"
|
||||
:title="item.newItem ? 'Nouveau' : ''"
|
||||
>
|
||||
<figure>
|
||||
<div class="img-wrapper">
|
||||
<img :src="item.img" alt="" width="40" height="40" loading="eager">
|
||||
|
||||
<svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
|
||||
<path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
|
||||
<path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
|
||||
<path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
|
||||
<path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<figcaption>
|
||||
{{ item.name }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
<div class="menu-title">
|
||||
Villes
|
||||
</div>
|
||||
|
||||
<menu class="map-menu">
|
||||
<li v-for="item in cityMenuItems" :key="item.name">
|
||||
<a
|
||||
:href="item.url"
|
||||
:class="{ 'active': url?.pathname === item.url }"
|
||||
:tabindex="url?.pathname === item.url ? -1 : 0"
|
||||
:title="item.newItem ? 'Nouveau' : ''"
|
||||
>
|
||||
<figure>
|
||||
<div class="img-wrapper">
|
||||
<img :src="item.img" alt="" width="40" height="40" loading="eager">
|
||||
|
||||
<svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
|
||||
<path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
|
||||
<path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<figcaption>
|
||||
{{ item.name }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
<div class="menu-title">
|
||||
Autres
|
||||
</div>
|
||||
|
||||
<menu class="map-menu">
|
||||
<li v-for="item in extraMenuitems" :key="item.name">
|
||||
<a
|
||||
:href="item.url"
|
||||
:class="{ 'active': url?.pathname === item.url }"
|
||||
:tabindex="url?.pathname === item.url ? -1 : 0"
|
||||
:title="item.newItem ? 'Nouveau' : ''"
|
||||
>
|
||||
<figure>
|
||||
<div class="img-wrapper">
|
||||
<img :src="item.img" alt="" width="40" height="40" loading="eager">
|
||||
|
||||
<svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
|
||||
<path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
|
||||
<path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<figcaption>
|
||||
{{ item.name }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
<figcaption>
|
||||
{{ item.name }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
</template>
|
||||
</PopoverContent>
|
||||
</PopoverRoot>
|
||||
</div>
|
||||
|
||||
@@ -7,13 +7,11 @@ import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
|
||||
import type { SearchConfig } from '@/types/Map';
|
||||
import type { SearchMode } from '@/types/Search';
|
||||
|
||||
import { currentLang } from '@/i18n/store';
|
||||
import { t } from '@/i18n/store';
|
||||
|
||||
import SearchMapSwitch from './SearchMapSwitch.vue';
|
||||
import SearchMarkersTags from './SearchMarkersTags.vue';
|
||||
|
||||
const $currentLang = useStore(currentLang);
|
||||
|
||||
const props = defineProps<{
|
||||
markers: MapMarker[],
|
||||
players: PlayerMarker,
|
||||
@@ -215,13 +213,21 @@ function resetAllFields(actionAfter?: "focusAfter") {
|
||||
<div class="input-w">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="search-icon"><rect width="256" height="256" fill="none"/><path d="M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z"/></svg>
|
||||
|
||||
<input ref="qInput" class="" name="recherche" type="text" v-model="q" title="Rechercher le monde" placeholder="Ville, point d'intérêt…">
|
||||
<input
|
||||
ref="qInput"
|
||||
class=""
|
||||
name="recherche"
|
||||
type="text"
|
||||
v-model="q"
|
||||
:title="t('maps.search')"
|
||||
:placeholder="t('maps.searchPlaceholder')"
|
||||
>
|
||||
|
||||
<button v-if="hasGroupFilter || hasQuery" @click="onCloseQuery" class="close-btn" title="Enlever le filtre">
|
||||
<button v-if="hasGroupFilter || hasQuery" @click="onCloseQuery" class="close-btn" :title="t('maps.closeSearch')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="200" y1="200" x2="56" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
|
||||
</button>
|
||||
|
||||
<button v-if="hasPlayers" data-to-players class="player-btn" :tabindex="shouldBeActive ? 1 : 0" title="Aller à la position actuelle des joueurs">
|
||||
<button v-if="hasPlayers" data-to-players class="player-btn" :tabindex="shouldBeActive ? 1 : 0" :title="t('maps.go-to-player')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -233,7 +239,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
|
||||
:class="`group-${m.group}`"
|
||||
:data-to-marker="m.title"
|
||||
tabindex="0"
|
||||
:title="m.group === 'quests' ? 'Voir la quête' : 'Visiter ce lieu'"
|
||||
:title="m.group === 'quests' ? t('maps.seeQuest') : t('maps.seePlace')"
|
||||
>
|
||||
<img v-if="m.cover && !m.coverPortrait" :src="`/images/cover/${m.cover}`" :alt="m.title" width="300" />
|
||||
|
||||
@@ -245,7 +251,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
|
||||
|
||||
<a v-if="m.mapId" :href="m.mapId" class="map-link">
|
||||
<span>
|
||||
Voir la carte détaillée
|
||||
{{ t('maps.go-to-map') }}
|
||||
</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||
</a>
|
||||
@@ -601,4 +607,22 @@ function resetAllFields(actionAfter?: "focusAfter") {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
// Animations on load
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
.toolbar {
|
||||
animation: fadeIn .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,6 +3,8 @@ import type { MapMarker, MapMarkerGroup } from '@/types/Leaflet';
|
||||
import type { SearchConfig } from '@/types/Map';
|
||||
import type { SearchMode } from '@/types/Search';
|
||||
|
||||
import { t } from '@/i18n/store';
|
||||
|
||||
defineProps<{
|
||||
currentSearchMode: SearchMode,
|
||||
customMarkers: MapMarker[],
|
||||
@@ -32,7 +34,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
|
||||
<svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M231.22,59.44l-80,168a8,8,0,1,1-14.44-6.88L165.62,160H32a8,8,0,0,1-5.88-13.43l42.56-46.1L26.59,61.9A8,8,0,0,1,32,48H224a8,8,0,0,1,7.22,11.44Z"/></svg>
|
||||
|
||||
<span class="label">
|
||||
Quêtes
|
||||
{{ t('quests') }}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -49,7 +51,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
|
||||
<svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
|
||||
|
||||
<span class="label">
|
||||
Capitales
|
||||
{{ t('capitals') }}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -66,7 +68,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
|
||||
<svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
|
||||
|
||||
<span class="label">
|
||||
Points d'intérêt
|
||||
{{ t('points-of-interest') }}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -83,7 +85,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M172,120a44,44,0,1,1-44-44A44.05,44.05,0,0,1,172,120Zm60,8A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88.09,88.09,0,0,0-91.47-87.93C77.43,41.89,39.87,81.12,40,128.25a87.65,87.65,0,0,0,22.24,58.16A79.71,79.71,0,0,1,84,165.1a4,4,0,0,1,4.83.32,59.83,59.83,0,0,0,78.28,0,4,4,0,0,1,4.83-.32,79.71,79.71,0,0,1,21.79,21.31A87.62,87.62,0,0,0,216,128Z"/></svg>
|
||||
|
||||
<span class="label">
|
||||
Personnels
|
||||
{{ t('personals') }}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type Language } from './ui';
|
||||
import { translations, type Language } from './ui';
|
||||
import { persistentAtom } from '@nanostores/persistent';
|
||||
|
||||
export const currentLang = persistentAtom<Language>('lang', "fr");
|
||||
@@ -6,3 +6,7 @@ export const currentLang = persistentAtom<Language>('lang', "fr");
|
||||
export function setLang(lang: Language) {
|
||||
currentLang.set(lang);
|
||||
}
|
||||
|
||||
export function t(key: string): string {
|
||||
return translations[currentLang.get()][key]
|
||||
}
|
||||
@@ -1,4 +1,52 @@
|
||||
export const availableLangs = ['en', 'fr'] as const;
|
||||
export type Language = typeof availableLangs[number];
|
||||
export type LanguageDict = Record<Language, any>;
|
||||
|
||||
export const defaultLang: Language = 'fr';
|
||||
export const defaultLang: Language = 'fr';
|
||||
|
||||
export const translations: LanguageDict = {
|
||||
'fr': {
|
||||
'common.title': 'Titre',
|
||||
'common.create': 'Créer',
|
||||
'continents': 'Continents',
|
||||
'cities': 'Villes',
|
||||
'others': 'Autres',
|
||||
'new': 'Nouveau',
|
||||
'quests': 'Quêtes',
|
||||
'capitals': 'Capitales',
|
||||
'points-of-interest': 'Points d\'intérêt',
|
||||
'personals': 'Personnels',
|
||||
'maps.go-to-map': 'Voir la carte détaillée',
|
||||
'maps.go-to-player': 'Aller à la position actuelle des joueurs',
|
||||
'maps.seeQuest': 'Voir la quête',
|
||||
'maps.seePlace': 'Voir sur la carte',
|
||||
'maps.search': 'Rechercher la carte',
|
||||
'maps.searchPlaceholder': "Ville, point d'intérêt…",
|
||||
'maps.closeSearch': 'Enlever le filtre',
|
||||
'maps.markers.new': 'Nouveau marqueur',
|
||||
'maps.markers.addPersonal': 'Ajouter un marqueur personnel',
|
||||
'maps.markers.newNotice': "Le marqueur sera sauvegardé mais n'apparaîtra que sur votre carte !"
|
||||
},
|
||||
'en': {
|
||||
'common.title': 'Title',
|
||||
'common.create': 'Create',
|
||||
'continents': 'Continents',
|
||||
'cities': 'Cities',
|
||||
'others': 'Others',
|
||||
'new': 'New',
|
||||
'quests': 'Quests',
|
||||
'capitals': 'Capitals',
|
||||
'points-of-interest': 'Points of interest',
|
||||
'personals': 'Personals',
|
||||
'maps.go-to-map': 'See detailed map',
|
||||
'maps.go-to-player': 'Go to current players position',
|
||||
'maps.seeQuest': 'See the quest',
|
||||
'maps.seePlace': 'See on the map',
|
||||
'maps.search': 'Search the map',
|
||||
'maps.searchPlaceholder': "City, point of interest…",
|
||||
'maps.closeSearch': 'Remove filter',
|
||||
'maps.markers.new': 'New marker',
|
||||
'maps.markers.addPersonal': 'Add a personal marker',
|
||||
'maps.markers.newNotice': "The marker will be saved but will only appear on your map!"
|
||||
}
|
||||
} as const;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defaultLang, availableLangs, type Language } from './ui';
|
||||
import { defaultLang, availableLangs, type Language, type LanguageDict } from './ui';
|
||||
|
||||
export function getLangFromUrl(url: URL): Language {
|
||||
const [, lang] = url.pathname.split('/');
|
||||
|
||||
Reference in New Issue
Block a user