From 0c9eaca31295e3ada3a085d1170194d9275b4d13 Mon Sep 17 00:00:00 2001
From: AyoubBenziza <ayoub.cbenziza@gmail.com>
Date: Tue, 9 Jun 2026 10:25:28 +0200
Subject: [PATCH] feat(web): glorify the winner on the final leaderboard

- dedicated winner card: gold border, gold gradient, pulsing gold glow,
  spring scale-in, and a Crown that drops & bounces in (Framer Motion)
- champion label + big gold score; runners-up listed below from rank 2
- drop the generic Scoreboard component (now unused)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/game-end-view.tsx | 86 +++++++++++++++++++++--
 apps/web/src/components/scoreboard.tsx    | 37 ----------
 2 files changed, 80 insertions(+), 43 deletions(-)
 delete mode 100644 apps/web/src/components/scoreboard.tsx

diff --git a/apps/web/src/components/game-end-view.tsx b/apps/web/src/components/game-end-view.tsx
index 0d8c8fe..fb85092 100644
--- a/apps/web/src/components/game-end-view.tsx
+++ b/apps/web/src/components/game-end-view.tsx
@@ -1,8 +1,9 @@
 import { Link } from "wouter"
+import { motion } from "framer-motion"
+import { Crown } from "lucide-react"
 import type { PlayerScore, RoomSnapshot } from "@nerdware/shared"
 import { Button } from "@workspace/ui/components/button"
 import { useRoomStore } from "@/store/room"
-import { Scoreboard } from "@/components/scoreboard"
 
 export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
   const playerId = useRoomStore((s) => s.playerId)
@@ -10,9 +11,13 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
   const reset = useRoomStore((s) => s.reset)
 
   const scores: PlayerScore[] = finalScores ?? snapshot.scores
-  const winner = [...scores].sort((a, b) => b.score - a.score)[0]
-  const winnerName =
-    snapshot.players.find((p) => p.id === winner?.playerId)?.name ?? "?"
+  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
 
   return (
     <div className="flex w-full max-w-md flex-col gap-6 text-center">
@@ -21,11 +26,80 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
           Partie terminée
         </p>
         <h2 className="font-heading text-2xl font-bold">
-          🏆 {winnerName} l'emporte !
+          🏆 {winner ? nameOf(winner.playerId) : "?"} l'emporte !
         </h2>
       </header>
 
-      <Scoreboard scores={scores} snapshot={snapshot} playerId={playerId} />
+      {winner && (
+        <motion.div
+          initial={{ scale: 0.7, opacity: 0, y: 10 }}
+          animate={{
+            scale: 1,
+            opacity: 1,
+            y: 0,
+            boxShadow: [
+              "0 0 0px 0px rgba(251,191,36,0.0)",
+              "0 0 28px 4px rgba(251,191,36,0.45)",
+              "0 0 14px 2px rgba(251,191,36,0.25)",
+            ],
+          }}
+          transition={{
+            scale: { type: "spring", stiffness: 300, damping: 18 },
+            boxShadow: { duration: 2, repeat: Infinity, repeatType: "reverse" },
+          }}
+          className="relative mt-3 flex flex-col items-center gap-1 rounded-2xl border-2 border-amber-400 bg-gradient-to-b from-amber-400/20 to-amber-400/5 px-6 py-5"
+        >
+          <motion.span
+            initial={{ y: -28, rotate: -25, opacity: 0 }}
+            animate={{ y: 0, rotate: 0, opacity: 1 }}
+            transition={{ type: "spring", stiffness: 500, damping: 14, delay: 0.2 }}
+            className="absolute -top-5"
+          >
+            <Crown className="size-9 fill-amber-400 text-amber-400 drop-shadow" />
+          </motion.span>
+
+          <span className="font-heading mt-2 text-xl font-bold text-balance">
+            {nameOf(winner.playerId)}
+            {isMe(winner.playerId) && (
+              <span className="text-muted-foreground text-sm"> (toi)</span>
+            )}
+          </span>
+          <span className="font-heading text-3xl font-black tabular-nums text-amber-400">
+            {winner.score}
+          </span>
+          <span className="text-muted-foreground text-[10px] tracking-widest uppercase">
+            Champion·ne
+          </span>
+        </motion.div>
+      )}
+
+      {rest.length > 0 && (
+        <ol className="flex flex-col gap-1">
+          {rest.map((s, i) => (
+            <li
+              key={s.playerId}
+              className={`bg-muted/40 flex items-center justify-between rounded-md px-3 py-2 text-sm ${
+                isMe(s.playerId) ? "ring-primary ring-2" : ""
+              }`}
+            >
+              <span className="flex items-center gap-2">
+                <span className="text-muted-foreground w-5 text-right tabular-nums">
+                  {i + 2}
+                </span>
+                <span>
+                  {nameOf(s.playerId)}
+                  {isMe(s.playerId) && (
+                    <span className="text-muted-foreground"> (toi)</span>
+                  )}
+                </span>
+              </span>
+              <span className="font-heading font-bold tabular-nums">
+                {s.score}
+              </span>
+            </li>
+          ))}
+        </ol>
+      )}
 
       <Link href="/">
         <Button variant="secondary" className="w-full" onClick={reset}>
diff --git a/apps/web/src/components/scoreboard.tsx b/apps/web/src/components/scoreboard.tsx
deleted file mode 100644
index 7758bb0..0000000
--- a/apps/web/src/components/scoreboard.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { PlayerScore, RoomSnapshot } from "@nerdware/shared"
-
-interface ScoreboardProps {
-  scores: PlayerScore[]
-  snapshot: RoomSnapshot
-  playerId: string | null
-}
-
-export function Scoreboard({ scores, snapshot, playerId }: ScoreboardProps) {
-  const nameOf = (id: string) =>
-    snapshot.players.find((p) => p.id === id)?.name ?? "?"
-  const ranked = [...scores].sort((a, b) => b.score - a.score)
-
-  return (
-    <ol className="flex flex-col gap-1">
-      {ranked.map((s, i) => (
-        <li
-          key={s.playerId}
-          className="bg-muted/40 flex items-center justify-between rounded-md px-3 py-2 text-sm"
-        >
-          <span className="flex items-center gap-2">
-            <span className="text-muted-foreground w-5 text-right tabular-nums">
-              {i + 1}
-            </span>
-            <span>
-              {nameOf(s.playerId)}
-              {s.playerId === playerId && (
-                <span className="text-muted-foreground"> (toi)</span>
-              )}
-            </span>
-          </span>
-          <span className="font-heading font-bold tabular-nums">{s.score}</span>
-        </li>
-      ))}
-    </ol>
-  )
-}