brackt/app/components/scoring/SportSeasonDisplay.tsx
Chris Parsons 4f111820ec
Fix standings table bugs and polish across all three scoring patterns (#415)
* Fix standings table bugs and polish across all three scoring patterns

- Fix isLastBeforePointsLine/PlayoffLine: was incorrectly suppressing the
  bottom border on the last row of a section when no divider followed
  (nextStanding === undefined case). Now correctly requires nextStanding
  to exist and exceed the cutoff rank.
- Fix totalCols colSpan overcounting: hidden sm:table-cell columns
  (Drafted By / Mgr) don't occupy column slots on mobile, so counting
  them caused the divider rows to span one too many. Replaced with
  colSpan={100} (browser caps to actual column count).
- Move pointsLinePushed mutation out of render in SeasonStandings and
  QualifyingPointsStandings: replaced let+mutation+array-push pattern
  with pre-computed firstOver8Idx and React.Fragment per row.
- Replace array-returning .map() with keyed React.Fragment in both files.
- Remove unused description prop from SeasonStandingsProps.
- Use useId() for Switch id props in all three components to prevent
  id collisions when mounted multiple times.
- Fix formatQP NaN fallback from "0" to "—".
- Add comment noting canFinalize guards the admin-only finalize UI.
- Drop dead description prop pass-through in SportSeasonDisplay.

Fixes #408

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

* Fix RegularSeasonStandings tests broken by showStats toggle

- STK/streak tests: click the Details switch before asserting on stats
  columns, which are now hidden behind the toggle by default
- Ownership badge test: use getAllByText since the badge renders in both
  the mobile inline slot and the hidden-sm desktop Mgr cell
- Division label test: remove expectation for inline per-row division
  labels, which were intentionally removed to fix mobile scroll

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

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 10:39:25 -07:00

213 lines
5.5 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;
bracketMode?: "bracket" | "rankings";
// Playoff data
playoffMatches?: Match[];
playoffRounds?: string[];
bracketTemplateId?: string | null;
preEliminatedParticipants?: { id: string; name: string }[];
participantPoints?: { participantId: string; points: number }[];
partialScoreParticipantIds?: string[];
// 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: _sportName,
bracketMode = "bracket",
playoffMatches = [],
playoffRounds = [],
bracketTemplateId = null,
preEliminatedParticipants = [],
participantPoints = [],
partialScoreParticipantIds = [],
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}
bracketTemplateId={bracketTemplateId}
preEliminatedParticipants={preEliminatedParticipants}
participantPoints={participantPoints}
partialScoreParticipantIds={partialScoreParticipantIds}
teamOwnerships={teamOwnerships}
userParticipantIds={userParticipantIds}
showOwnership={showOwnership}
title="Playoff Bracket"
mode={bracketMode}
/>
);
case "season_standings":
// Display F1-style championship standings
return (
<SeasonStandings
standings={seasonStandings}
teamOwnerships={teamOwnerships}
userParticipantIds={userParticipantIds}
showOwnership={showOwnership}
isFinalized={seasonIsFinalized}
title={sportSeasonName}
/>
);
case "qualifying_points":
// Display qualifying points standings (Golf/Tennis)
return (
<QualifyingPointsStandings
standings={qpStandings}
scoringRules={scoringRules}
isFinalized={qpIsFinalized}
totalMajors={totalMajors}
majorsCompleted={majorsCompleted}
canFinalize={canFinalize}
teamOwnerships={showOwnership ? teamOwnerships : []}
userParticipantIds={userParticipantIds}
/>
);
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>
);
}
}