feat(flappy): add top-10 leaderboard beneath the game

src/app/(frontend)/flappy/page.tsx

@@ -4,7 +4,7 @@ import { getPayload } from "payload";
 import { headers as nextHeaders } from "next/headers";
 import { redirect } from "next/navigation";
 import { Bird } from "lucide-react";
-import { FlappyBird } from "@/components/frontend/flappy/FlappyBird";
+import { FlappyArena } from "@/components/frontend/flappy/FlappyArena";
 
 export const metadata: Metadata = {
   title: "Flappy Bird — Polaris Task Force",
@@ -56,7 +56,7 @@ export default async function FlappyPage() {
         </p>
       </div>
 
-      <FlappyBird initialStats={stats} />
+      <FlappyArena initialStats={stats} currentUserId={user.id as number} />
     </div>
   );
 }

src/components/frontend/flappy/FlappyArena.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import type { FlappyStats } from "@/app/(frontend)/flappy/actions";
+import { FlappyBird } from "./FlappyBird";
+import { FlappyLeaderboard } from "./FlappyLeaderboard";
+
+export function FlappyArena({
+  initialStats,
+  currentUserId,
+}: {
+  initialStats: FlappyStats;
+  currentUserId: number | string;
+}) {
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <FlappyBird initialStats={initialStats} onGameRecorded={() => setRefreshKey((k) => k + 1)} />
+      <FlappyLeaderboard refreshKey={refreshKey} currentUserId={currentUserId} />
+    </div>
+  );
+}

src/components/frontend/flappy/FlappyBird.tsx

@@ -142,7 +142,13 @@ function birdHitsPipe(birdX: number, birdY: number, pipe: Pipe): boolean {
   return topBlocked || bottomBlocked;
 }
 
