brackt/app/components/scoring/SportSeasonDisplay.tsx
Chris Parsons d88be08deb
User/chris/bracket UI redesign (#95)
* feat: redesign playoff bracket UI with compact layout and owner display

- Replace per-match Card wrappers with compact left-vs-right rows (stacks on mobile)
- Add TeamOwnerBadge component (colored avatar + team name + username), matching the standings "Drafted By" style
- Show owner info below each participant name in bracket matches
- Add TBD forward-reference labels ("Winner of Quarterfinals M1") computed via buildFeederMap
- Add Final Rankings table below bracket showing all participants ranked by elimination round
- Fix round ordering in loader: sort by match count descending (more matches = earlier round)
- Add loser relation to playoff matches query for elimination tracking
- Extract getAvatarColor to app/lib/color-hash.ts (shared across GroupStageDisplay, SeasonStandings, TeamOwnerBadge)
- Extract groupMatchesByRound helper; share grouped map between feeder computation and render
- Remove dead getTeamAvatar from SeasonStandings after TeamOwnerBadge adoption
- Add tests for groupMatchesByRound and buildFeederMap (7 tests)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add draft order card to league home page

Show draft order on the league home page when order is set and season
is in pre_draft or draft status. Includes team name, owner name, and
a link to the draft room.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: enhance playoff bracket with eliminated teams, points, and ownership highlights

- Show eliminated teams (including group-stage losers) in Final Rankings card
- Display computed fantasy points per participant in rankings table
- Card title switches between "Eliminated Teams" and "Final Rankings" based on bracket completion
- Highlight owned participants with electric blue name, dot indicator, and card border in bracket matches
- Highlight owned rows with electric border/background in rankings table
- Suppress EventSchedule for playoff_bracket sports seasons
- Fix title redundancy: bracket section title no longer repeats sport name
- Two-column match grid on desktop (md:grid-cols-2)
- Code review fixes: parallel DB fetches, targeted query for pre-eliminated, single-pass parseFloat, remove IIFE

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-09 22:44:33 -07:00

203 lines
5.1 KiB
TypeScript

import { PlayoffBracket } from "./PlayoffBracket";
import { SeasonStandings } from "./SeasonStandings";
import { QualifyingPointsStandings } from "./QualifyingPointsStandings";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { AlertCircle } from "lucide-react";
/**
* SportSeasonDisplay - Pattern detection and display component
*
* Detects the scoring pattern of a sports season and displays the appropriate
* component (PlayoffBracket, SeasonStandings, or QualifyingPointsStandings).
*
* This is the main integration point for displaying sport-specific results
* to league members.
*/
type ScoringPattern =
| "playoff_bracket"
| "season_standings"
| "qualifying_points";
interface Match {
id: string;
round: string;
matchNumber: number;
participant1Id: string | null;
participant2Id: string | null;
winnerId: string | null;
loserId: string | null;
isComplete: boolean;
participant1Score: string | null;
participant2Score: string | null;
participant1?: {
id: string;
name: string;
} | null;
participant2?: {
id: string;
name: string;
} | null;
winner?: {
id: string;
name: string;
} | null;
loser?: {
id: string;
name: string;
} | null;
}
interface SeasonStanding {
id: string;
championshipPoints: string;
position: number;
previousPosition?: number | null;
participant: {
id: string;
name: string;
};
}
interface QPStanding {
id: string;
totalQualifyingPoints: string;
eventsScored: number;
finalRanking: number | null;
participant: {
id: string;
name: string;
};
}
interface TeamOwnership {
participantId: string;
teamName: string;
teamId: string;
ownerName?: string;
}
interface ScoringRules {
pointsFor1st: number;
pointsFor2nd: number;
pointsFor3rd: number;
pointsFor4th: number;
pointsFor5th: number;
pointsFor6th: number;
pointsFor7th: number;
pointsFor8th: number;
}
interface SportSeasonDisplayProps {
scoringPattern: ScoringPattern;
sportSeasonName: string;
sportName: string;
// Playoff data
playoffMatches?: Match[];
playoffRounds?: string[];
preEliminatedParticipants?: { id: string; name: string }[];
participantPoints?: { participantId: string; points: number }[];
// Season standings data (F1)
seasonStandings?: SeasonStanding[];
seasonIsFinalized?: boolean;
// Qualifying points data (Golf/Tennis)
qpStandings?: QPStanding[];
qpIsFinalized?: boolean;
totalMajors?: number | null;
majorsCompleted?: number;
canFinalize?: boolean;
// Shared data
teamOwnerships?: TeamOwnership[];
userParticipantIds?: string[];
scoringRules?: ScoringRules | null;
showOwnership?: boolean;
}
export function SportSeasonDisplay({
scoringPattern,
sportSeasonName,
sportName,
playoffMatches = [],
playoffRounds = [],
preEliminatedParticipants = [],
participantPoints = [],
seasonStandings = [],
seasonIsFinalized = false,
qpStandings = [],
qpIsFinalized = false,
totalMajors,
majorsCompleted = 0,
canFinalize = false,
teamOwnerships = [],
userParticipantIds = [],
scoringRules = null,
showOwnership = true,
}: SportSeasonDisplayProps) {
// Pattern detection and component selection
switch (scoringPattern) {
case "playoff_bracket":
// Display playoff bracket
return (
<PlayoffBracket
matches={playoffMatches}
rounds={playoffRounds}
preEliminatedParticipants={preEliminatedParticipants}
participantPoints={participantPoints}
teamOwnerships={teamOwnerships}
userParticipantIds={userParticipantIds}
showOwnership={showOwnership}
title="Playoff Bracket"
/>
);
case "season_standings":
// Display F1-style championship standings
return (
<SeasonStandings
standings={seasonStandings}
teamOwnerships={teamOwnerships}
userParticipantIds={userParticipantIds}
showOwnership={showOwnership}
isFinalized={seasonIsFinalized}
title={sportSeasonName}
description="Championship standings - positions calculated from points"
/>
);
case "qualifying_points":
// Display qualifying points standings (Golf/Tennis)
return (
<QualifyingPointsStandings
standings={qpStandings}
scoringRules={scoringRules}
isFinalized={qpIsFinalized}
totalMajors={totalMajors}
majorsCompleted={majorsCompleted}
canFinalize={canFinalize}
/>
);
default:
// Unknown pattern - show error
return (
<Card className="border-destructive/50">
<CardHeader>
<CardTitle className="text-destructive flex items-center gap-2">
<AlertCircle className="h-5 w-5" />
Unknown Scoring Pattern
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
This sports season uses an unsupported scoring pattern: "
{scoringPattern}". Please contact support.
</p>
</CardContent>
</Card>
);
}
}