brackt/app/components/scoring/SportSeasonDisplay.tsx
Chris Parsons 9ed0282fd0
New design (#309)
* Redesign home page with new layout and component system

- Two-column layout (My Leagues 2/3, Upcoming Events 1/3) with mobile stack
- LeagueRow: square avatar, gradient draft highlight, rank/points display, progress bar
- MyLeaguesCard, CreateLeagueCard with shared SectionCardHeader
- UpcomingEventsCard: vertical timeline with grouped multi-league events
- Shared gradient system: BracktGradients SVG defs, GradientIcon wrapper, brand.ts constants
- Button default variant updated to green→cyan gradient
- Navbar: plain nav links with gradient hover, support/admin icon buttons
- Accessibility fixes: semantic h2 headings, aria-label on LeagueAvatar and nav elements
- Storybook stories for all new components

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

* Responsive league row layout and mobile polish

- League rows stack avatar+name on top, stats full-width below on mobile
- Stats spread to right side on sm+ screens with border separator on mobile
- Tighter padding on mobile (px-3/py-3), full padding on sm+
- Card headers and content use px-3 sm:px-6 to reduce mobile gutters
- Two-column home layout deferred to lg breakpoint (tablet gets stacked)
- Active leagues sorted by completion percentage descending
- Default rank 1 / 0 points for active leagues with no scoring events yet
- Fix ordinal bug for 11th/12th/13th; add aria-labels to rank change indicators
- Remove dead StatDivider className prop

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

* Improve claude file.

* Add StandingsPreview card component with podium row styling

- New StandingsPreview component with gold/silver/bronze row tints for
  top 3, team avatar, and LeagueRow-style stat columns (Ranking + Points)
  with rank and 7-day point change indicators
- Fix GradientIcon in Storybook by adding BracktGradients decorator to
  preview.tsx (renamed from .ts to support JSX)
- Fix degenerate SVG gradient on horizontal strokes by switching
  BracktGradients to gradientUnits="userSpaceOnUse" with Lucide-space
  coordinates (0→24)
- Revert erroneous fill: url(#gradient) from GradientIcon; stroke-only
  fix was sufficient once gradientUnits was corrected

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

* Update components on league homepage.

* Finish up league page styling.

* Work on standings page.

* Add story for RecentScoresCard

* Update Point Progression Chart.

* Sort point progression legend by ranking and add team links to standings rows

* Fix standings discrepancy on change.

* Create draft cell component.

* Update draft board page

* Draft room improvements.

* Update some draft room styling.

* Fix context menu missing.

* Move tab navigation and autodraft to header row, narrow sidebar

* Virtualize available participants list, memoize draft room props

Adds @tanstack/react-virtual to replace separate mobile/desktop lists
with a single unified virtual scroll loop. Also memoizes miniDraftGrid
and availableParticipantsSectionProps, and switches pick lookup from
Array.find to a Map for O(1) access.

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

* Update draft room UI.

* More draft room fixes.

* Draft room tweaks.

* Fix Rosters page.

* Queue Section fixes.

* Mobile Draft fixes.

* Fix draft board page.

* Create bracket look.

* Bracket work.

* Finish bracket page.

* Homepage initial styling

* homepage copy

* Add privacy policy. Fixes #88.

* how to play copy

* rules copy

* Fix brackets on homepage.

* Add footer to website.

* Glow on dots.

* Landing page copy.

* Fix sidebar.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 13:14:55 -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}
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}
teamOwnerships={showOwnership ? teamOwnerships : []}
/>
);
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>
);
}
}