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,182 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '$lib/i18n/store.svelte';
|
||||
import type { WikiSummary } from '$lib/types';
|
||||
|
||||
interface Props {
|
||||
nom: string;
|
||||
wikidataId: string | null;
|
||||
tonPositif?: string;
|
||||
tonNeutre?: string;
|
||||
}
|
||||
|
||||
let { nom, wikidataId, tonPositif, tonNeutre }: Props = $props();
|
||||
|
||||
// undefined = chargement, null = pas de fiche (Cas B), WikiSummary = Cas A
|
||||
let wiki = $state<WikiSummary | null | undefined>(undefined);
|
||||
|
||||
onMount(() => {
|
||||
if (!wikidataId) {
|
||||
wiki = null;
|
||||
return;
|
||||
}
|
||||
let annule = false;
|
||||
void (async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/wiki/${wikidataId}`);
|
||||
if (annule) return;
|
||||
wiki = res.ok ? ((await res.json()) as WikiSummary) : null;
|
||||
} catch {
|
||||
if (!annule) wiki = null;
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
annule = true;
|
||||
};
|
||||
});
|
||||
|
||||
const lienContribution = $derived(
|
||||
`https://fr.wikipedia.org/w/index.php?search=${encodeURIComponent(nom)}&title=Sp%C3%A9cial:Recherche`
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if wiki === undefined}
|
||||
<div class="panneau chargement">
|
||||
<p>{t().explorer.chargerFiche}</p>
|
||||
</div>
|
||||
{:else if wiki}
|
||||
<!-- Cas A : fiche Wikipédia existante -->
|
||||
<article class="panneau cas-a">
|
||||
<h2>
|
||||
<a href={wiki.url} target="_blank" rel="noopener noreferrer">{wiki.title}</a>
|
||||
</h2>
|
||||
{#if tonPositif || tonNeutre}
|
||||
<p class="ton">{tonPositif ?? tonNeutre}</p>
|
||||
{/if}
|
||||
{#if wiki.thumbnail}
|
||||
<img src={wiki.thumbnail} alt="" loading="lazy" decoding="async" />
|
||||
{/if}
|
||||
<p class="extrait">{wiki.extract}</p>
|
||||
<a class="lien-wiki" href={wiki.url} target="_blank" rel="noopener noreferrer">
|
||||
{t().resultat.lireWiki} ↗
|
||||
</a>
|
||||
</article>
|
||||
{:else}
|
||||
<!-- Cas B : lacune documentaire — panneau volontairement distinct (Peak-End) -->
|
||||
<article class="panneau cas-b">
|
||||
<h2><span class="icone" aria-hidden="true">◌</span> {t().lacune.titre}</h2>
|
||||
<p class="texte">{t().lacune.texte}</p>
|
||||
<a class="btn btn-cta" href={lienContribution} target="_blank" rel="noopener noreferrer">
|
||||
{t().lacune.cta} ↗
|
||||
</a>
|
||||
<p class="guide">
|
||||
{t().lacune.guide}
|
||||
<a href="https://fr.wikipedia.org/wiki/Aide:Premiers_pas" target="_blank" rel="noopener noreferrer">
|
||||
{t().lacune.guideLien} ↗
|
||||
</a>
|
||||
</p>
|
||||
</article>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.panneau {
|
||||
border-radius: var(--oki-radius);
|
||||
padding: 1.1rem 1.25rem;
|
||||
box-shadow: var(--oki-ombre);
|
||||
}
|
||||
|
||||
.chargement {
|
||||
background: var(--oki-blanc);
|
||||
color: var(--oki-encre-doux);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Cas A : vert doux, apaisé */
|
||||
.cas-a {
|
||||
background: var(--oki-vert-doux);
|
||||
border: 1.5px solid var(--oki-vert-clair);
|
||||
}
|
||||
|
||||
.cas-a h2 {
|
||||
margin: 0 0 0.3rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cas-a h2 a {
|
||||
color: var(--oki-vert);
|
||||
}
|
||||
|
||||
.cas-a .ton {
|
||||
margin: 0 0 0.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--oki-vert-clair);
|
||||
}
|
||||
|
||||
.cas-a img {
|
||||
float: right;
|
||||
width: 96px;
|
||||
height: auto;
|
||||
margin: 0 0 0.5rem 0.8rem;
|
||||
border-radius: var(--oki-radius-petit);
|
||||
}
|
||||
|
||||
.cas-a .extrait {
|
||||
margin: 0 0 0.6rem;
|
||||
}
|
||||
|
||||
.lien-wiki {
|
||||
color: var(--oki-bleu);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
/* Cas B : teinte sable/orangée distincte, icône spécifique */
|
||||
.cas-b {
|
||||
background: var(--oki-lacune-fond);
|
||||
border: 2px solid var(--oki-lacune-bord);
|
||||
}
|
||||
|
||||
.cas-b h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: #8a5a00;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cas-b .icone {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border: 2.5px dashed var(--oki-lacune-bord);
|
||||
border-radius: 50%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cas-b .texte {
|
||||
margin: 0 0 0.9rem;
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.btn-cta {
|
||||
background: var(--oki-lacune-bord);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-cta:hover {
|
||||
background: #b98a2f;
|
||||
}
|
||||
|
||||
.guide {
|
||||
margin: 0.8rem 0 0;
|
||||
font-size: 0.88rem;
|
||||
color: var(--oki-encre-doux);
|
||||
}
|
||||
|
||||
.guide a {
|
||||
color: var(--oki-bleu);
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user