-export function FlappyBird({ initialStats: serverStats }: { initialStats: FlappyStats }) {
+export function FlappyBird({
+  initialStats: serverStats,
+  onGameRecorded,
+}: {
+  initialStats: FlappyStats;
+  onGameRecorded?: () => void;
+}) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const phaseRef = useRef<Phase>("ready");
@@ -206,6 +212,7 @@ export function FlappyBird({ initialStats: serverStats }: { initialStats: Flappy
       if (res.success && res.data) {
         statsRef.current = res.data;
         setStats(res.data);
+        onGameRecorded?.();
         if (res.data.xpEarned > 0) {
           playXp();
         }
@@ -223,7 +230,7 @@ export function FlappyBird({ initialStats: serverStats }: { initialStats: Flappy
         });
       }
     },
-    [],
+    [onGameRecorded],
   );
 
   const handleGameOverRef = useRef(handleGameOver);

src/components/frontend/flappy/FlappyLeaderboard.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Trophy } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ApiUser {
+  id: number;
+  username?: string | null;
+  displayName?: string | null;
+  payloadDisplayName?: string | null;
+}
+
+interface ApiProfile {
+  id: number;
+  profileTitle?: string | null;
+  user?: ApiUser | number | null;
+  progression?: {
+    minigames?: {
+      flappyBird?: {
+        gamesPlayed?: number | null;
+        totalPasses?: number | null;
+        bestScore?: number | null;
+        xpEarned?: number | null;
+      } | null;
+    } | null;
+  } | null;
+}
+
+interface LeaderboardRow {
+  id: number;
+  name: string;
+  gamesPlayed: number;
+  totalPasses: number;
+  bestScore: number;
+  xpEarned: number;
+  isCurrentUser: boolean;
+}
+
+interface FlappyLeaderboardProps {
+  refreshKey?: number;
+  currentUserId?: number | string;
+}
+
+function rankClass(index: number) {
+  if (index === 0) return "font-bold text-amber-400";
+  if (index === 1) return "font-semibold text-slate-300";
+  if (index === 2) return "font-semibold text-amber-700";
+  return "text-muted-foreground";
+}
+
+export function FlappyLeaderboard({ refreshKey = 0, currentUserId }: FlappyLeaderboardProps) {
+  const [rows, setRows] = useState<LeaderboardRow[] | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setFailed(false);
+
+    const params = new URLSearchParams({
+      "where[progression.minigames.flappyBird.bestScore][greater_than]": "0",
+      sort: "-progression.minigames.flappyBird.bestScore",
+      limit: "10",
+      depth: "1",
+    });
+
+    fetch(`/api/profiles?${params.toString()}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("leaderboard fetch failed");
+        return res.json() as Promise<{ docs?: ApiProfile[] }>;
+      })
+      .then((data) => {
+        if (cancelled) return;
+        setRows(
+          (data.docs ?? []).map((doc) => {
+            const flappy = doc.progression?.minigames?.flappyBird ?? {};
+            const user = typeof doc.user === "object" && doc.user !== null ? doc.user : null;
+            const name =
+              user?.displayName || doc.profileTitle || user?.username || `Pilot #${doc.id}`;
+            return {
+              id: doc.id,
+              name,
+              gamesPlayed: flappy.gamesPlayed ?? 0,
+              totalPasses: flappy.totalPasses ?? 0,
+              bestScore: flappy.bestScore ?? 0,
+              xpEarned: flappy.xpEarned ?? 0,
+              isCurrentUser: user ? String(user.id) === String(currentUserId) : false,
+            };
+          }),
+        );
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [refreshKey, currentUserId]);
+
+  return (
+    <div className="w-full max-w-[420px] rounded-xl border border-border bg-card">
+      <div className="flex items-center gap-2 border-b border-border px-4 py-3">
+        <Trophy className="size-4 text-amber-400" />
+        <h2 className="text-sm font-semibold">Flappy Leaderboard</h2>
+        <span className="ml-auto text-xs text-muted-foreground">Top 10 · best run</span>
+      </div>
+
+      {failed ? (
+        <p className="px-4 py-4 text-sm text-muted-foreground">Could not load the leaderboard.</p>
+      ) : rows === null ? (
+        <div className="space-y-2 px-4 py-4">
+          <div className="h-4 w-full animate-pulse rounded bg-border" />
+          <div className="h-4 w-3/4 animate-pulse rounded bg-border" />
+          <div className="h-4 w-1/2 animate-pulse rounded bg-border" />
+        </div>
+      ) : rows.length === 0 ? (
+        <p className="px-4 py-4 text-sm text-muted-foreground">
+          No pilots on the board yet — be the first to pass a pipe!
+        </p>
+      ) : (
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left text-xs uppercase tracking-wider text-muted-foreground">
+              <th className="px-4 py-2 font-medium">#</th>
+              <th className="px-2 py-2 font-medium">Pilot</th>
+              <th className="px-2 py-2 text-right font-medium">Games</th>
+              <th className="px-2 py-2 text-right font-medium">Pipes</th>
+              <th className="px-2 py-2 text-right font-medium">Best</th>
+              <th className="px-4 py-2 text-right font-medium">XP</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {rows.map((row, i) => (
+              <tr key={row.id} className={cn(row.isCurrentUser && "bg-accent/40")}>
+                <td className="px-4 py-2">
+                  <span className={rankClass(i)}>{i + 1}</span>
+                </td>
+                <td className="px-2 py-2 font-medium">
+                  <span className="flex items-center gap-2">
+                    <span className="max-w-[180px] truncate">{row.name}</span>
+                    {row.isCurrentUser && (
+                      <span className="shrink-0 text-xs text-muted-foreground">(you)</span>
+                    )}
+                  </span>
+                </td>
+                <td className="px-2 py-2 text-right tabular-nums text-muted-foreground">
+                  {row.gamesPlayed}
+                </td>
+                <td className="px-2 py-2 text-right tabular-nums text-muted-foreground">
+                  {row.totalPasses}
+                </td>
+                <td className="px-2 py-2 text-right font-semibold tabular-nums">{row.bestScore}</td>
+                <td className="px-4 py-2 text-right tabular-nums text-muted-foreground">
+                  {row.xpEarned}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}