327 lines
10 KiB
TypeScript
327 lines
10 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "~/components/ui/table";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { TrendingUp, TrendingDown, Minus, Flag, CheckCircle2 } from "lucide-react";
|
|
|
|
interface SeasonStanding {
|
|
id: string;
|
|
championshipPoints: string; // Decimal as string
|
|
position: number;
|
|
previousPosition?: number | null; // For showing movement
|
|
participant: {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
}
|
|
|
|
interface TeamOwnership {
|
|
participantId: string;
|
|
teamName: string;
|
|
teamId: string;
|
|
ownerName?: string;
|
|
}
|
|
|
|
interface SeasonStandingsProps {
|
|
standings: SeasonStanding[];
|
|
teamOwnerships?: TeamOwnership[]; // Which teams own which participants
|
|
showOwnership?: boolean;
|
|
isFinalized?: boolean; // Whether season is complete
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
/**
|
|
* SeasonStandings component - Displays F1-style championship standings
|
|
*
|
|
* Features:
|
|
* - Shows participants ranked by championship points
|
|
* - Positions auto-calculated from points (highest = 1st)
|
|
* - Optional ownership hints with team avatars
|
|
* - Movement indicators (position changes)
|
|
* - Handles ties (same points = same position)
|
|
*/
|
|
export function SeasonStandings({
|
|
standings,
|
|
teamOwnerships = [],
|
|
showOwnership = true,
|
|
isFinalized = false,
|
|
title = "Championship Standings",
|
|
description,
|
|
}: SeasonStandingsProps) {
|
|
// Create ownership map for fast lookup
|
|
const ownershipMap = new Map<string, TeamOwnership>();
|
|
teamOwnerships.forEach((ownership) => {
|
|
ownershipMap.set(ownership.participantId, ownership);
|
|
});
|
|
|
|
// Get ownership info for a participant
|
|
const getOwnership = (participantId: string): TeamOwnership | null => {
|
|
if (!showOwnership) return null;
|
|
return ownershipMap.get(participantId) || null;
|
|
};
|
|
|
|
// Generate avatar from team name (first letter)
|
|
const getTeamAvatar = (teamName: string) => {
|
|
const initial = teamName.charAt(0).toUpperCase();
|
|
const hash = teamName.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
const colors = [
|
|
"bg-blue-500",
|
|
"bg-green-500",
|
|
"bg-purple-500",
|
|
"bg-pink-500",
|
|
"bg-amber-500",
|
|
"bg-red-500",
|
|
"bg-indigo-500",
|
|
"bg-teal-500",
|
|
];
|
|
const colorClass = colors[hash % colors.length];
|
|
|
|
return (
|
|
<div
|
|
className={`h-6 w-6 rounded-full ${colorClass} text-white text-xs font-bold flex items-center justify-center`}
|
|
>
|
|
{initial}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Get movement indicator
|
|
const getMovementIndicator = (
|
|
currentPosition: number,
|
|
previousPosition?: number | null
|
|
) => {
|
|
if (!previousPosition) return null;
|
|
|
|
const change = previousPosition - currentPosition; // Positive means moved up
|
|
|
|
if (change > 0) {
|
|
return (
|
|
<div className="flex items-center gap-1 text-green-600 dark:text-green-400">
|
|
<TrendingUp className="h-3 w-3" />
|
|
<span className="text-xs">+{change}</span>
|
|
</div>
|
|
);
|
|
} else if (change < 0) {
|
|
return (
|
|
<div className="flex items-center gap-1 text-red-600 dark:text-red-400">
|
|
<TrendingDown className="h-3 w-3" />
|
|
<span className="text-xs">{change}</span>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="flex items-center gap-1 text-muted-foreground">
|
|
<Minus className="h-3 w-3" />
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
// Get position badge with medals for top 3
|
|
const getPositionBadge = (position: number, isTied: boolean) => {
|
|
const positionText = isTied ? `T${position}` : position.toString();
|
|
|
|
if (position === 1 && !isTied) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xl">🥇</span>
|
|
<span className="font-bold text-lg">{positionText}</span>
|
|
</div>
|
|
);
|
|
} else if (position === 2 && !isTied) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xl">🥈</span>
|
|
<span className="font-semibold">{positionText}</span>
|
|
</div>
|
|
);
|
|
} else if (position === 3 && !isTied) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xl">🥉</span>
|
|
<span className="font-semibold">{positionText}</span>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<span className="font-medium">
|
|
{positionText}
|
|
{position === 1
|
|
? "st"
|
|
: position === 2
|
|
? "nd"
|
|
: position === 3
|
|
? "rd"
|
|
: "th"}
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
// Check if multiple participants share the same position
|
|
const checkIfTied = (standing: SeasonStanding): boolean => {
|
|
return standings.some(
|
|
(other) =>
|
|
other.id !== standing.id && other.position === standing.position
|
|
);
|
|
};
|
|
|
|
// Count top 8 finishers (those who will get fantasy points)
|
|
const top8Count = standings.filter((s) => s.position <= 8).length;
|
|
|
|
return (
|
|
<Card
|
|
className={
|
|
isFinalized
|
|
? "border-green-200 dark:border-green-800"
|
|
: "border-blue-200 dark:border-blue-800"
|
|
}
|
|
>
|
|
<CardHeader>
|
|
<CardTitle
|
|
className={
|
|
isFinalized
|
|
? "text-green-600 dark:text-green-400"
|
|
: "text-blue-600 dark:text-blue-400"
|
|
}
|
|
>
|
|
<Flag className="inline mr-2 h-5 w-5" />
|
|
{title}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{isFinalized ? (
|
|
<span className="text-green-600 dark:text-green-400 font-semibold">
|
|
<CheckCircle2 className="inline h-4 w-4 mr-1" />
|
|
Season complete - Fantasy points assigned to top 8 finishers
|
|
</span>
|
|
) : (
|
|
<>
|
|
Current championship standings. Positions calculated from points
|
|
(highest = 1st).
|
|
{top8Count > 0 && (
|
|
<span className="block mt-1">
|
|
Top 8 finishers will receive fantasy points when season completes.
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{standings.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<p className="text-sm">No standings data available yet.</p>
|
|
<p className="text-xs mt-1">
|
|
Championship points will appear here once results are entered.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-20">Pos</TableHead>
|
|
{standings.some((s) => s.previousPosition) && (
|
|
<TableHead className="w-20">Change</TableHead>
|
|
)}
|
|
<TableHead>Participant</TableHead>
|
|
<TableHead className="text-right">Points</TableHead>
|
|
{showOwnership && (
|
|
<TableHead className="w-24 text-center">Team</TableHead>
|
|
)}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{standings
|
|
.sort((a, b) => a.position - b.position)
|
|
.map((standing) => {
|
|
const ownership = getOwnership(standing.participant.id);
|
|
const isTied = checkIfTied(standing);
|
|
const isTop8 = standing.position <= 8;
|
|
|
|
return (
|
|
<TableRow
|
|
key={standing.id}
|
|
className={
|
|
isTop8
|
|
? standing.position <= 3
|
|
? "bg-muted/30 font-medium"
|
|
: ""
|
|
: "opacity-60"
|
|
}
|
|
>
|
|
<TableCell>
|
|
{getPositionBadge(standing.position, isTied)}
|
|
</TableCell>
|
|
{standings.some((s) => s.previousPosition) && (
|
|
<TableCell>
|
|
{getMovementIndicator(
|
|
standing.position,
|
|
standing.previousPosition
|
|
)}
|
|
</TableCell>
|
|
)}
|
|
<TableCell className="font-medium">
|
|
{standing.participant.name}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<span
|
|
className={`font-semibold ${
|
|
isTop8
|
|
? "text-blue-600 dark:text-blue-400"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
>
|
|
{parseFloat(standing.championshipPoints).toFixed(1)} pts
|
|
</span>
|
|
</TableCell>
|
|
{showOwnership && (
|
|
<TableCell className="text-center">
|
|
{ownership ? (
|
|
<div
|
|
className="cursor-help inline-block"
|
|
title={`${ownership.teamName}${ownership.ownerName ? ` (${ownership.ownerName})` : ""}`}
|
|
>
|
|
{getTeamAvatar(ownership.teamName)}
|
|
</div>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground">-</span>
|
|
)}
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
{!isFinalized && top8Count > 0 && (
|
|
<div className="mt-4 p-3 border-t">
|
|
<p className="text-sm text-muted-foreground">
|
|
<Badge variant="secondary" className="text-xs">
|
|
{top8Count}
|
|
</Badge>{" "}
|
|
participant{top8Count !== 1 ? "s" : ""} currently in top 8 will
|
|
receive fantasy points when season completes.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|