feat(leaderboard): add global rankings screen with solo/multi/all filters

app/api/leaderboard/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server";
+import { prisma } from "../../../lib/prisma";
+
+export async function GET() {
+  const users = await prisma.user.findMany({
+    include: { games: true },
+  });
+
+  const rows = users
+    .map((u) => {
+      const all = u.games;
+      const solo = all.filter((g) => g.mode === "solo");
+      const multi = all.filter((g) => g.mode === "multi");
+      const wins = all.filter((g) => g.won);
+      const wonGames = all.filter((g) => g.won && g.clicks > 0);
+      const avgClicks = wonGames.length
+        ? Math.round(wonGames.reduce((s, g) => s + g.clicks, 0) / wonGames.length)
+        : null;
+      const bestTime = wins.length
+        ? Math.min(...wins.map((g) => g.timeSeconds))
+        : null;
+
+      return {
+        id: u.id,
+        name: u.name,
+        totalGames: all.length,
+        wins: wins.length,
+        soloGames: solo.length,
+        soloWins: solo.filter((g) => g.won).length,
+        multiGames: multi.length,
+        multiWins: multi.filter((g) => g.won).length,
+        avgClicks,
+        bestTime,
+      };
+    })
+    .filter((r) => r.totalGames > 0)
+    .sort((a, b) => b.wins - a.wins || b.totalGames - a.totalGames);
+
+  return NextResponse.json(rows);
+}

app/components/HomeScreen.tsx

