7970cb6a9c
- Add FIFA_48 bracket template with 12 groups of 4, knockout stage of 32 - Add tournament groups schema, model, and GroupStageDisplay component - Add projected/expected value scoring to standings and team breakdowns - Add docker-compose for local PostgreSQL development - Move DRAFT_ORDER_IMPLEMENTATION.md to plans directory Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
350 lines
13 KiB
TypeScript
350 lines
13 KiB
TypeScript
import { Link } from "react-router";
|
|
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "~/components/ui/card";
|
|
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "~/components/ui/table";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { Button } from "~/components/ui/button";
|
|
|
|
interface TeamScoreBreakdownProps {
|
|
leagueId: string;
|
|
seasonId: string;
|
|
breakdown: {
|
|
team: {
|
|
id: string;
|
|
name: string;
|
|
} | null;
|
|
picks: Array<{
|
|
pickNumber: number;
|
|
round: number;
|
|
participant: {
|
|
id: string;
|
|
name: string;
|
|
sport: string;
|
|
sportsSeasonId: string;
|
|
};
|
|
finalPosition: number | null;
|
|
points: number;
|
|
projectedPoints: number | null;
|
|
isComplete: boolean;
|
|
}>;
|
|
bySport: Record<string, { sportsSeasonId: string; picks: Array<{
|
|
pickNumber: number;
|
|
round: number;
|
|
participant: {
|
|
id: string;
|
|
name: string;
|
|
sport: string;
|
|
sportsSeasonId: string;
|
|
};
|
|
finalPosition: number | null;
|
|
points: number;
|
|
projectedPoints: number | null;
|
|
isComplete: boolean;
|
|
}> }>;
|
|
totalPoints: number;
|
|
actualPoints: number;
|
|
projectedPoints: number;
|
|
completedCount: number;
|
|
totalCount: number;
|
|
};
|
|
standing: {
|
|
currentRank: number;
|
|
placementCounts: {
|
|
first: number;
|
|
second: number;
|
|
third: number;
|
|
fourth: number;
|
|
fifth: number;
|
|
sixth: number;
|
|
seventh: number;
|
|
eighth: number;
|
|
};
|
|
} | null;
|
|
}
|
|
|
|
/**
|
|
* Display detailed team score breakdown with all drafted participants
|
|
* Phase 4.3: Team breakdown pages
|
|
*/
|
|
export function TeamScoreBreakdown({
|
|
leagueId,
|
|
seasonId,
|
|
breakdown,
|
|
standing,
|
|
}: TeamScoreBreakdownProps) {
|
|
if (!breakdown.team) {
|
|
return (
|
|
<div className="text-center text-muted-foreground py-8">
|
|
Team not found
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const sportEntries = Object.entries(breakdown.bySport).sort(([a], [b]) => a.localeCompare(b));
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header with team info and summary */}
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">{breakdown.team.name}</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Team Score Breakdown
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-4xl font-bold text-primary">
|
|
{breakdown.actualPoints.toFixed(1)}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Actual Points
|
|
</div>
|
|
{breakdown.projectedPoints > breakdown.actualPoints && (
|
|
<div className="text-xl font-semibold text-blue-600 mt-1">
|
|
{breakdown.projectedPoints.toFixed(1)}
|
|
<span className="text-xs text-muted-foreground ml-1">projected</span>
|
|
</div>
|
|
)}
|
|
{standing && (
|
|
<Badge className="mt-2" variant={standing.currentRank <= 3 ? "default" : "outline"}>
|
|
Rank #{standing.currentRank}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Actual Points
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">
|
|
{breakdown.actualPoints.toFixed(1)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
From {breakdown.completedCount} finished
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Projected Points
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-primary">
|
|
{breakdown.projectedPoints.toFixed(1)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
+{(breakdown.projectedPoints - breakdown.actualPoints).toFixed(1)} expected value
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Participants
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">
|
|
{breakdown.completedCount} / {breakdown.totalCount}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{breakdown.totalCount - breakdown.completedCount} remaining
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{standing && (
|
|
<>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Top Finishes
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-1">
|
|
{standing.placementCounts.first > 0 && (
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-yellow-600 font-medium">1st place</span>
|
|
<span className="font-bold">{standing.placementCounts.first}</span>
|
|
</div>
|
|
)}
|
|
{standing.placementCounts.second > 0 && (
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500 font-medium">2nd place</span>
|
|
<span className="font-bold">{standing.placementCounts.second}</span>
|
|
</div>
|
|
)}
|
|
{standing.placementCounts.third > 0 && (
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-orange-600 font-medium">3rd place</span>
|
|
<span className="font-bold">{standing.placementCounts.third}</span>
|
|
</div>
|
|
)}
|
|
{standing.placementCounts.first === 0 &&
|
|
standing.placementCounts.second === 0 &&
|
|
standing.placementCounts.third === 0 && (
|
|
<p className="text-sm text-muted-foreground">No podium finishes yet</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
All Placements
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-x-3 gap-y-1 text-xs">
|
|
{[
|
|
{ label: "4th", count: standing.placementCounts.fourth },
|
|
{ label: "5th", count: standing.placementCounts.fifth },
|
|
{ label: "6th", count: standing.placementCounts.sixth },
|
|
{ label: "7th", count: standing.placementCounts.seventh },
|
|
{ label: "8th", count: standing.placementCounts.eighth },
|
|
].map((item) => (
|
|
<div key={item.label} className="flex justify-between">
|
|
<span className="text-muted-foreground">{item.label}:</span>
|
|
<span className="font-medium">{item.count}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Participants grouped by sport */}
|
|
{sportEntries.map(([sportName, sportData]) => {
|
|
const { sportsSeasonId, picks: sportPicks } = sportData;
|
|
const sportTotal = sportPicks.reduce((sum: number, p) => sum + p.points, 0);
|
|
const sportCompleted = sportPicks.filter((p) => p.isComplete).length;
|
|
|
|
return (
|
|
<Card key={sportName}>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<CardTitle>{sportName}</CardTitle>
|
|
<Button asChild variant="ghost" size="sm" className="h-6 px-2 text-xs">
|
|
<Link to={`/leagues/${leagueId}/sports-seasons/${sportsSeasonId}`}>
|
|
View Details →
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
<CardDescription>
|
|
{sportPicks.length} {sportPicks.length === 1 ? 'pick' : 'picks'} · {sportCompleted} completed
|
|
</CardDescription>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-2xl font-bold">{sportTotal.toFixed(1)}</div>
|
|
<div className="text-xs text-muted-foreground">points</div>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-[100px]">Pick #</TableHead>
|
|
<TableHead>Participant</TableHead>
|
|
<TableHead className="text-center">Position</TableHead>
|
|
<TableHead className="text-right">Points</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{sportPicks.map((pick: typeof sportPicks[number]) => (
|
|
<TableRow key={pick.pickNumber}>
|
|
<TableCell className="text-muted-foreground">
|
|
#{pick.pickNumber}
|
|
<span className="text-xs ml-1">(R{pick.round})</span>
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{pick.participant.name}
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
{pick.isComplete ? (
|
|
pick.finalPosition === 0 ? (
|
|
<Badge variant="secondary" className="bg-gray-200 text-gray-700">
|
|
Did Not Score
|
|
</Badge>
|
|
) : (
|
|
<PlacementBadge position={pick.finalPosition!} />
|
|
)
|
|
) : (
|
|
<Badge variant="outline">Pending</Badge>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
{pick.isComplete ? (
|
|
<span className="font-semibold">
|
|
{pick.points > 0 ? pick.points.toFixed(1) : '0.0'}
|
|
</span>
|
|
) : pick.projectedPoints !== null ? (
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-xs text-muted-foreground">Projected:</span>
|
|
<span className="font-semibold text-primary">
|
|
{pick.projectedPoints.toFixed(1)}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground">-</span>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
|
|
{/* Navigation */}
|
|
<div className="flex justify-between pt-4">
|
|
<Button asChild variant="outline">
|
|
<Link to={`/leagues/${leagueId}/standings/${seasonId}`}>
|
|
← Back to Standings
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Display placement badge with color coding
|
|
*/
|
|
function PlacementBadge({ position }: { position: number }) {
|
|
const badges: Record<number, { label: string; className: string }> = {
|
|
1: { label: "1st", className: "bg-yellow-500 hover:bg-yellow-600 text-white" },
|
|
2: { label: "2nd", className: "bg-gray-400 hover:bg-gray-500 text-white" },
|
|
3: { label: "3rd", className: "bg-orange-600 hover:bg-orange-700 text-white" },
|
|
4: { label: "4th", className: "bg-blue-600 hover:bg-blue-700 text-white" },
|
|
5: { label: "5th", className: "bg-purple-600 hover:bg-purple-700 text-white" },
|
|
6: { label: "6th", className: "bg-green-600 hover:bg-green-700 text-white" },
|
|
7: { label: "7th", className: "bg-pink-600 hover:bg-pink-700 text-white" },
|
|
8: { label: "8th", className: "bg-indigo-600 hover:bg-indigo-700 text-white" },
|
|
};
|
|
|
|
const badge = badges[position] || { label: `${position}th`, className: "" };
|
|
|
|
return (
|
|
<Badge className={badge.className}>
|
|
{badge.label}
|
|
</Badge>
|
|
);
|
|
}
|