8-bit Leaderboard

1import * as React from "react";
2 
3import { cva } from "class-variance-authority";
4 
5import { cn } from "@/lib/utils";
6 
7import {
8  Avatar,
9  AvatarFallback,
10  AvatarImage,
11} from "@/components/ui/8bit/avatar";
12import { Badge } from "@/components/ui/8bit/badge";
13import {
14  Card,
15  CardContent,
16  CardHeader,
17  CardTitle,
18} from "@/components/ui/8bit/card";
19import { Separator } from "@/components/ui/8bit/separator";
20import "@/components/ui/8bit/styles/retro.css";
21 
22export interface LeaderboardPlayer {
23  id: string;
24  name: string;
25  score: number;
26  rank?: number;
27  isCurrentPlayer?: boolean;
28  avatar?: string;
29  avatarFallback?: string;
30}
31 
32export interface LeaderboardProps extends React.ComponentProps<"div"> {
33  players: LeaderboardPlayer[];
34  maxPlayers?: number;
35  showRank?: boolean;
36  showAvatar?: boolean;
37  className?: string;
38  title?: string;
39  currentPlayerId?: string;
40}
41 
42const playerItemVariants = cva(
43  "flex items-center justify-between p-3 rounded-lg transition-all duration-200",
44  {
45    variants: {
46      rank: {
47        default: "bg-muted/50 hover:bg-muted",
48        first: "bg-primary/20 border-2 border-primary hover:bg-primary/30",
49        second: "bg-secondary/20 border-2 border-secondary hover:bg-secondary/30",
50        third: "bg-accent/20 border-2 border-accent hover:bg-accent/30",
51        current: "bg-primary/20 border-2 border-primary hover:bg-primary/30",
52      },
53    },
54    defaultVariants: {
55      rank: "default",
56    },
57  }
58);
59 
60const rankBadgeVariants = cva(
61  "flex items-center justify-center size-8 text-sm font-bold",
62  {
63    variants: {
64      rank: {
65        default: "bg-muted text-muted-foreground",
66        first: "bg-primary text-primary-foreground",
67        second: "bg-secondary text-secondary-foreground",
68        third: "bg-accent text-accent-foreground",
69        current: "bg-primary text-primary-foreground",
70      },
71    },
72    defaultVariants: {
73      rank: "default",
74    },
75  }
76);
77 
78function getRankVariant(
79  rank: number,
80  isCurrentPlayer: boolean
81): "default" | "first" | "second" | "third" | "current" {
82  if (isCurrentPlayer) return "current";
83  if (rank === 1) return "first";
84  if (rank === 2) return "second";
85  if (rank === 3) return "third";
86  return "default";
87}
88 
89function formatScore(score: number): string {
90  return score.toLocaleString();
91}
92 
93function getRankIcon(rank: number): string {
94  switch (rank) {
95    case 1:
96      return "🥇";
97    case 2:
98      return "🥈";
99    case 3:
100      return "🥉";
101    default:
102// … truncated