Working leaderboard

2026-02-07 15:44:38 +01:00
parent f930f0bca1
commit 969500f5a4
5 changed files with 99 additions and 266 deletions
@@ -1,25 +1,33 @@
-import { LeaderboardRank } from "@/modules/leaderboard/types";
 import { LinkIcon, Trophy } from "lucide-react";
 import Link from "next/link";

+interface GlobalLeaderboardUser {
+  rank: number;
+  user_id: string;
+  username: string;
+  wins: number;
+  podiums: number;
+  problems_completed: number;
+}
+
 const LeaderboardRow = ({
  index = 0,
  run,
 }: {
  index?: number;
-  run: LeaderboardRank;
+  run: GlobalLeaderboardUser;
 }) => {
  const getRankStyle = (rank: number) => {
-    if (run.rank === 1) return "rank-gold";
-    if (run.rank === 2) return "rank-silver";
-    if (run.rank === 3) return "rank-bronze";
+    if (rank === 1) return "rank-gold";
+    if (rank === 2) return "rank-silver";
+    if (rank === 3) return "rank-bronze";
    return "bg-secondary text-muted-foreground";
  };

  const getRankGlow = (rank: number) => {
-    if (run.rank === 1) return "glow-gold";
-    if (run.rank === 2) return "glow-silver";
-    if (run.rank === 3) return "glow-bronze";
+    if (rank === 1) return "glow-gold";
+    if (rank === 2) return "glow-silver";
+    if (rank === 3) return "glow-bronze";
    return "";
  };

@@ -27,7 +35,9 @@ const LeaderboardRow = ({

  return (
    <tr
-      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? "bg-secondary/30" : ""}`}
+      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${
+        isTopThree ? "bg-secondary/30" : ""
+      }`}
      style={{
        animationDelay: `${index * 0.05}s`,
        animationFillMode: "forwards",
@@ -36,7 +46,9 @@ const LeaderboardRow = ({
      {/* Rank */}
      <td className="py-4 px-5 w-16">
        <div
-          className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(run.rank)} ${getRankGlow(run.rank)}`}
+          className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(
+            run.rank
+          )} ${getRankGlow(run.rank)}`}
        >
          {isTopThree ? <Trophy className="h-4 w-4" /> : run.rank}
        </div>
@@ -46,41 +58,37 @@ const LeaderboardRow = ({
      <td>
        <div className="flex items-center gap-3">
          <span
-            className={`font-medium ${isTopThree ? "text-foreground" : "text-secondary-foreground"} group-hover:text-primary transition-colors`}
+            className={`font-medium ${
+              isTopThree ? "text-foreground" : "text-secondary-foreground"
+            } group-hover:text-primary transition-colors`}
          >
            {run.username}
          </span>
        </div>
      </td>

-      {/* Time */}
-      <td>
-        <span className="font-mono text-primary font-semibold flex justify-center">
-          {run.pb}
-        </span>
+      {/* Wins */}
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
+        {run.wins}
      </td>

-      {/* Category */}
-      <td className="py-4 px-4">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
-          {run.category}
-        </span>
+      {/* Podiums */}
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
+        {run.podiums}
      </td>

-      {/* Assisted */}
-      <td className="py-4 px-4">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
-          {run.assisted ? "Assisted" : "Unassisted"}
-        </span>
+      {/* Problems Completed */}
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
+        {run.problems_completed}
      </td>

-      {/* Runs */}
-      <td className="py-4 px-4 w-16 text-muted-foreground">{run.runsCount}</td>
-
-      {/* Problem */}
+      {/* Profile Link */}
      <td className="py-4 px-4">
-        <Link href="/" className="hover:text-primary flex items-center gap-1">
-          <LinkIcon className="w-3 h-3" /> {run.problem}
+        <Link
+          href={`/profile/${run.user_id}`}
+          className="hover:text-primary flex items-center gap-1"
+        >
+          <LinkIcon className="w-3 h-3" /> View Profile
        </Link>
      </td>
    </tr>
@@ -3,8 +3,7 @@
 import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
 import { useState } from "react";

-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
  Table,
@@ -13,7 +12,6 @@ import {
  TableHeader,
  TableRow,
 } from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
 import {
  Pagination,
  PaginationContent,
@@ -30,11 +28,10 @@ import {
  getGlobalLeaderboard,
  getWeeklyLeaderboard,
 } from "@/modules/leaderboard/actions";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

 export default function Leaderboards() {
-  const [global, globalLoaded, globalError] = useAction(getGlobalLeaderboard);
-  const [weekly, weeklyLoaded, weeklyError] = useAction(getWeeklyLeaderboard);
+  const [global] = useAction(getGlobalLeaderboard);
+  const [weekly] = useAction(getWeeklyLeaderboard);

  const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
  const data = (activeTab === "global" ? global : weekly) || [];
@@ -95,26 +92,6 @@ export default function Leaderboards() {
              </TabsTrigger>
            </TabsList>
          </Tabs>
-
-          <div className="flex flex-wrap gap-2">
-            <ToggleGroup variant="outline" type="single" defaultValue="any">
-              <ToggleGroupItem value="any" aria-label="any%">
-                any%
-              </ToggleGroupItem>
-              <ToggleGroupItem value="100" aria-label="100%">
-                100%
-              </ToggleGroupItem>
-            </ToggleGroup>
-
-            <ToggleGroup variant="outline" type="single">
-              <ToggleGroupItem value="true" aria-label="Assisted">
-                Assisted
-              </ToggleGroupItem>
-              <ToggleGroupItem value="false" aria-label="Unassisted">
-                Unassisted
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </div>
        </div>

        {/* Table */}
@@ -122,28 +99,38 @@ export default function Leaderboards() {
          <Table>
            <TableHeader>
              <TableRow>
-                <TableHead className="w-16">
-                  <p className="flex justify-center">Rank</p>
+                {/* Rank */}
+                <TableHead className="py-4 px-5 w-16 text-center">
+                  Rank
                </TableHead>
-                <TableHead className="w-52">
-                  <p className="flex justify-center">Runner</p>
+
+                {/* Runner / Username */}
+                <TableHead className="py-4 px-4 text-left">Runner</TableHead>
+
+                {/* Wins */}
+                <TableHead className="py-4 px-4 w-24 text-center">
+                  Wins
                </TableHead>
-                <TableHead className="w-24">
-                  <p className="flex justify-center">Time</p>
+
+                {/* Podiums */}
+                <TableHead className="py-4 px-4 w-24 text-center">
+                  Podiums
                </TableHead>
-                <TableHead className="w-16">
-                  <p className="flex justify-center">Category</p>
+
+                {/* Problems Completed */}
+                <TableHead className="py-4 px-4 text-center">
+                  Problems Completed
                </TableHead>
-                <TableHead className="w-24">
-                  <p className="flex justify-center">Assisted</p>
+
+                {/* User ID (optional) */}
+                <TableHead className="py-4 px-4 hidden md:table-cell text-left text-xs text-muted-foreground">
+                  User ID
                </TableHead>
-                <TableHead className="w-16">Runs</TableHead>
-                <TableHead>Problem</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data.map((entry, i) => (
-                <LeaderboardRow key={entry.username} index={i} run={entry} />
+                <LeaderboardRow key={entry.rank} index={i} run={entry} />
              ))}
            </TableBody>
          </Table>
@@ -1,194 +1,17 @@
 "use server";

+import { createClient } from "@/lib/supabase/server";
 import * as Core from "./core";
-import { LeaderboardRank } from "./types"; // updated interface
+import { LeaderboardUser } from "./types"; // updated interface

-export async function getGlobalLeaderboard(): Promise<LeaderboardRank[]> {
-  return [
-    {
-      rank: 1,
-      username: "speedmaster_x",
-      pb: "2:34.21",
-      runsCount: 2341,
-      problem: "Fix broken login flow",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 2,
-      username: "algo_ninja",
-      pb: "2:38.54",
-      runsCount: 1876,
-      problem: "Refactor legacy API endpoints",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 3,
-      username: "clockwork",
-      pb: "2:41.02",
-      runsCount: 3102,
-      problem: "Optimize image upload pipeline",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 4,
-      username: "fastfingers99",
-      pb: "2:45.33",
-      runsCount: 987,
-      problem: "Build a mini chat server",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 5,
-      username: "recursion_queen",
-      pb: "2:47.89",
-      runsCount: 1543,
-      problem: "Fix CSS layout bug in dashboard",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 6,
-      username: "bitshifter",
-      pb: "2:52.11",
-      runsCount: 2109,
-      problem: "Implement JWT authentication",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 7,
-      username: "nullpointer",
-      pb: "2:54.67",
-      runsCount: 876,
-      problem: "Create REST endpoint for user data",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 8,
-      username: "stackattack",
-      pb: "2:58.23",
-      runsCount: 1234,
-      problem: "Fix off-by-one bug in sorting function",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 9,
-      username: "looplegend",
-      pb: "3:01.45",
-      runsCount: 654,
-      problem: "Optimize SQL query for reports",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 10,
-      username: "coderunner",
-      pb: "3:05.78",
-      runsCount: 1098,
-      problem: "Add file upload validation",
-      category: "any%",
-      assisted: false,
-    },
-  ];
+export async function getGlobalLeaderboard(): Promise<LeaderboardUser[]> {
+  const supabase = await createClient();
+
+  return await Core.getGlobalLeaderboard(supabase);
 }

-export async function getWeeklyLeaderboard(): Promise<LeaderboardRank[]> {
-  return [
-    {
-      rank: 1,
-      username: "weekly_warrior",
-      pb: "2:51.33",
-      runsCount: 156,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 2,
-      username: "speedmaster_x",
-      pb: "2:53.12",
-      runsCount: 89,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 3,
-      username: "newbie_grinder",
-      pb: "2:58.67",
-      runsCount: 234,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 4,
-      username: "algo_ninja",
-      pb: "3:02.45",
-      runsCount: 67,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 5,
-      username: "fresh_runner",
-      pb: "3:05.89",
-      runsCount: 45,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 6,
-      username: "practice_makes",
-      pb: "3:08.12",
-      runsCount: 112,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 7,
-      username: "splitmaster",
-      pb: "3:12.34",
-      runsCount: 78,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 8,
-      username: "grindtime",
-      pb: "3:15.56",
-      runsCount: 92,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 9,
-      username: "pb_hunter",
-      pb: "3:18.90",
-      runsCount: 56,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 10,
-      username: "reset_king",
-      pb: "3:22.11",
-      runsCount: 187,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-  ];
+export async function getWeeklyLeaderboard(): Promise<LeaderboardUser[]> {
+  const supabase = await createClient();
+
+  return await Core.getWeeklyLeaderboard(supabase);
 }
@@ -1,3 +1,21 @@
 "use server";

+import { SupabaseClient } from "@supabase/supabase-js";
 import "server-only";
+import { LeaderboardUser } from "./types";
+
+export async function getGlobalLeaderboard(
+  supabase: SupabaseClient,
+): Promise<LeaderboardUser[]> {
+  const { data, error } = await supabase.rpc("get_global_leaderboard");
+  if (error) throw error;
+  return data;
+}
+
+export async function getWeeklyLeaderboard(
+  supabase: SupabaseClient,
+): Promise<LeaderboardUser[]> {
+  const { data, error } = await supabase.rpc("get_weekly_leaderboard");
+  if (error) throw error;
+  return data;
+}
@@ -1,11 +1,8 @@
-export type Leaderboard = LeaderboardRank[];
-
-export interface LeaderboardRank {
+export interface LeaderboardUser {
  rank: number;
+  user_id: string;
  username: string;
-  pb: string;
-  runsCount: number;
-  problem: string;
-  category: "any%" | "100%";
-  assisted: boolean;
+  wins: number;
+  podiums: number;
+  problems_completed: number;
 }