Redesign l'en-tête de la Corne d'Abondance, comme sur Icare
Build and deploy / deploy (push) Successful in 36s

Le bouton Classement vivait juste au-dessus du jeu, séparé par un simple gap — pas assez pour la preview de la prochaine pièce (qui grandit vers le haut avec le palier annoncé) sur les gros paliers, d'où le chevauchement signalé. Titre et Classement passent sur une seule ligne compacte en haut de page (même style qu'Icare), avec un espacement généreux avant le jeu.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Valentin ROBIN
2026-08-26 15:28:19 +02:00
parent e70f0c85bb
commit 4f920175fd
+17 -15
View File
@@ -122,25 +122,27 @@ export function CorneView({
return (
<div className="mx-auto flex w-full max-w-2xl flex-col items-center gap-4 px-4 py-8">
<div className="text-center">
<h1 className="font-heading text-2xl tracking-[0.1em] text-gold-bright uppercase">
{/* Même en-tête compact que /icare (titre + Classement sur une seule
ligne) : l'ancien bouton isolé juste au-dessus du jeu pouvait se
faire chevaucher par la preview de la prochaine pièce sur les gros
paliers — ici il est tout en haut, loin du jeu, comme sur Icare. */}
<div className="flex w-full items-center justify-between">
<h1 className="font-heading text-sm tracking-[0.15em] text-gold-bright uppercase">
La Corne d&apos;Abondance
</h1>
<p className="font-serif text-sm text-marble/60 italic">
Fais fusionner les Citoyens jusqu&apos;au débordement.
</p>
<button
type="button"
onClick={() => setShowRanking(true)}
className="flex items-center gap-1.5 rounded-md border border-gold/30 px-3 py-1.5 text-xs font-medium text-marble/80 uppercase tracking-wide transition hover:bg-gold/10"
>
<IconHorn className="h-4 w-4" />
Classement
</button>
</div>
<button
type="button"
onClick={() => setShowRanking(true)}
className="flex items-center gap-1.5 rounded-md border border-gold/30 px-3 py-1.5 text-xs font-medium text-marble/80 uppercase tracking-wide transition hover:bg-gold/10"
>
<IconHorn className="h-4 w-4" />
Classement
</button>
<MelonGame citizens={citizens} onStart={handleStart} onFinish={handleFinish} />
<div className="mt-10">
<MelonGame citizens={citizens} onStart={handleStart} onFinish={handleFinish} />
</div>
{ownBestScore !== null && (
<p className="text-center font-heading text-sm tracking-wide text-marble">