471 lines
17 KiB
TypeScript
471 lines
17 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import { BarChart3 } from "lucide-react";
|
|
import { TeamOwnerBadge } from "~/components/ui/team-owner-badge";
|
|
|
|
interface StandingRow {
|
|
id: string;
|
|
participantId: string;
|
|
wins: number;
|
|
losses: number;
|
|
otLosses: number | null;
|
|
ties?: number | null;
|
|
tablePoints?: number | null;
|
|
goalsFor?: number | null;
|
|
goalsAgainst?: number | null;
|
|
goalDifference?: number | null;
|
|
winPct: string | null;
|
|
gamesPlayed: number;
|
|
gamesBack: string | null;
|
|
conference: string | null;
|
|
division: string | null;
|
|
conferenceRank: number | null;
|
|
divisionRank: number | null;
|
|
leagueRank: number | null;
|
|
streak: string | null;
|
|
lastTen: string | null;
|
|
homeRecord: string | null;
|
|
awayRecord: string | null;
|
|
syncedAt: Date | string | null;
|
|
participant: { id: string; name: string; shortName?: string | null };
|
|
}
|
|
|
|
interface TeamOwnership {
|
|
teamName: string;
|
|
ownerName: string;
|
|
teamId: string;
|
|
}
|
|
|
|
interface Props {
|
|
standings: StandingRow[];
|
|
teamOwnerships: Record<string, TeamOwnership>;
|
|
userParticipantIds: string[];
|
|
showOtLosses?: boolean;
|
|
showSoccerTable?: boolean;
|
|
/** How many teams per conference qualify for playoffs (flat mode only). 0 = no line. */
|
|
playoffSpots?: number;
|
|
/** "flat" = single ranked list per conference (NBA). "nhl-divisions" = div top-3 + wild card. "mlb-divisions" = same structure with 3 WC spots, uses "League" label. */
|
|
displayMode?: "flat" | "nhl-divisions" | "mlb-divisions";
|
|
}
|
|
|
|
type RankMode = "conference" | "division" | "index";
|
|
|
|
interface TableSection {
|
|
heading?: string;
|
|
rows: StandingRow[];
|
|
rankMode: RankMode;
|
|
playoffSpots: number;
|
|
showDivisionLabel?: boolean;
|
|
}
|
|
|
|
// ─── Formatting ───────────────────────────────────────────────────────────────
|
|
|
|
function formatWinPct(winPct: string | null, wins: number, gamesPlayed: number): string {
|
|
if (winPct !== null) {
|
|
const pct = parseFloat(winPct);
|
|
if (!isNaN(pct)) return pct.toFixed(3);
|
|
}
|
|
if (gamesPlayed > 0) return (wins / gamesPlayed).toFixed(3);
|
|
return "—";
|
|
}
|
|
|
|
function formatGB(gamesBack: string | null): string {
|
|
if (gamesBack === null) return "—";
|
|
const gb = parseFloat(gamesBack);
|
|
if (isNaN(gb) || gb === 0) return "—";
|
|
return gb % 1 === 0 ? gb.toString() : gb.toFixed(1);
|
|
}
|
|
|
|
function getRank(row: StandingRow, idx: number, mode: RankMode): number {
|
|
if (mode === "division") return row.divisionRank ?? idx + 1;
|
|
if (mode === "index") return idx + 1;
|
|
return row.conferenceRank ?? idx + 1;
|
|
}
|
|
|
|
// ─── Grouping ─────────────────────────────────────────────────────────────────
|
|
|
|
type ConferenceGroup = { conference: string; conferenceLabel: string; sections: TableSection[] };
|
|
|
|
function buildFlatSections(
|
|
standings: StandingRow[],
|
|
playoffSpots: number
|
|
): ConferenceGroup[] {
|
|
const hasConferences = standings.some((s) => s.conference);
|
|
|
|
if (!hasConferences) {
|
|
return [
|
|
{
|
|
conference: "",
|
|
conferenceLabel: "Conference",
|
|
sections: [
|
|
{
|
|
rows: [...standings].toSorted(
|
|
(a, b) => (a.leagueRank ?? 99) - (b.leagueRank ?? 99)
|
|
),
|
|
rankMode: "conference",
|
|
playoffSpots,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
const confMap = new Map<string, StandingRow[]>();
|
|
for (const row of standings) {
|
|
const conf = row.conference ?? "Other";
|
|
if (!confMap.has(conf)) confMap.set(conf, []);
|
|
confMap.get(conf)?.push(row);
|
|
}
|
|
|
|
return Array.from(confMap.entries()).map(([conference, rows]) => ({
|
|
conference,
|
|
conferenceLabel: "Conference",
|
|
sections: [
|
|
{
|
|
rows: [...rows].toSorted(
|
|
(a, b) =>
|
|
(a.conferenceRank ?? a.leagueRank ?? 99) -
|
|
(b.conferenceRank ?? b.leagueRank ?? 99)
|
|
),
|
|
rankMode: "conference" as RankMode,
|
|
playoffSpots,
|
|
showDivisionLabel: true,
|
|
},
|
|
],
|
|
}));
|
|
}
|
|
|
|
/**
|
|
* Shared builder for division-based display modes (NHL and MLB).
|
|
* `divisionSpots`: how many teams per division qualify directly (3 for NHL, 1 for MLB).
|
|
* `wcSpots`: how many wildcard slots exist per conference (2 for NHL, 3 for MLB).
|
|
* `conferenceLabel`: the word shown after the conference name in the heading.
|
|
*/
|
|
function buildDivisionSections(
|
|
standings: StandingRow[],
|
|
divisionSpots: number,
|
|
wcSpots: number,
|
|
conferenceLabel: string
|
|
): ConferenceGroup[] {
|
|
const confMap = new Map<string, StandingRow[]>();
|
|
for (const row of standings) {
|
|
const conf = row.conference ?? "Other";
|
|
if (!confMap.has(conf)) confMap.set(conf, []);
|
|
confMap.get(conf)?.push(row);
|
|
}
|
|
|
|
return Array.from(confMap.entries()).map(([conference, rows]) => {
|
|
const divMap = new Map<string, StandingRow[]>();
|
|
for (const row of rows) {
|
|
const div = row.division ?? "";
|
|
if (!divMap.has(div)) divMap.set(div, []);
|
|
divMap.get(div)?.push(row);
|
|
}
|
|
|
|
const divisions = Array.from(divMap.entries())
|
|
.map(([name, divRows]) => ({
|
|
name,
|
|
qualifiers: divRows
|
|
.filter((r) => (r.divisionRank ?? 99) <= divisionSpots)
|
|
.toSorted((a, b) => (a.divisionRank ?? 99) - (b.divisionRank ?? 99)),
|
|
}))
|
|
.toSorted(
|
|
(a, b) =>
|
|
(a.qualifiers[0]?.conferenceRank ?? 99) -
|
|
(b.qualifiers[0]?.conferenceRank ?? 99)
|
|
);
|
|
|
|
const wildCard = rows
|
|
.filter((r) => (r.divisionRank ?? 99) > divisionSpots)
|
|
.toSorted(
|
|
(a, b) =>
|
|
(a.conferenceRank ?? a.leagueRank ?? 99) -
|
|
(b.conferenceRank ?? b.leagueRank ?? 99)
|
|
);
|
|
|
|
const sections: TableSection[] = [
|
|
...divisions.map((div) => ({
|
|
heading: `${div.name} Division`,
|
|
rows: div.qualifiers,
|
|
rankMode: "division" as RankMode,
|
|
playoffSpots: 0,
|
|
showDivisionLabel: false,
|
|
})),
|
|
...(wildCard.length > 0
|
|
? [
|
|
{
|
|
heading: "Wild Card",
|
|
rows: wildCard,
|
|
rankMode: "index" as RankMode,
|
|
playoffSpots: wcSpots,
|
|
showDivisionLabel: true,
|
|
},
|
|
]
|
|
: []),
|
|
];
|
|
|
|
return { conference, conferenceLabel, sections };
|
|
});
|
|
}
|
|
|
|
function buildNhlSections(standings: StandingRow[]): ConferenceGroup[] {
|
|
return buildDivisionSections(standings, 3, 2, "Conference");
|
|
}
|
|
|
|
function buildMlbSections(standings: StandingRow[]): ConferenceGroup[] {
|
|
return buildDivisionSections(standings, 1, 3, "League");
|
|
}
|
|
|
|
// ─── Single table that renders all sections ───────────────────────────────────
|
|
|
|
function StandingsTable({
|
|
sections,
|
|
teamOwnerships,
|
|
userParticipantIds,
|
|
showOtLosses,
|
|
showSoccerTable = false,
|
|
}: {
|
|
sections: TableSection[];
|
|
teamOwnerships: Record<string, TeamOwnership>;
|
|
userParticipantIds: string[];
|
|
showOtLosses: boolean;
|
|
showSoccerTable?: boolean;
|
|
}) {
|
|
// # Team GP W L [OTL] [PTS] PCT GB L10 STK Mgr
|
|
// OTL and PTS are both shown for hockey (showOtLosses = true).
|
|
// Soccer table mode shows D/GF/GA/GD/Pts instead of PCT/GB/form columns.
|
|
const totalCols = showSoccerTable ? 11 : 10 + (showOtLosses ? 2 : 0);
|
|
|
|
return (
|
|
<div className="overflow-x-auto -mx-6 px-6">
|
|
<table className="w-full min-w-[740px] text-sm">
|
|
<thead>
|
|
<tr className="text-xs text-muted-foreground uppercase tracking-wide border-b">
|
|
<th className="text-left py-1.5 pr-2 w-6">#</th>
|
|
<th className="text-left py-1.5">Team</th>
|
|
<th className="text-right py-1.5 px-2 w-10">GP</th>
|
|
<th className="text-right py-1.5 px-2 w-8">W</th>
|
|
{showSoccerTable && <th className="text-right py-1.5 px-2 w-8">D</th>}
|
|
<th className="text-right py-1.5 px-2 w-8">L</th>
|
|
{showSoccerTable && <th className="text-right py-1.5 px-2 w-10">GF</th>}
|
|
{showSoccerTable && <th className="text-right py-1.5 px-2 w-10">GA</th>}
|
|
{showSoccerTable && <th className="text-right py-1.5 px-2 w-10">GD</th>}
|
|
{showSoccerTable && <th className="text-right py-1.5 px-2 w-10">PTS</th>}
|
|
{showOtLosses && <th className="text-right py-1.5 px-2 w-10">OTL</th>}
|
|
{showOtLosses && <th className="text-right py-1.5 px-2 w-10">PTS</th>}
|
|
{!showSoccerTable && <th className="text-right py-1.5 px-2 w-12">PCT</th>}
|
|
{!showSoccerTable && <th className="text-right py-1.5 px-2 w-10">GB</th>}
|
|
{!showSoccerTable && <th className="text-right py-1.5 px-2 w-12">L10</th>}
|
|
{!showSoccerTable && <th className="text-right py-1.5 px-2 w-12">STK</th>}
|
|
<th className="text-right py-1.5 pl-4 w-40">Mgr</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sections.flatMap((section, sIdx) => {
|
|
const sectionRows: React.ReactNode[] = [];
|
|
let playoffLineShown = false;
|
|
|
|
if (section.heading) {
|
|
sectionRows.push(
|
|
<tr key={`h-${section.heading}`}>
|
|
<td
|
|
colSpan={totalCols}
|
|
className={`text-xs font-medium text-muted-foreground/60 uppercase tracking-wider pb-1 ${
|
|
sIdx > 0 ? "pt-5" : "pt-2"
|
|
}`}
|
|
>
|
|
{section.heading}
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
section.rows.forEach((row, i) => {
|
|
const rank = getRank(row, i, section.rankMode);
|
|
|
|
if (!playoffLineShown && section.playoffSpots > 0 && rank > section.playoffSpots) {
|
|
playoffLineShown = true;
|
|
sectionRows.push(
|
|
<tr key={`pl-${sIdx}`}>
|
|
<td colSpan={totalCols} className="py-0.5">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 border-t border-dashed border-amber-500/40" />
|
|
<span className="text-[10px] text-amber-600/70 dark:text-amber-500/70 uppercase tracking-wide whitespace-nowrap font-medium px-1">
|
|
Playoff Line
|
|
</span>
|
|
<div className="flex-1 border-t border-dashed border-amber-500/40" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
const isUserTeam = userParticipantIds.includes(row.participantId);
|
|
const ownership = teamOwnerships[row.participantId];
|
|
|
|
sectionRows.push(
|
|
<tr
|
|
key={row.id}
|
|
className={`border-b border-border/50 last:border-0 ${
|
|
isUserTeam ? "bg-primary/5" : "hover:bg-muted/30"
|
|
}`}
|
|
>
|
|
<td className="py-2 pr-2 text-muted-foreground tabular-nums">{rank}</td>
|
|
<td className="py-2">
|
|
<span className={`font-medium ${isUserTeam ? "text-primary" : ""}`}>
|
|
{row.participant.shortName ?? row.participant.name}
|
|
</span>
|
|
{section.showDivisionLabel && row.division && (
|
|
<span className="ml-1.5 text-[10px] text-muted-foreground/50 uppercase tracking-wide">
|
|
{row.division}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
|
|
{row.gamesPlayed}
|
|
</td>
|
|
<td className="py-2 px-2 text-right tabular-nums font-medium">{row.wins}</td>
|
|
{showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums">{row.ties ?? 0}</td>
|
|
)}
|
|
<td className="py-2 px-2 text-right tabular-nums">{row.losses}</td>
|
|
{showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums text-muted-foreground">{row.goalsFor ?? "—"}</td>
|
|
)}
|
|
{showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums text-muted-foreground">{row.goalsAgainst ?? "—"}</td>
|
|
)}
|
|
{showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums text-muted-foreground">{row.goalDifference ?? "—"}</td>
|
|
)}
|
|
{showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums font-medium">{row.tablePoints ?? row.wins * 3 + (row.ties ?? 0)}</td>
|
|
)}
|
|
{showOtLosses && (
|
|
<td className="py-2 px-2 text-right tabular-nums">{row.otLosses ?? 0}</td>
|
|
)}
|
|
{showOtLosses && (
|
|
<td className="py-2 px-2 text-right tabular-nums font-medium">
|
|
{row.wins * 2 + (row.otLosses ?? 0)}
|
|
</td>
|
|
)}
|
|
{!showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
|
|
{formatWinPct(row.winPct, row.wins, row.gamesPlayed)}
|
|
</td>
|
|
)}
|
|
{!showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
|
|
{formatGB(row.gamesBack)}
|
|
</td>
|
|
)}
|
|
{!showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums text-muted-foreground">
|
|
{row.lastTen ?? "—"}
|
|
</td>
|
|
)}
|
|
{!showSoccerTable && (
|
|
<td className="py-2 px-2 text-right tabular-nums">
|
|
{row.streak ? (
|
|
<span
|
|
className={
|
|
row.streak.startsWith("W")
|
|
? "text-emerald-500"
|
|
: "text-destructive/80"
|
|
}
|
|
>
|
|
{row.streak}
|
|
</span>
|
|
) : (
|
|
<span className="text-muted-foreground">—</span>
|
|
)}
|
|
</td>
|
|
)}
|
|
<td className="py-2 pl-4 text-right">
|
|
{ownership ? (
|
|
<div className="flex justify-end">
|
|
<TeamOwnerBadge
|
|
teamName={ownership.teamName}
|
|
ownerName={ownership.ownerName || undefined}
|
|
align="right"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground">—</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
return sectionRows;
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Main export ──────────────────────────────────────────────────────────────
|
|
|
|
export function RegularSeasonStandings({
|
|
standings,
|
|
teamOwnerships,
|
|
userParticipantIds,
|
|
showOtLosses = false,
|
|
showSoccerTable = false,
|
|
playoffSpots = 8,
|
|
displayMode = "flat",
|
|
}: Props) {
|
|
if (standings.length === 0) return null;
|
|
|
|
const lastSyncedAt = standings
|
|
.map((s) => s.syncedAt)
|
|
.filter(Boolean)
|
|
.toSorted()
|
|
.at(-1);
|
|
|
|
const groups =
|
|
displayMode === "nhl-divisions"
|
|
? buildNhlSections(standings)
|
|
: displayMode === "mlb-divisions"
|
|
? buildMlbSections(standings)
|
|
: buildFlatSections(standings, playoffSpots);
|
|
|
|
const tableProps = { teamOwnerships, userParticipantIds, showOtLosses, showSoccerTable };
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<BarChart3 className="h-5 w-5" />
|
|
Regular Season Standings
|
|
</CardTitle>
|
|
{lastSyncedAt && (
|
|
<CardDescription className="text-xs tabular-nums">
|
|
Updated {new Date(lastSyncedAt).toLocaleDateString()}
|
|
</CardDescription>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{groups.map((group) => (
|
|
<div key={group.conference} className="mb-6 last:mb-0">
|
|
{group.conference && (
|
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
|
|
{group.conference} {group.conferenceLabel}
|
|
</h3>
|
|
)}
|
|
<StandingsTable sections={group.sections} {...tableProps} />
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|