@@ -17,16 +17,20 @@ type HomeScreenProps = {
   session: Session | null;
   onShowAuth: () => void;
   onShowProfile: () => void;
+  onShowLeaderboard: () => void;
 };
 
 export function HomeScreen({
   playerName, setPlayerName, joinCode, setJoinCode,
   error, setError, loading, onCreateRoom, onJoinRoom, onSolo,
-  session, onShowAuth, onShowProfile,
+  session, onShowAuth, onShowProfile, onShowLeaderboard,
 }: HomeScreenProps) {
   return (
     <div className="screen home-screen">
       <div className="home-topbar">
+        <button className="btn btn-ghost btn-sm" onClick={onShowLeaderboard}>
+          🏆 Classement
+        </button>
         {session?.user ? (
           <button className="btn-account" onClick={onShowProfile}>
             <span className="account-avatar">{session.user.name?.[0]?.toUpperCase() ?? "?"}</span>

app/components/LeaderboardScreen.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type LeaderboardRow = {
+  id: string;
+  name: string;
+  totalGames: number;
+  wins: number;
+  soloGames: number;
+  soloWins: number;
+  multiGames: number;
+  multiWins: number;
+  avgClicks: number | null;
+  bestTime: number | null;
+};
+
+type Mode = "all" | "solo" | "multi";
+
+function fmt(s: number): string {
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${String(sec).padStart(2, "0")}`;
+}
+
+const MEDALS = ["🥇", "🥈", "🥉"];
+
+export function LeaderboardScreen({ onBack }: { onBack: () => void }) {
+  const [rows, setRows] = useState<LeaderboardRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [mode, setMode] = useState<Mode>("all");
+
+  useEffect(() => {
+    fetch("/api/leaderboard")
+      .then((r) => r.json())
+      .then((data) => { setRows(data); setLoading(false); });
+  }, []);
+
+  const sorted = [...rows].sort((a, b) => {
+    if (mode === "solo") return b.soloWins - a.soloWins || b.soloGames - a.soloGames;
+    if (mode === "multi") return b.multiWins - a.multiWins || b.multiGames - a.multiGames;
+    return b.wins - a.wins || b.totalGames - a.totalGames;
+  }).filter((r) => {
+    if (mode === "solo") return r.soloGames > 0;
+    if (mode === "multi") return r.multiGames > 0;
+    return true;
+  });
+
+  return (
+    <div className="screen leaderboard-screen">
+      <div className="leaderboard-header">
+        <button className="btn btn-ghost btn-back" onClick={onBack}>Retour</button>
+        <h2 className="leaderboard-title">Classement</h2>
+      </div>
+
+      <div className="leaderboard-tabs">
+        {(["all", "solo", "multi"] as Mode[]).map((m) => (
+          <button
+            key={m}
+            className={`leaderboard-tab ${mode === m ? "active" : ""}`}
+            onClick={() => setMode(m)}
+          >
+            {m === "all" ? "Global" : m === "solo" ? "Solo" : "Multijoueur"}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="leaderboard-loading"><div className="loading-spinner" /></div>
+      ) : sorted.length === 0 ? (
+        <p className="leaderboard-empty">Aucune partie jouée pour le moment.</p>
+      ) : (
+        <div className="leaderboard-list">
+          {sorted.map((row, i) => {
+            const games = mode === "solo" ? row.soloGames : mode === "multi" ? row.multiGames : row.totalGames;
+            const wins = mode === "solo" ? row.soloWins : mode === "multi" ? row.multiWins : row.wins;
+
+            return (
+              <div key={row.id} className={`leaderboard-row ${i < 3 ? "top" : ""}`}>
+                <span className="lb-rank">{MEDALS[i] ?? `#${i + 1}`}</span>
+                <span className="lb-name">{row.name}</span>
+                <div className="lb-stats">
+                  <span className="lb-stat"><span className="lb-stat-val">{wins}</span><span className="lb-stat-label">victoires</span></span>
+                  <span className="lb-stat"><span className="lb-stat-val">{games}</span><span className="lb-stat-label">parties</span></span>
+                  {row.avgClicks != null && (
+                    <span className="lb-stat"><span className="lb-stat-val">{row.avgClicks}</span><span className="lb-stat-label">moy. clics</span></span>
+                  )}
+                  {row.bestTime != null && (
+                    <span className="lb-stat"><span className="lb-stat-val">{fmt(row.bestTime)}</span><span className="lb-stat-label">meilleur temps</span></span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

app/components/ScreenRouter.tsx

@@ -13,6 +13,7 @@ import { SoloScreen } from "./SoloScreen";
 import { GameScreen } from "./GameScreen";
 import { AuthModal } from "./AuthModal";
 import { ProfileScreen } from "./ProfileScreen";
+import { LeaderboardScreen } from "./LeaderboardScreen";
 
 type Props = {
   screen: Screen;
@@ -41,6 +42,10 @@ export function ScreenRouter({
     <ProfileScreen userName={session?.user?.name ?? "Joueur"} onBack={() => setScreen("home")} />
   );
 
+  if (screen === "leaderboard") return (
+    <LeaderboardScreen onBack={() => setScreen("home")} />
+  );
+
   if (screen === "home") return (
     <>
       <HomeScreen
@@ -53,6 +58,7 @@ export function ScreenRouter({
         session={session}
         onShowAuth={() => setShowAuth(true)}
         onShowProfile={() => setScreen("profile")}
+        onShowLeaderboard={() => setScreen("leaderboard")}
       />
       {showAuth && <AuthModal onClose={() => setShowAuth(false)} onSuccess={() => setShowAuth(false)} />}
     </>

app/globals.css

@@ -1323,6 +1323,9 @@ body {
   position: absolute;
   top: 16px;
   right: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .btn-account {
@@ -1545,3 +1548,128 @@ body {
 }
 .game-path-sep { margin: 0 2px; }
 .game-path-end { color: var(--green); font-weight: 600; }
+
+/* ================================
+   Leaderboard
+   ================================ */
+
+.leaderboard-screen {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 24px 16px 48px;
+}
+
+.leaderboard-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.leaderboard-title {
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.leaderboard-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.leaderboard-tab {
+  flex: 1;
+  padding: 8px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-2);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition);
+}
+
+.leaderboard-tab.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.leaderboard-loading {
+  display: flex;
+  justify-content: center;
+  padding: 48px;
+}
+
+.leaderboard-empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 48px 0;
+}
+
+.leaderboard-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.leaderboard-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--bg-2);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+
+.leaderboard-row.top {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
+}
+
+.lb-rank {
+  font-size: 22px;
+  width: 32px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.lb-name {
+  font-weight: 700;
+  font-size: 15px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lb-stats {
+  display: flex;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.lb-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+}
+
+.lb-stat-val {
+  font-size: 15px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
+
+.lb-stat-label {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}

lib/types.ts

@@ -1,4 +1,4 @@
-export type Screen = "home" | "lobby" | "game" | "solo" | "profile";
+export type Screen = "home" | "lobby" | "game" | "solo" | "profile" | "leaderboard";
 
 export type WikiArticle = {
   title: string;