Valentin ROBIN
187cdec0e2
Build and deploy / deploy (push) Successful in 36s
Nouvelle section (game-highlights.tsx) juste sous les raccourcis : avatar, pseudo et score du meneur actuel de chaque mini-jeu, cliquable vers le jeu correspondant. Même règle que les podiums existants : rien affiché tant que le meneur est à 0. Score en text-sea (pas gold-bright, peu lisible sur fond marbre — même choix déjà fait pour Icare/Corne/l'Urne). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import type { ComponentType } from "react";
|
|
import { Avatar } from "@/components/avatar";
|
|
import { IconHorn, IconWings } from "@/components/icons";
|
|
|
|
export type GameLeader = { pseudo: string; avatarUrl: string | null; score: number } | null;
|
|
|
|
function LeaderCard({
|
|
href,
|
|
label,
|
|
icon: Icon,
|
|
leader,
|
|
}: {
|
|
href: string;
|
|
label: string;
|
|
icon: ComponentType<{ className?: string }>;
|
|
leader: GameLeader;
|
|
}) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="marble-surface flex items-center gap-3 rounded-xl border border-gold/25 p-3 shadow-sm transition hover:border-gold/50 hover:shadow-md"
|
|
>
|
|
<Icon className="h-5 w-5 shrink-0 text-gold" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-[0.65rem] font-medium tracking-wide text-text-mut uppercase">{label}</p>
|
|
{leader ? (
|
|
<div className="mt-1 flex items-center gap-2">
|
|
<Avatar pseudo={leader.pseudo} avatarUrl={leader.avatarUrl} size="xs" />
|
|
<span className="truncate text-sm font-medium text-text-marble">{leader.pseudo}</span>
|
|
</div>
|
|
) : (
|
|
<p className="mt-1 truncate text-sm text-text-mut">Personne n'a encore joué</p>
|
|
)}
|
|
</div>
|
|
{leader && <span className="shrink-0 font-heading text-sm font-bold text-sea">{leader.score}</span>}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// Comme les podiums (voir leaderboard/icare/corne) : un meneur à 0 n'est pas
|
|
// un vrai champion, juste un score par défaut — rien à afficher tant que
|
|
// personne n'a vraiment marqué (leader passé à null par la page).
|
|
export function GameHighlights({
|
|
icarusLeader,
|
|
melonLeader,
|
|
}: {
|
|
icarusLeader: GameLeader;
|
|
melonLeader: GameLeader;
|
|
}) {
|
|
return (
|
|
<div className="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<LeaderCard href="/icare" label="Le Vol d'Icare" icon={IconWings} leader={icarusLeader} />
|
|
<LeaderCard href="/corne" label="La Corne d'Abondance" icon={IconHorn} leader={melonLeader} />
|
|
</div>
|
|
);
|
|
}
|