Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 cyber-mawonaj
|
e4d9920ac9 | ||
|
cyber-mawonaj
|
2c0d5ea229 | ||
|
cyber-mawonaj
|
6a041a938e | ||
 sucupira
|
9b867243fd | ||
|
sucupira
|
67142428ac |
@@ -1,2 +1,9 @@
|
|||||||
# Paquet YunoHost (dépôt séparé : ORGANISATION-KA-INTERNATIONALE/jwe_ynh)
|
# Paquet YunoHost (dépôt séparé : ORGANISATION-KA-INTERNATIONALE/jwe_ynh)
|
||||||
jwe_ynh/
|
jwe_ynh/
|
||||||
|
|
||||||
|
# Règles et playbooks internes (non versionnés)
|
||||||
|
rules/
|
||||||
|
|
||||||
|
# Artefacts de debug Kimi CLI
|
||||||
|
kimi-debug-session*.zip
|
||||||
|
|
||||||
|
|||||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "jwe",
|
"name": "jwe",
|
||||||
"version": "2.0.1",
|
"version": "2.0.2",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "jwe",
|
"name": "jwe",
|
||||||
"version": "2.0.1",
|
"version": "2.0.2",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"mapillary-js": "^4.1.2",
|
"mapillary-js": "^4.1.2",
|
||||||
"maplibre-gl": "^5.1.0",
|
"maplibre-gl": "^5.1.0",
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "jwe",
|
"name": "jwe",
|
||||||
"version": "2.0.1",
|
"version": "2.2.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
+17
-1
@@ -3,7 +3,23 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||||
<meta name="theme-color" content="#0b3d2e" />
|
<meta name="theme-color" content="#0D0D0D" />
|
||||||
|
<script>
|
||||||
|
// Initialisation immédiate du thème et du gate JS sans FOUC
|
||||||
|
try {
|
||||||
|
document.documentElement.classList.add('js');
|
||||||
|
const theme = localStorage.getItem('jwe_theme');
|
||||||
|
if (theme === 'light') {
|
||||||
|
document.documentElement.classList.add('light-theme');
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
</script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||||
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
|
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
|
|||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import type { Handle } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* CSP — domaines justifiés :
|
||||||
|
* - tiles.openfreemap.org : style MapLibre (tuiles vectorielles + raster
|
||||||
|
* natural_earth, sprites, glyphs — cf. src/lib/map/style-oki.json) ;
|
||||||
|
* - upload.wikimedia.org : vignettes des fiches Wikipédia (wiki.thumbnail,
|
||||||
|
* affichée en <img>) et photos Commons (service worker, Special:FilePath) ;
|
||||||
|
* - commons.wikimedia.org : variantes Special:FilePath (service worker) ;
|
||||||
|
* - graph.mapillary.com : API Mapillary (mapillary-js, seul domaine en dur
|
||||||
|
* dans la lib) ; tiles.mapillary.com : tuiles vectorielles de couverture ;
|
||||||
|
* images.mapillary.com : CDN des photos 360° (fetch ArrayBuffer → blob:) ;
|
||||||
|
* - www.wikidata.org / fr.wikipedia.org : appelées côté serveur uniquement
|
||||||
|
* (proxy /api/wiki), listées ici par précaution si un appel direct apparaît ;
|
||||||
|
* - 'unsafe-inline' sur script-src : script inline de app.html (gate motion)
|
||||||
|
* + payload d'hydratation injecté par SvelteKit adapter-node ;
|
||||||
|
* - worker-src blob: : workers WebGL de MapLibre chargés en blob.
|
||||||
|
*/
|
||||||
|
const CSP = [
|
||||||
|
"default-src 'self'",
|
||||||
|
"script-src 'self' 'unsafe-inline'",
|
||||||
|
"style-src 'self' 'unsafe-inline'",
|
||||||
|
"img-src 'self' data: blob: https://upload.wikimedia.org https://commons.wikimedia.org https://tiles.openfreemap.org",
|
||||||
|
"font-src 'self' data: https://tiles.openfreemap.org",
|
||||||
|
"connect-src 'self' https://tiles.openfreemap.org https://graph.mapillary.com https://tiles.mapillary.com https://images.mapillary.com https://www.wikidata.org https://fr.wikipedia.org https://upload.wikimedia.org https://commons.wikimedia.org",
|
||||||
|
"worker-src 'self' blob:",
|
||||||
|
"frame-ancestors 'none'",
|
||||||
|
"base-uri 'self'",
|
||||||
|
"form-action 'self'",
|
||||||
|
"object-src 'none'"
|
||||||
|
].join('; ');
|
||||||
|
|
||||||
|
// Le jeu n'utilise ni caméra, ni micro, ni géolocalisation (la position est
|
||||||
|
// devinée au clic sur la carte) — Permissions-Policy les coupe explicitement.
|
||||||
|
export const handle: Handle = async ({ event, resolve }) => {
|
||||||
|
const response = await resolve(event);
|
||||||
|
response.headers.set('Content-Security-Policy', CSP);
|
||||||
|
response.headers.set('X-Content-Type-Options', 'nosniff');
|
||||||
|
response.headers.set('X-Frame-Options', 'DENY');
|
||||||
|
response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
|
||||||
|
response.headers.set('Permissions-Policy', 'geolocation=(), microphone=(), camera=()');
|
||||||
|
return response;
|
||||||
|
};
|
||||||
@@ -125,6 +125,8 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { t } from '$lib/i18n/store.svelte';
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
import { reveal } from '$lib/motion/reveal';
|
||||||
|
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
/** Région sélectionnée (liaison bidirectionnelle) — ignorée si `selectionnable` est faux. */
|
/** Région sélectionnée (liaison bidirectionnelle) — ignorée si `selectionnable` est faux. */
|
||||||
@@ -133,13 +135,19 @@
|
|||||||
selectionnable?: boolean;
|
selectionnable?: boolean;
|
||||||
marqueurs?: MarqueurCarte[];
|
marqueurs?: MarqueurCarte[];
|
||||||
attribution?: string;
|
attribution?: string;
|
||||||
|
/**
|
||||||
|
* Base d'index de la cascade syncopée d'entrée des 4 insets (accueil :
|
||||||
|
* 5, après les 5 cartes de mode). null (défaut) = pas de cascade.
|
||||||
|
*/
|
||||||
|
cascadeBase?: number | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
selection = $bindable<SelectionCarte>(null),
|
selection = $bindable<SelectionCarte>(null),
|
||||||
selectionnable = true,
|
selectionnable = true,
|
||||||
marqueurs = [],
|
marqueurs = [],
|
||||||
attribution = '© contributeurs OpenStreetMap / données publiques'
|
attribution = '© contributeurs OpenStreetMap / données publiques',
|
||||||
|
cascadeBase = null
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
let survol = $state<Region | null>(null);
|
let survol = $state<Region | null>(null);
|
||||||
@@ -185,12 +193,23 @@
|
|||||||
aria-hidden={selectionnable ? 'true' : undefined}
|
aria-hidden={selectionnable ? 'true' : undefined}
|
||||||
aria-label={selectionnable ? undefined : t().carte.carteRegionsLabel}
|
aria-label={selectionnable ? undefined : t().carte.carteRegionsLabel}
|
||||||
>
|
>
|
||||||
{#each INSETS as ins (ins.region)}
|
{#each INSETS as ins, i (ins.region)}
|
||||||
<g
|
<g
|
||||||
class="region"
|
class="region"
|
||||||
class:survolee={selectionnable && survol === ins.region}
|
class:survolee={selectionnable && survol === ins.region}
|
||||||
class:choisie={selectionnable && selection === ins.region}
|
class:choisie={selectionnable && selection === ins.region}
|
||||||
|
data-reveal={cascadeBase === null ? undefined : ''}
|
||||||
|
style:--d={cascadeBase === null ? undefined : `${syncopatedDelay(cascadeBase + i)}ms`}
|
||||||
|
use:reveal={cascadeBase !== null}
|
||||||
>
|
>
|
||||||
|
<rect
|
||||||
|
class="fond-cellule"
|
||||||
|
x={ins.colonne * CELLULE_L + 6}
|
||||||
|
y={ins.rang * CELLULE_H + 6}
|
||||||
|
width={CELLULE_L - 12}
|
||||||
|
height={CELLULE_H - 12}
|
||||||
|
rx="12"
|
||||||
|
/>
|
||||||
{#each ins.chemins as d (d)}
|
{#each ins.chemins as d (d)}
|
||||||
<path {d} />
|
<path {d} />
|
||||||
{/each}
|
{/each}
|
||||||
@@ -256,59 +275,134 @@
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* — Régions : tokens OKI, aucun bleu « Google » — */
|
/* — Fonds de cellules des 4 insets régionaux — */
|
||||||
|
.fond-cellule {
|
||||||
|
fill: #1a131c;
|
||||||
|
stroke: #2e2233;
|
||||||
|
stroke-width: 1.5;
|
||||||
|
transition:
|
||||||
|
fill var(--dur-tanbou) var(--ease-ka),
|
||||||
|
stroke var(--dur-tanbou) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .fond-cellule {
|
||||||
|
fill: #f4ead4;
|
||||||
|
stroke: #ded0b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Régions : Formes territoriales nettes et contrastées — */
|
||||||
.region path {
|
.region path {
|
||||||
fill: var(--oki-vert-doux);
|
fill: #22382d;
|
||||||
stroke: var(--oki-vert-clair);
|
stroke: #00d66c;
|
||||||
stroke-width: 0.9;
|
stroke-width: 1.2;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
transition:
|
||||||
|
fill var(--dur-tanbou) var(--ease-ka),
|
||||||
|
stroke var(--dur-tanbou) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .region path {
|
||||||
|
fill: #d3e8dc;
|
||||||
|
stroke: #006b3d;
|
||||||
|
stroke-width: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Survol */
|
||||||
|
.region.survolee .fond-cellule {
|
||||||
|
fill: #261a2b;
|
||||||
|
stroke: var(--or-oki);
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .region.survolee .fond-cellule {
|
||||||
|
fill: #ebdcbD;
|
||||||
|
stroke: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.region.survolee path {
|
.region.survolee path {
|
||||||
fill: var(--oki-bleu-doux);
|
fill: #2f4d3e;
|
||||||
stroke: var(--oki-bleu);
|
stroke: var(--or-oki);
|
||||||
|
stroke-width: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .region.survolee path {
|
||||||
|
fill: #c3dfcd;
|
||||||
|
stroke: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sélection */
|
||||||
|
.region.choisie .fond-cellule {
|
||||||
|
fill: rgba(253, 184, 19, 0.12);
|
||||||
|
stroke: var(--or-oki);
|
||||||
|
stroke-width: 2.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .region.choisie .fond-cellule {
|
||||||
|
fill: #fff2d1;
|
||||||
|
stroke: var(--or-oki);
|
||||||
|
stroke-width: 2.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.region.choisie path {
|
.region.choisie path {
|
||||||
fill: var(--oki-vert-clair);
|
fill: #4b3a13;
|
||||||
stroke: var(--oki-vert-doux);
|
stroke: var(--or-oki);
|
||||||
|
stroke-width: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .region.choisie path {
|
||||||
|
fill: #fde2a2;
|
||||||
|
stroke: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nom-region {
|
.nom-region {
|
||||||
fill: var(--oki-vert);
|
fill: var(--blanc-creme);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
|
font-family: var(--font-display);
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
transition: fill var(--dur-tanbou) var(--ease-ka);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .nom-region {
|
||||||
|
fill: #0d0d0d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nom-region.choisie {
|
.nom-region.choisie {
|
||||||
text-decoration: underline;
|
fill: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* — Marqueurs du récap (guess = corail, réel = vert, comme la légende du bilan) — */
|
:global(html.light-theme) .nom-region.choisie {
|
||||||
|
fill: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Marqueurs du récap (guess = rouge OKI, réel = vert OKI) — */
|
||||||
.lien-paire {
|
.lien-paire {
|
||||||
stroke: var(--oki-encre-doux);
|
stroke: var(--muted);
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
stroke-dasharray: 6 4;
|
stroke-dasharray: 6 4;
|
||||||
fill: none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marqueur circle {
|
.marqueur circle {
|
||||||
stroke: var(--oki-blanc);
|
stroke: var(--noir-profond);
|
||||||
stroke-width: 2;
|
stroke-width: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marqueur.guess circle {
|
.marqueur.guess circle {
|
||||||
fill: var(--oki-corail);
|
fill: var(--rouge-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.marqueur.reel circle {
|
.marqueur.reel circle {
|
||||||
fill: var(--oki-vert);
|
fill: var(--vert-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.marqueur text {
|
.marqueur text {
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
font-family: var(--font-display);
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -321,7 +415,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-radius: var(--oki-radius);
|
border-radius: var(--radius-md);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,465 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import { t, setLang, getLang } from '$lib/i18n/store.svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
ouvert: boolean;
|
||||||
|
onfermer: () => void;
|
||||||
|
onouvrirStats?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { ouvert, onfermer, onouvrirStats }: Props = $props();
|
||||||
|
|
||||||
|
let requete = $state('');
|
||||||
|
let indexSelection = $state(0);
|
||||||
|
let champInput = $state<HTMLInputElement | null>(null);
|
||||||
|
|
||||||
|
interface ActionItem {
|
||||||
|
id: string;
|
||||||
|
categorie: string;
|
||||||
|
titre: string;
|
||||||
|
description: string;
|
||||||
|
badge?: string;
|
||||||
|
executer: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = $derived.by<ActionItem[]>(() => {
|
||||||
|
const items: ActionItem[] = [
|
||||||
|
// Modes de jeu
|
||||||
|
{
|
||||||
|
id: 'mode-monument',
|
||||||
|
categorie: t().commandBar.catModes,
|
||||||
|
titre: `🏛️ ${t().modes.monument}`,
|
||||||
|
description: t().modes.monumentDesc,
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/monument');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'mode-lieu',
|
||||||
|
categorie: t().commandBar.catModes,
|
||||||
|
titre: `📍 ${t().modes.lieu}`,
|
||||||
|
description: t().modes.lieuDesc,
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/lieu');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'mode-defi',
|
||||||
|
categorie: t().commandBar.catModes,
|
||||||
|
titre: `⛰️ ${t().modes.defi}`,
|
||||||
|
description: t().modes.defiDesc,
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/defi');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'mode-street',
|
||||||
|
categorie: t().commandBar.catModes,
|
||||||
|
titre: `🛣️ ${t().modes.street}`,
|
||||||
|
description: t().modes.streetDesc,
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/street');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'mode-explorer',
|
||||||
|
categorie: t().commandBar.catModes,
|
||||||
|
titre: `🗺️ ${t().modes.explorer}`,
|
||||||
|
description: t().modes.explorerDesc,
|
||||||
|
executer: () => {
|
||||||
|
goto('/explorer');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Régions
|
||||||
|
{
|
||||||
|
id: 'region-gwada',
|
||||||
|
categorie: t().commandBar.catRegions,
|
||||||
|
titre: `🇬🇵 ${t().regions.GUADELOUPE}`,
|
||||||
|
description: 'Lancer une partie ciblée en Guadeloupe',
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/monument?region=GUADELOUPE');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'region-madinina',
|
||||||
|
categorie: t().commandBar.catRegions,
|
||||||
|
titre: `🇲🇶 ${t().regions.MARTINIQUE}`,
|
||||||
|
description: 'Lancer une partie ciblée en Martinique',
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/monument?region=MARTINIQUE');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'region-guyane',
|
||||||
|
categorie: t().commandBar.catRegions,
|
||||||
|
titre: `🇬🇫 ${t().regions.GUYANE}`,
|
||||||
|
description: 'Lancer une partie ciblée en Guyane',
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/monument?region=GUYANE');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'region-reunion',
|
||||||
|
categorie: t().commandBar.catRegions,
|
||||||
|
titre: `🇷🇪 ${t().regions.REUNION}`,
|
||||||
|
description: 'Lancer une partie ciblée à La Réunion',
|
||||||
|
executer: () => {
|
||||||
|
goto('/jeu/monument?region=REUNION');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Actions rapides / Système
|
||||||
|
{
|
||||||
|
id: 'act-stats',
|
||||||
|
categorie: t().commandBar.catActions,
|
||||||
|
titre: `📊 ${t().commandBar.mesStats}`,
|
||||||
|
description: 'Consulter l’historique local et les scores',
|
||||||
|
executer: () => {
|
||||||
|
onfermer();
|
||||||
|
onouvrirStats?.();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'act-theme',
|
||||||
|
categorie: t().commandBar.catActions,
|
||||||
|
titre: `🌓 ${t().commandBar.basculerTheme}`,
|
||||||
|
description: 'Basculer entre thème sombre et thème clair (WCAG AA)',
|
||||||
|
executer: () => {
|
||||||
|
const isLight = document.documentElement.classList.contains('light-theme');
|
||||||
|
if (isLight) {
|
||||||
|
document.documentElement.classList.remove('light-theme');
|
||||||
|
localStorage.setItem('jwe_theme', 'dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.add('light-theme');
|
||||||
|
localStorage.setItem('jwe_theme', 'light');
|
||||||
|
}
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'act-lang',
|
||||||
|
categorie: t().commandBar.catActions,
|
||||||
|
titre: `🗣️ ${t().commandBar.basculerLangue}`,
|
||||||
|
description: getLang() === 'fr' ? 'Chanje lang pou Kréyòl' : 'Passer la langue en Français',
|
||||||
|
badge: getLang() === 'fr' ? 'FR → GCF' : 'GCF → FR',
|
||||||
|
executer: () => {
|
||||||
|
setLang(getLang() === 'fr' ? 'gcf' : 'fr');
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const q = requete.trim().toLowerCase();
|
||||||
|
if (!q) return items;
|
||||||
|
|
||||||
|
return items.filter(
|
||||||
|
(it) =>
|
||||||
|
it.titre.toLowerCase().includes(q) ||
|
||||||
|
it.description.toLowerCase().includes(q) ||
|
||||||
|
it.categorie.toLowerCase().includes(q)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (ouvert) {
|
||||||
|
requete = '';
|
||||||
|
indexSelection = 0;
|
||||||
|
setTimeout(() => {
|
||||||
|
champInput?.focus();
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function onKeydown(e: KeyboardEvent): void {
|
||||||
|
if (!ouvert) return;
|
||||||
|
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
onfermer();
|
||||||
|
} else if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
indexSelection = (indexSelection + 1) % Math.max(1, actions.length);
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
indexSelection = (indexSelection - 1 + actions.length) % Math.max(1, actions.length);
|
||||||
|
} else if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
if (actions[indexSelection]) {
|
||||||
|
actions[indexSelection].executer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBackdropClick(e: MouseEvent): void {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window onkeydown={onKeydown} />
|
||||||
|
|
||||||
|
{#if ouvert}
|
||||||
|
<div
|
||||||
|
class="overlay"
|
||||||
|
onclick={handleBackdropClick}
|
||||||
|
role="presentation"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="command-bar"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label={t().commandBar.titre}
|
||||||
|
>
|
||||||
|
<div class="champ-recherche">
|
||||||
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icone-loupe" aria-hidden="true">
|
||||||
|
<circle cx="11" cy="11" r="8" />
|
||||||
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
bind:this={champInput}
|
||||||
|
type="text"
|
||||||
|
bind:value={requete}
|
||||||
|
placeholder={t().commandBar.placeholder}
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-controls="liste-actions"
|
||||||
|
/>
|
||||||
|
<button type="button" class="touche-esc" onclick={onfermer} aria-label={t().stats.fermer}>
|
||||||
|
ESC
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="liste-actions" id="liste-actions" role="listbox">
|
||||||
|
{#if actions.length === 0}
|
||||||
|
<div class="aucun-resultat">{t().commandBar.aucunResultat} « {requete} »</div>
|
||||||
|
{:else}
|
||||||
|
{#each actions as action, i (action.id)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="item-action"
|
||||||
|
class:selectionne={i === indexSelection}
|
||||||
|
role="option"
|
||||||
|
aria-selected={i === indexSelection}
|
||||||
|
onmouseenter={() => (indexSelection = i)}
|
||||||
|
onclick={action.executer}
|
||||||
|
>
|
||||||
|
<div class="action-corps">
|
||||||
|
<span class="action-titre">{action.titre}</span>
|
||||||
|
<span class="action-desc">{action.description}</span>
|
||||||
|
</div>
|
||||||
|
{#if action.badge}
|
||||||
|
<span class="action-badge">{action.badge}</span>
|
||||||
|
{:else}
|
||||||
|
<span class="action-cat">{action.categorie}</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bar-footer">
|
||||||
|
<span><kbd>↑</kbd> <kbd>↓</kbd> pour naviguer</span>
|
||||||
|
<span><kbd>↵</kbd> pour exécuter</span>
|
||||||
|
<span><kbd>ESC</kbd> pour quitter</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 120;
|
||||||
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3.5rem 1rem 1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-bar {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
background: var(--noir-profond);
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
animation: cb-pop var(--dur-mesure) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cb-pop {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.96) translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.champ-recherche {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
padding: 0.9rem 1.1rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icone-loupe {
|
||||||
|
color: var(--or-oki);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.champ-recherche input {
|
||||||
|
flex: 1;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.champ-recherche input::placeholder {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.touche-esc {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--muted);
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.touche-esc:hover {
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liste-actions {
|
||||||
|
max-height: 52dvh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aucun-resultat {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-action {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.8rem;
|
||||||
|
padding: 0.65rem 0.85rem;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
transition: background-color var(--dur-tanbou) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-action.selectionne {
|
||||||
|
background: var(--card-bg-hover);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-corps {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.15rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-titre {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-action.selectionne .action-titre {
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-desc {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-cat,
|
||||||
|
.action-badge {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-cat {
|
||||||
|
background: var(--card-bg);
|
||||||
|
color: var(--muted);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-badge {
|
||||||
|
background: rgba(253, 184, 19, 0.12);
|
||||||
|
color: var(--or-oki);
|
||||||
|
border: 1px solid var(--or-oki);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.6rem 1.1rem;
|
||||||
|
background: var(--noir-oki);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0.1rem 0.35rem;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
/** Hauteur en px (par défaut 6px) */
|
||||||
|
hauteur?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { hauteur = 6 }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flag-bar" style:height="{hauteur}px" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.flag-bar {
|
||||||
|
width: 100%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#0d0d0d 0 25%,
|
||||||
|
var(--or-oki) 25% 50%,
|
||||||
|
var(--vert-oki) 50% 75%,
|
||||||
|
var(--rouge-oki) 75% 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .flag-bar {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#000000 0 25%,
|
||||||
|
var(--or-oki) 25% 50%,
|
||||||
|
var(--vert-oki) 50% 75%,
|
||||||
|
var(--rouge-oki) 75% 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -4,6 +4,7 @@
|
|||||||
import { t } from '$lib/i18n/store.svelte';
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
import { MAX_BOUNDS, MIN_ZOOM, REGION_BOUNDS, REGIONS } from '$lib/map/regions';
|
import { MAX_BOUNDS, MIN_ZOOM, REGION_BOUNDS, REGIONS } from '$lib/map/regions';
|
||||||
import styleOki from '$lib/map/style-oki.json';
|
import styleOki from '$lib/map/style-oki.json';
|
||||||
|
import { dureeMs, easeKa, syncopatedDelay } from '$lib/motion/tokens';
|
||||||
import type { Coordonnees, Region } from '$lib/types';
|
import type { Coordonnees, Region } from '$lib/types';
|
||||||
import type { Map as MLMap, Marker, StyleSpecification } from 'maplibre-gl';
|
import type { Map as MLMap, Marker, StyleSpecification } from 'maplibre-gl';
|
||||||
|
|
||||||
@@ -50,6 +51,9 @@
|
|||||||
let guessMarker: Marker | null = null;
|
let guessMarker: Marker | null = null;
|
||||||
let realMarker: Marker | null = null;
|
let realMarker: Marker | null = null;
|
||||||
let explorerMarkers: Marker[] = [];
|
let explorerMarkers: Marker[] = [];
|
||||||
|
let observateurTaille: ResizeObserver | null = null;
|
||||||
|
let rafLigne: number | null = null; // tracé progressif de la ligne de distance
|
||||||
|
let pulseAttendu = false; // pulse du marqueur au prochain positionnement (clic / dragend)
|
||||||
|
|
||||||
const SRC_LIGNE = 'jwe-ligne';
|
const SRC_LIGNE = 'jwe-ligne';
|
||||||
const SRC_PAIRES = 'jwe-paires';
|
const SRC_PAIRES = 'jwe-paires';
|
||||||
@@ -93,6 +97,13 @@
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function annulerTraceLigne(): void {
|
||||||
|
if (rafLigne !== null) {
|
||||||
|
cancelAnimationFrame(rafLigne);
|
||||||
|
rafLigne = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function dessinerRevelation(): void {
|
function dessinerRevelation(): void {
|
||||||
if (!map || !ml || !real) return;
|
if (!map || !ml || !real) return;
|
||||||
ensureSource(SRC_LIGNE);
|
ensureSource(SRC_LIGNE);
|
||||||
@@ -118,38 +129,69 @@
|
|||||||
paint: { 'text-color': '#0b3d2e', 'text-halo-color': '#fffdf8', 'text-halo-width': 2 }
|
paint: { 'text-color': '#0b3d2e', 'text-halo-color': '#fffdf8', 'text-halo-width': 2 }
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const features: GeoJSON.Feature[] = [];
|
const positionReelle = real;
|
||||||
if (guess) {
|
/** Features de la ligne guess ↔ réel à la progression donnée (1 = complète). */
|
||||||
features.push(ligneFeature(guess, real, null));
|
function featuresLigne(progression: number): GeoJSON.Feature[] {
|
||||||
if (distanceKm !== null) {
|
if (!guess) return [];
|
||||||
// Étiquette de distance au milieu de la ligne guess ↔ réel
|
const tete = {
|
||||||
|
lat: guess.lat + (positionReelle.lat - guess.lat) * progression,
|
||||||
|
lon: guess.lon + (positionReelle.lon - guess.lon) * progression
|
||||||
|
};
|
||||||
|
const features: GeoJSON.Feature[] = [ligneFeature(guess, tete, null)];
|
||||||
|
if (progression >= 1 && distanceKm !== null) {
|
||||||
|
// Étiquette de distance au milieu de la ligne, posée à la fin du tracé
|
||||||
features.push(
|
features.push(
|
||||||
pointFeature(
|
pointFeature(
|
||||||
{ lat: (guess.lat + real.lat) / 2, lon: (guess.lon + real.lon) / 2 },
|
{ lat: (guess.lat + positionReelle.lat) / 2, lon: (guess.lon + positionReelle.lon) / 2 },
|
||||||
{ etiquette: `${distanceKm} km` }
|
{ etiquette: `${distanceKm} km` }
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
return features;
|
||||||
|
}
|
||||||
|
|
||||||
|
annulerTraceLigne();
|
||||||
|
const dureeTrace = dureeMs('--dur-phrase');
|
||||||
|
if (guess && !reducedMotion && dureeTrace > 0) {
|
||||||
|
// La ligne de distance se dessine depuis le guess vers le lieu réel :
|
||||||
|
// croissance progressive du GeoJSON via rAF (jamais d'état réactif
|
||||||
|
// par frame), easing --ease-ka, durée lue du token CSS.
|
||||||
|
const t0 = performance.now();
|
||||||
|
const tick = (t: number): void => {
|
||||||
|
const p = Math.min(1, (t - t0) / dureeTrace);
|
||||||
|
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: featuresLigne(easeKa(p)) });
|
||||||
|
rafLigne = p < 1 ? requestAnimationFrame(tick) : null;
|
||||||
|
};
|
||||||
|
rafLigne = requestAnimationFrame(tick);
|
||||||
|
} else {
|
||||||
|
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: featuresLigne(1) });
|
||||||
}
|
}
|
||||||
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features });
|
|
||||||
|
|
||||||
// Marqueur vert = position réelle ; le marqueur corail du joueur RESTE
|
// Marqueur vert = position réelle ; le marqueur corail du joueur RESTE
|
||||||
// à sa position : la comparaison visuelle guess ↔ réel est le cœur du jeu.
|
// à sa position : la comparaison visuelle guess ↔ réel est le cœur du jeu.
|
||||||
realMarker?.remove();
|
realMarker?.remove();
|
||||||
realMarker = new ml.Marker({ color: '#0b3d2e' }).setLngLat([real.lon, real.lat]).addTo(map);
|
realMarker = new ml.Marker({ color: '#0b3d2e' }).setLngLat([real.lon, real.lat]).addTo(map);
|
||||||
|
// Le marqueur « tombe » avec un petit rebond (transform only, keyframes CSS).
|
||||||
|
if (!reducedMotion) realMarker.getElement().classList.add('tombe');
|
||||||
|
|
||||||
if (guess) {
|
if (guess) {
|
||||||
const bounds = new ml.LngLatBounds(
|
const bounds = new ml.LngLatBounds(
|
||||||
[Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)],
|
[Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)],
|
||||||
[Math.max(guess.lon, real.lon), Math.max(guess.lat, real.lat)]
|
[Math.max(guess.lon, real.lon), Math.max(guess.lat, real.lat)]
|
||||||
);
|
);
|
||||||
map.fitBounds(bounds, { padding: 80, duration: reducedMotion ? 0 : 900, maxZoom: 12 });
|
// Le panneau résultat vient de remplacer la photo : synchroniser la
|
||||||
|
// taille du canvas AVANT de calculer le cadrage, sinon il est faussé.
|
||||||
|
// maxZoom 15 (et non 12) : pour un guess proche du lieu, les deux
|
||||||
|
// marqueurs doivent rester distinguables (juger « à quel point on est bon »).
|
||||||
|
map.resize();
|
||||||
|
map.fitBounds(bounds, { padding: 90, duration: reducedMotion ? 0 : 900, maxZoom: 15 });
|
||||||
} else {
|
} else {
|
||||||
map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 });
|
map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function nettoyerRevelation(): void {
|
function nettoyerRevelation(): void {
|
||||||
|
annulerTraceLigne();
|
||||||
realMarker?.remove();
|
realMarker?.remove();
|
||||||
realMarker = null;
|
realMarker = null;
|
||||||
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: [] });
|
setGeoJSON(SRC_LIGNE, { type: 'FeatureCollection', features: [] });
|
||||||
@@ -165,6 +207,7 @@
|
|||||||
guessMarker.on('dragend', () => {
|
guessMarker.on('dragend', () => {
|
||||||
const ll = guessMarker?.getLngLat();
|
const ll = guessMarker?.getLngLat();
|
||||||
if (ll) {
|
if (ll) {
|
||||||
|
pulseAttendu = true; // le déplacement au drag est aussi un placement
|
||||||
guess = { lat: ll.lat, lon: ll.lng };
|
guess = { lat: ll.lat, lon: ll.lng };
|
||||||
onguess?.(guess);
|
onguess?.(guess);
|
||||||
}
|
}
|
||||||
@@ -173,6 +216,17 @@
|
|||||||
guessMarker.setLngLat([guess.lon, guess.lat]);
|
guessMarker.setLngLat([guess.lon, guess.lat]);
|
||||||
}
|
}
|
||||||
guessMarker.setDraggable(interactive && !real);
|
guessMarker.setDraggable(interactive && !real);
|
||||||
|
if (pulseAttendu) {
|
||||||
|
pulseAttendu = false;
|
||||||
|
if (!reducedMotion) {
|
||||||
|
// Feedback de placement : pulse léger (redémarrage forcé si le
|
||||||
|
// marqueur bouge à nouveau pendant l'animation).
|
||||||
|
const el = guessMarker.getElement();
|
||||||
|
el.classList.remove('pulse');
|
||||||
|
void el.offsetWidth;
|
||||||
|
el.classList.add('pulse');
|
||||||
|
}
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
guessMarker?.remove();
|
guessMarker?.remove();
|
||||||
guessMarker = null;
|
guessMarker = null;
|
||||||
@@ -224,11 +278,15 @@
|
|||||||
if (!map || !ml) return;
|
if (!map || !ml) return;
|
||||||
for (const m of explorerMarkers) m.remove();
|
for (const m of explorerMarkers) m.remove();
|
||||||
explorerMarkers = [];
|
explorerMarkers = [];
|
||||||
for (const info of markers) {
|
for (const [i, info] of markers.entries()) {
|
||||||
const el = document.createElement('button');
|
const el = document.createElement('button');
|
||||||
el.type = 'button';
|
el.type = 'button';
|
||||||
el.className = 'marqueur-explorer';
|
el.className = 'marqueur-explorer';
|
||||||
el.setAttribute('aria-label', info.label);
|
el.setAttribute('aria-label', info.label);
|
||||||
|
// Cascade syncopée au (re)filtrage : rythme 3+3+2 sur le premier
|
||||||
|
// cycle, plafonné à 960 ms au-delà (le catalogue peut être long).
|
||||||
|
// Sans effet en reduced-motion : l'animation est sous gate média.
|
||||||
|
el.style.animationDelay = `${Math.min(syncopatedDelay(i), 960)}ms`;
|
||||||
const mk = new ml.Marker({ element: el, color: '#175e70' })
|
const mk = new ml.Marker({ element: el, color: '#175e70' })
|
||||||
.setLngLat([info.lon, info.lat])
|
.setLngLat([info.lon, info.lat])
|
||||||
.addTo(map!);
|
.addTo(map!);
|
||||||
@@ -307,6 +365,7 @@
|
|||||||
map.addControl(new mod.NavigationControl({ showCompass: false }), 'top-left');
|
map.addControl(new mod.NavigationControl({ showCompass: false }), 'top-left');
|
||||||
map.on('click', (e) => {
|
map.on('click', (e) => {
|
||||||
if (!interactive || real) return;
|
if (!interactive || real) return;
|
||||||
|
pulseAttendu = true; // feedback au placement du marqueur
|
||||||
guess = { lat: e.lngLat.lat, lon: e.lngLat.lng };
|
guess = { lat: e.lngLat.lat, lon: e.lngLat.lng };
|
||||||
onguess?.(guess);
|
onguess?.(guess);
|
||||||
});
|
});
|
||||||
@@ -316,9 +375,16 @@
|
|||||||
syncExplorerMarkers();
|
syncExplorerMarkers();
|
||||||
if (real) dessinerRevelation();
|
if (real) dessinerRevelation();
|
||||||
});
|
});
|
||||||
|
// MapLibre ne détecte pas seul les changements de taille du conteneur
|
||||||
|
// (panneau résultat qui remplace la photo, rotation d'écran…).
|
||||||
|
observateurTaille = new ResizeObserver(() => map?.resize());
|
||||||
|
observateurTaille.observe(conteneur);
|
||||||
})();
|
})();
|
||||||
return () => {
|
return () => {
|
||||||
detruit = true;
|
detruit = true;
|
||||||
|
annulerTraceLigne();
|
||||||
|
observateurTaille?.disconnect();
|
||||||
|
observateurTaille = null;
|
||||||
map?.remove();
|
map?.remove();
|
||||||
map = null;
|
map = null;
|
||||||
};
|
};
|
||||||
@@ -380,33 +446,39 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.45rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte {
|
.carte {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
border-radius: var(--oki-radius);
|
border-radius: var(--oki-radius);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile : les sauts sortent de la carte — barre horizontale SOUS la carte,
|
||||||
|
dimensionnée pour que les 4 régions tiennent sur 360px+ (scroll en repli),
|
||||||
|
jamais recouverte par l'attribution ni un overlay. */
|
||||||
.sauts {
|
.sauts {
|
||||||
position: absolute;
|
|
||||||
bottom: 0.75rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.4rem;
|
flex-wrap: nowrap;
|
||||||
flex-wrap: wrap;
|
gap: 0.3rem;
|
||||||
justify-content: center;
|
overflow-x: auto;
|
||||||
padding: 0 0.5rem;
|
padding: 0.1rem;
|
||||||
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.saut {
|
.saut {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-height: 48px; /* cible tactile */
|
||||||
background: rgba(255, 253, 248, 0.94);
|
background: rgba(255, 253, 248, 0.94);
|
||||||
color: var(--oki-vert);
|
color: var(--oki-vert);
|
||||||
border: 1px solid var(--oki-sable-fonce);
|
border: 1px solid var(--oki-sable-fonce);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
padding: 0.35rem 0.8rem;
|
padding: 0.3rem 0.7rem;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -417,6 +489,22 @@
|
|||||||
background: var(--oki-vert-doux);
|
background: var(--oki-vert-doux);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Desktop : overlay bas-gauche, dégagé de l'attribution compacte (bas-droite). */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sauts {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.6rem;
|
||||||
|
left: 0.6rem;
|
||||||
|
max-width: calc(100% - 5rem);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.saut {
|
||||||
|
min-height: 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.35rem 0.8rem;
|
||||||
|
} }
|
||||||
|
|
||||||
:global(.marqueur-explorer) {
|
:global(.marqueur-explorer) {
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
@@ -431,4 +519,61 @@
|
|||||||
:global(.marqueur-explorer:focus-visible) {
|
:global(.marqueur-explorer:focus-visible) {
|
||||||
background: var(--oki-vert-clair);
|
background: var(--oki-vert-clair);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* — Motion des marqueurs : transform/opacity uniquement, gate no-preference
|
||||||
|
(les classes tombe/pulse ne sont posées qu'hors reduced-motion, et les
|
||||||
|
délais inline de la cascade explorer sont sans effet sans animation). — */
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
/* Cascade syncopée d'entrée des marqueurs du catalogue explorer */
|
||||||
|
:global(.marqueur-explorer) {
|
||||||
|
animation: marqueur-pop var(--dur-mesure) var(--ease-ka) backwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Le marqueur du lieu réel « tombe » avec un petit rebond */
|
||||||
|
:global(.maplibregl-marker.tombe > svg) {
|
||||||
|
transform-origin: bottom center;
|
||||||
|
animation: marqueur-tombe var(--dur-mesure) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse léger au placement du marqueur de guess */
|
||||||
|
:global(.maplibregl-marker.pulse > svg) {
|
||||||
|
transform-origin: bottom center;
|
||||||
|
animation: marqueur-pulse var(--dur-mesure) var(--ease-ka);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes marqueur-pop {
|
||||||
|
from {
|
||||||
|
transform: scale(0.6);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes marqueur-tombe {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-34px) scale(0.85);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
transform: translateY(3px) scale(1.03);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes marqueur-pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(1.4);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -59,5 +59,6 @@
|
|||||||
font-size: 0.72rem;
|
font-size: 0.72rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
|
background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
|
||||||
|
pointer-events: none; /* décoratif : ne bloque jamais les clics */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import WikiFiche from './WikiFiche.svelte';
|
import WikiFiche from './WikiFiche.svelte';
|
||||||
import { t } from '$lib/i18n/store.svelte';
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
import { compte } from '$lib/motion/countup';
|
||||||
import type { GuessResult } from '$lib/types';
|
import type { GuessResult } from '$lib/types';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -17,7 +18,11 @@
|
|||||||
<header class="score-bloc">
|
<header class="score-bloc">
|
||||||
<p class="bravo">{result.score > 0 ? t().micro.bravo : t().micro.kiteSaYe}</p>
|
<p class="bravo">{result.score > 0 ? t().micro.bravo : t().micro.kiteSaYe}</p>
|
||||||
<p class="score">
|
<p class="score">
|
||||||
<span class="valeur">{result.score}</span>
|
<!-- Count-up animé (aria-hidden) doublé de la valeur finale pour les
|
||||||
|
lecteurs d'écran : la section est aria-live, l'animation rAF
|
||||||
|
écrirait sinon une valeur par frame. -->
|
||||||
|
<span class="valeur" aria-hidden="true" use:compte={result.score}>{result.score}</span>
|
||||||
|
<span class="sr-only">{result.score}</span>
|
||||||
<span class="unite">{t().resultat.points}</span>
|
<span class="unite">{t().resultat.points}</span>
|
||||||
</p>
|
</p>
|
||||||
{#if result.distanceKm !== null}
|
{#if result.distanceKm !== null}
|
||||||
@@ -70,7 +75,9 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--oki-vert-clair);
|
font-family: var(--font-display);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score {
|
.score {
|
||||||
@@ -78,41 +85,44 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.score .valeur {
|
.score .valeur {
|
||||||
font-size: 2.6rem;
|
font-size: 2.8rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--oki-vert);
|
font-family: var(--font-display);
|
||||||
|
color: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.score .unite {
|
.score .unite {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
margin-left: 0.3rem;
|
margin-left: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.distance {
|
.distance {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--blanc-creme);
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rayon {
|
.rayon {
|
||||||
margin: 0.1rem 0 0;
|
margin: 0.1rem 0 0;
|
||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.credit-photo {
|
.credit-photo {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.72rem;
|
font-size: 0.72rem;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lieu {
|
.lieu {
|
||||||
margin: 0.5rem 0 0;
|
margin: 0.5rem 0 0;
|
||||||
|
color: var(--blanc-creme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.creole {
|
.creole {
|
||||||
color: var(--oki-vert-clair);
|
color: var(--or-oki);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,99 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { SITE_NAME, SITE_URL } from '$lib/site';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** Titre de la page (sans le nom du site) — « JWE — … » est composé ici. */
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
/** Chemin absolu de la route (ex. `/explorer`) — canonical + og:url. */
|
||||||
|
path: string;
|
||||||
|
/** URL absolue d'une image og (aucune émise si absente — pas d'image inventée). */
|
||||||
|
image?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { title, description, path, image }: Props = $props();
|
||||||
|
|
||||||
|
const titreComplet = $derived(`${SITE_NAME} — ${title}`);
|
||||||
|
const urlCanonique = $derived(`${SITE_URL}${path}`);
|
||||||
|
|
||||||
|
const schemaWebapp = $derived(
|
||||||
|
JSON.stringify({
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@graph': [
|
||||||
|
{
|
||||||
|
'@type': 'WebApplication',
|
||||||
|
'@id': `${SITE_URL}/#app`,
|
||||||
|
name: 'JWE',
|
||||||
|
alternateName: 'JWE - Géolocalisation Souveraine Outre-mer',
|
||||||
|
url: SITE_URL,
|
||||||
|
applicationCategory: 'GameApplication',
|
||||||
|
genre: ['Educational Game', 'Geolocation Game'],
|
||||||
|
operatingSystem: 'All',
|
||||||
|
browserRequirements: 'Requires JavaScript and HTML5 Canvas/WebGL',
|
||||||
|
inLanguage: ['fr', 'gcf'],
|
||||||
|
description:
|
||||||
|
'Jeu de géolocalisation libre et souverain dans l’esprit de GeoGuessr, centré sur la Guadeloupe, la Martinique, la Guyane et La Réunion.',
|
||||||
|
offers: {
|
||||||
|
'@type': 'Offer',
|
||||||
|
price: '0',
|
||||||
|
priceCurrency: 'EUR'
|
||||||
|
},
|
||||||
|
author: {
|
||||||
|
'@type': 'Organization',
|
||||||
|
name: 'ORGANISATION KA INTERNATIONALE',
|
||||||
|
url: 'https://o-k-i.net'
|
||||||
|
},
|
||||||
|
license: 'https://opensource.org/licenses/MIT'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'@type': 'FAQPage',
|
||||||
|
'@id': `${SITE_URL}/#faq`,
|
||||||
|
mainEntity: [
|
||||||
|
{
|
||||||
|
'@type': 'Question',
|
||||||
|
name: 'Qu’est-ce que JWE ?',
|
||||||
|
acceptedAnswer: {
|
||||||
|
'@type': 'Answer',
|
||||||
|
text: 'JWE est un jeu web de géolocalisation éthique et souverain centré sur 4 territoires caribéens et ultramarins : Guadeloupe, Martinique, Guyane et La Réunion. Le joueur devine la commune d’un lieu à partir d’une photo ou d’une vue street 360°, puis accède à une fiche éducative Wikipédia.'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'@type': 'Question',
|
||||||
|
name: 'Qu’est-ce que le principe « Pwen blindé » ?',
|
||||||
|
acceptedAnswer: {
|
||||||
|
'@type': 'Answer',
|
||||||
|
text: 'Le « Pwen blindé » (point aveugle) est une mécanique éducative identifiant les lieux réels qui ne possèdent pas encore de fiche Wikipédia ou Wikidata, invitant les utilisateurs et citoyens à documenter leurs propres territoires pour préserver la mémoire et la souveraineté numérique locale.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{titreComplet}</title>
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<link rel="canonical" href={urlCanonique} />
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content={urlCanonique} />
|
||||||
|
<meta property="og:title" content={titreComplet} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:locale" content="fr_FR" />
|
||||||
|
<meta property="og:site_name" content={SITE_NAME} />
|
||||||
|
{#if image}
|
||||||
|
<meta property="og:image" content={image} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
|
||||||
|
<meta name="twitter:title" content={titreComplet} />
|
||||||
|
<meta name="twitter:description" content={description} />
|
||||||
|
{#if image}
|
||||||
|
<meta name="twitter:image" content={image} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Balisage structuré JSON-LD AI Overview & SEO Top-Tier -->
|
||||||
|
{@html `<script type="application/ld+json">${schemaWebapp}</script>`}
|
||||||
|
</svelte:head>
|
||||||
@@ -0,0 +1,329 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { exporterHistorique, getHistorique, getStats, reinitialiserHistorique } from '$lib/stores/history.svelte';
|
||||||
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
ouvert: boolean;
|
||||||
|
onfermer: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { ouvert, onfermer }: Props = $props();
|
||||||
|
|
||||||
|
const stats = $derived(ouvert ? getStats() : null);
|
||||||
|
const historique = $derived(ouvert ? getHistorique() : []);
|
||||||
|
|
||||||
|
let confirmationEffacer = $state(false);
|
||||||
|
|
||||||
|
function exporter(): void {
|
||||||
|
exporterHistorique();
|
||||||
|
}
|
||||||
|
|
||||||
|
function effacer(): void {
|
||||||
|
if (!confirmationEffacer) {
|
||||||
|
confirmationEffacer = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
reinitialiserHistorique();
|
||||||
|
confirmationEffacer = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown(e: KeyboardEvent): void {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBackdropClick(e: MouseEvent): void {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
onfermer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window onkeydown={ouvert ? onKeydown : undefined} />
|
||||||
|
|
||||||
|
{#if ouvert}
|
||||||
|
<div
|
||||||
|
class="overlay"
|
||||||
|
onclick={handleBackdropClick}
|
||||||
|
role="presentation"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="modal-stats"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="titre-stats"
|
||||||
|
>
|
||||||
|
<header class="modal-entete">
|
||||||
|
<div>
|
||||||
|
<h2 id="titre-stats">{t().stats.titre}</h2>
|
||||||
|
<p class="sous-titre-stats">{t().stats.sousTitre}</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-fermer" onclick={onfermer} aria-label={t().stats.fermer}>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{#if stats}
|
||||||
|
<div class="stats-corps">
|
||||||
|
<div class="grille-chiffres">
|
||||||
|
<div class="carte-chiffre">
|
||||||
|
<span class="chiffre-val">{stats.totalParties}</span>
|
||||||
|
<span class="chiffre-label">{t().stats.partiesJouees}</span>
|
||||||
|
</div>
|
||||||
|
<div class="carte-chiffre">
|
||||||
|
<span class="chiffre-val">{stats.meilleurScore}</span>
|
||||||
|
<span class="chiffre-label">{t().stats.meilleurScore}</span>
|
||||||
|
</div>
|
||||||
|
<div class="carte-chiffre">
|
||||||
|
<span class="chiffre-val">{stats.scoreMoyen}</span>
|
||||||
|
<span class="chiffre-label">{t().stats.scoreMoyen}</span>
|
||||||
|
</div>
|
||||||
|
<div class="carte-chiffre">
|
||||||
|
<span class="chiffre-val">{stats.lieuxUniques}</span>
|
||||||
|
<span class="chiffre-label">{t().stats.lieuxDecouverts}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="section-titre">{t().stats.parRegion}</h3>
|
||||||
|
<div class="grille-regions">
|
||||||
|
{#each (['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'] as const) as reg}
|
||||||
|
{@const st = stats.parRegion[reg]}
|
||||||
|
<div class="carte-region-stat">
|
||||||
|
<span class="nom-reg">{t().regions[reg]}</span>
|
||||||
|
<span class="reg-score">{st.rounds > 0 ? `${st.scoreMoyen} pts` : '—'}</span>
|
||||||
|
<span class="reg-detail">{st.rounds > 0 ? `${st.rounds} manches · ${st.distanceMoyenneKm} km` : t().stats.aucunePartie}</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if historique.length > 0}
|
||||||
|
<h3 class="section-titre">{t().stats.dernieresParties}</h3>
|
||||||
|
<div class="liste-historique">
|
||||||
|
{#each historique.slice(0, 5) as h (h.id)}
|
||||||
|
<div class="item-hist">
|
||||||
|
<div class="hist-info">
|
||||||
|
<span class="hist-mode">{t().modes[h.mode] || h.mode}</span>
|
||||||
|
<span class="hist-date">{new Date(h.timestamp).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
<span class="hist-score">{h.scoreTotal} pts</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="stats-actions">
|
||||||
|
<button type="button" class="btn btn-secondaire" onclick={exporter}>
|
||||||
|
📥 {t().stats.exporterJson}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-tertiaire"
|
||||||
|
class:alerte={confirmationEffacer}
|
||||||
|
onclick={effacer}
|
||||||
|
>
|
||||||
|
🗑️ {confirmationEffacer ? t().stats.confirmerEffacer : t().stats.effacerDonnees}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-stats {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 620px;
|
||||||
|
max-height: 90dvh;
|
||||||
|
background: var(--noir-profond);
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-entete {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1.2rem 1.4rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-entete h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sous-titre-stats {
|
||||||
|
margin: 0.2rem 0 0 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-fermer {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--muted);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-fermer:hover {
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-corps {
|
||||||
|
padding: 1.2rem 1.4rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grille-chiffres {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||||
|
gap: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carte-chiffre {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.9rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chiffre-val {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chiffre-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-titre {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
padding-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grille-regions {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carte-region-stat {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.7rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nom-reg {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reg-score {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 800;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
color: var(--vert-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reg-detail {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liste-historique {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-hist {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.6rem;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-mode {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-date {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hist-score {
|
||||||
|
font-weight: 800;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.8rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-tertiaire.alerte {
|
||||||
|
border-color: var(--rouge-oki);
|
||||||
|
color: var(--rouge-oki);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
|
||||||
|
let isLight = $state(false);
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
try {
|
||||||
|
const saved = localStorage.getItem('jwe_theme');
|
||||||
|
if (saved === 'light') {
|
||||||
|
isLight = true;
|
||||||
|
document.documentElement.classList.add('light-theme');
|
||||||
|
} else {
|
||||||
|
isLight = false;
|
||||||
|
document.documentElement.classList.remove('light-theme');
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// localStorage non disponible
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleTheme(): void {
|
||||||
|
isLight = !isLight;
|
||||||
|
if (isLight) {
|
||||||
|
document.documentElement.classList.add('light-theme');
|
||||||
|
try {
|
||||||
|
localStorage.setItem('jwe_theme', 'light');
|
||||||
|
} catch {}
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('light-theme');
|
||||||
|
try {
|
||||||
|
localStorage.setItem('jwe_theme', 'dark');
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-theme"
|
||||||
|
onclick={toggleTheme}
|
||||||
|
aria-label={isLight ? t().theme.passerSombre : t().theme.passerClair}
|
||||||
|
title={isLight ? t().theme.passerSombre : t().theme.passerClair}
|
||||||
|
>
|
||||||
|
{#if isLight}
|
||||||
|
<!-- Icône Lune pour basculer vers sombre -->
|
||||||
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||||
|
</svg>
|
||||||
|
{:else}
|
||||||
|
<!-- Icône Soleil pour basculer vers clair -->
|
||||||
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="5" />
|
||||||
|
<line x1="12" y1="1" x2="12" y2="3" />
|
||||||
|
<line x1="12" y1="21" x2="12" y2="23" />
|
||||||
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||||
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||||
|
<line x1="1" y1="12" x2="3" y2="12" />
|
||||||
|
<line x1="21" y1="12" x2="23" y2="12" />
|
||||||
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||||
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.btn-theme {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
border-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
background-color var(--dur-tanbou) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-theme:hover {
|
||||||
|
color: var(--or-oki);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
background: var(--card-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-theme:focus-visible {
|
||||||
|
outline: 2px solid var(--or-oki);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -110,36 +110,46 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.panneau {
|
.panneau {
|
||||||
border-radius: var(--oki-radius);
|
border-radius: var(--radius-md);
|
||||||
padding: 1.1rem 1.25rem;
|
padding: 1.1rem 1.25rem;
|
||||||
box-shadow: var(--oki-ombre);
|
box-shadow: var(--oki-ombre);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chargement {
|
.chargement {
|
||||||
background: var(--oki-blanc);
|
background: var(--noir-profond);
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cas A : vert doux, apaisé */
|
/* Cas A : fiche existante — liseré vert OKI */
|
||||||
.cas-a {
|
.cas-a {
|
||||||
background: var(--oki-vert-doux);
|
background: var(--card-bg);
|
||||||
border: 1.5px solid var(--oki-vert-clair);
|
border: 1px solid var(--line);
|
||||||
|
border-left: 4px solid var(--vert-oki);
|
||||||
|
color: var(--blanc-creme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cas-a h2 {
|
.cas-a h2 {
|
||||||
margin: 0 0 0.3rem;
|
margin: 0 0 0.3rem;
|
||||||
font-size: 1.2rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cas-a h2 a {
|
.cas-a h2 a {
|
||||||
color: var(--oki-vert);
|
color: var(--blanc-creme);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cas-a h2 a:hover {
|
||||||
|
color: var(--or-oki);
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cas-a .ton {
|
.cas-a .ton {
|
||||||
margin: 0 0 0.6rem;
|
margin: 0 0 0.6rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--oki-vert-clair);
|
color: var(--vert-oki);
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cas-a img {
|
.cas-a img {
|
||||||
@@ -147,28 +157,40 @@
|
|||||||
width: 96px;
|
width: 96px;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0 0 0.5rem 0.8rem;
|
margin: 0 0 0.5rem 0.8rem;
|
||||||
border-radius: var(--oki-radius-petit);
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cas-a .extrait {
|
.cas-a .extrait {
|
||||||
margin: 0 0 0.6rem;
|
margin: 0 0 0.6rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--blanc-creme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lien-wiki {
|
.lien-wiki {
|
||||||
color: var(--oki-bleu);
|
color: var(--or-oki);
|
||||||
font-weight: 650;
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cas B : teinte sable/orangée distincte, icône spécifique */
|
.lien-wiki:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cas B : lacune documentaire — liseré or OKI, teinte distincte */
|
||||||
.cas-b {
|
.cas-b {
|
||||||
background: var(--oki-lacune-fond);
|
background: var(--oki-lacune-fond);
|
||||||
border: 2px solid var(--oki-lacune-bord);
|
border: 1.5px solid var(--or-oki);
|
||||||
|
border-left: 5px solid var(--or-oki);
|
||||||
|
color: var(--blanc-creme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cas-b h2 {
|
.cas-b h2 {
|
||||||
margin: 0 0 0.5rem;
|
margin: 0 0 0.5rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
color: #8a5a00;
|
color: var(--or-oki);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
@@ -180,23 +202,40 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 1.6rem;
|
width: 1.6rem;
|
||||||
height: 1.6rem;
|
height: 1.6rem;
|
||||||
border: 2.5px dashed var(--oki-lacune-bord);
|
border: 2px dashed var(--or-oki);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
color: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cas-b .texte {
|
.cas-b .texte {
|
||||||
margin: 0 0 0.9rem;
|
margin: 0 0 0.9rem;
|
||||||
font-size: 1.02rem;
|
font-size: 0.98rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--blanc-creme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-cta {
|
.btn-cta {
|
||||||
background: var(--oki-lacune-bord);
|
background: var(--or-oki);
|
||||||
color: #fff;
|
color: #0d0d0d;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
padding: 0.65rem 1.1rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .btn-cta {
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-cta:hover {
|
.btn-cta:hover {
|
||||||
background: #b98a2f;
|
background: var(--or-clair);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ctas {
|
.ctas {
|
||||||
@@ -207,18 +246,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.lien-wikidata {
|
.lien-wikidata {
|
||||||
color: var(--oki-bleu);
|
color: var(--or-oki);
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lien-wikidata:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide {
|
.guide {
|
||||||
margin: 0.8rem 0 0;
|
margin: 0.8rem 0 0;
|
||||||
font-size: 0.88rem;
|
font-size: 0.88rem;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide a {
|
.guide a {
|
||||||
color: var(--oki-bleu);
|
color: var(--or-oki);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+38
-6
@@ -1,7 +1,7 @@
|
|||||||
const fr = {
|
const fr = {
|
||||||
app: {
|
app: {
|
||||||
titre: 'JWE',
|
titre: 'JWE',
|
||||||
sousTitre: 'Jeu de géolocalisation — Guadeloupe, Martinique, Guyane, La Réunion'
|
sousTitre: 'Jeu de géolocalisation souverain — Guadeloupe, Martinique, Guyane, La Réunion'
|
||||||
},
|
},
|
||||||
regions: {
|
regions: {
|
||||||
GUADELOUPE: 'Guadeloupe',
|
GUADELOUPE: 'Guadeloupe',
|
||||||
@@ -56,8 +56,6 @@ const fr = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
resultat: {
|
resultat: {
|
||||||
bravo: 'Bravo !',
|
|
||||||
score: 'Score',
|
|
||||||
points: 'points',
|
points: 'points',
|
||||||
distance: 'Distance',
|
distance: 'Distance',
|
||||||
km: 'km',
|
km: 'km',
|
||||||
@@ -94,7 +92,6 @@ const fr = {
|
|||||||
telecharger: 'Télécharger l’image',
|
telecharger: 'Télécharger l’image',
|
||||||
taPosition: 'Ta position',
|
taPosition: 'Ta position',
|
||||||
positionReelle: 'Position réelle',
|
positionReelle: 'Position réelle',
|
||||||
manche: 'Manche',
|
|
||||||
titreSeed: 'Défi — seed',
|
titreSeed: 'Défi — seed',
|
||||||
copierLien: 'Copier le lien du défi',
|
copierLien: 'Copier le lien du défi',
|
||||||
lienCopie: 'Lien copié !'
|
lienCopie: 'Lien copié !'
|
||||||
@@ -113,10 +110,45 @@ const fr = {
|
|||||||
zoomOut: 'Dézoomer',
|
zoomOut: 'Dézoomer',
|
||||||
carteRegionsLabel: 'Carte des quatre régions : Guadeloupe, Martinique, Guyane, La Réunion'
|
carteRegionsLabel: 'Carte des quatre régions : Guadeloupe, Martinique, Guyane, La Réunion'
|
||||||
},
|
},
|
||||||
|
theme: {
|
||||||
|
passerClair: 'Passer au thème clair',
|
||||||
|
passerSombre: 'Passer au thème sombre'
|
||||||
|
},
|
||||||
|
commandBar: {
|
||||||
|
titre: 'Palette d’intentions et de commandes',
|
||||||
|
placeholder: 'Tape une action, un mode, une région (ex. Guadeloupe, Défi, Thème)…',
|
||||||
|
aucunResultat: 'Aucune action trouvée pour',
|
||||||
|
catModes: 'Modes de jeu',
|
||||||
|
catRegions: 'Régions',
|
||||||
|
catActions: 'Actions rapides',
|
||||||
|
mesStats: 'Mes statistiques locales',
|
||||||
|
basculerTheme: 'Changer de thème (Sombre / Clair)',
|
||||||
|
basculerLangue: 'Changer de langue (FR / Kréyòl)',
|
||||||
|
raccourci: 'Ouvrir la palette d’intentions (Ctrl+K)'
|
||||||
|
},
|
||||||
|
stats: {
|
||||||
|
titre: 'Mes statistiques locales',
|
||||||
|
sousTitre: 'Données stockées uniquement sur ton appareil (100% privé & souverain)',
|
||||||
|
fermer: 'Fermer la fenêtre des statistiques',
|
||||||
|
partiesJouees: 'Parties jouées',
|
||||||
|
meilleurScore: 'Meilleur score',
|
||||||
|
scoreMoyen: 'Score moyen',
|
||||||
|
lieuxDecouverts: 'Lieux découverts',
|
||||||
|
parRegion: 'Précision par territoire',
|
||||||
|
aucunePartie: 'Aucune manche jouée',
|
||||||
|
dernieresParties: 'Dernières parties',
|
||||||
|
exporterJson: 'Exporter mes données (JSON)',
|
||||||
|
effacerDonnees: 'Effacer l’historique local',
|
||||||
|
confirmerEffacer: 'Confirmer la suppression'
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
texteFederation: 'Un service libre & souverain opéré par ORGANISATION KA INTERNATIONALE',
|
||||||
|
mentionLibre: 'Code sous licence MIT · Données libres OpenStreetMap & Wikipédia',
|
||||||
|
donner: 'Soutenir sur Liberapay'
|
||||||
|
},
|
||||||
micro: {
|
micro: {
|
||||||
bravo: 'Bravo !',
|
bravo: 'Bravo !',
|
||||||
kiteSaYe: 'Kité sa ye ?',
|
kiteSaYe: 'Kité sa ye ?'
|
||||||
pwenBlinde: 'Pwen blindé'
|
|
||||||
},
|
},
|
||||||
langue: {
|
langue: {
|
||||||
fr: 'Français',
|
fr: 'Français',
|
||||||
|
|||||||
+75
-43
@@ -10,84 +10,82 @@ const gcf: Dict = {
|
|||||||
MARTINIQUE: 'Matinik',
|
MARTINIQUE: 'Matinik',
|
||||||
GUYANE: 'Giyan',
|
GUYANE: 'Giyan',
|
||||||
REUNION: 'Léryinyon',
|
REUNION: 'Léryinyon',
|
||||||
TOUTES: 'Tout péyi yo'
|
TOUTES: 'Tout sé péyi-la'
|
||||||
},
|
},
|
||||||
modes: {
|
modes: {
|
||||||
monument: 'Konnèt moniman',
|
monument: 'Konnèt moniman',
|
||||||
monumentDesc: 'Roukonèt moniman-an asou foto-a é mété’y asou kat-la.',
|
monumentDesc: 'Rikonnèt moniman-la asou foto-a é mété-y asou kat-la.',
|
||||||
lieu: 'Kote mwen ye ?',
|
lieu: 'Kote mwen ye ?',
|
||||||
lieuDesc: 'On lari, on bodlanmè, on fowé… chwé kote ou yé.',
|
lieuDesc: 'On lari, on bò lanmè, on gwo bwa… touvé koté ou yé.',
|
||||||
defi: 'Défi 5 rounds',
|
defi: 'Défi 5 rounds',
|
||||||
defiDesc: '5 koté youn dèyè ròt, moniman épi plas mélanjé.',
|
defiDesc: '5 koté yonn dèyè lòt, moniman éti koté mélanjé.',
|
||||||
street: 'An lari a',
|
street: 'An lari a',
|
||||||
streetDesc: 'Mache nan on lari an foto 360° é chwé komin-lan.',
|
streetDesc: 'Mawonné an lari an 360° é touvé komin-la.',
|
||||||
explorer: 'Aprann',
|
explorer: 'Aprann',
|
||||||
explorerDesc: 'Flanné asou kat-la é li fich Wikipédia yo. San pwen.'
|
explorerDesc: 'Flanné asou kat-la san pwen, li sé fich Wikipédia-la.'
|
||||||
},
|
},
|
||||||
accueil: {
|
accueil: {
|
||||||
choixRegion: 'Chwazi péyi ou',
|
choixRegion: 'Chwazi péyi a-w',
|
||||||
choixMode: 'Chwazi jan ou vlé jwé',
|
choixMode: 'Chwazi jwé a-w',
|
||||||
options: 'Règlaj',
|
options: 'Chwa',
|
||||||
timer: 'Kronomèt (60 s, bonus pwen)',
|
timer: 'Lidékont (60 s, pwen an plis)',
|
||||||
jouer: 'Jwé',
|
jouer: 'Jwé',
|
||||||
creerLienDefi: 'Réyé on lyen défi'
|
creerLienDefi: 'Fè on lyen défi'
|
||||||
},
|
},
|
||||||
jeu: {
|
jeu: {
|
||||||
charger: 'Nou ka chajé koté-la…',
|
charger: 'Nou ka chajé koté-la…',
|
||||||
erreur: 'Nou pa rivé chajé on koté. Éséyé ankò.',
|
erreur: 'Pa té pé chajé koté-la. Risiye.',
|
||||||
reessayer: 'Éséyé ankò',
|
reessayer: 'Risiye ankò',
|
||||||
valider: 'Validé pozisyon mwen',
|
valider: 'Validé koté an yé',
|
||||||
passer: 'Pasé',
|
passer: 'Pasé',
|
||||||
indice: 'Endis',
|
indice: 'Endis',
|
||||||
indicePenalite: '−10 % pwen',
|
indicePenalite: '−10 % pwen',
|
||||||
indiceRestant: 'endis ki rété',
|
indiceRestant: 'endis ki rété',
|
||||||
indicesRestants: 'endis ki rété',
|
indicesRestants: 'endis ki rété',
|
||||||
plusDIndice: 'Pa ni endis ankò',
|
plusDIndice: 'Pa rété endis ankò',
|
||||||
poserMarqueur: 'Kwiké asou kat-la pou mété makò-a',
|
poserMarqueur: 'Kwiké asou kat-la pou mété makò a-w',
|
||||||
streetChargement: 'Nou ka chajé vi lari-a…',
|
streetChargement: 'Nou ka chajé lari-a…',
|
||||||
streetErreur: 'Nou pa rivé chajé foto Mapillary-la. Éséyé ankò oben pasé o koté swivan.',
|
streetErreur: 'Pa té pé chajé foto Mapillary-la. Risiye oben pasé a lòt koté-la.',
|
||||||
streetToken: 'Vi lari-a pa disponib : konfigirasyon Mapillary-la manké.',
|
streetToken: 'Vizyonnèz pa disponib : mank konfigirasyon Mapillary.',
|
||||||
streetAriaLabel: 'Vi lari-a. Flèch yo pou avansé, glissé pou gadté toutò.',
|
streetAriaLabel: 'Lari entèraktif. Flèch yo pou vansé, glisé pou gadé alantou.',
|
||||||
round: 'Mannèk',
|
round: 'Manch',
|
||||||
sur: 'asou',
|
sur: 'asou',
|
||||||
difficulte: {
|
difficulte: {
|
||||||
FACILE: 'Fasil',
|
FACILE: 'Fasil',
|
||||||
MOYEN: 'Mwayen',
|
MOYEN: 'Mwayen',
|
||||||
DIFFICILE: 'Difisil',
|
DIFFICILE: 'Rèd',
|
||||||
EXPERT: 'Espè'
|
EXPERT: 'Mèt-a-manman'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
resultat: {
|
resultat: {
|
||||||
bravo: 'Bravo !',
|
|
||||||
score: 'Pwen',
|
|
||||||
points: 'pwen',
|
points: 'pwen',
|
||||||
distance: 'Distans',
|
distance: 'Distans',
|
||||||
km: 'km',
|
km: 'km',
|
||||||
trouve: 'Ou trouvé ! Aprann pli plis asou koté sa-a.',
|
trouve: 'Ou touvé ! Vin aprann plis asou koté-lasa.',
|
||||||
aDecouvrir: 'Koté-la té la. Aprann pli plis asou’y.',
|
aDecouvrir: 'Koté-la té la. Vin aprann plis asou-y.',
|
||||||
lireWiki: 'Li swit-la asou Wikipédia',
|
lireWiki: 'Li rès-la asou Wikipédia',
|
||||||
rayonScore: 'Réyon pou pwen yo',
|
rayonScore: 'Riyon pou pwen',
|
||||||
commune: 'Komin',
|
commune: 'Komin',
|
||||||
region: 'Péyi',
|
region: 'Péyi',
|
||||||
suivant: 'Koté swivan',
|
suivant: 'Koté ki ka vin',
|
||||||
voirBilan: 'Wè bilan-an',
|
voirBilan: 'Gadé rézilta',
|
||||||
rejouer: 'Rèjwé',
|
rejouer: 'Jwé ankò',
|
||||||
retourAccueil: 'Tounen an lakay'
|
retourAccueil: 'Viré an lakou'
|
||||||
},
|
},
|
||||||
lacune: {
|
lacune: {
|
||||||
titre: 'Pwen blindé — Sa pa dokimanté',
|
titre: 'Pwen blindé — Sa pa dokimanté',
|
||||||
texte:
|
texte:
|
||||||
'Koté sa-a égzisté, men i pa ni on paj asou Wikipédia ni on fich asou Wikidata. Pou péyi nou, sé on zafè enpòtan anpil : si nou pa dokimanté pwòp téritwa nou, listwa épi jéwografi nou kay disparèt asou kat nimérik épi labaz donné lemonn yo (ki manm ka bay manjé a lintelijans atifisyèl).',
|
'Koté-lasa la pou vré, men i pa ni paj asou Wikipédia ni fich asou Wikidata. Pou péyi an nou, sé on gwo zafè : si nou menm pa ka dokimanté tè an nou, listwa é jéyografi an nou ka disparèt adan kat nimerik é bazdédòn oliwon latè (jis entélijans artifisyèl pa ké konnèt nou).',
|
||||||
cta: 'Kontribyé sou Wikipédia',
|
cta: 'Kontribyé sou Wikipédia',
|
||||||
guide: 'Ou bizwen èd pou koumansé ? Swiv gid OKI « Kijan pou kontribyé sou Wikipédia ».',
|
guide: 'Ou bizwen on koudmen pou koumansé ? Gadé gid OKI « Kijan pou mété zafè asou Wikipédia ».',
|
||||||
guideLien: 'Ouvri gid kontribisyon-an'
|
guideLien: 'Wouvè gid pou kontribiyé'
|
||||||
},
|
},
|
||||||
lacuneFr: {
|
lacuneFr: {
|
||||||
titre: 'Pwen blindé — Pa nyen an fransé',
|
titre: 'Pa nyen an fransé pou konnyé-la',
|
||||||
texte:
|
texte:
|
||||||
'Fich Wikidata koté sa-a égzisté, mé pésonn pòkò ékri atik Wikipédia-la an fransé. Ou sa tradwi’y oben réyé’y : chak atik ka konté pou téritwa nou égzisté adan ansiklopedi fransé-a.',
|
'Fich Wikidata a koté-lasa la, men pèsonn pòkò maké atik Wikipédia an fransé. Ou pé tradwi-y oben kréyé-y : chak atik ni valè pou péyi an nou égzisté adan lansiklopédi-la.',
|
||||||
cta: 'Tradwi oben réyé atik-la',
|
cta: 'Tradwi oben fè atik-la',
|
||||||
ctaWikidata: 'Wè fich Wikidata-la'
|
ctaWikidata: 'Gadé fich Wikidata-la'
|
||||||
},
|
},
|
||||||
defi: {
|
defi: {
|
||||||
bilan: 'Bilan défi-a',
|
bilan: 'Bilan défi-a',
|
||||||
@@ -96,7 +94,6 @@ const gcf: Dict = {
|
|||||||
telecharger: 'Téléchajé foto-a',
|
telecharger: 'Téléchajé foto-a',
|
||||||
taPosition: 'Pozisyon ou',
|
taPosition: 'Pozisyon ou',
|
||||||
positionReelle: 'Rèl pozisyon-an',
|
positionReelle: 'Rèl pozisyon-an',
|
||||||
manche: 'Mannèk',
|
|
||||||
titreSeed: 'Défi — seed',
|
titreSeed: 'Défi — seed',
|
||||||
copierLien: 'Kopié lyen défi-a',
|
copierLien: 'Kopié lyen défi-a',
|
||||||
lienCopie: 'Lyen kopié !'
|
lienCopie: 'Lyen kopié !'
|
||||||
@@ -115,10 +112,45 @@ const gcf: Dict = {
|
|||||||
zoomOut: 'Dézoumé',
|
zoomOut: 'Dézoumé',
|
||||||
carteRegionsLabel: 'Kat 4 péyi yo : Gwadloup, Matinik, Giyan, Léryinyon'
|
carteRegionsLabel: 'Kat 4 péyi yo : Gwadloup, Matinik, Giyan, Léryinyon'
|
||||||
},
|
},
|
||||||
|
theme: {
|
||||||
|
passerClair: 'Mété tèm klè',
|
||||||
|
passerSombre: 'Mété tèm nwè'
|
||||||
|
},
|
||||||
|
commandBar: {
|
||||||
|
titre: 'Palèt lentansyon é komann',
|
||||||
|
placeholder: 'Mété on aksyon, on mòd, on péyi (egz. Gwadloup, Défi, Tèm)…',
|
||||||
|
aucunResultat: 'Pa ni ayen pou',
|
||||||
|
catModes: 'Mòd jwé',
|
||||||
|
catRegions: 'Péyi yo',
|
||||||
|
catActions: 'Aksyon vitman',
|
||||||
|
mesStats: 'Estatistik lokal an mwen',
|
||||||
|
basculerTheme: 'Chanje tèm (Nwè / Klè)',
|
||||||
|
basculerLangue: 'Chanje lang (Fransé / Kréyòl)',
|
||||||
|
raccourci: 'Wouvè palèt-la (Ctrl+K)'
|
||||||
|
},
|
||||||
|
stats: {
|
||||||
|
titre: 'Estatistik lokal an mwen',
|
||||||
|
sousTitre: 'Dòn rété anlè zouti a-w sèlman (100% privé é souvren)',
|
||||||
|
fermer: 'Fèmé fénèt estatistik',
|
||||||
|
partiesJouees: 'Pati jwé',
|
||||||
|
meilleurScore: 'Mèyè nòt',
|
||||||
|
scoreMoyen: 'Nòt mwayen',
|
||||||
|
lieuxDecouverts: 'Koté ou wè',
|
||||||
|
parRegion: 'Prézizyon pa péyi',
|
||||||
|
aucunePartie: 'Pòkò ni manch',
|
||||||
|
dernieresParties: 'Dènyé pati yo',
|
||||||
|
exporterJson: 'Èspòté dòn an mwen (JSON)',
|
||||||
|
effacerDonnees: 'Fasi dòn lokal',
|
||||||
|
confirmerEffacer: 'Konfirmé siprésyon'
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
texteFederation: 'On sèvis lib é souvren ki fèt pa ORGANISATION KA INTERNATIONALE',
|
||||||
|
mentionLibre: 'Kòd anba lisans MIT · Dòn lib OpenStreetMap & Wikipédia',
|
||||||
|
donner: 'Pòté an koudmen asou Liberapay'
|
||||||
|
},
|
||||||
micro: {
|
micro: {
|
||||||
bravo: 'Bravo !',
|
bravo: 'Bravo !',
|
||||||
kiteSaYe: 'Kité sa ye ?',
|
kiteSaYe: 'Kité sa ye ?'
|
||||||
pwenBlinde: 'Pwen blindé'
|
|
||||||
},
|
},
|
||||||
langue: {
|
langue: {
|
||||||
fr: 'Français',
|
fr: 'Français',
|
||||||
|
|||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { dureeMs, easeSyncope, prefersReducedMotion } from './tokens';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Action `use:compte={cible}` — count-up de 0 (ou de la valeur précédente)
|
||||||
|
* vers la cible, en `--dur-compte` avec easing syncopé. L'écriture se fait
|
||||||
|
* directement dans le DOM via rAF : jamais d'état réactif par frame.
|
||||||
|
*
|
||||||
|
* Reduced-motion : la valeur finale est écrite immédiatement. Le markup doit
|
||||||
|
* contenir la valeur finale (état SSR / premier rendu) et être doublé d'un
|
||||||
|
* équivalent non animé pour les lecteurs d'écran (le span animé porte
|
||||||
|
* aria-hidden="true" chez l'appelant).
|
||||||
|
*/
|
||||||
|
export function compte(node: HTMLElement, cible: number) {
|
||||||
|
let raf: number | null = null;
|
||||||
|
let affiche = 0;
|
||||||
|
|
||||||
|
function ecrire(valeur: number): void {
|
||||||
|
affiche = valeur;
|
||||||
|
node.textContent = String(valeur);
|
||||||
|
}
|
||||||
|
|
||||||
|
function jouer(vers: number): void {
|
||||||
|
if (raf !== null) {
|
||||||
|
cancelAnimationFrame(raf);
|
||||||
|
raf = null;
|
||||||
|
}
|
||||||
|
const depuis = affiche;
|
||||||
|
const duree = dureeMs('--dur-compte');
|
||||||
|
if (prefersReducedMotion() || vers === depuis || duree <= 0) {
|
||||||
|
ecrire(vers);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const t0 = performance.now();
|
||||||
|
const tick = (t: number): void => {
|
||||||
|
const p = Math.min(1, (t - t0) / duree);
|
||||||
|
ecrire(Math.round(depuis + (vers - depuis) * easeSyncope(p)));
|
||||||
|
if (p < 1) {
|
||||||
|
raf = requestAnimationFrame(tick);
|
||||||
|
} else {
|
||||||
|
raf = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
raf = requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
|
||||||
|
jouer(cible);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(nouvelleCible: number) {
|
||||||
|
jouer(nouvelleCible);
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
if (raf !== null) cancelAnimationFrame(raf);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
/**
|
||||||
|
* Action `use:reveal` — ajoute la classe `in` à l'entrée dans le viewport.
|
||||||
|
*
|
||||||
|
* Variante SSR de la brique o-k-i.net : l'état caché initial est rendu côté
|
||||||
|
* serveur (`data-reveal` + `--d` directement dans le markup), et n'est actif
|
||||||
|
* que sous `html.js` (classe posée par le script de app.html) ET
|
||||||
|
* `prefers-reduced-motion: no-preference` (media query dans oki.css). Sans JS
|
||||||
|
* ou en reduced-motion, le contenu est intégralement visible.
|
||||||
|
*
|
||||||
|
* @param actif false = pas d'observation (ex. CarteRegions sans cascade)
|
||||||
|
*/
|
||||||
|
export function reveal(node: Element, actif: boolean = true) {
|
||||||
|
let observer: IntersectionObserver | null = null;
|
||||||
|
|
||||||
|
function observerNoeud(actifCourant: boolean): void {
|
||||||
|
observer?.disconnect();
|
||||||
|
observer = null;
|
||||||
|
if (!actifCourant) return;
|
||||||
|
observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
node.classList.add('in');
|
||||||
|
observer?.disconnect();
|
||||||
|
observer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ threshold: 0.15, rootMargin: '0px 0px -5% 0px' }
|
||||||
|
);
|
||||||
|
observer.observe(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
observerNoeud(actif);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(nouvelActif: boolean) {
|
||||||
|
observerNoeud(nouvelActif);
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
observer?.disconnect();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { browser } from '$app/environment';
|
||||||
|
|
||||||
|
/** Gate unique prefers-reduced-motion (playbook §6). */
|
||||||
|
export function prefersReducedMotion(): boolean {
|
||||||
|
return browser && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stagger syncopé de marque OKI (3+3+2) — charte §3.
|
||||||
|
* Délais en ms pour l'index donné (cycle de 8 éléments).
|
||||||
|
*/
|
||||||
|
const SYNCOPATED_DELAYS = [0, 120, 300, 360, 600, 660, 900, 960];
|
||||||
|
|
||||||
|
export function syncopatedDelay(index: number): number {
|
||||||
|
const cycle = Math.floor(index / 8);
|
||||||
|
return SYNCOPATED_DELAYS[index % 8] + cycle * 1200;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Lit une durée depuis les tokens CSS de oki.css (--dur-*) — les valeurs ne
|
||||||
|
* sont jamais dupliquées côté appelant. Client uniquement (les transitions
|
||||||
|
* Svelte et les rAF ne courent de toute façon pas côté serveur).
|
||||||
|
* Retourne 0 si le token est absent : l'animation se replie alors en
|
||||||
|
* application immédiate, sans valeur de secours hardcodée.
|
||||||
|
*/
|
||||||
|
export function dureeMs(nom: string): number {
|
||||||
|
if (!browser) return 0;
|
||||||
|
const brut = getComputedStyle(document.documentElement).getPropertyValue(nom).trim();
|
||||||
|
if (brut.endsWith('ms')) return Number.parseFloat(brut) || 0;
|
||||||
|
if (brut.endsWith('s')) return (Number.parseFloat(brut) || 0) * 1000;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** cubic-bezier(0.22, 1, 0.36, 1) — --ease-ka : attaque franche, longue tenue. */
|
||||||
|
export function easeKa(x: number): number {
|
||||||
|
return 1 - Math.pow(1 - x, 5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** cubic-bezier(0.65, 0, 0.35, 1) — --ease-syncope : symétrique, urgent. */
|
||||||
|
export function easeSyncope(x: number): number {
|
||||||
|
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
|
||||||
|
import { dureeMs, prefersReducedMotion } from './tokens';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Transitions d'état du jeu — enrobent les transitions natives Svelte avec :
|
||||||
|
* 1. des durées lues depuis les tokens CSS (--dur-*, jamais dupliquées) ;
|
||||||
|
* 2. la gate prefers-reduced-motion (durée 0 → état final immédiat).
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** Fondu simple à la durée `--dur-mesure`. */
|
||||||
|
export function fonduMesure(node: Element, params: FadeParams = {}) {
|
||||||
|
if (prefersReducedMotion()) return fade(node, { ...params, duration: 0 });
|
||||||
|
return fade(node, { duration: dureeMs('--dur-mesure'), ...params });
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Montée courte (translateY + fondu) à la durée `--dur-mesure`. */
|
||||||
|
export function monteeMesure(node: Element, params: FlyParams = {}) {
|
||||||
|
if (prefersReducedMotion()) return fly(node, { ...params, duration: 0, y: 0 });
|
||||||
|
return fly(node, { duration: dureeMs('--dur-mesure'), y: 14, ...params });
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
import { defi } from '$lib/stores/defi.svelte';
|
||||||
|
|
||||||
|
/** Génère une image canvas téléchargeable : score total + manches du défi. */
|
||||||
|
export function partager(): void {
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.width = 1080;
|
||||||
|
canvas.height = 1080;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
// Fond sable + bandeau vert profond
|
||||||
|
ctx.fillStyle = '#f5efe2';
|
||||||
|
ctx.fillRect(0, 0, 1080, 1080);
|
||||||
|
ctx.fillStyle = '#0b3d2e';
|
||||||
|
ctx.fillRect(0, 0, 1080, 240);
|
||||||
|
|
||||||
|
ctx.fillStyle = '#fffdf8';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.font = '800 96px system-ui, sans-serif';
|
||||||
|
ctx.fillText('JWE', 540, 130);
|
||||||
|
ctx.font = '600 44px system-ui, sans-serif';
|
||||||
|
ctx.fillText(t().modes.defi, 540, 200);
|
||||||
|
|
||||||
|
// Score total
|
||||||
|
ctx.fillStyle = '#0b3d2e';
|
||||||
|
ctx.font = '800 150px system-ui, sans-serif';
|
||||||
|
ctx.fillText(`${defi.total}`, 540, 420);
|
||||||
|
ctx.fillStyle = '#5a6b62';
|
||||||
|
ctx.font = '500 40px system-ui, sans-serif';
|
||||||
|
ctx.fillText(t().defi.scoreTotal, 540, 480);
|
||||||
|
|
||||||
|
// Manches : lieu, région, score
|
||||||
|
let y = 580;
|
||||||
|
for (const [i, m] of defi.manches.entries()) {
|
||||||
|
ctx.fillStyle = i % 2 === 0 ? '#e3efe7' : '#f5efe2';
|
||||||
|
ctx.fillRect(90, y - 44, 900, 74);
|
||||||
|
ctx.fillStyle = '#22302a';
|
||||||
|
ctx.textAlign = 'left';
|
||||||
|
ctx.font = '600 34px system-ui, sans-serif';
|
||||||
|
ctx.fillText(`${i + 1}. ${m.result.nom}`, 120, y);
|
||||||
|
ctx.fillStyle = '#17624a';
|
||||||
|
ctx.font = '500 30px system-ui, sans-serif';
|
||||||
|
ctx.fillText(t().regions[m.result.region], 120, y + 34);
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
ctx.fillStyle = '#0b3d2e';
|
||||||
|
ctx.font = '800 40px system-ui, sans-serif';
|
||||||
|
ctx.fillText(`${m.result.score}`, 960, y + 8);
|
||||||
|
y += 92;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.fillStyle = '#5a6b62';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.font = '500 30px system-ui, sans-serif';
|
||||||
|
ctx.fillText('labola.o-k-i.net', 540, 1010);
|
||||||
|
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = canvas.toDataURL('image/png');
|
||||||
|
a.download = 'jwe-defi.png';
|
||||||
|
a.click();
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
/** Constantes du site — domaine public de production (cf. jwe_ynh/manifest.toml). */
|
||||||
|
export const SITE_URL = 'https://jwe.o-k-i.net';
|
||||||
|
export const SITE_NAME = 'JWE';
|
||||||
@@ -0,0 +1,162 @@
|
|||||||
|
import type { GameMode, Region } from '$lib/types';
|
||||||
|
|
||||||
|
export interface RoundRecord {
|
||||||
|
nom: string;
|
||||||
|
commune: string;
|
||||||
|
region: string;
|
||||||
|
distanceKm: number | null;
|
||||||
|
score: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GameRecord {
|
||||||
|
id: string;
|
||||||
|
timestamp: number;
|
||||||
|
mode: GameMode;
|
||||||
|
region: Region | 'TOUTES';
|
||||||
|
scoreTotal: number;
|
||||||
|
roundsCount: number;
|
||||||
|
rounds: RoundRecord[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegionStats {
|
||||||
|
rounds: number;
|
||||||
|
scoreTotal: number;
|
||||||
|
distanceTotalKm: number;
|
||||||
|
scoreMoyen: number;
|
||||||
|
distanceMoyenneKm: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LocalStats {
|
||||||
|
totalParties: number;
|
||||||
|
totalRounds: number;
|
||||||
|
meilleurScore: number;
|
||||||
|
scoreMoyen: number;
|
||||||
|
distanceMoyenneKm: number;
|
||||||
|
lieuxUniques: number;
|
||||||
|
parRegion: Record<Region, RegionStats>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'jwe_local_history';
|
||||||
|
|
||||||
|
let games = $state<GameRecord[]>([]);
|
||||||
|
|
||||||
|
export function initHistory(): void {
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (raw) {
|
||||||
|
games = JSON.parse(raw);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Impossible de charger l’historique local', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveHistory(): void {
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
try {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(games));
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Impossible de sauvegarder l’historique local', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ajouterPartie(record: Omit<GameRecord, 'id' | 'timestamp'>): void {
|
||||||
|
const newRecord: GameRecord = {
|
||||||
|
...record,
|
||||||
|
id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : String(Date.now()),
|
||||||
|
timestamp: Date.now()
|
||||||
|
};
|
||||||
|
games = [newRecord, ...games].slice(0, 100); // Conserve les 100 dernières parties
|
||||||
|
saveHistory();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getHistorique(): GameRecord[] {
|
||||||
|
return games;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getStats(): LocalStats {
|
||||||
|
const totalParties = games.length;
|
||||||
|
let totalRounds = 0;
|
||||||
|
let scoreCumule = 0;
|
||||||
|
let distanceCumulee = 0;
|
||||||
|
let distanceCount = 0;
|
||||||
|
let meilleurScore = 0;
|
||||||
|
const lieuxSet = new Set<string>();
|
||||||
|
|
||||||
|
const initRegion = (): RegionStats => ({
|
||||||
|
rounds: 0,
|
||||||
|
scoreTotal: 0,
|
||||||
|
distanceTotalKm: 0,
|
||||||
|
scoreMoyen: 0,
|
||||||
|
distanceMoyenneKm: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const parRegion: Record<Region, RegionStats> = {
|
||||||
|
GUADELOUPE: initRegion(),
|
||||||
|
MARTINIQUE: initRegion(),
|
||||||
|
GUYANE: initRegion(),
|
||||||
|
REUNION: initRegion()
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const g of games) {
|
||||||
|
if (g.scoreTotal > meilleurScore) meilleurScore = g.scoreTotal;
|
||||||
|
scoreCumule += g.scoreTotal;
|
||||||
|
|
||||||
|
for (const r of g.rounds) {
|
||||||
|
totalRounds++;
|
||||||
|
if (r.distanceKm !== null) {
|
||||||
|
distanceCumulee += r.distanceKm;
|
||||||
|
distanceCount++;
|
||||||
|
}
|
||||||
|
if (r.nom) lieuxSet.add(r.nom);
|
||||||
|
|
||||||
|
const reg = r.region as Region;
|
||||||
|
if (parRegion[reg]) {
|
||||||
|
parRegion[reg].rounds++;
|
||||||
|
parRegion[reg].scoreTotal += r.score;
|
||||||
|
if (r.distanceKm !== null) {
|
||||||
|
parRegion[reg].distanceTotalKm += r.distanceKm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const reg of ['GUADELOUPE', 'MARTINIQUE', 'GUYANE', 'REUNION'] as Region[]) {
|
||||||
|
const st = parRegion[reg];
|
||||||
|
if (st.rounds > 0) {
|
||||||
|
st.scoreMoyen = Math.round(st.scoreTotal / st.rounds);
|
||||||
|
st.distanceMoyenneKm = Math.round((st.distanceTotalKm / st.rounds) * 10) / 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalParties,
|
||||||
|
totalRounds,
|
||||||
|
meilleurScore,
|
||||||
|
scoreMoyen: totalParties > 0 ? Math.round(scoreCumule / totalParties) : 0,
|
||||||
|
distanceMoyenneKm: distanceCount > 0 ? Math.round((distanceCumulee / distanceCount) * 10) / 10 : 0,
|
||||||
|
lieuxUniques: lieuxSet.size,
|
||||||
|
parRegion
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function exporterHistorique(): void {
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(games, null, 2));
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.setAttribute('href', dataStr);
|
||||||
|
a.setAttribute('download', `jwe-historique-${new Date().toISOString().slice(0, 10)}.json`);
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
a.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function reinitialiserHistorique(): void {
|
||||||
|
games = [];
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,527 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
STYLES DU JEU — /jeu/[mode] et /defi/[seed]
|
||||||
|
ORGANISATION KA INTERNATIONALE · Layout viewport 100dvh & Dark/Light OKI
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.jeu {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.etat {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Split photo | carte — */
|
||||||
|
.split {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile : la photo s'adapte (plafond ~42dvh), la carte garde au minimum
|
||||||
|
35dvh utiles + la barre de sauts (~3,5rem). */
|
||||||
|
.panneau-photo {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-height: 5rem;
|
||||||
|
max-height: 42dvh;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-carte {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-height: calc(35dvh + 3.5rem);
|
||||||
|
display: flex;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-carte > * {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* État résultat : le panneau photo devient une fiche scrollable interne. */
|
||||||
|
.split.resultat .panneau-photo {
|
||||||
|
max-height: none;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split.resultat .panneau-carte {
|
||||||
|
min-height: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resultat-scroll {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: var(--noir-profond);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
padding: 1.2rem;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Puce de statut unique (manche, seed, minuteur) : haut-droite, une ligne — */
|
||||||
|
.statut {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
z-index: 3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.4rem;
|
||||||
|
max-width: calc(100% - 1rem);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-manche {
|
||||||
|
background: var(--noir-profond);
|
||||||
|
color: var(--or-oki);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.25rem 0.8rem;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Seed visible mais discrète */
|
||||||
|
.badge-seed {
|
||||||
|
background: var(--noir-profond);
|
||||||
|
color: var(--muted);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.15rem 0.7rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-timer {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Indices : panneau scrollable en surimpression de la photo — */
|
||||||
|
.indices {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.4rem;
|
||||||
|
right: 0.4rem;
|
||||||
|
bottom: 0.4rem;
|
||||||
|
z-index: 4;
|
||||||
|
max-height: calc(100% - 0.8rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5rem 0.7rem;
|
||||||
|
background: var(--noir-profond);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indice {
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-left: 4px solid var(--or-oki);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Aide « poser le marqueur » — */
|
||||||
|
.aide-carte {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 3.9rem;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 3;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.35rem 0.9rem;
|
||||||
|
max-width: calc(100% - 5rem);
|
||||||
|
background: var(--noir-profond);
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Barre d'actions — */
|
||||||
|
.barre-actions {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.6rem;
|
||||||
|
padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
|
||||||
|
background: var(--noir-profond);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.barre-actions .btn {
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-secondaires {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-secondaires .btn {
|
||||||
|
padding: 0.6rem 0.9rem;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penalite {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valider {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
padding: 0.8rem 1.2rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Écrans très étroits */
|
||||||
|
@media (max-width: 420px) {
|
||||||
|
.actions-secondaires .btn {
|
||||||
|
padding: 0.55rem 0.7rem;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penalite {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valider {
|
||||||
|
padding: 0.7rem 0.9rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Paysage */
|
||||||
|
@media (max-height: 540px) {
|
||||||
|
.panneau-photo {
|
||||||
|
min-height: 3.5rem;
|
||||||
|
max-height: 34dvh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-carte {
|
||||||
|
min-height: 11rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop : split 50/50 */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.split {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0.8rem;
|
||||||
|
padding: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-photo,
|
||||||
|
.split.resultat .panneau-photo {
|
||||||
|
flex: 1 1 50%;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-carte,
|
||||||
|
.split.resultat .panneau-carte {
|
||||||
|
flex: 1 1 50%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aide-carte {
|
||||||
|
left: auto;
|
||||||
|
right: 0.8rem;
|
||||||
|
bottom: 3.4rem;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barre-actions {
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Écran bilan du défi — */
|
||||||
|
.bilan {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilan h1 {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filet-drapeau {
|
||||||
|
display: flex;
|
||||||
|
width: 132px;
|
||||||
|
height: 5px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filet-drapeau .seg {
|
||||||
|
flex: 1;
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filet-drapeau .seg-vert {
|
||||||
|
background: var(--vert-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filet-drapeau .seg-corail {
|
||||||
|
background: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filet-drapeau .seg-bleu {
|
||||||
|
background: var(--turquoise-caraibes);
|
||||||
|
}
|
||||||
|
|
||||||
|
.seed-discret {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total .valeur {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
font-weight: 800;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.total .unite {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilan-carte {
|
||||||
|
width: min(100%, 42.5dvh, 520px);
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--noir-profond);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recap {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recap li {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.6rem;
|
||||||
|
background: var(--noir-profond);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
box-shadow: var(--oki-ombre);
|
||||||
|
padding: 0.5rem 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r-nom {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
}
|
||||||
|
|
||||||
|
.r-region {
|
||||||
|
flex: 1;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r-score {
|
||||||
|
font-weight: 800;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilan-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilan-actions .btn {
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legende {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.puce.joueur {
|
||||||
|
color: var(--rouge-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.puce.reelle {
|
||||||
|
color: var(--vert-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bilan desktop */
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.bilan {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
align-content: start;
|
||||||
|
column-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilan h1,
|
||||||
|
.bilan .seed-discret,
|
||||||
|
.bilan .filet-drapeau,
|
||||||
|
.bilan .total,
|
||||||
|
.bilan .bilan-actions,
|
||||||
|
.bilan .legende {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilan-carte {
|
||||||
|
width: min(100%, 42.5dvh);
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 800px) {
|
||||||
|
.bilan {
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding-top: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilan h1 {
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total .valeur {
|
||||||
|
font-size: 1.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Motion */
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
html.js .resultat-scroll {
|
||||||
|
animation: jwe-montee var(--dur-mesure) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.js .split.resultat .panneau-carte {
|
||||||
|
animation: jwe-emphase var(--dur-mesure) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.js .badge-manche,
|
||||||
|
html.js .badge-seed,
|
||||||
|
html.js .badge-timer {
|
||||||
|
animation: oki-pop var(--dur-mesure) var(--ease-ka) backwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.js .filet-drapeau .seg {
|
||||||
|
animation: jwe-filet var(--dur-mesure) var(--ease-ka) backwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.js .filet-drapeau .seg-corail {
|
||||||
|
animation-delay: 120ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.js .filet-drapeau .seg-bleu {
|
||||||
|
animation-delay: 300ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jwe-montee {
|
||||||
|
from {
|
||||||
|
transform: translateY(18px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jwe-emphase {
|
||||||
|
from {
|
||||||
|
transform: scale(0.965);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jwe-filet {
|
||||||
|
from {
|
||||||
|
transform: scaleX(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scaleX(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
+262
-52
@@ -1,32 +1,100 @@
|
|||||||
/* Tokens OKI — doctrine « calm technology » : couleurs ancrées dans le territoire,
|
/* ==========================================================================
|
||||||
un seul accent fort (corail) réservé à l'action primaire (Von Restorff). */
|
CHARTE OKI — DESIGN SYSTEM & TOKENS CANONIQUES
|
||||||
:root {
|
ORGANISATION KA INTERNATIONALE · Thème sombre par défaut + thème clair WCAG AA
|
||||||
--oki-vert: #0b3d2e; /* vert profond — couleur principale de la marque */
|
========================================================================== */
|
||||||
--oki-vert-clair: #17624a;
|
|
||||||
--oki-vert-doux: #e3efe7;
|
|
||||||
--oki-sable: #f5efe2; /* fonds */
|
|
||||||
--oki-sable-fonce: #e7dcc4;
|
|
||||||
--oki-bleu: #175e70; /* bleu caraïbe profond */
|
|
||||||
--oki-bleu-doux: #d9ecef;
|
|
||||||
--oki-corail: #e4572e; /* accent — action primaire UNIQUEMENT */
|
|
||||||
--oki-corail-fonce: #c4441f;
|
|
||||||
--oki-encre: #22302a;
|
|
||||||
--oki-encre-doux: #5a6b62;
|
|
||||||
--oki-blanc: #fffdf8;
|
|
||||||
--oki-lacune-fond: #fdf3e3; /* panneau Cas B « Pwen blindé » — teinte distincte */
|
|
||||||
--oki-lacune-bord: #d9a441;
|
|
||||||
|
|
||||||
--oki-radius: 14px;
|
:root {
|
||||||
--oki-radius-petit: 9px;
|
/* ── Noyau (thème sombre = identité par défaut de la marque OKI) ── */
|
||||||
--oki-ombre: 0 2px 10px rgba(11, 61, 46, 0.14);
|
--noir-oki: #0d0d0d; /* background principal */
|
||||||
--oki-font:
|
--noir-profond: #1a0f1a; /* surface / cartes */
|
||||||
system-ui,
|
--blanc-creme: #fff8e7; /* foreground texte */
|
||||||
-apple-system,
|
--line: rgba(255, 255, 255, 0.1); /* filets & bordures — jamais de gris plein */
|
||||||
'Segoe UI',
|
--or-oki: #fdb813; /* accent : SEULE couleur d'action */
|
||||||
Roboto,
|
--or-clair: #ffe066; /* survol / hover action */
|
||||||
sans-serif;
|
--rouge-oki: #ff1654; /* signal, alerte, ponctuation */
|
||||||
|
--vert-oki: #00d66c; /* succès, validation */
|
||||||
|
|
||||||
|
/* ── Palette étendue ── */
|
||||||
|
--turquoise-caraibes: #00ced1;
|
||||||
|
--jaune-soleil: #ffd700;
|
||||||
|
--orange-flamme: #ff6b35;
|
||||||
|
--violet-nuit: #6b2d5c;
|
||||||
|
--bleu-ocean: #0077be;
|
||||||
|
--gris-sombre: #2d1b2e;
|
||||||
|
|
||||||
|
/* ── Sémantique dérivée & surfaces ── */
|
||||||
|
--muted: color-mix(in srgb, var(--blanc-creme) 72%, transparent);
|
||||||
|
--card-bg: rgba(255, 255, 255, 0.04);
|
||||||
|
--card-bg-hover: rgba(255, 255, 255, 0.07);
|
||||||
|
--border-card: 1px solid var(--line);
|
||||||
|
--border-btn: 2px solid var(--or-oki);
|
||||||
|
|
||||||
|
/* ── Formes & Typographie ── */
|
||||||
|
--radius-sm: 3px; /* boutons, tags, badges — angles nets */
|
||||||
|
--radius-md: 6px; /* cartes, conteneurs */
|
||||||
|
--radius-lg: 10px;
|
||||||
|
--font-display: 'Archivo', 'Arial Black', -apple-system, sans-serif;
|
||||||
|
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
|
||||||
|
/* ── Alias rétro-compatibles JWE ── */
|
||||||
|
--oki-vert: var(--vert-oki);
|
||||||
|
--oki-vert-clair: #17624a;
|
||||||
|
--oki-vert-doux: color-mix(in srgb, var(--vert-oki) 16%, var(--noir-profond));
|
||||||
|
--oki-sable: var(--noir-oki);
|
||||||
|
--oki-sable-fonce: var(--noir-profond);
|
||||||
|
--oki-bleu: var(--turquoise-caraibes);
|
||||||
|
--oki-bleu-doux: color-mix(in srgb, var(--turquoise-caraibes) 15%, var(--noir-profond));
|
||||||
|
--oki-corail: var(--or-oki);
|
||||||
|
--oki-corail-fonce: var(--or-clair);
|
||||||
|
--oki-encre: var(--blanc-creme);
|
||||||
|
--oki-encre-doux: var(--muted);
|
||||||
|
--oki-blanc: var(--noir-profond);
|
||||||
|
--oki-lacune-fond: color-mix(in srgb, var(--or-oki) 8%, var(--noir-profond));
|
||||||
|
--oki-lacune-bord: var(--or-oki);
|
||||||
|
--oki-radius: var(--radius-md);
|
||||||
|
--oki-radius-petit: var(--radius-sm);
|
||||||
|
--oki-ombre: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||||
|
--oki-font: var(--font-body);
|
||||||
|
|
||||||
|
/* ── Cadences Gwoka (motion) ── */
|
||||||
|
--ease-ka: cubic-bezier(0.22, 1, 0.36, 1); /* temps fort : attaque franche, longue tenue */
|
||||||
|
--ease-syncope: cubic-bezier(0.65, 0, 0.35, 1); /* contretemps : symétrique, urgent */
|
||||||
|
--dur-tanbou: 120ms; /* double-croche — micro-interactions, hovers */
|
||||||
|
--dur-mesure: 480ms; /* une mesure — entrées, transitions */
|
||||||
|
--dur-phrase: 960ms; /* deux mesures — moments solennels */
|
||||||
|
--dur-compte: 800ms; /* count-up du score */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Thème clair — opt-in (html.light-theme), accents assombris WCAG AA (ratio ≥ 4.5:1) ── */
|
||||||
|
html.light-theme {
|
||||||
|
--noir-oki: #fff8e7; /* fond crème clair */
|
||||||
|
--blanc-creme: #0d0d0d; /* texte encre noir */
|
||||||
|
--noir-profond: #f5f0e8; /* surface carte */
|
||||||
|
--gris-sombre: #e8ddd0;
|
||||||
|
|
||||||
|
/* Accents assombris pour contraste AA */
|
||||||
|
--or-oki: #b87a00;
|
||||||
|
--or-clair: #d99000;
|
||||||
|
--vert-oki: #006b3d;
|
||||||
|
--rouge-oki: #a01030;
|
||||||
|
--turquoise-caraibes: #006b75;
|
||||||
|
--bleu-ocean: #004b7f;
|
||||||
|
--jaune-soleil: #b87a00;
|
||||||
|
--orange-flamme: #c85000;
|
||||||
|
|
||||||
|
--line: rgba(0, 0, 0, 0.12);
|
||||||
|
--card-bg: rgba(0, 0, 0, 0.03);
|
||||||
|
--card-bg-hover: rgba(0, 0, 0, 0.06);
|
||||||
|
--muted: color-mix(in srgb, var(--blanc-creme) 70%, transparent);
|
||||||
|
|
||||||
|
--oki-vert-doux: #e3efe7;
|
||||||
|
--oki-bleu-doux: #d9ecef;
|
||||||
|
--oki-lacune-fond: #fdf3e3;
|
||||||
|
--oki-lacune-bord: #b87a00;
|
||||||
|
--oki-ombre: 0 4px 16px rgba(13, 13, 13, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Reset & Base ── */
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@@ -35,77 +103,219 @@ html,
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background: var(--noir-oki);
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
line-height: 1.5;
|
||||||
|
transition: background-color var(--dur-mesure) var(--ease-ka), color var(--dur-mesure) var(--ease-ka);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
h1,
|
||||||
font-family: var(--oki-font);
|
h2,
|
||||||
color: var(--oki-encre);
|
h3,
|
||||||
background: var(--oki-sable);
|
h4,
|
||||||
line-height: 1.5;
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
color: var(--blanc-creme);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* — Boutons — */
|
/* ── Signature Flag-Bar (bandeau 6px, 4 segments francs sans dégradé) ── */
|
||||||
|
.flag-bar {
|
||||||
|
height: 6px;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#0d0d0d 0 25%,
|
||||||
|
var(--or-oki) 25% 50%,
|
||||||
|
var(--vert-oki) 50% 75%,
|
||||||
|
var(--rouge-oki) 75% 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.light-theme .flag-bar {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#000000 0 25%,
|
||||||
|
var(--or-oki) 25% 50%,
|
||||||
|
var(--vert-oki) 50% 75%,
|
||||||
|
var(--rouge-oki) 75% 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flag-chip (mini flag-bar de section 56x6px) */
|
||||||
|
.flag-chip {
|
||||||
|
display: inline-block;
|
||||||
|
width: 56px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#0d0d0d 0 25%,
|
||||||
|
var(--or-oki) 25% 50%,
|
||||||
|
var(--vert-oki) 50% 75%,
|
||||||
|
var(--rouge-oki) 75% 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.light-theme .flag-chip {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#000000 0 25%,
|
||||||
|
var(--or-oki) 25% 50%,
|
||||||
|
var(--vert-oki) 50% 75%,
|
||||||
|
var(--rouge-oki) 75% 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Boutons OKI ── */
|
||||||
.btn {
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
overflow: hidden;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
border: none;
|
border-radius: var(--radius-sm);
|
||||||
border-radius: var(--oki-radius-petit);
|
padding: 0.75rem 1.4rem;
|
||||||
padding: 0.85rem 1.6rem;
|
font-size: 1rem;
|
||||||
font-size: 1.05rem;
|
font-weight: 700;
|
||||||
font-weight: 650;
|
font-family: var(--font-display);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: background-color 0.15s ease;
|
transition:
|
||||||
|
background-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
border-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
transform var(--dur-tanbou) var(--ease-ka),
|
||||||
|
box-shadow var(--dur-tanbou) var(--ease-ka);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:focus-visible,
|
.btn:focus-visible,
|
||||||
a:focus-visible,
|
a:focus-visible,
|
||||||
[tabindex]:focus-visible {
|
[tabindex]:focus-visible {
|
||||||
outline: 3px solid var(--oki-bleu);
|
outline: 2px solid var(--or-oki);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Action primaire : le seul élément fortement coloré de l'écran */
|
/* Action primaire : l'or OKI porte toute l'action */
|
||||||
.btn-primaire {
|
.btn-primaire {
|
||||||
background: var(--oki-corail);
|
background: var(--or-oki);
|
||||||
color: #fff;
|
color: #0d0d0d;
|
||||||
|
border: 2px solid var(--or-oki);
|
||||||
box-shadow: var(--oki-ombre);
|
box-shadow: var(--oki-ombre);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primaire:hover {
|
html.light-theme .btn-primaire {
|
||||||
background: var(--oki-corail-fonce);
|
background: var(--or-oki);
|
||||||
|
color: #ffffff;
|
||||||
|
border: 2px solid var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Balayage hover doré */
|
||||||
|
.btn-primaire::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
background: var(--or-clair);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left center;
|
||||||
|
transition: transform var(--dur-tanbou) var(--ease-syncope);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primaire:not(:disabled):hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: var(--or-clair);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primaire:not(:disabled):hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primaire:disabled {
|
.btn-primaire:disabled {
|
||||||
background: var(--oki-sable-fonce);
|
background: var(--card-bg);
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
|
border-color: var(--line);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Action secondaire */
|
||||||
.btn-secondaire {
|
.btn-secondaire {
|
||||||
background: var(--oki-vert-doux);
|
background: var(--card-bg);
|
||||||
color: var(--oki-vert);
|
color: var(--blanc-creme);
|
||||||
|
border: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondaire:hover {
|
.btn-secondaire:hover {
|
||||||
background: #d2e5d9;
|
background: var(--card-bg-hover);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
color: var(--or-oki);
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Action tertiaire / discret */
|
||||||
.btn-tertiaire {
|
.btn-tertiaire {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--oki-vert-clair);
|
color: var(--blanc-creme);
|
||||||
border: 1.5px solid var(--oki-vert-clair);
|
border: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-tertiaire:hover {
|
.btn-tertiaire:hover {
|
||||||
background: var(--oki-vert-doux);
|
border-color: var(--blanc-creme);
|
||||||
|
background: var(--card-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Accessibilité & Utilitaires ── */
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
clip-path: inset(50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations de reveal syncopées */
|
||||||
|
@keyframes oki-pop {
|
||||||
|
from {
|
||||||
|
transform: scale(0.6);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
html.js [data-reveal] {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(24px);
|
||||||
|
transition:
|
||||||
|
opacity var(--dur-mesure) var(--ease-ka) var(--d, 0ms),
|
||||||
|
transform var(--dur-mesure) var(--ease-ka) var(--d, 0ms);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.js [data-reveal].in {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|||||||
+176
-22
@@ -2,81 +2,235 @@
|
|||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import '$lib/styles/oki.css';
|
import '$lib/styles/oki.css';
|
||||||
import LangSwitch from '$lib/components/LangSwitch.svelte';
|
import LangSwitch from '$lib/components/LangSwitch.svelte';
|
||||||
|
import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
|
||||||
|
import FlagBar from '$lib/components/FlagBar.svelte';
|
||||||
|
import CommandBar from '$lib/components/CommandBar.svelte';
|
||||||
|
import StatsModal from '$lib/components/StatsModal.svelte';
|
||||||
import { initLang, t } from '$lib/i18n/store.svelte';
|
import { initLang, t } from '$lib/i18n/store.svelte';
|
||||||
|
import { initHistory } from '$lib/stores/history.svelte';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
|
let commandBarOuvert = $state(false);
|
||||||
|
let statsOuvert = $state(false);
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
initLang();
|
initLang();
|
||||||
|
initHistory();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function onGlobalKeydown(e: KeyboardEvent): void {
|
||||||
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
|
||||||
|
e.preventDefault();
|
||||||
|
commandBarOuvert = !commandBarOuvert;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:window onkeydown={onGlobalKeydown} />
|
||||||
|
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<header class="entete">
|
<header class="entete">
|
||||||
<a href="/" class="logo" aria-label="JWE — accueil">
|
<a href="/" class="logo" aria-label="JWE — accueil">
|
||||||
<svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true">
|
<svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true" class="logo-icone">
|
||||||
<circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5" />
|
<circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5" />
|
||||||
<path d="M16 7 L21 22 L16 18.5 L11 22 Z" fill="currentColor" />
|
<path d="M16 6 L22 22 L16 18 L10 22 Z" fill="currentColor" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>{t().app.titre}</span>
|
<span class="logo-texte">{t().app.titre}</span>
|
||||||
</a>
|
</a>
|
||||||
<nav class="nav-lang">
|
|
||||||
<a href="/explorer" class="lien-explorer">{t().modes.explorer}</a>
|
<nav class="nav-actions" aria-label="Navigation principale">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-command-bar"
|
||||||
|
onclick={() => (commandBarOuvert = true)}
|
||||||
|
aria-label={t().commandBar.raccourci}
|
||||||
|
title={t().commandBar.raccourci}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<circle cx="11" cy="11" r="8" />
|
||||||
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||||
|
</svg>
|
||||||
|
<span class="texte-cmd">Recherche</span>
|
||||||
|
<kbd class="badge-k">⌘K</kbd>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a href="/explorer" class="lien-nav">{t().modes.explorer}</a>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-nav-icon"
|
||||||
|
onclick={() => (statsOuvert = true)}
|
||||||
|
aria-label={t().stats.titre}
|
||||||
|
title={t().stats.titre}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<line x1="18" y1="20" x2="18" y2="10" />
|
||||||
|
<line x1="12" y1="20" x2="12" y2="4" />
|
||||||
|
<line x1="6" y1="20" x2="6" y2="14" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<ThemeSwitch />
|
||||||
<LangSwitch />
|
<LangSwitch />
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
|
||||||
|
<FlagBar hauteur={5} />
|
||||||
|
|
||||||
|
<main id="contenu-principal">
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<CommandBar
|
||||||
|
ouvert={commandBarOuvert}
|
||||||
|
onfermer={() => (commandBarOuvert = false)}
|
||||||
|
onouvrirStats={() => (statsOuvert = true)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatsModal ouvert={statsOuvert} onfermer={() => (statsOuvert = false)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.app {
|
.app {
|
||||||
min-height: 100dvh;
|
height: 100dvh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
background: var(--noir-oki);
|
||||||
|
color: var(--blanc-creme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.entete {
|
.entete {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0.6rem 1rem;
|
padding: 0.55rem 1rem;
|
||||||
background: var(--oki-vert);
|
background: var(--noir-oki);
|
||||||
color: #fff;
|
border-bottom: 1px solid var(--line);
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
color: #fff;
|
color: var(--blanc-creme);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-lang {
|
.logo-icone {
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-texte {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.8rem;
|
gap: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lien-explorer {
|
.btn-command-bar {
|
||||||
color: var(--oki-vert-doux);
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background: var(--card-bg);
|
||||||
|
color: var(--muted);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.4rem 0.7rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
border-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
background-color var(--dur-tanbou) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-command-bar:hover {
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
background: var(--card-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-k {
|
||||||
|
background: var(--noir-profond);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0.1rem 0.35rem;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lien-nav {
|
||||||
|
color: var(--blanc-creme);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-family: var(--font-display);
|
||||||
font-size: 0.95rem;
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
padding: 0.35rem 0.6rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition:
|
||||||
|
color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
border-color var(--dur-tanbou) var(--ease-ka);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lien-explorer:hover {
|
.lien-nav:hover {
|
||||||
color: #fff;
|
color: var(--or-oki);
|
||||||
|
border-color: var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nav-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
border-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
background-color var(--dur-tanbou) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nav-icon:hover {
|
||||||
|
color: var(--or-oki);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
background: var(--card-bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.texte-cmd,
|
||||||
|
.badge-k {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-command-bar {
|
||||||
|
padding: 0.45rem;
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+364
-87
@@ -1,7 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import CarteRegions from '$lib/components/CarteRegions.svelte';
|
import CarteRegions from '$lib/components/CarteRegions.svelte';
|
||||||
|
import Seo from '$lib/components/Seo.svelte';
|
||||||
|
import FlagBar from '$lib/components/FlagBar.svelte';
|
||||||
import { t } from '$lib/i18n/store.svelte';
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
import { reveal } from '$lib/motion/reveal';
|
||||||
|
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||||
import type { GameMode, Region } from '$lib/types';
|
import type { GameMode, Region } from '$lib/types';
|
||||||
|
|
||||||
type ChoixRegion = Region | 'TOUTES';
|
type ChoixRegion = Region | 'TOUTES';
|
||||||
@@ -34,43 +38,37 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<Seo title={t().app.sousTitre} description={t().app.sousTitre} path="/" />
|
||||||
<title>{t().app.titre} — {t().app.sousTitre}</title>
|
|
||||||
<meta name="description" content={t().app.sousTitre} />
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div class="accueil">
|
<div class="accueil">
|
||||||
<section class="hero">
|
<div class="panneau-gauche">
|
||||||
<h1>{t().app.titre}</h1>
|
<section class="hero" aria-label="Présentation">
|
||||||
<p class="accroche">{t().micro.kiteSaYe}</p>
|
<div class="flag-chip-hero" aria-hidden="true">
|
||||||
|
<span class="flag-chip"></span>
|
||||||
|
</div>
|
||||||
|
<div class="titres-hero">
|
||||||
|
<h1>
|
||||||
|
<span class="masque"><span class="ligne">{t().app.titre}</span></span>
|
||||||
|
</h1>
|
||||||
|
<p class="accroche">
|
||||||
|
<span class="masque"><span class="ligne ligne-retard">{t().micro.kiteSaYe}</span></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<p class="sous-titre">{t().app.sousTitre}</p>
|
<p class="sous-titre">{t().app.sousTitre}</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section aria-labelledby="titre-regions">
|
<section class="sec-modes" aria-labelledby="titre-modes">
|
||||||
<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
|
|
||||||
<div class="carte-accueil">
|
|
||||||
<CarteRegions bind:selection={region} />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-secondaire toutes"
|
|
||||||
class:choisi={region === 'TOUTES'}
|
|
||||||
aria-pressed={region === 'TOUTES'}
|
|
||||||
onclick={() => (region = 'TOUTES')}
|
|
||||||
>
|
|
||||||
{t().regions.TOUTES}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section aria-labelledby="titre-modes">
|
|
||||||
<h2 id="titre-modes">{t().accueil.choixMode}</h2>
|
<h2 id="titre-modes">{t().accueil.choixMode}</h2>
|
||||||
<div class="grille modes">
|
<div class="grille modes">
|
||||||
{#each modes as m (m.id)}
|
{#each modes as m, i (m.id)}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="carte-mode"
|
class="carte-mode"
|
||||||
class:choisi={mode === m.id}
|
class:choisi={mode === m.id}
|
||||||
aria-pressed={mode === m.id}
|
aria-pressed={mode === m.id}
|
||||||
|
data-reveal
|
||||||
|
style:--d="{syncopatedDelay(i)}ms"
|
||||||
|
use:reveal
|
||||||
onclick={() => (mode = m.id)}
|
onclick={() => (mode = m.id)}
|
||||||
>
|
>
|
||||||
<span class="emoji" aria-hidden="true">{m.emoji}</span>
|
<span class="emoji" aria-hidden="true">{m.emoji}</span>
|
||||||
@@ -78,7 +76,13 @@
|
|||||||
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
|
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
<a href="/explorer" class="carte-mode explorer">
|
<a
|
||||||
|
href="/explorer"
|
||||||
|
class="carte-mode explorer"
|
||||||
|
data-reveal
|
||||||
|
style:--d="{syncopatedDelay(4)}ms"
|
||||||
|
use:reveal
|
||||||
|
>
|
||||||
<span class="emoji" aria-hidden="true">🧭</span>
|
<span class="emoji" aria-hidden="true">🧭</span>
|
||||||
<span class="nom">{t().modes.explorer}</span>
|
<span class="nom">{t().modes.explorer}</span>
|
||||||
<span class="desc">{t().modes.explorerDesc}</span>
|
<span class="desc">{t().modes.explorerDesc}</span>
|
||||||
@@ -91,8 +95,8 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="options" aria-labelledby="titre-options">
|
<div class="actions-bloc">
|
||||||
<h2 id="titre-options">{t().accueil.options}</h2>
|
<section class="options" aria-label={t().accueil.options}>
|
||||||
<label class="option-timer">
|
<label class="option-timer">
|
||||||
<input type="checkbox" bind:checked={timer} />
|
<input type="checkbox" bind:checked={timer} />
|
||||||
<span>{t().accueil.timer}</span>
|
<span>{t().accueil.timer}</span>
|
||||||
@@ -105,164 +109,437 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panneau-droite">
|
||||||
|
<section class="sec-regions" aria-labelledby="titre-regions">
|
||||||
|
<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
|
||||||
|
<div class="carte-accueil">
|
||||||
|
<CarteRegions bind:selection={region} cascadeBase={5} />
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-secondaire toutes"
|
||||||
|
class:choisi={region === 'TOUTES'}
|
||||||
|
aria-pressed={region === 'TOUTES'}
|
||||||
|
onclick={() => (region = 'TOUTES')}
|
||||||
|
>
|
||||||
|
{t().regions.TOUTES}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="accueil-footer">
|
||||||
|
<FlagBar hauteur={3} />
|
||||||
|
<div class="footer-contenu">
|
||||||
|
<p class="mention-oki">{t().footer.texteFederation}</p>
|
||||||
|
<div class="liens-footer">
|
||||||
|
<a href="https://o-k-i.net" target="_blank" rel="noopener noreferrer">o-k-i.net</a>
|
||||||
|
<span>·</span>
|
||||||
|
<a href="https://liberapay.com/OKI/donate/" target="_blank" rel="noopener noreferrer">{t().footer.donner}</a>
|
||||||
|
<span>·</span>
|
||||||
|
<a href="https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/JWE" target="_blank" rel="noopener noreferrer">Git</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.accueil {
|
.accueil {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 860px;
|
max-width: 860px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 1.25rem 1rem 7rem; /* espace pour le bouton fixe en zone pouce */
|
padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-gauche {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-droite {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.6rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flag-chip-hero {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titres-hero {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masque {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ligne {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes montee-masque {
|
||||||
|
from {
|
||||||
|
transform: translateY(110%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
:global(html.js) .masque {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.js) .ligne {
|
||||||
|
animation: montee-masque var(--dur-mesure) var(--ease-ka) backwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.js) .ligne-retard {
|
||||||
|
animation-delay: 120ms;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 3rem;
|
font-size: 2.8rem;
|
||||||
font-weight: 800;
|
font-weight: 900;
|
||||||
color: var(--oki-vert);
|
font-family: var(--font-display);
|
||||||
letter-spacing: 0.06em;
|
color: var(--blanc-creme);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accroche {
|
.accroche {
|
||||||
margin: 0.2rem 0 0;
|
margin: 0;
|
||||||
font-size: 1.25rem;
|
font-size: 1.15rem;
|
||||||
font-weight: 650;
|
font-weight: 700;
|
||||||
color: var(--oki-vert-clair);
|
color: var(--or-oki);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sous-titre {
|
.sous-titre {
|
||||||
margin: 0.4rem 0 0;
|
margin: 0.3rem 0 0;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
max-width: 520px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.05rem;
|
font-size: 0.95rem;
|
||||||
color: var(--oki-vert);
|
font-family: var(--font-display);
|
||||||
margin: 0 0 0.6rem;
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
border-left: 3px solid var(--or-oki);
|
||||||
|
padding-left: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grille {
|
.grille {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.7rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modes {
|
.modes {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Carte SVG des régions + bouton « Toutes les régions » */
|
|
||||||
.carte-accueil {
|
.carte-accueil {
|
||||||
max-width: 560px;
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.6rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toutes {
|
.toutes {
|
||||||
border: 2px solid transparent;
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.55rem 1rem;
|
||||||
|
font-size: 0.88rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toutes.choisi {
|
.toutes.choisi {
|
||||||
border-color: var(--oki-vert);
|
border-color: var(--or-oki);
|
||||||
background: var(--oki-vert-doux);
|
background: var(--card-bg-hover);
|
||||||
|
color: var(--or-oki);
|
||||||
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bouton secondaire « Créer un lien de défi », sous la grille des modes */
|
|
||||||
.lien-defi {
|
.lien-defi {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0.8rem auto 0;
|
margin: 0.5rem auto 0;
|
||||||
|
padding: 0.45rem 0.9rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-mode {
|
.carte-mode {
|
||||||
border: 2px solid transparent;
|
border: 1px solid var(--line);
|
||||||
border-radius: var(--oki-radius);
|
border-left: 3px solid var(--line);
|
||||||
background: var(--oki-blanc);
|
border-radius: var(--radius-sm);
|
||||||
|
background: var(--noir-profond);
|
||||||
box-shadow: var(--oki-ombre);
|
box-shadow: var(--oki-ombre);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--oki-encre);
|
color: var(--blanc-creme);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.35rem;
|
justify-content: center;
|
||||||
padding: 1rem 0.8rem;
|
gap: 0.2rem;
|
||||||
|
padding: 0.65rem 0.6rem;
|
||||||
|
transition:
|
||||||
|
transform var(--dur-tanbou) var(--ease-ka),
|
||||||
|
border-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
background-color var(--dur-tanbou) var(--ease-ka);
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-mode .emoji {
|
.carte-mode .emoji {
|
||||||
font-size: 1.6rem;
|
font-size: 1.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-mode .nom {
|
.carte-mode .nom {
|
||||||
font-weight: 750;
|
font-weight: 750;
|
||||||
color: var(--oki-vert);
|
font-family: var(--font-display);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--blanc-creme);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-mode .desc {
|
.carte-mode .desc {
|
||||||
font-size: 0.85rem;
|
font-size: 0.72rem;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-mode:hover {
|
.carte-mode:hover {
|
||||||
border-color: var(--oki-vert-clair);
|
transform: translateY(-2px);
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
border-left-color: var(--or-oki);
|
||||||
|
background: var(--card-bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-mode.choisi {
|
.carte-mode.choisi {
|
||||||
border-color: var(--oki-vert);
|
border-color: var(--or-oki);
|
||||||
background: var(--oki-vert-doux);
|
border-left-color: var(--or-oki);
|
||||||
|
background: var(--card-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carte-mode.choisi .nom {
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-bloc {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.8rem;
|
||||||
|
margin-top: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-timer {
|
.option-timer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.6rem;
|
gap: 0.5rem;
|
||||||
font-size: 1rem;
|
font-size: 0.9rem;
|
||||||
|
color: var(--blanc-creme);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-timer input {
|
.option-timer input {
|
||||||
width: 1.2rem;
|
width: 1.15rem;
|
||||||
height: 1.2rem;
|
height: 1.15rem;
|
||||||
accent-color: var(--oki-vert);
|
accent-color: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bouton « Jouer » : fixe en zone du pouce sur mobile */
|
|
||||||
.zone-pouce {
|
.zone-pouce {
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
|
|
||||||
background: linear-gradient(transparent, var(--oki-sable) 35%);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
flex: 1;
|
||||||
z-index: 10;
|
min-width: 180px;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jouer {
|
.jouer {
|
||||||
width: min(420px, 100%);
|
width: 100%;
|
||||||
padding: 1rem;
|
max-width: 320px;
|
||||||
font-size: 1.2rem;
|
min-height: 44px;
|
||||||
|
padding: 0.75rem 1.4rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accueil-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding-top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contenu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mention-oki {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liens-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.liens-footer a {
|
||||||
|
color: var(--or-oki);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liens-footer a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* — Desktop Single-Screen Layout (Sans Scroll) — */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.accueil {
|
||||||
|
max-width: 1180px;
|
||||||
|
height: 100%;
|
||||||
|
max-height: calc(100dvh - 56px);
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0.6rem 1.4rem 0.4rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
|
||||||
|
grid-template-rows: minmax(0, 1fr) auto;
|
||||||
|
column-gap: 2.2rem;
|
||||||
|
row-gap: 0.3rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-gauche {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0.4rem;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
text-align: left;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titres-hero {
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: 3.6rem;
|
font-size: 2.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accroche {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sous-titre {
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modes {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panneau-droite {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-regions {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 440px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carte-accueil {
|
||||||
|
max-width: 100%;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carte-accueil :global(.carte-regions) {
|
||||||
|
max-height: 52dvh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carte-accueil :global(svg) {
|
||||||
|
max-height: 48dvh;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accueil-footer {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
grid-row: 2;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0.15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback pour petits écrans desktop / hauteurs réduites */
|
||||||
|
@media (min-width: 1024px) and (max-height: 640px) {
|
||||||
|
.accueil {
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,12 +1,20 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
|
import '$lib/styles/jeu.css';
|
||||||
import GameMap from '$lib/components/GameMap.svelte';
|
import GameMap from '$lib/components/GameMap.svelte';
|
||||||
import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
|
import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
|
||||||
import PhotoPanel from '$lib/components/PhotoPanel.svelte';
|
import PhotoPanel from '$lib/components/PhotoPanel.svelte';
|
||||||
import ResultPanel from '$lib/components/ResultPanel.svelte';
|
import ResultPanel from '$lib/components/ResultPanel.svelte';
|
||||||
|
import Seo from '$lib/components/Seo.svelte';
|
||||||
import TimerRing from '$lib/components/TimerRing.svelte';
|
import TimerRing from '$lib/components/TimerRing.svelte';
|
||||||
import { t } from '$lib/i18n/store.svelte';
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
import { compte } from '$lib/motion/countup';
|
||||||
|
import { reveal } from '$lib/motion/reveal';
|
||||||
|
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||||
|
import { fonduMesure, monteeMesure } from '$lib/motion/transitions';
|
||||||
|
import { partager } from '$lib/partage';
|
||||||
import { defi } from '$lib/stores/defi.svelte';
|
import { defi } from '$lib/stores/defi.svelte';
|
||||||
|
import { ajouterPartie } from '$lib/stores/history.svelte';
|
||||||
import type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
|
import type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
|
||||||
|
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
@@ -78,6 +86,21 @@
|
|||||||
if (!res.ok) throw new Error(String(res.status));
|
if (!res.ok) throw new Error(String(res.status));
|
||||||
result = (await res.json()) as GuessResult;
|
result = (await res.json()) as GuessResult;
|
||||||
defi.ajouter({ place, guess: skip ? null : guess, result });
|
defi.ajouter({ place, guess: skip ? null : guess, result });
|
||||||
|
if (defi.termine) {
|
||||||
|
ajouterPartie({
|
||||||
|
mode: 'defi',
|
||||||
|
region: 'TOUTES',
|
||||||
|
scoreTotal: defi.total,
|
||||||
|
roundsCount: defi.manches.length,
|
||||||
|
rounds: defi.manches.map((m) => ({
|
||||||
|
nom: m.result.nom,
|
||||||
|
commune: m.result.commune,
|
||||||
|
region: m.result.region,
|
||||||
|
distanceKm: m.result.distanceKm,
|
||||||
|
score: m.result.score
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
}
|
||||||
} catch {
|
} catch {
|
||||||
erreur = true;
|
erreur = true;
|
||||||
} finally {
|
} finally {
|
||||||
@@ -124,65 +147,6 @@
|
|||||||
setTimeout(() => (lienCopie = false), 2500);
|
setTimeout(() => (lienCopie = false), 2500);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Génère une image canvas téléchargeable : score total + lieux déjà révélés (V3). */
|
|
||||||
function partager(): void {
|
|
||||||
const canvas = document.createElement('canvas');
|
|
||||||
canvas.width = 1080;
|
|
||||||
canvas.height = 1080;
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
if (!ctx) return;
|
|
||||||
|
|
||||||
// Fond sable + bandeau vert profond
|
|
||||||
ctx.fillStyle = '#f5efe2';
|
|
||||||
ctx.fillRect(0, 0, 1080, 1080);
|
|
||||||
ctx.fillStyle = '#0b3d2e';
|
|
||||||
ctx.fillRect(0, 0, 1080, 240);
|
|
||||||
|
|
||||||
ctx.fillStyle = '#fffdf8';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.font = '800 96px system-ui, sans-serif';
|
|
||||||
ctx.fillText('JWE', 540, 130);
|
|
||||||
ctx.font = '600 44px system-ui, sans-serif';
|
|
||||||
ctx.fillText(t().modes.defi, 540, 200);
|
|
||||||
|
|
||||||
// Score total
|
|
||||||
ctx.fillStyle = '#0b3d2e';
|
|
||||||
ctx.font = '800 150px system-ui, sans-serif';
|
|
||||||
ctx.fillText(`${defi.total}`, 540, 420);
|
|
||||||
ctx.fillStyle = '#5a6b62';
|
|
||||||
ctx.font = '500 40px system-ui, sans-serif';
|
|
||||||
ctx.fillText(t().defi.scoreTotal, 540, 480);
|
|
||||||
|
|
||||||
// Manches : lieu, région, score
|
|
||||||
let y = 580;
|
|
||||||
for (const [i, m] of defi.manches.entries()) {
|
|
||||||
ctx.fillStyle = i % 2 === 0 ? '#e3efe7' : '#f5efe2';
|
|
||||||
ctx.fillRect(90, y - 44, 900, 74);
|
|
||||||
ctx.fillStyle = '#22302a';
|
|
||||||
ctx.textAlign = 'left';
|
|
||||||
ctx.font = '600 34px system-ui, sans-serif';
|
|
||||||
ctx.fillText(`${i + 1}. ${m.result.nom}`, 120, y);
|
|
||||||
ctx.fillStyle = '#17624a';
|
|
||||||
ctx.font = '500 30px system-ui, sans-serif';
|
|
||||||
ctx.fillText(t().regions[m.result.region], 120, y + 34);
|
|
||||||
ctx.textAlign = 'right';
|
|
||||||
ctx.fillStyle = '#0b3d2e';
|
|
||||||
ctx.font = '800 40px system-ui, sans-serif';
|
|
||||||
ctx.fillText(`${m.result.score}`, 960, y + 8);
|
|
||||||
y += 92;
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.fillStyle = '#5a6b62';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.font = '500 30px system-ui, sans-serif';
|
|
||||||
ctx.fillText('labola.o-k-i.net', 540, 1010);
|
|
||||||
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = canvas.toDataURL('image/png');
|
|
||||||
a.download = 'jwe-defi.png';
|
|
||||||
a.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
// (Ré)initialise le défi au montage et à chaque changement de seed :
|
// (Ré)initialise le défi au montage et à chaque changement de seed :
|
||||||
// en navigation client d'un /defi/<seed> vers un autre, le composant est conservé.
|
// en navigation client d'un /defi/<seed> vers un autre, le composant est conservé.
|
||||||
let seedJouee = '';
|
let seedJouee = '';
|
||||||
@@ -196,17 +160,23 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<Seo
|
||||||
<title>{t().app.titre} — {t().modes.defi} — seed {seed}</title>
|
title="{t().modes.defi} — seed {seed}"
|
||||||
</svelte:head>
|
description={t().modes.defiDesc}
|
||||||
|
path="/defi/{seed}"
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="jeu">
|
<div class="jeu">
|
||||||
{#if bilan}
|
{#if bilan}
|
||||||
<div class="bilan">
|
<div class="bilan" in:monteeMesure>
|
||||||
<h1>{t().defi.bilan}</h1>
|
<h1>{t().defi.bilan}</h1>
|
||||||
<p class="seed-discret">{t().defi.titreSeed} <strong>{seed}</strong></p>
|
<p class="seed-discret">{t().defi.titreSeed} <strong>{seed}</strong></p>
|
||||||
|
<div class="filet-drapeau" aria-hidden="true">
|
||||||
|
<span class="seg seg-vert"></span><span class="seg seg-corail"></span><span class="seg seg-bleu"></span>
|
||||||
|
</div>
|
||||||
<p class="total">
|
<p class="total">
|
||||||
<span class="valeur">{defi.total}</span>
|
<span class="valeur" aria-hidden="true" use:compte={defi.total}>{defi.total}</span>
|
||||||
|
<span class="sr-only">{defi.total}</span>
|
||||||
<span class="unite">{t().defi.scoreTotal}</span>
|
<span class="unite">{t().defi.scoreTotal}</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="bilan-carte">
|
<div class="bilan-carte">
|
||||||
@@ -214,7 +184,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<ol class="recap">
|
<ol class="recap">
|
||||||
{#each defi.manches as m, i (m.place.id)}
|
{#each defi.manches as m, i (m.place.id)}
|
||||||
<li>
|
<li data-reveal style:--d="{syncopatedDelay(i)}ms" use:reveal>
|
||||||
<span class="r-nom">{i + 1}. {m.result.nom}</span>
|
<span class="r-nom">{i + 1}. {m.result.nom}</span>
|
||||||
<span class="r-region">{t().regions[m.result.region]}</span>
|
<span class="r-region">{t().regions[m.result.region]}</span>
|
||||||
<span class="r-score">{m.result.score} {t().resultat.points}</span>
|
<span class="r-score">{m.result.score} {t().resultat.points}</span>
|
||||||
@@ -239,14 +209,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{:else if erreur}
|
{:else if erreur}
|
||||||
<div class="etat">
|
<div class="etat" in:fonduMesure>
|
||||||
<p>{t().jeu.erreur}</p>
|
<p>{t().jeu.erreur}</p>
|
||||||
<button type="button" class="btn btn-secondaire" onclick={chargerRound}>
|
<button type="button" class="btn btn-secondaire" onclick={chargerRound}>
|
||||||
{t().jeu.reessayer}
|
{t().jeu.reessayer}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{:else if place}
|
{:else if place}
|
||||||
<div class="split" class:resultat={!!result}>
|
<div class="split" class:resultat={!!result} in:monteeMesure>
|
||||||
<section class="panneau-photo">
|
<section class="panneau-photo">
|
||||||
{#if result}
|
{#if result}
|
||||||
<div class="resultat-scroll">
|
<div class="resultat-scroll">
|
||||||
@@ -260,6 +230,13 @@
|
|||||||
{:else if place.photo}
|
{:else if place.photo}
|
||||||
<PhotoPanel photo={place.photo} />
|
<PhotoPanel photo={place.photo} />
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if !result && indicesMontres.length > 0}
|
||||||
|
<aside class="indices" aria-live="polite">
|
||||||
|
{#each indicesMontres as texte, i (texte)}
|
||||||
|
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
||||||
|
{/each}
|
||||||
|
</aside>
|
||||||
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="panneau-carte">
|
<section class="panneau-carte">
|
||||||
@@ -270,14 +247,19 @@
|
|||||||
interactive={!result}
|
interactive={!result}
|
||||||
onvalidate={() => void soumettre(false)}
|
onvalidate={() => void soumettre(false)}
|
||||||
/>
|
/>
|
||||||
|
<div class="statut">
|
||||||
{#if !defiTermine}
|
{#if !defiTermine}
|
||||||
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
||||||
{/if}
|
{/if}
|
||||||
<span class="badge-seed">{t().defi.titreSeed} {seed}</span>
|
<span class="badge-seed">{t().defi.titreSeed} {seed}</span>
|
||||||
{#if timerActif && !result}
|
{#if timerActif && !result}
|
||||||
<div class="badge-timer">
|
<span class="badge-timer">
|
||||||
<TimerRing bind:this={timerRef} actif={!result} />
|
<TimerRing bind:this={timerRef} actif={!result} />
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{#if !result && !guess}
|
||||||
|
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -307,284 +289,9 @@
|
|||||||
{t().jeu.valider}
|
{t().jeu.valider}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{#if indicesMontres.length > 0}
|
|
||||||
<aside class="indices" aria-live="polite">
|
|
||||||
{#each indicesMontres as texte, i (texte)}
|
|
||||||
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
|
||||||
{/each}
|
|
||||||
</aside>
|
|
||||||
{/if}
|
|
||||||
{#if !guess}
|
|
||||||
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="etat"><p>{t().jeu.charger}</p></div>
|
<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.jeu {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.etat {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
.split {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
padding: 0.6rem;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile : photo 60 % haut, carte 40 % bas */
|
|
||||||
.panneau-photo {
|
|
||||||
flex: 0 0 58%;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.split.resultat .panneau-photo {
|
|
||||||
flex: 1 1 55%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panneau-carte {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resultat-scroll {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: var(--oki-blanc);
|
|
||||||
border-radius: var(--oki-radius);
|
|
||||||
box-shadow: var(--oki-ombre);
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-manche {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.6rem;
|
|
||||||
right: 0.6rem;
|
|
||||||
background: rgba(255, 253, 248, 0.94);
|
|
||||||
color: var(--oki-vert);
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 0.25rem 0.8rem;
|
|
||||||
font-size: 0.82rem;
|
|
||||||
font-weight: 700;
|
|
||||||
box-shadow: var(--oki-ombre);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Seed visible mais discrète : les joueurs vérifient qu'ils jouent le même défi */
|
|
||||||
.badge-seed {
|
|
||||||
position: absolute;
|
|
||||||
top: 2.7rem;
|
|
||||||
right: 0.6rem;
|
|
||||||
background: rgba(255, 253, 248, 0.8);
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 0.15rem 0.7rem;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
font-weight: 600;
|
|
||||||
box-shadow: var(--oki-ombre);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-timer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.6rem;
|
|
||||||
left: 3.4rem; /* à droite des boutons zoom */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Barre d'actions : fixe en zone du pouce (tiers inférieur) */
|
|
||||||
.barre-actions {
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.6rem;
|
|
||||||
padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
|
|
||||||
background: var(--oki-blanc);
|
|
||||||
border-top: 1px solid var(--oki-sable-fonce);
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-secondaires {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-secondaires .btn {
|
|
||||||
padding: 0.7rem 1rem;
|
|
||||||
font-size: 0.92rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.penalite {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.valider {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0.9rem 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indices {
|
|
||||||
padding: 0 1rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indice {
|
|
||||||
margin: 0.25rem 0;
|
|
||||||
background: var(--oki-bleu-doux);
|
|
||||||
border-left: 4px solid var(--oki-bleu);
|
|
||||||
border-radius: var(--oki-radius-petit);
|
|
||||||
padding: 0.5rem 0.8rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aide-carte {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 1rem 0.6rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.88rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop : 50/50 */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.split {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panneau-photo,
|
|
||||||
.split.resultat .panneau-photo {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panneau-carte {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.barre-actions {
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* — Écran bilan du défi — */
|
|
||||||
.bilan {
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 860px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1.2rem 1rem 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bilan h1 {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
|
|
||||||
.seed-discret {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
.total {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total .valeur {
|
|
||||||
font-size: 2.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
|
|
||||||
.total .unite {
|
|
||||||
margin-left: 0.4rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bilan-carte {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 520px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recap {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recap li {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 0.6rem;
|
|
||||||
background: var(--oki-blanc);
|
|
||||||
border-radius: var(--oki-radius-petit);
|
|
||||||
box-shadow: var(--oki-ombre);
|
|
||||||
padding: 0.55rem 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-nom {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-region {
|
|
||||||
flex: 1;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-score {
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bilan-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legende {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
.puce.joueur {
|
|
||||||
color: var(--oki-corail);
|
|
||||||
}
|
|
||||||
|
|
||||||
.puce.reelle {
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import GameMap from '$lib/components/GameMap.svelte';
|
import GameMap from '$lib/components/GameMap.svelte';
|
||||||
import WikiFiche from '$lib/components/WikiFiche.svelte';
|
import WikiFiche from '$lib/components/WikiFiche.svelte';
|
||||||
|
import Seo from '$lib/components/Seo.svelte';
|
||||||
import { t } from '$lib/i18n/store.svelte';
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
import { REGIONS } from '$lib/map/regions';
|
import { REGIONS } from '$lib/map/regions';
|
||||||
import type { ExplorerLieu, Region } from '$lib/types';
|
import type { ExplorerLieu, Region } from '$lib/types';
|
||||||
@@ -44,9 +45,7 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<Seo title={t().explorer.titre} description={t().modes.explorerDesc} path="/explorer" />
|
||||||
<title>{t().app.titre} — {t().explorer.titre}</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div class="explorer">
|
<div class="explorer">
|
||||||
<div class="filtres" role="group" aria-label={t().explorer.filtrer}>
|
<div class="filtres" role="group" aria-label={t().explorer.filtrer}>
|
||||||
@@ -121,46 +120,63 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
overflow: hidden; /* la partie repliée du sheet ne doit pas agrandir la page */
|
||||||
}
|
}
|
||||||
|
|
||||||
.filtres {
|
.filtres {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.4rem;
|
gap: 0.5rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 0.6rem 0.8rem;
|
padding: 0.6rem 0.8rem;
|
||||||
background: var(--oki-blanc);
|
background: var(--noir-profond);
|
||||||
border-bottom: 1px solid var(--oki-sable-fonce);
|
border-bottom: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filtres button {
|
.filtres button {
|
||||||
border: 1.5px solid var(--oki-vert-clair);
|
border: 1px solid var(--line);
|
||||||
background: transparent;
|
background: var(--card-bg);
|
||||||
color: var(--oki-vert);
|
color: var(--blanc-creme);
|
||||||
border-radius: 999px;
|
border-radius: var(--radius-sm);
|
||||||
padding: 0.35rem 0.9rem;
|
padding: 0.35rem 0.8rem;
|
||||||
font-size: 0.88rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 650;
|
font-family: var(--font-display);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
border-color var(--dur-tanbou) var(--ease-ka),
|
||||||
|
color var(--dur-tanbou) var(--ease-ka);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtres button:hover {
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
color: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filtres button.actif {
|
.filtres button.actif {
|
||||||
background: var(--oki-vert);
|
background: var(--or-oki);
|
||||||
border-color: var(--oki-vert);
|
border-color: var(--or-oki);
|
||||||
color: #fff;
|
color: #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(html.light-theme) .filtres button.actif {
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-explorer {
|
.carte-explorer {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
padding: 0.6rem;
|
padding: 0.6rem 0.6rem 3.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.erreur {
|
.erreur {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bottom sheet mobile */
|
/* Bottom sheet mobile : overlay dont les événements sont scopés à lui-même */
|
||||||
.fiche {
|
.fiche {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -168,12 +184,14 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
max-height: 62%;
|
max-height: 62%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: var(--oki-blanc);
|
background: var(--noir-profond);
|
||||||
border-radius: var(--oki-radius) var(--oki-radius) 0 0;
|
color: var(--blanc-creme);
|
||||||
box-shadow: 0 -4px 18px rgba(11, 61, 46, 0.2);
|
border-top: 1px solid var(--line);
|
||||||
padding: 1rem;
|
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||||
|
box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4);
|
||||||
|
padding: 1.2rem;
|
||||||
transform: translateY(calc(100% - 3.2rem));
|
transform: translateY(calc(100% - 3.2rem));
|
||||||
transition: transform 0.25s ease;
|
transition: transform var(--dur-mesure) var(--ease-ka);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fiche.ouvert {
|
.fiche.ouvert {
|
||||||
@@ -183,7 +201,7 @@
|
|||||||
.fiche .vide {
|
.fiche .vide {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
padding-bottom: 0.4rem;
|
padding-bottom: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -191,16 +209,21 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.6rem;
|
top: 0.6rem;
|
||||||
right: 0.6rem;
|
right: 0.6rem;
|
||||||
border: none;
|
border: 1px solid var(--line);
|
||||||
background: var(--oki-vert-doux);
|
background: var(--card-bg);
|
||||||
color: var(--oki-vert);
|
color: var(--blanc-creme);
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
border-radius: 50%;
|
border-radius: var(--radius-sm);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fermer:hover {
|
||||||
|
border-color: var(--or-oki);
|
||||||
|
color: var(--or-oki);
|
||||||
|
}
|
||||||
|
|
||||||
.fiche-photo {
|
.fiche-photo {
|
||||||
margin: 0 0 0.6rem;
|
margin: 0 0 0.6rem;
|
||||||
}
|
}
|
||||||
@@ -209,49 +232,61 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: var(--oki-radius-petit);
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--line);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fiche-photo figcaption {
|
.fiche-photo figcaption {
|
||||||
font-size: 0.72rem;
|
font-size: 0.72rem;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fiche h1 {
|
.fiche h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.3rem;
|
font-size: 1.35rem;
|
||||||
color: var(--oki-vert);
|
color: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.creole {
|
.creole {
|
||||||
margin: 0.1rem 0 0;
|
margin: 0.1rem 0 0;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: var(--oki-vert-clair);
|
color: var(--or-oki);
|
||||||
}
|
}
|
||||||
|
|
||||||
.localisation {
|
.localisation {
|
||||||
margin: 0.3rem 0 0.8rem;
|
margin: 0.3rem 0 0.8rem;
|
||||||
color: var(--oki-encre-doux);
|
color: var(--muted);
|
||||||
font-size: 0.92rem;
|
font-size: 0.92rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Panneau latéral desktop */
|
/* Desktop */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.fiche {
|
.explorer {
|
||||||
left: auto;
|
display: grid;
|
||||||
top: 0;
|
grid-template-columns: minmax(0, 1fr) 380px;
|
||||||
right: 0;
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
bottom: 0;
|
|
||||||
width: 380px;
|
|
||||||
max-height: none;
|
|
||||||
border-radius: var(--oki-radius) 0 0 var(--oki-radius);
|
|
||||||
transform: translateX(calc(100% - 3.2rem));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fiche.ouvert {
|
.filtres {
|
||||||
transform: translateX(0);
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carte-explorer {
|
||||||
|
padding: 0.8rem;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche {
|
||||||
|
position: static;
|
||||||
|
transform: none;
|
||||||
|
max-height: none;
|
||||||
|
min-height: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
border-top: none;
|
||||||
|
border-left: 1px solid var(--line);
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,23 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
|
import '$lib/styles/jeu.css';
|
||||||
import GameMap from '$lib/components/GameMap.svelte';
|
import GameMap from '$lib/components/GameMap.svelte';
|
||||||
import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
|
import CarteRegions, { type MarqueurCarte } from '$lib/components/CarteRegions.svelte';
|
||||||
import PhotoPanel from '$lib/components/PhotoPanel.svelte';
|
import PhotoPanel from '$lib/components/PhotoPanel.svelte';
|
||||||
import StreetPanel from '$lib/components/StreetPanel.svelte';
|
import StreetPanel from '$lib/components/StreetPanel.svelte';
|
||||||
import ResultPanel from '$lib/components/ResultPanel.svelte';
|
import ResultPanel from '$lib/components/ResultPanel.svelte';
|
||||||
|
import Seo from '$lib/components/Seo.svelte';
|
||||||
import TimerRing from '$lib/components/TimerRing.svelte';
|
import TimerRing from '$lib/components/TimerRing.svelte';
|
||||||
import { t } from '$lib/i18n/store.svelte';
|
import { t } from '$lib/i18n/store.svelte';
|
||||||
|
import { compte } from '$lib/motion/countup';
|
||||||
|
import { reveal } from '$lib/motion/reveal';
|
||||||
|
import { syncopatedDelay } from '$lib/motion/tokens';
|
||||||
|
import { fonduMesure, monteeMesure } from '$lib/motion/transitions';
|
||||||
|
import { partager } from '$lib/partage';
|
||||||
import { defi } from '$lib/stores/defi.svelte';
|
import { defi } from '$lib/stores/defi.svelte';
|
||||||
import type { Coordonnees, GuessResult, RoundPlace } from '$lib/types';
|
import { ajouterPartie } from '$lib/stores/history.svelte';
|
||||||
|
import type { Coordonnees, GuessResult, Region, RoundPlace } from '$lib/types';
|
||||||
|
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
const mode = $derived(data.mode);
|
const mode = $derived(data.mode);
|
||||||
@@ -99,6 +107,37 @@
|
|||||||
joues = [...joues, place.id];
|
joues = [...joues, place.id];
|
||||||
if (estDefi) {
|
if (estDefi) {
|
||||||
defi.ajouter({ place, guess: skip ? null : guess, result });
|
defi.ajouter({ place, guess: skip ? null : guess, result });
|
||||||
|
if (defi.termine) {
|
||||||
|
ajouterPartie({
|
||||||
|
mode: 'defi',
|
||||||
|
region: 'TOUTES',
|
||||||
|
scoreTotal: defi.total,
|
||||||
|
roundsCount: defi.manches.length,
|
||||||
|
rounds: defi.manches.map((m) => ({
|
||||||
|
nom: m.result.nom,
|
||||||
|
commune: m.result.commune,
|
||||||
|
region: m.result.region,
|
||||||
|
distanceKm: m.result.distanceKm,
|
||||||
|
score: m.result.score
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ajouterPartie({
|
||||||
|
mode,
|
||||||
|
region: (regionParam as Region) || (result.region as Region) || 'TOUTES',
|
||||||
|
scoreTotal: result.score,
|
||||||
|
roundsCount: 1,
|
||||||
|
rounds: [
|
||||||
|
{
|
||||||
|
nom: result.nom,
|
||||||
|
commune: result.commune,
|
||||||
|
region: result.region,
|
||||||
|
distanceKm: result.distanceKm,
|
||||||
|
score: result.score
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
erreur = true;
|
erreur = true;
|
||||||
@@ -128,65 +167,6 @@
|
|||||||
void chargerRound();
|
void chargerRound();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Génère une image canvas téléchargeable : score total + régions jouées. */
|
|
||||||
function partager(): void {
|
|
||||||
const canvas = document.createElement('canvas');
|
|
||||||
canvas.width = 1080;
|
|
||||||
canvas.height = 1080;
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
if (!ctx) return;
|
|
||||||
|
|
||||||
// Fond sable + bandeau vert profond
|
|
||||||
ctx.fillStyle = '#f5efe2';
|
|
||||||
ctx.fillRect(0, 0, 1080, 1080);
|
|
||||||
ctx.fillStyle = '#0b3d2e';
|
|
||||||
ctx.fillRect(0, 0, 1080, 240);
|
|
||||||
|
|
||||||
ctx.fillStyle = '#fffdf8';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.font = '800 96px system-ui, sans-serif';
|
|
||||||
ctx.fillText('JWE', 540, 130);
|
|
||||||
ctx.font = '600 44px system-ui, sans-serif';
|
|
||||||
ctx.fillText(t().modes.defi, 540, 200);
|
|
||||||
|
|
||||||
// Score total
|
|
||||||
ctx.fillStyle = '#0b3d2e';
|
|
||||||
ctx.font = '800 150px system-ui, sans-serif';
|
|
||||||
ctx.fillText(`${defi.total}`, 540, 420);
|
|
||||||
ctx.fillStyle = '#5a6b62';
|
|
||||||
ctx.font = '500 40px system-ui, sans-serif';
|
|
||||||
ctx.fillText(t().defi.scoreTotal, 540, 480);
|
|
||||||
|
|
||||||
// Manches : lieu, région, score
|
|
||||||
let y = 580;
|
|
||||||
for (const [i, m] of defi.manches.entries()) {
|
|
||||||
ctx.fillStyle = i % 2 === 0 ? '#e3efe7' : '#f5efe2';
|
|
||||||
ctx.fillRect(90, y - 44, 900, 74);
|
|
||||||
ctx.fillStyle = '#22302a';
|
|
||||||
ctx.textAlign = 'left';
|
|
||||||
ctx.font = '600 34px system-ui, sans-serif';
|
|
||||||
ctx.fillText(`${i + 1}. ${m.result.nom}`, 120, y);
|
|
||||||
ctx.fillStyle = '#17624a';
|
|
||||||
ctx.font = '500 30px system-ui, sans-serif';
|
|
||||||
ctx.fillText(t().regions[m.result.region], 120, y + 34);
|
|
||||||
ctx.textAlign = 'right';
|
|
||||||
ctx.fillStyle = '#0b3d2e';
|
|
||||||
ctx.font = '800 40px system-ui, sans-serif';
|
|
||||||
ctx.fillText(`${m.result.score}`, 960, y + 8);
|
|
||||||
y += 92;
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.fillStyle = '#5a6b62';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.font = '500 30px system-ui, sans-serif';
|
|
||||||
ctx.fillText('labola.o-k-i.net', 540, 1010);
|
|
||||||
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = canvas.toDataURL('image/png');
|
|
||||||
a.download = 'jwe-defi.png';
|
|
||||||
a.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
// Nouveau défi : on repart de zéro quand on arrive sur la première manche.
|
// Nouveau défi : on repart de zéro quand on arrive sur la première manche.
|
||||||
if (estDefi && defi.termine) defi.reinitialiser();
|
if (estDefi && defi.termine) defi.reinitialiser();
|
||||||
@@ -194,16 +174,22 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<Seo
|
||||||
<title>{t().app.titre} — {t().modes[mode]}</title>
|
title={t().modes[mode]}
|
||||||
</svelte:head>
|
description={t().modes[`${mode}Desc`]}
|
||||||
|
path="/jeu/{mode}"
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="jeu">
|
<div class="jeu">
|
||||||
{#if bilan}
|
{#if bilan}
|
||||||
<div class="bilan">
|
<div class="bilan" in:monteeMesure>
|
||||||
<h1>{t().defi.bilan}</h1>
|
<h1>{t().defi.bilan}</h1>
|
||||||
|
<div class="filet-drapeau" aria-hidden="true">
|
||||||
|
<span class="seg seg-vert"></span><span class="seg seg-corail"></span><span class="seg seg-bleu"></span>
|
||||||
|
</div>
|
||||||
<p class="total">
|
<p class="total">
|
||||||
<span class="valeur">{defi.total}</span>
|
<span class="valeur" aria-hidden="true" use:compte={defi.total}>{defi.total}</span>
|
||||||
|
<span class="sr-only">{defi.total}</span>
|
||||||
<span class="unite">{t().defi.scoreTotal}</span>
|
<span class="unite">{t().defi.scoreTotal}</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="bilan-carte">
|
<div class="bilan-carte">
|
||||||
@@ -211,7 +197,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<ol class="recap">
|
<ol class="recap">
|
||||||
{#each defi.manches as m, i (m.place.id)}
|
{#each defi.manches as m, i (m.place.id)}
|
||||||
<li>
|
<li data-reveal style:--d="{syncopatedDelay(i)}ms" use:reveal>
|
||||||
<span class="r-nom">{i + 1}. {m.result.nom}</span>
|
<span class="r-nom">{i + 1}. {m.result.nom}</span>
|
||||||
<span class="r-region">{t().regions[m.result.region]}</span>
|
<span class="r-region">{t().regions[m.result.region]}</span>
|
||||||
<span class="r-score">{m.result.score} {t().resultat.points}</span>
|
<span class="r-score">{m.result.score} {t().resultat.points}</span>
|
||||||
@@ -233,16 +219,16 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{:else if chargement}
|
{:else if chargement}
|
||||||
<div class="etat"><p>{t().jeu.charger}</p></div>
|
<div class="etat" in:fonduMesure><p>{t().jeu.charger}</p></div>
|
||||||
{:else if erreur}
|
{:else if erreur}
|
||||||
<div class="etat">
|
<div class="etat" in:fonduMesure>
|
||||||
<p>{t().jeu.erreur}</p>
|
<p>{t().jeu.erreur}</p>
|
||||||
<button type="button" class="btn btn-secondaire" onclick={() => void chargerRound()}>
|
<button type="button" class="btn btn-secondaire" onclick={() => void chargerRound()}>
|
||||||
{t().jeu.reessayer}
|
{t().jeu.reessayer}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{:else if place}
|
{:else if place}
|
||||||
<div class="split" class:resultat={!!result}>
|
<div class="split" class:resultat={!!result} in:monteeMesure>
|
||||||
<section class="panneau-photo">
|
<section class="panneau-photo">
|
||||||
{#if result}
|
{#if result}
|
||||||
<div class="resultat-scroll">
|
<div class="resultat-scroll">
|
||||||
@@ -258,6 +244,13 @@
|
|||||||
{:else if place.photo}
|
{:else if place.photo}
|
||||||
<PhotoPanel photo={place.photo} />
|
<PhotoPanel photo={place.photo} />
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if !result && indicesMontres.length > 0}
|
||||||
|
<aside class="indices" aria-live="polite">
|
||||||
|
{#each indicesMontres as texte, i (texte)}
|
||||||
|
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
||||||
|
{/each}
|
||||||
|
</aside>
|
||||||
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="panneau-carte">
|
<section class="panneau-carte">
|
||||||
@@ -268,13 +261,18 @@
|
|||||||
interactive={!result}
|
interactive={!result}
|
||||||
onvalidate={() => void soumettre(false)}
|
onvalidate={() => void soumettre(false)}
|
||||||
/>
|
/>
|
||||||
|
<div class="statut">
|
||||||
{#if estDefi && !defiTermine}
|
{#if estDefi && !defiTermine}
|
||||||
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
<span class="badge-manche">{t().jeu.round} {Math.min(mancheCourante, 5)} {t().jeu.sur} 5</span>
|
||||||
{/if}
|
{/if}
|
||||||
{#if timerActif && !result}
|
{#if timerActif && !result}
|
||||||
<div class="badge-timer">
|
<span class="badge-timer">
|
||||||
<TimerRing bind:this={timerRef} actif={!result} />
|
<TimerRing bind:this={timerRef} actif={!result} />
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{#if !result && !guess}
|
||||||
|
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -304,261 +302,7 @@
|
|||||||
{t().jeu.valider}
|
{t().jeu.valider}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{#if indicesMontres.length > 0}
|
|
||||||
<aside class="indices" aria-live="polite">
|
|
||||||
{#each indicesMontres as texte, i (texte)}
|
|
||||||
<p class="indice"><strong>{t().jeu.indice} {i + 1}</strong> — {texte}</p>
|
|
||||||
{/each}
|
|
||||||
</aside>
|
|
||||||
{/if}
|
|
||||||
{#if !guess}
|
|
||||||
<p class="aide-carte">{t().jeu.poserMarqueur}</p>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.jeu {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.etat {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
.split {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
padding: 0.6rem;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile : photo 60 % haut, carte 40 % bas */
|
|
||||||
.panneau-photo {
|
|
||||||
flex: 0 0 58%;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.split.resultat .panneau-photo {
|
|
||||||
flex: 1 1 55%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panneau-carte {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resultat-scroll {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: var(--oki-blanc);
|
|
||||||
border-radius: var(--oki-radius);
|
|
||||||
box-shadow: var(--oki-ombre);
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-manche {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.6rem;
|
|
||||||
right: 0.6rem;
|
|
||||||
background: rgba(255, 253, 248, 0.94);
|
|
||||||
color: var(--oki-vert);
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 0.25rem 0.8rem;
|
|
||||||
font-size: 0.82rem;
|
|
||||||
font-weight: 700;
|
|
||||||
box-shadow: var(--oki-ombre);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-timer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.6rem;
|
|
||||||
left: 3.4rem; /* à droite des boutons zoom */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Barre d'actions : fixe en zone du pouce (tiers inférieur) */
|
|
||||||
.barre-actions {
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.6rem;
|
|
||||||
padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
|
|
||||||
background: var(--oki-blanc);
|
|
||||||
border-top: 1px solid var(--oki-sable-fonce);
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-secondaires {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-secondaires .btn {
|
|
||||||
padding: 0.7rem 1rem;
|
|
||||||
font-size: 0.92rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.penalite {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.valider {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0.9rem 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indices {
|
|
||||||
padding: 0 1rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indice {
|
|
||||||
margin: 0.25rem 0;
|
|
||||||
background: var(--oki-bleu-doux);
|
|
||||||
border-left: 4px solid var(--oki-bleu);
|
|
||||||
border-radius: var(--oki-radius-petit);
|
|
||||||
padding: 0.5rem 0.8rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aide-carte {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 1rem 0.6rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.88rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop : 50/50 */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.split {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panneau-photo,
|
|
||||||
.split.resultat .panneau-photo {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panneau-carte {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.barre-actions {
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* — Écran bilan du défi — */
|
|
||||||
.bilan {
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 860px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1.2rem 1rem 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bilan h1 {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
|
|
||||||
.total {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total .valeur {
|
|
||||||
font-size: 2.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
|
|
||||||
.total .unite {
|
|
||||||
margin-left: 0.4rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bilan-carte {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 520px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recap {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recap li {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 0.6rem;
|
|
||||||
background: var(--oki-blanc);
|
|
||||||
border-radius: var(--oki-radius-petit);
|
|
||||||
box-shadow: var(--oki-ombre);
|
|
||||||
padding: 0.55rem 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-nom {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-region {
|
|
||||||
flex: 1;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-score {
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bilan-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legende {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--oki-encre-doux);
|
|
||||||
}
|
|
||||||
|
|
||||||
.puce.joueur {
|
|
||||||
color: var(--oki-corail);
|
|
||||||
}
|
|
||||||
|
|
||||||
.puce.reelle {
|
|
||||||
color: var(--oki-vert);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
||||||
|
Sitemap: https://jwe.o-k-i.net/sitemap.xml
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url>
|
||||||
|
<loc>https://jwe.o-k-i.net/</loc>
|
||||||
|
<lastmod>2026-07-21</lastmod>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://jwe.o-k-i.net/explorer</loc>
|
||||||
|
<lastmod>2026-07-21</lastmod>
|
||||||
|
</url>
|
||||||
|
</urlset>
|
||||||
@@ -122,3 +122,13 @@ Règles :
|
|||||||
- **Visionneuse** : `StreetPanel.svelte`, lazy load façon MapLibre (`import('mapillary-js')` + CSS — chunk séparé ~1 MB, 0 occurrence dans le bundle initial), `component.cover: false`, `moveTo()` avec état d'erreur (image retirée → message + round suivant possible). Token `PUBLIC_MAPILLARY_TOKEN` via `$env/dynamic/public` (pattern `PUBLIC_TILES_URL`) : **token client**, conçu par Mapillary pour être exposé côté navigateur.
|
- **Visionneuse** : `StreetPanel.svelte`, lazy load façon MapLibre (`import('mapillary-js')` + CSS — chunk séparé ~1 MB, 0 occurrence dans le bundle initial), `component.cover: false`, `moveTo()` avec état d'erreur (image retirée → message + round suivant possible). Token `PUBLIC_MAPILLARY_TOKEN` via `$env/dynamic/public` (pattern `PUBLIC_TILES_URL`) : **token client**, conçu par Mapillary pour être exposé côté navigateur.
|
||||||
- **Réutilisation sans modification** : `GameMap`, `ResultPanel`, `WikiFiche`, scoring (`scoreGuess`/`skipResult` acceptent `Lieu | StreetLieu`), timer, indices, bouton « Passer ». `RoundPlace.photo` devient optionnel (`mapillaryId`/`credit` ajoutés) ; lookup unifié `getLieuById` (2 corpus) pour `/api/guess`, `getLieuPhotoById` conservé pour le défi et le proxy photo.
|
- **Réutilisation sans modification** : `GameMap`, `ResultPanel`, `WikiFiche`, scoring (`scoreGuess`/`skipResult` acceptent `Lieu | StreetLieu`), timer, indices, bouton « Passer ». `RoundPlace.photo` devient optionnel (`mapillaryId`/`credit` ajoutés) ; lookup unifié `getLieuById` (2 corpus) pour `/api/guess`, `getLieuPhotoById` conservé pour le défi et le proxy photo.
|
||||||
- **Hors scope v1** : street dans `/defi/[seed]` et `/explorer`, cache SW des tuiles Mapillary (les requêtes `graph.mapillary.com`/FBCDN passent en direct).
|
- **Hors scope v1** : street dans `/defi/[seed]` et `/explorer`, cache SW des tuiles Mapillary (les requêtes `graph.mapillary.com`/FBCDN passent en direct).
|
||||||
|
|
||||||
|
## 11. ADR-004 — Harmonisation Charte OKI, Command Bar, Local-First & SEO (2026-08-16)
|
||||||
|
|
||||||
|
Mise en conformité intégrale avec les référentiels de marque OKI et la doctrine Nerve-First :
|
||||||
|
|
||||||
|
- **Charte Visuelle & Thème Sombre/Clair** : Thème sombre par défaut (identité afrofuturiste panafricaine : fond `#0D0D0D`, surfaces `#1A0F1A`, texte `#FFF8E7`, action or `#FDB813`). Thème clair opt-in (`html.light-theme`) vérifié WCAG AA avec accents assombris (`#B87A00`, vert `#006B3D`, rouge `#A01030`) et ratios de contraste ≥ 4.5:1. Intégration du composant `ThemeSwitch.svelte` (persistance `localStorage`).
|
||||||
|
- **Signature Graphique Flag-Bar** : Bandeau signature 6 px à 4 segments francs (`#0D0D0D` / or / vert / rouge) positionné en bord inférieur du header fixe et au pied de page sur `+page.svelte`.
|
||||||
|
- **Command Bar Intent-Centric (`Ctrl+K` / `⌘K`)** : Composant `CommandBar.svelte` omniprésent permettant l'exécution directe des intentions sans friction (lancer les modes, filtrer par région, basculer langue/thème, ouvrir les stats).
|
||||||
|
- **Souveraineté & Local-First (Historique & Statistiques)** : Store `history.svelte.ts` et vue `StatsModal.svelte` garantissant que 100% des scores, parties et précisions géographiques restent stockés localement sur l'appareil du joueur sans aucun pistage ni compte serveur, avec fonction d'export JSON et de purge locale.
|
||||||
|
- **AI Overview & SEO Top-Tier** : HTML sémantique strict, balisage Schema.org structuré `WebApplication` + `FAQPage` dans `Seo.svelte` optimisé pour l'indexation par les moteurs et les modèles d'intelligence artificielle.
|
||||||
|
|||||||
Reference in New Issue
Block a user