diff --git a/apps/web/src/components/game-end-view.tsx b/apps/web/src/components/game-end-view.tsx index d79fdfe..28c1ae9 100644 --- a/apps/web/src/components/game-end-view.tsx +++ b/apps/web/src/components/game-end-view.tsx @@ -6,6 +6,109 @@ import { Button } from "@workspace/ui/components/button" import { useRoomStore } from "@/store/room" import { Avatar } from "@/components/avatar" +type Place = 1 | 2 | 3 + +// Hauteur de marche, couleurs (or / argent / bronze) et taille d'avatar par place. +const PODIUM: Record = { + 1: { + bar: "h-24", + pedestal: "border-amber-400 bg-gradient-to-b from-amber-400/30 to-amber-400/5", + text: "text-amber-400", + ring: "ring-amber-400", + avatar: "size-20", + }, + 2: { + bar: "h-16", + pedestal: "border-zinc-300/70 bg-gradient-to-b from-zinc-300/20 to-zinc-300/5", + text: "text-zinc-300", + ring: "ring-zinc-300", + avatar: "size-16", + }, + 3: { + bar: "h-12", + pedestal: "border-amber-700/70 bg-gradient-to-b from-amber-700/25 to-amber-700/5", + text: "text-amber-600", + ring: "ring-amber-700", + avatar: "size-16", + }, +} + +function PodiumColumn({ + entry, + place, + name, + isMe, + delay, +}: { + entry: PlayerScore + place: Place + name: string + isMe: boolean + delay: number +}) { + const cfg = PODIUM[place] + return ( + +
+ {place === 1 && ( + + + + )} + + + +
+ + + {name} + {isMe && (toi)} + + + {entry.score} + + +
+ + {place} + +
+
+ ) +} + export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) { const playerId = useRoomStore((s) => s.playerId) const finalScores = useRoomStore((s) => s.finalScores) @@ -15,11 +118,11 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) { const ranked = [...scores].sort((a, b) => b.score - a.score) const nameOf = (id: string) => snapshot.players.find((p) => p.id === id)?.name ?? "?" - - const winner = ranked[0] - const rest = ranked.slice(1) const isMe = (id: string) => id === playerId + const [first, second, third] = ranked + const rest = ranked.slice(3) + return (
@@ -27,57 +130,40 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) { Partie terminée

- 🏆 {winner ? nameOf(winner.playerId) : "?"} l'emporte ! + 🏆 {first ? nameOf(first.playerId) : "?"} l'emporte !

- {winner && ( - - - - - - + {second && ( + - - - {nameOf(winner.playerId)} - {isMe(winner.playerId) && ( - (toi) - )} - - - {winner.score} - - - Champion·ne - - - )} + )} + {first && ( + + )} + {third && ( + + )} +
{rest.length > 0 && (
    @@ -90,7 +176,7 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) { > - {i + 2} + {i + 4} diff --git a/apps/web/src/components/lobby-view.tsx b/apps/web/src/components/lobby-view.tsx index 8093e7f..b315a3f 100644 --- a/apps/web/src/components/lobby-view.tsx +++ b/apps/web/src/components/lobby-view.tsx @@ -42,7 +42,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) { - + {p.name} {p.id === playerId && ( (toi) diff --git a/apps/web/src/components/player-cards.tsx b/apps/web/src/components/player-cards.tsx index 3b9dff8..e079e68 100644 --- a/apps/web/src/components/player-cards.tsx +++ b/apps/web/src/components/player-cards.tsx @@ -41,7 +41,7 @@ export function PlayerCards({ key={p.id} layout transition={{ type: "spring", stiffness: 500, damping: 40 }} - className={`relative flex min-w-20 flex-col items-center gap-0.5 rounded-xl border px-3 py-2 ${ + className={`relative flex min-w-24 flex-col items-center gap-1 rounded-xl border px-3 py-2.5 ${ isLeader ? "border-amber-400/60 bg-amber-400/10" : "border-input bg-muted/40" @@ -61,7 +61,7 @@ export function PlayerCards({ )} {p.name}