Redesign l'en-tête de la Corne d'Abondance, comme sur Icare
Build and deploy / deploy (push) Successful in 36s
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:
@@ -122,25 +122,27 @@ export function CorneView({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto flex w-full max-w-2xl flex-col items-center gap-4 px-4 py-8">
|
<div className="mx-auto flex w-full max-w-2xl flex-col items-center gap-4 px-4 py-8">
|
||||||
<div className="text-center">
|
{/* Même en-tête compact que /icare (titre + Classement sur une seule
|
||||||
<h1 className="font-heading text-2xl tracking-[0.1em] text-gold-bright uppercase">
|
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'Abondance
|
La Corne d'Abondance
|
||||||
</h1>
|
</h1>
|
||||||
<p className="font-serif text-sm text-marble/60 italic">
|
<button
|
||||||
Fais fusionner les Citoyens jusqu'au débordement.
|
type="button"
|
||||||
</p>
|
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>
|
</div>
|
||||||
|
|
||||||
<button
|
<div className="mt-10">
|
||||||
type="button"
|
<MelonGame citizens={citizens} onStart={handleStart} onFinish={handleFinish} />
|
||||||
onClick={() => setShowRanking(true)}
|
</div>
|
||||||
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} />
|
|
||||||
|
|
||||||
{ownBestScore !== null && (
|
{ownBestScore !== null && (
|
||||||
<p className="text-center font-heading text-sm tracking-wide text-marble">
|
<p className="text-center font-heading text-sm tracking-wide text-marble">
|
||||||
|
|||||||
Reference in New Issue
Block a user