app: refonte JWE v2 - SvelteKit 2 + Svelte 5 + MapLibre, 4 modes de jeu, API anti-triche, ecran Cas B 'Pwen blinde', i18n FR/GCF, PWA
This commit is contained in:
sucupira
@@ -0,0 +1,258 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import { REGIONS } from '$lib/map/regions';
|
||||
import type { GameMode, Region } from '$lib/types';
|
||||
|
||||
type ChoixRegion = Region | 'TOUTES';
|
||||
|
||||
let region = $state<ChoixRegion>('TOUTES');
|
||||
let mode = $state<GameMode>('monument');
|
||||
let timer = $state(false);
|
||||
|
||||
const modes: { id: GameMode; emoji: string }[] = [
|
||||
{ id: 'monument', emoji: '🏛️' },
|
||||
{ id: 'lieu', emoji: '📍' },
|
||||
{ id: 'defi', emoji: '⛰️' }
|
||||
];
|
||||
|
||||
function jouer(): void {
|
||||
const params = new URLSearchParams();
|
||||
if (region !== 'TOUTES') params.set('region', region);
|
||||
if (timer) params.set('timer', '1');
|
||||
goto(`/jeu/${mode}${params.size ? `?${params}` : ''}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{t().app.titre} — {t().app.sousTitre}</title>
|
||||
<meta name="description" content={t().app.sousTitre} />
|
||||
</svelte:head>
|
||||
|
||||
<div class="accueil">
|
||||
<section class="hero">
|
||||
<h1>{t().app.titre}</h1>
|
||||
<p class="accroche">{t().micro.kiteSaYe}</p>
|
||||
<p class="sous-titre">{t().app.sousTitre}</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="titre-regions">
|
||||
<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
|
||||
<div class="grille regions">
|
||||
{#each REGIONS as r (r)}
|
||||
<button
|
||||
type="button"
|
||||
class="carte-region region-{r.toLowerCase()}"
|
||||
class:choisi={region === r}
|
||||
aria-pressed={region === r}
|
||||
onclick={() => (region = r)}
|
||||
>
|
||||
<span class="nom">{t().regions[r]}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<button
|
||||
type="button"
|
||||
class="carte-region toutes"
|
||||
class:choisi={region === 'TOUTES'}
|
||||
aria-pressed={region === 'TOUTES'}
|
||||
onclick={() => (region = 'TOUTES')}
|
||||
>
|
||||
<span class="nom">{t().regions.TOUTES}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="titre-modes">
|
||||
<h2 id="titre-modes">{t().accueil.choixMode}</h2>
|
||||
<div class="grille modes">
|
||||
{#each modes as m (m.id)}
|
||||
<button
|
||||
type="button"
|
||||
class="carte-mode"
|
||||
class:choisi={mode === m.id}
|
||||
aria-pressed={mode === m.id}
|
||||
onclick={() => (mode = m.id)}
|
||||
>
|
||||
<span class="emoji" aria-hidden="true">{m.emoji}</span>
|
||||
<span class="nom">{t().modes[m.id]}</span>
|
||||
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<a href="/explorer" class="carte-mode explorer">
|
||||
<span class="emoji" aria-hidden="true">🧭</span>
|
||||
<span class="nom">{t().modes.explorer}</span>
|
||||
<span class="desc">{t().modes.explorerDesc}</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="options" aria-labelledby="titre-options">
|
||||
<h2 id="titre-options">{t().accueil.options}</h2>
|
||||
<label class="option-timer">
|
||||
<input type="checkbox" bind:checked={timer} />
|
||||
<span>{t().accueil.timer}</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<div class="zone-pouce">
|
||||
<button type="button" class="btn btn-primaire jouer" onclick={jouer}>
|
||||
{t().accueil.jouer}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.accueil {
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 1.25rem 1rem 7rem; /* espace pour le bouton fixe en zone pouce */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: var(--oki-vert);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.accroche {
|
||||
margin: 0.2rem 0 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 650;
|
||||
color: var(--oki-vert-clair);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sous-titre {
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.05rem;
|
||||
color: var(--oki-vert);
|
||||
margin: 0 0 0.6rem;
|
||||
}
|
||||
|
||||
.grille {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.regions {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.modes {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.carte-region,
|
||||
.carte-mode {
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--oki-radius);
|
||||
background: var(--oki-blanc);
|
||||
box-shadow: var(--oki-ombre);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: var(--oki-encre);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.carte-region {
|
||||
padding: 1.4rem 0.6rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.carte-region .nom {
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.carte-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 1rem 0.8rem;
|
||||
}
|
||||
|
||||
.carte-mode .emoji {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.carte-mode .nom {
|
||||
font-weight: 750;
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.carte-mode .desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.carte-region:hover,
|
||||
.carte-mode:hover {
|
||||
border-color: var(--oki-vert-clair);
|
||||
}
|
||||
|
||||
.carte-region.choisi,
|
||||
.carte-mode.choisi {
|
||||
border-color: var(--oki-vert);
|
||||
background: var(--oki-vert-doux);
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.option-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option-timer input {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
accent-color: var(--oki-vert);
|
||||
}
|
||||
|
||||
/* Bouton « Jouer » : fixe en zone du pouce sur mobile */
|
||||
.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;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.jouer {
|
||||
width: min(420px, 100%);
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user