mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 11:54:59 -04:00
Merge pull request #80 from AmanTahiliani/feat/issue-73-adaptive-weekend-shell-and-responsive-na
Adaptive Weekend shell and responsive navigation (#73)
This commit is contained in:
Aman Tahiliani
@@ -15,6 +15,7 @@ import type {
|
||||
Session,
|
||||
TrackOutline,
|
||||
Weekend,
|
||||
WeekendContext,
|
||||
} from './types'
|
||||
|
||||
export async function fetchRaceHub(sessionKey: number): Promise<RaceHub> {
|
||||
@@ -114,6 +115,19 @@ export async function fetchWeekend(meetingKey: number): Promise<Weekend> {
|
||||
return res.json()
|
||||
}
|
||||
|
||||
// fetchWeekendContext consumes the canonical /api/v1/weekend-context endpoint
|
||||
// (backend story #72). The response is the authoritative WeekendContext shape and
|
||||
// is used verbatim as the Weekend home's source of truth. Any HTTP error throws
|
||||
// so the hook can surface an explicit error state; there is no client-side
|
||||
// re-derivation of the contract.
|
||||
export async function fetchWeekendContext(): Promise<WeekendContext> {
|
||||
const res = await fetch('/api/v1/weekend-context')
|
||||
if (!res.ok) {
|
||||
throw new Error(`API ${res.status}: ${res.statusText}`)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchChampionshipHub(year?: number): Promise<ChampionshipHub> {
|
||||
const params = new URLSearchParams({ source: 'auto' })
|
||||
if (year) params.set('year', year.toString())
|
||||
|
||||
@@ -1,36 +1,66 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { Compass, FileText, Home, Trophy } from 'lucide-react'
|
||||
|
||||
const PRIMARY = [
|
||||
{ to: '/', label: 'Weekend', icon: Home, exact: true },
|
||||
{ to: '/championship', label: 'Championship', icon: Trophy, exact: false },
|
||||
{ to: '/briefing', label: 'Briefing', icon: FileText, exact: false },
|
||||
{ to: '/explore', label: 'Explore', icon: Compass, exact: false },
|
||||
] as const
|
||||
|
||||
/**
|
||||
* Nav renders one primary navigation system per breakpoint:
|
||||
* - Desktop/tablet: the top bar's `aria-label="Primary"` links.
|
||||
* - Mobile (≤640px): the bottom `aria-label="Primary"` bar; the top bar's links
|
||||
* are hidden via CSS so the two are never both active at once.
|
||||
*
|
||||
* Admin is an operator utility, deliberately outside every Primary landmark — it
|
||||
* lives in a plain toolbar slot and never appears in the mobile bottom nav.
|
||||
*/
|
||||
export function Nav() {
|
||||
return (
|
||||
<nav className="app-nav">
|
||||
<Link to="/" className="nav-logo">
|
||||
box<em>-</em>box
|
||||
</Link>
|
||||
<div className="nav-links">
|
||||
<Link to="/" activeProps={{ className: 'active' }} activeOptions={{ exact: true }}>
|
||||
Command
|
||||
<>
|
||||
<header className="app-nav">
|
||||
<Link to="/" className="nav-logo">
|
||||
box<em>-</em>box
|
||||
</Link>
|
||||
<Link to="/live" activeProps={{ className: 'active' }}>
|
||||
Live
|
||||
</Link>
|
||||
<Link to="/race-hub" search={{}} activeProps={{ className: 'active' }}>
|
||||
Race Hub
|
||||
</Link>
|
||||
<Link to="/preview" activeProps={{ className: 'active' }}>
|
||||
Preview
|
||||
</Link>
|
||||
<Link to="/championship" activeProps={{ className: 'active' }}>
|
||||
Championship
|
||||
</Link>
|
||||
<Link to="/briefing" activeProps={{ className: 'active' }}>
|
||||
Briefing
|
||||
</Link>
|
||||
</div>
|
||||
<div className="nav-utility">
|
||||
<Link to="/admin" className="nav-utility-link" activeProps={{ className: 'nav-utility-link active' }}>
|
||||
Admin
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
<nav className="nav-links" aria-label="Primary">
|
||||
{PRIMARY.map(({ to, label, exact }) => (
|
||||
<Link
|
||||
key={to}
|
||||
to={to}
|
||||
activeProps={{ className: 'active' }}
|
||||
activeOptions={exact ? { exact: true } : undefined}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="nav-utility" role="toolbar" aria-label="Operator utilities">
|
||||
<Link
|
||||
to="/admin"
|
||||
className="nav-utility-link"
|
||||
activeProps={{ className: 'nav-utility-link active' }}
|
||||
>
|
||||
Admin
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav className="app-bottom-nav" aria-label="Primary">
|
||||
{PRIMARY.map(({ to, label, icon: Icon, exact }) => (
|
||||
<Link
|
||||
key={to}
|
||||
to={to}
|
||||
className="bottom-nav-link"
|
||||
activeProps={{ className: 'bottom-nav-link active' }}
|
||||
activeOptions={exact ? { exact: true } : undefined}
|
||||
>
|
||||
<Icon size={18} aria-hidden="true" />
|
||||
<span>{label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
152
frontend/src/components/weekend/BetweenRacesView.tsx
Normal file
152
frontend/src/components/weekend/BetweenRacesView.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { ChevronRight, Flag as FlagIcon } from 'lucide-react'
|
||||
import type {
|
||||
WeekendBriefingItem,
|
||||
WeekendChampionshipImpact,
|
||||
WeekendContext,
|
||||
WeekendViewState,
|
||||
} from '../../types'
|
||||
import {
|
||||
BriefingStrip,
|
||||
ChampionshipImpactCard,
|
||||
ChampionshipRoundStrip,
|
||||
CountdownDisplay,
|
||||
EventPodium,
|
||||
Flag,
|
||||
} from './shared'
|
||||
import { analysisSessionKey, meetingIdentity } from '../../lib/weekendContext'
|
||||
import { parseScheduleTime } from '../../lib/schedule'
|
||||
|
||||
const EYEBROW: Record<string, string> = {
|
||||
between_weekends: 'Between races',
|
||||
post_weekend: 'Post-weekend',
|
||||
season_complete: 'Season complete',
|
||||
}
|
||||
|
||||
function formatSessionLine(name: string | undefined, start: string | undefined): string {
|
||||
if (!name) return 'Schedule to be confirmed'
|
||||
const date = start ? parseScheduleTime(start) : null
|
||||
if (!date) return name
|
||||
const when = date.toLocaleString('en-GB', {
|
||||
weekday: 'long',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
return `${name} · ${when}`
|
||||
}
|
||||
|
||||
export function BetweenRacesView({
|
||||
context,
|
||||
now,
|
||||
view,
|
||||
championship,
|
||||
briefing,
|
||||
}: {
|
||||
context: WeekendContext
|
||||
now: Date
|
||||
view: WeekendViewState
|
||||
championship?: WeekendChampionshipImpact
|
||||
briefing: WeekendBriefingItem[]
|
||||
}) {
|
||||
const eyebrow = EYEBROW[view] ?? 'Between races'
|
||||
|
||||
const previous = context.previous_completed_session
|
||||
const previousMeeting = meetingIdentity(previous?.meeting ?? context.previous_meeting)
|
||||
const nextMeeting = meetingIdentity(context.next_meeting)
|
||||
const nextSession = context.next_session?.session
|
||||
const analysisKey = analysisSessionKey(context)
|
||||
|
||||
return (
|
||||
<div className="wk-between" data-testid="weekend-between-races" data-state={view}>
|
||||
<div className="wk-eyebrow mono" data-testid="wk-eyebrow">{eyebrow}</div>
|
||||
|
||||
<div className="wk-top-grid">
|
||||
{previousMeeting && (
|
||||
<section className="wk-event-card wk-event-last" data-testid="wk-last-event">
|
||||
<header className="wk-event-head">
|
||||
<div className="wk-event-id">
|
||||
<Flag code={previousMeeting.country_code} flag={previousMeeting.country_flag} />
|
||||
<h2 className="wk-event-name">{previousMeeting.meeting_name}</h2>
|
||||
</div>
|
||||
<span className="wk-event-tag wk-tag-done mono">
|
||||
<FlagIcon size={13} aria-hidden="true" /> Completed
|
||||
</span>
|
||||
</header>
|
||||
<div className="wk-event-body">
|
||||
<EventPodium sessionKey={analysisKey} />
|
||||
<div className="wk-story-card">
|
||||
<span className="wk-story-label">What decided it?</span>
|
||||
{analysisKey ? (
|
||||
<Link
|
||||
to="/race-hub"
|
||||
search={{ session_key: analysisKey }}
|
||||
className="wk-cta wk-cta-primary"
|
||||
data-testid="wk-explore-race-story"
|
||||
>
|
||||
Explore Race Story <ChevronRight size={15} aria-hidden="true" />
|
||||
</Link>
|
||||
) : (
|
||||
<p className="wk-story-text" data-testid="wk-no-analysis">
|
||||
Analysis for this session is not available locally yet.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{nextMeeting ? (
|
||||
<section className="wk-event-card wk-event-next" data-testid="wk-next-event">
|
||||
<header className="wk-event-head">
|
||||
<div className="wk-event-id">
|
||||
<Flag code={nextMeeting.country_code} flag={nextMeeting.country_flag} />
|
||||
<h2 className="wk-event-name">{nextMeeting.meeting_name}</h2>
|
||||
</div>
|
||||
<span className="wk-event-tag wk-tag-next mono">Next event</span>
|
||||
</header>
|
||||
<div className="wk-next-body">
|
||||
<CountdownDisplay target={nextSession?.date_start ?? nextMeeting.date_start} now={now} />
|
||||
<div className="wk-next-session">
|
||||
<span className="wk-next-label mono">Next session</span>
|
||||
<span className="wk-next-value">
|
||||
{formatSessionLine(nextSession?.session_name, nextSession?.date_start)}
|
||||
</span>
|
||||
</div>
|
||||
<Link to="/preview" className="wk-cta wk-cta-primary wk-cta-wide" data-testid="wk-prepare">
|
||||
Prepare for {nextMeeting.short_name}
|
||||
<ChevronRight size={15} aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<section className="wk-event-card wk-event-next" data-testid="wk-season-complete-card">
|
||||
<header className="wk-event-head">
|
||||
<h2 className="wk-event-name">That's a wrap</h2>
|
||||
<span className="wk-event-tag wk-tag-next mono">Off-season</span>
|
||||
</header>
|
||||
<div className="wk-next-body">
|
||||
<p className="wk-season-complete-copy">
|
||||
The {context.season} calendar is complete. Explore the season's races or revisit the championship
|
||||
battle while the next schedule is confirmed.
|
||||
</p>
|
||||
<Link to="/explore" className="wk-cta wk-cta-primary wk-cta-wide" data-testid="wk-season-complete-explore">
|
||||
Explore the season <ChevronRight size={15} aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="wk-mid-grid">
|
||||
{championship && <ChampionshipImpactCard impact={championship} />}
|
||||
<ChampionshipRoundStrip
|
||||
round={context.championship_round}
|
||||
total={context.total_championship_rounds}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{briefing.length > 0 && <BriefingStrip items={briefing} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
83
frontend/src/components/weekend/BetweenSessionsView.tsx
Normal file
83
frontend/src/components/weekend/BetweenSessionsView.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { ChevronRight } from 'lucide-react'
|
||||
import type { WeekendBriefingItem, WeekendContext, WeekendViewState } from '../../types'
|
||||
import { BriefingStrip, CountdownDisplay, EventPodium, SessionRail, railNodes } from './shared'
|
||||
import { analysisSessionKey, meetingIdentity } from '../../lib/weekendContext'
|
||||
import { parseScheduleTime } from '../../lib/schedule'
|
||||
|
||||
function nextSessionWhen(start: string | undefined): string {
|
||||
const date = start ? parseScheduleTime(start) : null
|
||||
if (!date) return 'Time to be confirmed'
|
||||
return date.toLocaleString('en-GB', {
|
||||
weekday: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
}
|
||||
|
||||
export function BetweenSessionsView({
|
||||
context,
|
||||
now,
|
||||
view,
|
||||
briefing,
|
||||
}: {
|
||||
context: WeekendContext
|
||||
now: Date
|
||||
view: WeekendViewState
|
||||
briefing: WeekendBriefingItem[]
|
||||
}) {
|
||||
const settling = view === 'session_settling'
|
||||
const focus = meetingIdentity(context.focus_meeting)
|
||||
const previous = context.previous_completed_session
|
||||
const previousName = previous?.session.session_name ?? 'Last session'
|
||||
const next = context.next_session?.session
|
||||
const analysisKey = analysisSessionKey(context)
|
||||
const nodes = railNodes(previous, context.active_session, context.next_session)
|
||||
|
||||
return (
|
||||
<div className="wk-sessions" data-testid="weekend-between-sessions" data-state={view}>
|
||||
<div className="wk-eyebrow mono" data-testid="wk-eyebrow">
|
||||
{settling ? 'Session settling' : 'Between sessions'}
|
||||
</div>
|
||||
|
||||
<header className="wk-sessions-head">
|
||||
<h1 className="wk-sessions-title">{focus?.meeting_name ?? 'Race weekend'}</h1>
|
||||
{focus?.circuit_short_name && <p className="wk-sessions-circuit mono">{focus.circuit_short_name}</p>}
|
||||
</header>
|
||||
|
||||
<SessionRail nodes={nodes} />
|
||||
|
||||
{previous && (
|
||||
<section className="wk-recap-card" data-testid="wk-last-session">
|
||||
<span className="wk-recap-eyebrow mono">
|
||||
{previousName} · {settling ? 'Settling' : 'Complete'}
|
||||
</span>
|
||||
<h2 className="wk-recap-title">What happened in {previousName}</h2>
|
||||
<EventPodium sessionKey={analysisKey} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{next && (
|
||||
<section className="wk-upnext-card" data-testid="wk-next-session">
|
||||
<span className="wk-upnext-eyebrow mono">Up next</span>
|
||||
<h2 className="wk-upnext-title">{next.session_name}</h2>
|
||||
<CountdownDisplay target={next.date_start} now={now} compact />
|
||||
<p className="wk-upnext-when mono">{nextSessionWhen(next.date_start)}</p>
|
||||
{analysisKey && (
|
||||
<Link
|
||||
to="/race-hub"
|
||||
search={{ session_key: analysisKey }}
|
||||
className="wk-cta wk-cta-primary wk-cta-wide"
|
||||
data-testid="wk-view-recap"
|
||||
>
|
||||
View {previousName} recap <ChevronRight size={15} aria-hidden="true" />
|
||||
</Link>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{briefing.length > 0 && <BriefingStrip items={briefing} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
47
frontend/src/components/weekend/LiveHandoffView.tsx
Normal file
47
frontend/src/components/weekend/LiveHandoffView.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { ChevronRight, Radio } from 'lucide-react'
|
||||
import type { WeekendContext } from '../../types'
|
||||
import { EventPodium, Flag, SessionRail, railNodes } from './shared'
|
||||
import { analysisSessionKey, meetingIdentity } from '../../lib/weekendContext'
|
||||
|
||||
export function LiveHandoffView({ context }: { context: WeekendContext }) {
|
||||
const focus = meetingIdentity(context.focus_meeting ?? context.active_session?.meeting)
|
||||
const active = context.active_session?.session
|
||||
const previous = context.previous_completed_session
|
||||
const previousName = previous?.session.session_name ?? 'Last session'
|
||||
const analysisKey = analysisSessionKey(context)
|
||||
const nodes = railNodes(previous, context.active_session, context.next_session)
|
||||
|
||||
return (
|
||||
<div className="wk-live" data-testid="weekend-live" data-state="session_live">
|
||||
<div className="wk-eyebrow mono" data-testid="wk-eyebrow">Session live</div>
|
||||
|
||||
<section className="wk-live-card" data-testid="wk-live-card">
|
||||
<div className="wk-live-head">
|
||||
<div className="wk-event-id">
|
||||
<Flag code={focus?.country_code} flag={focus?.country_flag} />
|
||||
<h1 className="wk-sessions-title">{focus?.meeting_name ?? 'Live session'}</h1>
|
||||
</div>
|
||||
<span className="wk-live-pulse" aria-hidden="true" />
|
||||
</div>
|
||||
{focus?.circuit_short_name && <p className="wk-sessions-circuit mono">{focus.circuit_short_name}</p>}
|
||||
<p className="wk-live-lead">
|
||||
{active?.session_name ? `${active.session_name} is on track now.` : 'A session is running now.'}
|
||||
</p>
|
||||
<Link to="/live" className="wk-cta wk-cta-primary wk-cta-wide" data-testid="wk-watch-live">
|
||||
<Radio size={15} aria-hidden="true" /> Watch live timing <ChevronRight size={15} aria-hidden="true" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
<SessionRail nodes={nodes} />
|
||||
|
||||
{previous && (
|
||||
<section className="wk-recap-card" data-testid="wk-last-session">
|
||||
<span className="wk-recap-eyebrow mono">{previousName} · Complete</span>
|
||||
<h2 className="wk-recap-title">What happened in {previousName}</h2>
|
||||
<EventPodium sessionKey={analysisKey} />
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
56
frontend/src/components/weekend/PreSessionView.tsx
Normal file
56
frontend/src/components/weekend/PreSessionView.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { ChevronRight } from 'lucide-react'
|
||||
import type { WeekendContext } from '../../types'
|
||||
import { RacePreviewPage } from '../../pages/RacePreviewPage'
|
||||
import { ChampionshipRoundStrip, CountdownDisplay, Flag, SessionRail, railNodes } from './shared'
|
||||
import { meetingIdentity } from '../../lib/weekendContext'
|
||||
|
||||
/**
|
||||
* PreSessionView folds the race preview surface into the Weekend home so there is
|
||||
* no separate Preview destination. It reuses the existing preview page content and
|
||||
* frames it with the next-session countdown and compact season navigation. It also
|
||||
* backs the /preview alias, so saved preview links resolve here instead of looping.
|
||||
*/
|
||||
export function PreSessionView({ context, now }: { context: WeekendContext; now: Date }) {
|
||||
const meeting = meetingIdentity(context.next_meeting ?? context.focus_meeting)
|
||||
const next = context.next_session?.session
|
||||
const nextStart = next?.date_start ?? meeting?.date_start
|
||||
const nodes = railNodes(
|
||||
context.previous_completed_session,
|
||||
context.active_session,
|
||||
context.next_session,
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="wk-pre" data-testid="weekend-pre-session" data-state="pre_session">
|
||||
<div className="wk-eyebrow mono" data-testid="wk-eyebrow">Pre-session</div>
|
||||
|
||||
{meeting && (
|
||||
<header className="wk-pre-head" data-testid="wk-pre-head">
|
||||
<div className="wk-event-id">
|
||||
<Flag code={meeting.country_code} flag={meeting.country_flag} />
|
||||
<h1 className="wk-sessions-title">{meeting.meeting_name}</h1>
|
||||
</div>
|
||||
<div className="wk-pre-countdown">
|
||||
<span className="wk-next-label mono">{next?.session_name ?? 'Next session'}</span>
|
||||
<CountdownDisplay target={nextStart} now={now} />
|
||||
</div>
|
||||
<Link to="/live" className="wk-cta wk-cta-ghost" data-testid="wk-pre-live">
|
||||
Live timing <ChevronRight size={14} aria-hidden="true" />
|
||||
</Link>
|
||||
</header>
|
||||
)}
|
||||
|
||||
{nodes.length > 0 && <SessionRail nodes={nodes} />}
|
||||
|
||||
<div className="wk-pre-preview" data-testid="wk-pre-preview">
|
||||
<RacePreviewPage />
|
||||
</div>
|
||||
|
||||
<ChampionshipRoundStrip
|
||||
round={context.championship_round}
|
||||
total={context.total_championship_rounds}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
36
frontend/src/components/weekend/StatusViews.tsx
Normal file
36
frontend/src/components/weekend/StatusViews.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
|
||||
export function WeekendLoading() {
|
||||
return (
|
||||
<div className="wk-status wk-status-loading" data-testid="weekend-loading" aria-busy="true">
|
||||
<span className="wk-status-eyebrow mono">box-box · weekend</span>
|
||||
<p className="wk-status-title">Reading the weekend…</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function WeekendError({ message }: { message?: string }) {
|
||||
return (
|
||||
<div className="wk-status wk-status-error" data-testid="weekend-error" role="alert">
|
||||
<span className="wk-status-eyebrow mono">box-box · weekend</span>
|
||||
<p className="wk-status-title">Weekend unavailable</p>
|
||||
<p className="wk-status-sub">{message ?? 'Something went wrong loading the weekend context.'}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function WeekendLimited({ message, season }: { message?: string; season?: number }) {
|
||||
return (
|
||||
<div className="wk-status wk-status-limited" data-testid="weekend-limited">
|
||||
<span className="wk-status-eyebrow mono">box-box · weekend</span>
|
||||
<p className="wk-status-title">Nothing to show yet</p>
|
||||
<p className="wk-status-sub">
|
||||
{message ?? `No weekend data for the ${season || 'current'} season is available right now.`}
|
||||
</p>
|
||||
<div className="wk-status-actions">
|
||||
<Link to="/live" className="wk-cta wk-cta-ghost">Live timing</Link>
|
||||
<Link to="/explore" className="wk-cta wk-cta-ghost">Explore</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
277
frontend/src/components/weekend/shared.tsx
Normal file
277
frontend/src/components/weekend/shared.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { fetchRaceHub } from '../../api'
|
||||
import { countryFlag } from '../../lib/gpIdentity'
|
||||
import { parseScheduleTime } from '../../lib/schedule'
|
||||
import { podiumFromResults } from '../../lib/weekendContext'
|
||||
import { teamColor } from '../../utils'
|
||||
import type {
|
||||
ContextSession,
|
||||
WeekendChampionshipImpact,
|
||||
WeekendBriefingItem,
|
||||
WeekendPodiumEntry,
|
||||
} from '../../types'
|
||||
|
||||
export function Flag({ code, flag }: { code?: string; flag?: string }) {
|
||||
const glyph = countryFlag({ country_code: code ?? '', country_flag: flag ?? '' })
|
||||
if (!glyph) return null
|
||||
return <span className="wk-flag" aria-hidden="true">{glyph}</span>
|
||||
}
|
||||
|
||||
interface CountdownParts {
|
||||
days: number
|
||||
hours: number
|
||||
minutes: number
|
||||
seconds: number
|
||||
reached: boolean
|
||||
}
|
||||
|
||||
export function countdownParts(target: string | undefined, now: Date): CountdownParts | null {
|
||||
const date = target ? parseScheduleTime(target) : null
|
||||
if (!date) return null
|
||||
const diff = date.getTime() - now.getTime()
|
||||
const clamped = Math.max(0, diff)
|
||||
const totalSeconds = Math.floor(clamped / 1000)
|
||||
return {
|
||||
days: Math.floor(totalSeconds / 86400),
|
||||
hours: Math.floor((totalSeconds % 86400) / 3600),
|
||||
minutes: Math.floor((totalSeconds % 3600) / 60),
|
||||
seconds: totalSeconds % 60,
|
||||
reached: diff <= 0,
|
||||
}
|
||||
}
|
||||
|
||||
export function CountdownDisplay({
|
||||
target,
|
||||
now,
|
||||
compact,
|
||||
}: {
|
||||
target: string | undefined
|
||||
now: Date
|
||||
compact?: boolean
|
||||
}) {
|
||||
const parts = countdownParts(target, now)
|
||||
if (!parts) {
|
||||
return (
|
||||
<span className="wk-countdown-tbc mono" data-testid="wk-countdown">
|
||||
Schedule TBC
|
||||
</span>
|
||||
)
|
||||
}
|
||||
if (parts.reached) {
|
||||
return <span className="wk-countdown-live" data-testid="wk-countdown">Starting now</span>
|
||||
}
|
||||
if (compact || parts.days === 0) {
|
||||
const hh = String(parts.days * 24 + parts.hours).padStart(2, '0')
|
||||
return (
|
||||
<span className="wk-countdown-clock mono" data-testid="wk-countdown">
|
||||
{hh}:{String(parts.minutes).padStart(2, '0')}:{String(parts.seconds).padStart(2, '0')}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span className="wk-countdown" data-testid="wk-countdown">
|
||||
<span className="wk-count-unit"><b>{parts.days}</b>D</span>
|
||||
<span className="wk-count-unit"><b>{String(parts.hours).padStart(2, '0')}</b>H</span>
|
||||
<span className="wk-count-unit"><b>{String(parts.minutes).padStart(2, '0')}</b>M</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* EventPodium fetches and renders the podium for a completed analysis session.
|
||||
* When no analysable session key is available (e.g. an archived result with no
|
||||
* local analysis), it renders an explicit empty state rather than fetching.
|
||||
*/
|
||||
export function EventPodium({ sessionKey }: { sessionKey?: number }) {
|
||||
const enabled = typeof sessionKey === 'number' && sessionKey > 0
|
||||
const query = useQuery({
|
||||
queryKey: ['race-hub', sessionKey, 'podium'],
|
||||
queryFn: () => fetchRaceHub(sessionKey as number),
|
||||
enabled,
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const podium: WeekendPodiumEntry[] = podiumFromResults(query.data?.results ?? [])
|
||||
|
||||
if (!enabled) {
|
||||
return (
|
||||
<div className="wk-podium-empty" data-testid="wk-podium-empty">
|
||||
Result not available yet.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (podium.length === 0) {
|
||||
return (
|
||||
<div className="wk-podium-empty" data-testid="wk-podium-empty">
|
||||
{query.isLoading ? 'Loading result…' : 'Result not available yet.'}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ol className="wk-podium" data-testid="wk-podium">
|
||||
{podium.map((p) => (
|
||||
<li key={p.driver_number} className="wk-podium-row" style={{ ['--wk-team' as string]: teamColor(p.team_colour) }}>
|
||||
<span className="wk-podium-pos mono">{p.position}</span>
|
||||
<span className="wk-podium-code">{p.name_acronym}</span>
|
||||
<span className="wk-podium-gap mono">{p.gap}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)
|
||||
}
|
||||
|
||||
export function ChampionshipImpactCard({ impact }: { impact: WeekendChampionshipImpact }) {
|
||||
const leader = impact.leaders[0]
|
||||
return (
|
||||
<section className="wk-champ" data-testid="wk-champ-impact">
|
||||
<header className="wk-card-head">
|
||||
<span className="wk-card-title">Championship impact</span>
|
||||
<Link to="/championship" className="wk-card-link">Standings →</Link>
|
||||
</header>
|
||||
<ol className="wk-champ-list">
|
||||
{impact.leaders.map((d) => {
|
||||
const gap = leader && d.position !== 1 ? leader.points - d.points : 0
|
||||
return (
|
||||
<li key={d.driver_number} className="wk-champ-row" style={{ ['--wk-team' as string]: teamColor(d.team_colour) }}>
|
||||
<span className="wk-champ-pos mono">{d.position}</span>
|
||||
<span className="wk-champ-code">{d.name_acronym}</span>
|
||||
<span className="wk-champ-pts mono">{d.points}</span>
|
||||
<span className="wk-champ-gap mono">{d.position === 1 ? '—' : `-${gap}`}</span>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ol>
|
||||
{impact.note && <p className="wk-champ-note">{impact.note}</p>}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export function BriefingStrip({ items }: { items: WeekendBriefingItem[] }) {
|
||||
if (items.length === 0) return null
|
||||
return (
|
||||
<section className="wk-briefing" data-testid="wk-briefing">
|
||||
<header className="wk-card-head">
|
||||
<span className="wk-card-title">Since the chequered flag</span>
|
||||
<Link to="/briefing" className="wk-card-link">All briefing →</Link>
|
||||
</header>
|
||||
<ul className="wk-briefing-list">
|
||||
{items.map((item) => (
|
||||
<li key={item.url} className="wk-briefing-item">
|
||||
<a href={item.url} target="_blank" rel="noreferrer" className="wk-briefing-link">
|
||||
{item.category && <span className="wk-briefing-cat mono">{item.category}</span>}
|
||||
<span className="wk-briefing-title">{item.title}</span>
|
||||
<span className="wk-briefing-source mono">{item.source}</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* ChampionshipRoundStrip is a compact, progressively-disclosed round indicator.
|
||||
* The canonical contract exposes only the current round and total, so the strip
|
||||
* shows "Round N of M" and links out to Explore for the full calendar rather than
|
||||
* reintroducing the whole calendar on the Weekend home.
|
||||
*/
|
||||
export function ChampionshipRoundStrip({ round, total }: { round: number; total: number }) {
|
||||
if (round <= 0 || total <= 0) return null
|
||||
const pct = Math.min(100, Math.round((round / total) * 100))
|
||||
return (
|
||||
<section className="wk-season-nav" data-testid="wk-season-nav" aria-label="Season progress">
|
||||
<div className="wk-season-progress">
|
||||
<div className="wk-season-progress-head">
|
||||
<span className="wk-card-title">Season progress</span>
|
||||
<Link to="/explore" className="wk-card-link" data-testid="wk-season-explore">
|
||||
Full calendar →
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className="wk-season-bar"
|
||||
role="progressbar"
|
||||
aria-valuenow={round}
|
||||
aria-valuemin={1}
|
||||
aria-valuemax={total}
|
||||
aria-label={`Round ${round} of ${total}`}
|
||||
>
|
||||
<span className="wk-season-bar-fill" style={{ width: `${pct}%` }} aria-hidden="true" />
|
||||
</div>
|
||||
<p className="wk-season-progress-label mono">
|
||||
Round {round} of {total}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
interface TimelineNode {
|
||||
key: string
|
||||
session_name: string
|
||||
status: 'done' | 'live' | 'next'
|
||||
}
|
||||
|
||||
/**
|
||||
* SessionRail renders the previous/active/next sessions the canonical context
|
||||
* exposes as a compact three-node rail. It is intentionally derived only from the
|
||||
* canonical refs — the contract does not enumerate a full weekend session list.
|
||||
*/
|
||||
export function SessionRail({ nodes }: { nodes: TimelineNode[] }) {
|
||||
if (nodes.length === 0) return null
|
||||
return (
|
||||
<ol className="wk-timeline" data-testid="wk-timeline" role="list">
|
||||
{nodes.map((n) => (
|
||||
<li key={n.key} className={`wk-timeline-node wk-timeline-${n.status}`} role="listitem">
|
||||
<span className="wk-timeline-dot" aria-hidden="true" />
|
||||
<span className="wk-timeline-name">{shortSessionName(n.session_name)}</span>
|
||||
<span className="wk-timeline-state mono">{stateLabel(n.status)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)
|
||||
}
|
||||
|
||||
/** Build the compact session rail from the canonical previous/active/next refs. */
|
||||
export function railNodes(
|
||||
previous: ContextSession | undefined,
|
||||
active: ContextSession | undefined,
|
||||
next: ContextSession | undefined,
|
||||
): TimelineNode[] {
|
||||
const nodes: TimelineNode[] = []
|
||||
if (previous?.session.session_name) {
|
||||
nodes.push({ key: `prev-${previous.session.session_key}`, session_name: previous.session.session_name, status: 'done' })
|
||||
}
|
||||
if (active?.session.session_name) {
|
||||
nodes.push({ key: `live-${active.session.session_key}`, session_name: active.session.session_name, status: 'live' })
|
||||
}
|
||||
if (next?.session.session_name) {
|
||||
nodes.push({ key: `next-${next.session.session_key}`, session_name: next.session.session_name, status: 'next' })
|
||||
}
|
||||
return nodes
|
||||
}
|
||||
|
||||
function shortSessionName(name: string): string {
|
||||
const map: Record<string, string> = {
|
||||
'Practice 1': 'FP1',
|
||||
'Practice 2': 'FP2',
|
||||
'Practice 3': 'FP3',
|
||||
Qualifying: 'Quali',
|
||||
'Sprint Qualifying': 'SQ',
|
||||
'Sprint Shootout': 'SQ',
|
||||
}
|
||||
return map[name] ?? name
|
||||
}
|
||||
|
||||
function stateLabel(status: TimelineNode['status']): string {
|
||||
switch (status) {
|
||||
case 'done':
|
||||
return 'Complete'
|
||||
case 'live':
|
||||
return 'Live'
|
||||
default:
|
||||
return 'Next'
|
||||
}
|
||||
}
|
||||
89
frontend/src/hooks/useWeekendContext.ts
Normal file
89
frontend/src/hooks/useWeekendContext.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { fetchChampionshipHub, fetchNews, fetchWeekendContext } from '../api'
|
||||
import { championshipImpact, briefingItems } from '../lib/weekendContext'
|
||||
import type {
|
||||
WeekendChampionshipImpact,
|
||||
WeekendBriefingItem,
|
||||
WeekendContext,
|
||||
} from '../types'
|
||||
|
||||
export type WeekendLoadState = 'loading' | 'error' | 'ready'
|
||||
|
||||
export interface UseWeekendContextResult {
|
||||
/** Canonical context, present only when loadState === 'ready'. */
|
||||
context: WeekendContext | null
|
||||
loadState: WeekendLoadState
|
||||
error?: Error
|
||||
/** Supplementary championship movers (not part of the #72 contract). */
|
||||
championship?: WeekendChampionshipImpact
|
||||
/** Supplementary briefing items (not part of the #72 contract). */
|
||||
briefing: WeekendBriefingItem[]
|
||||
now: Date
|
||||
}
|
||||
|
||||
/**
|
||||
* useWeekendContext reads the canonical /api/v1/weekend-context endpoint as the
|
||||
* single source of truth for the Weekend home. When the canonical read succeeds
|
||||
* it layers on two pieces of supplementary data that the contract intentionally
|
||||
* omits — championship movers and the paddock briefing — and nothing else.
|
||||
*
|
||||
* It deliberately does NOT fan out to season / meetings / per-weekend / OpenF1
|
||||
* session / live-state queries: those would defeat the local-first canonical read
|
||||
* model and can hit the rate-limited OpenF1 REST surface during active sessions.
|
||||
* Supplementary queries are gated on a successful canonical read so a failing or
|
||||
* pending endpoint issues no extra requests.
|
||||
*/
|
||||
export function useWeekendContext(): UseWeekendContextResult {
|
||||
const [now, setNow] = useState(() => Date.now())
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => setNow(Date.now()), 1000)
|
||||
return () => window.clearInterval(timer)
|
||||
}, [])
|
||||
const nowDate = useMemo(() => new Date(now), [now])
|
||||
|
||||
const contextQuery = useQuery({
|
||||
queryKey: ['weekend-context'],
|
||||
queryFn: fetchWeekendContext,
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
const canonical = contextQuery.data ?? null
|
||||
const canonicalReady = canonical != null
|
||||
const season = canonical?.season
|
||||
|
||||
// Supplementary data — only fetched once the canonical context has resolved,
|
||||
// so a pending/failed canonical read never triggers a request fan-out.
|
||||
const championshipQuery = useQuery({
|
||||
queryKey: ['championship-hub', season ?? 'current'],
|
||||
queryFn: () => fetchChampionshipHub(season),
|
||||
enabled: canonicalReady,
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const newsQuery = useQuery({
|
||||
queryKey: ['news', 6],
|
||||
queryFn: () => fetchNews(6),
|
||||
enabled: canonicalReady,
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const championship = useMemo(
|
||||
() => championshipImpact(championshipQuery.data),
|
||||
[championshipQuery.data],
|
||||
)
|
||||
const briefing = useMemo(() => briefingItems(newsQuery.data ?? []), [newsQuery.data])
|
||||
|
||||
let loadState: WeekendLoadState = 'loading'
|
||||
if (contextQuery.isError) loadState = 'error'
|
||||
else if (canonicalReady) loadState = 'ready'
|
||||
|
||||
return {
|
||||
context: canonical,
|
||||
loadState,
|
||||
error: contextQuery.error instanceof Error ? contextQuery.error : undefined,
|
||||
championship,
|
||||
briefing,
|
||||
now: nowDate,
|
||||
}
|
||||
}
|
||||
181
frontend/src/lib/weekendContext.ts
Normal file
181
frontend/src/lib/weekendContext.ts
Normal file
@@ -0,0 +1,181 @@
|
||||
import type {
|
||||
ChampionshipHub,
|
||||
ContextSession,
|
||||
EnrichedResult,
|
||||
Meeting,
|
||||
NewsItem,
|
||||
Session,
|
||||
WeekendBriefingItem,
|
||||
WeekendChampionshipImpact,
|
||||
WeekendChampionshipMover,
|
||||
WeekendContext,
|
||||
WeekendPodiumEntry,
|
||||
WeekendViewState,
|
||||
} from '../types'
|
||||
|
||||
/**
|
||||
* resolveViewState maps the canonical `temporal_state` onto the rendered Weekend
|
||||
* view. It is a total function: every valid canonical `temporal_state` resolves
|
||||
* to a concrete view, so a well-formed payload never falls through to a
|
||||
* limited/empty placeholder. Loading and error are hook-level states that are
|
||||
* not part of the #72 contract.
|
||||
*/
|
||||
export function resolveViewState(context: WeekendContext): WeekendViewState {
|
||||
switch (context.temporal_state) {
|
||||
case 'no_season':
|
||||
return 'no_season'
|
||||
case 'between_weekends':
|
||||
return 'between_weekends'
|
||||
case 'pre_session':
|
||||
return 'pre_session'
|
||||
case 'session_live':
|
||||
return 'session_live'
|
||||
case 'session_settling':
|
||||
return 'session_settling'
|
||||
case 'between_sessions':
|
||||
return 'between_sessions'
|
||||
case 'post_weekend':
|
||||
return 'post_weekend'
|
||||
case 'season_complete':
|
||||
return 'season_complete'
|
||||
default:
|
||||
// Unknown/absent temporal_state is an invalid payload — treat as no_season
|
||||
// rather than inventing a state. The hook still shows an explicit surface.
|
||||
return 'no_season'
|
||||
}
|
||||
}
|
||||
|
||||
export interface MeetingIdentity {
|
||||
meeting_key: number
|
||||
meeting_name: string
|
||||
short_name: string
|
||||
country_code: string
|
||||
country_flag: string
|
||||
circuit_short_name: string
|
||||
circuit_key?: number
|
||||
date_start?: string
|
||||
date_end?: string
|
||||
}
|
||||
|
||||
/** Presentation identity for a meeting, tolerant of partial/absent fields. */
|
||||
export function meetingIdentity(meeting: Meeting | undefined): MeetingIdentity | undefined {
|
||||
if (!meeting) return undefined
|
||||
return {
|
||||
meeting_key: meeting.meeting_key,
|
||||
meeting_name: meeting.meeting_name || meeting.location || 'Grand Prix',
|
||||
short_name: (meeting.meeting_name || meeting.location || 'Grand Prix').replace(/ Grand Prix$/i, ''),
|
||||
country_code: meeting.country_code,
|
||||
country_flag: meeting.country_flag,
|
||||
circuit_short_name: meeting.circuit_short_name || meeting.location || '',
|
||||
circuit_key: meeting.circuit_key,
|
||||
date_start: meeting.date_start || undefined,
|
||||
date_end: meeting.date_end || undefined,
|
||||
}
|
||||
}
|
||||
|
||||
/** Session identity paired with its resolved meeting for a canonical ContextSession. */
|
||||
export function sessionMeeting(ref: ContextSession | undefined): Meeting | undefined {
|
||||
return ref?.meeting
|
||||
}
|
||||
|
||||
export function sessionOf(ref: ContextSession | undefined): Session | undefined {
|
||||
return ref?.session
|
||||
}
|
||||
|
||||
/**
|
||||
* analysisSessionKey resolves the session a user should open to read analysis for
|
||||
* a completed event. It prefers the canonical default analysis session, falling
|
||||
* back to the previous completed session. Returns undefined when nothing analysable
|
||||
* is available (e.g. an archived result with no local analysis).
|
||||
*/
|
||||
export function analysisSessionKey(context: WeekendContext): number | undefined {
|
||||
const key =
|
||||
context.default_analysis_session?.session.session_key ??
|
||||
context.previous_completed_session?.session.session_key
|
||||
return key && key > 0 ? key : undefined
|
||||
}
|
||||
|
||||
/** True when a ContextSession has local analysis worth linking to. */
|
||||
export function hasLocalAnalysis(ref: ContextSession | undefined): boolean {
|
||||
const status = ref?.availability.local_analysis
|
||||
return status === 'complete' || status === 'partial'
|
||||
}
|
||||
|
||||
/** Countdown target for a session reference — its scheduled start, if known. */
|
||||
export function sessionStart(ref: ContextSession | undefined): string | undefined {
|
||||
const start = ref?.session.date_start
|
||||
return start ? start : undefined
|
||||
}
|
||||
|
||||
export function podiumFromResults(results: EnrichedResult[]): WeekendPodiumEntry[] {
|
||||
return [...results]
|
||||
.filter((r) => r.position >= 1)
|
||||
.sort((a, b) => a.position - b.position)
|
||||
.slice(0, 3)
|
||||
.map((r) => ({
|
||||
position: r.position,
|
||||
driver_number: r.driver_number,
|
||||
name_acronym: r.name_acronym,
|
||||
team_name: r.team_name,
|
||||
team_colour: r.team_colour,
|
||||
gap: formatResultGap(r),
|
||||
}))
|
||||
}
|
||||
|
||||
function formatResultGap(r: EnrichedResult): string {
|
||||
if (r.dnf) return 'DNF'
|
||||
if (r.dns) return 'DNS'
|
||||
if (r.dsq) return 'DSQ'
|
||||
if (r.position === 1) {
|
||||
if (typeof r.duration === 'number' && r.duration > 0) return formatDuration(r.duration)
|
||||
return 'Winner'
|
||||
}
|
||||
const gap = Array.isArray(r.gap_to_leader) ? r.gap_to_leader[r.gap_to_leader.length - 1] : r.gap_to_leader
|
||||
if (typeof gap === 'number') return `+${gap.toFixed(3)}`
|
||||
if (typeof gap === 'string' && gap) return gap.startsWith('+') ? gap : `+${gap}`
|
||||
return '—'
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const h = Math.floor(seconds / 3600)
|
||||
const m = Math.floor((seconds % 3600) / 60)
|
||||
const s = seconds % 60
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${s.toFixed(3).padStart(6, '0')}`
|
||||
return `${m}:${s.toFixed(3).padStart(6, '0')}`
|
||||
}
|
||||
|
||||
/**
|
||||
* championshipImpact derives the top-of-standings movers from the championship
|
||||
* hub. This is supplementary data layered onto the canonical context, not part of
|
||||
* the #72 contract.
|
||||
*/
|
||||
export function championshipImpact(hub: ChampionshipHub | undefined): WeekendChampionshipImpact | undefined {
|
||||
if (!hub || hub.drivers.length === 0) return undefined
|
||||
const leaders: WeekendChampionshipMover[] = hub.drivers.slice(0, 3).map((d) => {
|
||||
const cumulative = d.cumulative ?? []
|
||||
const delta =
|
||||
cumulative.length >= 2 ? cumulative[cumulative.length - 1] - cumulative[cumulative.length - 2] : undefined
|
||||
return {
|
||||
position: d.position,
|
||||
driver_number: d.driver_number,
|
||||
name_acronym: d.name_acronym,
|
||||
team_colour: d.team_colour,
|
||||
points: d.points,
|
||||
delta,
|
||||
}
|
||||
})
|
||||
const note = hub.last_race ? `Standings after ${hub.last_race}.` : undefined
|
||||
return { leaders, note }
|
||||
}
|
||||
|
||||
/** At most three briefing items, mapped from the news feed. */
|
||||
export function briefingItems(news: NewsItem[]): WeekendBriefingItem[] {
|
||||
return news.slice(0, 3).map((item) => ({
|
||||
category: item.category,
|
||||
title: item.title,
|
||||
url: item.url,
|
||||
source: item.source,
|
||||
published_at: item.published_at,
|
||||
image_url: item.og_image_url,
|
||||
}))
|
||||
}
|
||||
@@ -1,451 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useQueries, useQuery } from '@tanstack/react-query'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import {
|
||||
fetchChampionshipHub,
|
||||
fetchLiveState,
|
||||
fetchLocalMeetings,
|
||||
fetchRaceHub,
|
||||
fetchSeasonMeetings,
|
||||
fetchSeasons,
|
||||
fetchSessions,
|
||||
fetchWeekend,
|
||||
} from '../api'
|
||||
import { CommandCenterHero } from '../components/CommandCenterHero'
|
||||
import { PaddockBriefing } from '../components/PaddockBriefing'
|
||||
import { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
|
||||
import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
||||
import { classifySessionStatus, heroState } from '../lib/hero'
|
||||
import {
|
||||
currentAndNextSession,
|
||||
focusMeetingKind,
|
||||
formatSessionScheduleTime,
|
||||
meetingHasStarted,
|
||||
mostRecentPastMeeting,
|
||||
nextUpcomingMeeting,
|
||||
pickFocusMeeting,
|
||||
sortSessionsByStart,
|
||||
} from '../lib/schedule'
|
||||
import type { Meeting, Session, Weekend, WeekendSession } from '../types'
|
||||
import { Trophy } from 'lucide-react'
|
||||
|
||||
const missingDatasets = Object.fromEntries(
|
||||
RACE_HUB_DATASETS.map((dataset) => [dataset, { status: 'missing', source: 'none', count: 0 }]),
|
||||
) as WeekendSession['datasets']
|
||||
|
||||
function meetingStatus(meeting: Meeting, focusKey: number | undefined, now: Date) {
|
||||
if (meeting.meeting_key === focusKey) return 'focus'
|
||||
if (meetingHasStarted(meeting, now)) return 'past'
|
||||
return 'future'
|
||||
}
|
||||
|
||||
function pickAnalysisSession(weekend: Weekend | undefined): WeekendSession | undefined {
|
||||
if (!weekend) return undefined
|
||||
const local = weekend.sessions.filter((s) => s.source === 'local')
|
||||
const partial = weekend.sessions.filter((s) => s.source === 'partial')
|
||||
const pool = local.length > 0 ? local : partial.length > 0 ? partial : weekend.sessions
|
||||
const race = pool.find((s) => s.session.session_type?.toLowerCase().includes('race'))
|
||||
if (race) return race
|
||||
const qual = pool.find((s) => s.session.session_type?.toLowerCase().includes('qualifying'))
|
||||
if (qual) return qual
|
||||
return pool[0]
|
||||
}
|
||||
|
||||
export function CommandCenterPage() {
|
||||
const [now, setNow] = useState(() => Date.now())
|
||||
|
||||
const seasonsQuery = useQuery({
|
||||
queryKey: ['seasons'],
|
||||
queryFn: fetchSeasons,
|
||||
})
|
||||
|
||||
const latestSeason = seasonsQuery.data?.[0] ?? null
|
||||
|
||||
const meetingsQuery = useQuery({
|
||||
queryKey: ['meetings', latestSeason],
|
||||
queryFn: () => fetchLocalMeetings(latestSeason!),
|
||||
enabled: latestSeason != null,
|
||||
})
|
||||
|
||||
const seasonMeetingsQuery = useQuery({
|
||||
queryKey: ['season-meetings', latestSeason],
|
||||
queryFn: () => fetchSeasonMeetings(latestSeason!),
|
||||
enabled: latestSeason != null,
|
||||
})
|
||||
|
||||
const localMeetings = meetingsQuery.data ?? []
|
||||
const seasonMeetings = seasonMeetingsQuery.data?.length ? seasonMeetingsQuery.data : localMeetings
|
||||
const focusMeetings = seasonMeetings.length > 0 ? seasonMeetings : localMeetings
|
||||
|
||||
const weekendQueries = useQueries({
|
||||
queries: localMeetings.map((meeting) => ({
|
||||
queryKey: ['weekend', meeting.meeting_key],
|
||||
queryFn: () => fetchWeekend(meeting.meeting_key),
|
||||
enabled: localMeetings.length > 0,
|
||||
staleTime: 60_000,
|
||||
})),
|
||||
})
|
||||
|
||||
const liveQuery = useQuery({
|
||||
queryKey: ['live-state'],
|
||||
queryFn: fetchLiveState,
|
||||
staleTime: 5_000,
|
||||
})
|
||||
|
||||
const championshipQuery = useQuery({
|
||||
queryKey: ['championship-hub', latestSeason],
|
||||
queryFn: () => fetchChampionshipHub(latestSeason!),
|
||||
enabled: latestSeason != null,
|
||||
})
|
||||
const champHub = championshipQuery.data
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => setNow(Date.now()), 1000)
|
||||
return () => window.clearInterval(timer)
|
||||
}, [])
|
||||
|
||||
const nowDate = useMemo(() => new Date(now), [now])
|
||||
|
||||
const weekendsByKey = useMemo(() => {
|
||||
const map = new Map<number, Weekend>()
|
||||
localMeetings.forEach((meeting, i) => {
|
||||
const data = weekendQueries[i]?.data
|
||||
if (data) map.set(meeting.meeting_key, data)
|
||||
})
|
||||
return map
|
||||
}, [localMeetings, weekendQueries])
|
||||
|
||||
const weekendList = useMemo(() => weekendQueries.map((q) => q.data), [weekendQueries])
|
||||
const meetingStats = countWeekendStats(weekendList)
|
||||
const focusMeeting = pickFocusMeeting(focusMeetings, nowDate)
|
||||
const focusWeekend = focusMeeting ? weekendsByKey.get(focusMeeting.meeting_key) : undefined
|
||||
const openF1SessionsQuery = useQuery({
|
||||
queryKey: ['sessions', focusMeeting?.meeting_key, 'openf1'],
|
||||
queryFn: () => fetchSessions(focusMeeting!.meeting_key, 'openf1'),
|
||||
enabled: focusMeeting != null && focusWeekend == null,
|
||||
staleTime: 60_000,
|
||||
})
|
||||
const openF1WeekendSessions: WeekendSession[] = useMemo(
|
||||
() =>
|
||||
(openF1SessionsQuery.data ?? []).map((session) => ({
|
||||
session,
|
||||
source: 'none',
|
||||
datasets: missingDatasets,
|
||||
})),
|
||||
[openF1SessionsQuery.data],
|
||||
)
|
||||
const focusWeekendSessions = focusWeekend?.sessions ?? openF1WeekendSessions
|
||||
const focusKind = focusMeeting ? focusMeetingKind(focusMeeting, nowDate) : null
|
||||
const focusSessions: Session[] = sortSessionsByStart(focusWeekendSessions.map((s) => s.session))
|
||||
const { current: currentSession, next: nextSession } = currentAndNextSession(focusSessions, nowDate)
|
||||
|
||||
const analysisSession = pickAnalysisSession(focusWeekend)
|
||||
const actionSession =
|
||||
analysisSession?.session ??
|
||||
currentSession ??
|
||||
nextSession ??
|
||||
focusWeekendSessions.find((s) => s.session.session_key === focusWeekend?.default_session_key)?.session ??
|
||||
focusWeekendSessions[0]?.session
|
||||
const analysisSessionKey = actionSession?.session_key
|
||||
|
||||
const liveActive = liveQuery.data?.is_live === true
|
||||
const heroStateKind = heroState({
|
||||
now: nowDate,
|
||||
liveActive,
|
||||
currentSession,
|
||||
focusKind,
|
||||
})
|
||||
|
||||
const lastPastMeeting = useMemo(
|
||||
() => mostRecentPastMeeting(focusMeetings, nowDate),
|
||||
[focusMeetings, nowDate],
|
||||
)
|
||||
const lastPastWeekend = lastPastMeeting ? weekendsByKey.get(lastPastMeeting.meeting_key) : undefined
|
||||
const lastRaceAnalysis = pickAnalysisSession(lastPastWeekend)
|
||||
const lastRaceSessionKey = lastRaceAnalysis?.session.session_key
|
||||
|
||||
const lastRaceHubQuery = useQuery({
|
||||
queryKey: ['race-hub', lastRaceSessionKey, 'hero-podium'],
|
||||
queryFn: () => fetchRaceHub(lastRaceSessionKey!),
|
||||
enabled: lastRaceSessionKey != null && heroStateKind === 'between',
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const nextMeetingForHero = useMemo(() => {
|
||||
if (heroStateKind !== 'between') return null
|
||||
return nextUpcomingMeeting(focusMeetings, nowDate)
|
||||
}, [heroStateKind, focusMeetings, nowDate])
|
||||
|
||||
const lastRacePodium = lastRaceHubQuery.data?.results ?? []
|
||||
const lastRaceName = champHub?.last_race ?? lastPastMeeting?.meeting_name ?? ''
|
||||
|
||||
if (seasonsQuery.isLoading) {
|
||||
return <div className="page loading-state">loading command center…</div>
|
||||
}
|
||||
|
||||
if (seasonsQuery.isError) {
|
||||
return (
|
||||
<div className="page error-box">
|
||||
{seasonsQuery.error instanceof Error ? seasonsQuery.error.message : 'Failed to load seasons'}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const seasons = seasonsQuery.data ?? []
|
||||
|
||||
if (seasons.length === 0) {
|
||||
return (
|
||||
<div className="cc-page cc-empty" data-testid="command-center-empty">
|
||||
<div className="cc-empty-band">
|
||||
<span className="cc-empty-eyebrow mono">box-box · command center</span>
|
||||
<h1 className="cc-empty-title">No local data yet</h1>
|
||||
<p className="cc-empty-sub">
|
||||
Ingest a race weekend from the CLI to populate this screen with live status, next-session
|
||||
countdowns, and analysis links.
|
||||
</p>
|
||||
</div>
|
||||
<div className="cc-empty-actions">
|
||||
<Link to="/live" className="cc-action cc-action-live">
|
||||
<span className="cc-action-label">Live Timing</span>
|
||||
<span className="cc-action-meta">Standby</span>
|
||||
</Link>
|
||||
<Link to="/admin" className="cc-action">
|
||||
<span className="cc-action-label">Admin · Data Health</span>
|
||||
<span className="cc-action-meta">Ingestion guidance</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const accent = countryAccent(focusMeeting ?? null)
|
||||
const accentStyle = { '--gp-accent': accent } as React.CSSProperties
|
||||
|
||||
return (
|
||||
<div className="cc-page" data-testid="command-center" style={accentStyle}>
|
||||
<div className="cc-topbar">
|
||||
<span className="cc-topbar-label mono">box-box · command center</span>
|
||||
<span className="cc-topbar-meta mono">
|
||||
{latestSeason} season · {meetingStats.full}/{meetingStats.total || 0} weekends full
|
||||
</span>
|
||||
<span className="cc-live-pill" data-testid="cc-live-status">
|
||||
<span className={`cc-live-dot ${liveActive ? 'live' : ''}`} />
|
||||
{liveActive ? 'Live session active' : 'No live session'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{!focusMeeting && (
|
||||
<div className="missing-notice">
|
||||
No meetings ingested for {latestSeason}. Run{' '}
|
||||
<code>box-box --ingest-year {latestSeason}</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{focusMeeting && focusKind && (
|
||||
<CommandCenterHero
|
||||
state={heroStateKind}
|
||||
now={nowDate}
|
||||
accent={accent}
|
||||
liveActive={liveActive}
|
||||
liveData={liveQuery.data?.data}
|
||||
focusMeeting={focusMeeting}
|
||||
focusKind={focusKind}
|
||||
sessions={focusWeekendSessions}
|
||||
currentSession={currentSession}
|
||||
nextSession={nextSession}
|
||||
analysisSessionKey={analysisSessionKey}
|
||||
analysisSessionName={actionSession?.session_name}
|
||||
lastRaceName={lastRaceName}
|
||||
lastRacePodium={lastRacePodium}
|
||||
lastRaceSessionKey={lastRaceSessionKey}
|
||||
nextMeeting={nextMeetingForHero}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="cc-dashboard-grid">
|
||||
<div className="cc-dashboard-main">
|
||||
<div
|
||||
className="cc-ambient-aura"
|
||||
aria-hidden="true"
|
||||
style={focusMeeting ? { '--aura-accent': countryAccent(focusMeeting) } as React.CSSProperties : undefined}
|
||||
/>
|
||||
<div className="cc-dashboard-panel">
|
||||
{seasonMeetings.length > 0 && (
|
||||
<section className="cc-season-calendar" data-testid="cc-season-calendar">
|
||||
<div className="sec-header">
|
||||
<span className="sec-title">Season Calendar</span>
|
||||
<span className="sec-meta mono">
|
||||
{seasonMeetings.length} rounds · {meetingStats.full}/{meetingStats.total || 0} local
|
||||
</span>
|
||||
</div>
|
||||
<div className="cc-calendar-grid" role="list">
|
||||
{seasonMeetings.map((meeting, index) => {
|
||||
const weekend = weekendsByKey.get(meeting.meeting_key)
|
||||
const target = pickAnalysisSession(weekend)
|
||||
const targetKey = target?.session.session_key ?? weekend?.default_session_key
|
||||
const status = meetingStatus(meeting, focusMeeting?.meeting_key, nowDate)
|
||||
const cardAccent = countryAccent(meeting)
|
||||
return (
|
||||
<Link
|
||||
key={meeting.meeting_key}
|
||||
to="/race-hub"
|
||||
search={targetKey ? { session_key: targetKey } : {}}
|
||||
className={`cc-calendar-card cc-calendar-${status}`}
|
||||
data-testid={`cc-calendar-${meeting.meeting_key}`}
|
||||
role="listitem"
|
||||
style={{ '--gp-card-accent': cardAccent } as React.CSSProperties}
|
||||
>
|
||||
<div className="cc-calendar-accent" aria-hidden="true" />
|
||||
<div className="cc-calendar-top mono">
|
||||
<span className="cc-calendar-round">R{String(index + 1).padStart(2, '0')}</span>
|
||||
<span className={`cc-cov-dot cc-cov-${weekend?.source ?? 'none'}`} aria-hidden="true" />
|
||||
</div>
|
||||
<div className="cc-calendar-id">
|
||||
{countryFlag(meeting) && <span className="cc-calendar-flag">{countryFlag(meeting)}</span>}
|
||||
</div>
|
||||
<span className="cc-calendar-decal mono">{countryDecal(meeting)}</span>
|
||||
<div className="cc-calendar-copy">
|
||||
<div className="cc-calendar-name">{meeting.meeting_name}</div>
|
||||
<div className="cc-calendar-circuit mono">{meeting.circuit_short_name || meeting.location}</div>
|
||||
<div className="cc-calendar-date mono">{formatGpDateRange(meeting)}</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{seasonMeetingsQuery.isError && (
|
||||
<div className="cc-side-empty">Using local meetings because the full calendar could not load.</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cc-dashboard-sidebar">
|
||||
{champHub && (
|
||||
<section className="cc-champ-snapshot glass-panel" data-testid="cc-champ-snapshot" style={{ padding: 'var(--s5)', borderRadius: '12px' }}>
|
||||
<div className="cc-champ-header">
|
||||
<span>Championship Leaders</span>
|
||||
<Link to="/championship" className="cc-champ-link">Full Standings →</Link>
|
||||
</div>
|
||||
<div className="cc-champ-group-label">Drivers</div>
|
||||
<div className="cc-champ-list">
|
||||
{champHub.drivers.slice(0, 3).map((d) => (
|
||||
<div key={d.driver_number} className="cc-champ-row">
|
||||
<div className="cc-champ-left">
|
||||
<div className="cc-champ-color" style={{ color: `#${d.team_colour}`, background: 'currentColor' }} />
|
||||
<span className="cc-champ-name">{d.name_acronym}</span>
|
||||
</div>
|
||||
<div className="cc-champ-form" title="Last 5 races">
|
||||
<FormSparkline form={d.form} color={`#${d.team_colour}`} />
|
||||
</div>
|
||||
<div className="cc-champ-right">
|
||||
<span className="cc-champ-gap">
|
||||
{d.position === 1 ? '—' : `-${champHub.drivers[0].points - d.points}`}
|
||||
</span>
|
||||
<span className="cc-champ-pts">{d.points}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="cc-champ-group-label">Constructors</div>
|
||||
<div className="cc-champ-list">
|
||||
{champHub.teams.slice(0, 3).map((t, i) => (
|
||||
<div key={t.team_name} className="cc-champ-row">
|
||||
<div className="cc-champ-left">
|
||||
<div className="cc-champ-color" style={{ color: `#${t.team_colour}`, background: 'currentColor' }} />
|
||||
<span className="cc-champ-name">{t.team_name}</span>
|
||||
</div>
|
||||
<div className="cc-champ-form" style={{ opacity: 0.4, fontSize: '11px', display: 'flex', gap: '4px', alignItems: 'center' }} title={`${t.wins} Wins`}>
|
||||
<Trophy size={12} /> {t.wins}
|
||||
</div>
|
||||
<div className="cc-champ-right">
|
||||
<span className="cc-champ-gap">
|
||||
{i === 0 ? '—' : `-${champHub.teams[0].points - t.points}`}
|
||||
</span>
|
||||
<span className="cc-champ-pts">{t.points}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{focusWeekendSessions.length > 0 && (
|
||||
<section className="cc-schedule" data-testid="cc-schedule">
|
||||
<div className="sec-header">
|
||||
<span className="sec-title">Weekend Schedule</span>
|
||||
<span className="sec-meta mono">{focusWeekendSessions.length} sessions</span>
|
||||
</div>
|
||||
<div className="cc-session-strip" role="list">
|
||||
{focusWeekendSessions.map(({ session, source, datasets }) => {
|
||||
const status = classifySessionStatus(session, nowDate)
|
||||
const isNext = nextSession?.session_key === session.session_key
|
||||
const isCurrent = currentSession?.session_key === session.session_key
|
||||
const isLive = isCurrent && liveActive
|
||||
return (
|
||||
<Link
|
||||
key={session.session_key}
|
||||
to="/race-hub"
|
||||
search={{ session_key: session.session_key }}
|
||||
className={`cc-session-card ui-card interactive cc-status-${status}${isNext ? ' is-next' : ''}${
|
||||
isLive ? ' is-live glass-panel' : ''
|
||||
}`}
|
||||
data-testid={`cc-session-${session.session_key}`}
|
||||
role="listitem"
|
||||
>
|
||||
<div className="cc-session-card-head">
|
||||
<span className="cc-session-abbrev mono">
|
||||
{sessionTypeAbbrev(session.session_type, session.session_name)}
|
||||
</span>
|
||||
<span className={`cc-session-status cc-status-pill-${status}`}>
|
||||
{isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="cc-session-name">{session.session_name}</div>
|
||||
<div className="cc-session-time mono">{formatSessionScheduleTime(session.date_start)}</div>
|
||||
<div className="cc-session-cov mono">
|
||||
<span className={`cc-cov-dot cc-cov-${source}`} aria-hidden="true" />
|
||||
{formatCoverageHint(datasets)}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<PaddockBriefing />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FormSparkline({ form, color }: { form: number[], color: string }) {
|
||||
if (!form || form.length === 0) return null
|
||||
const max = Math.max(...form, 26) // 26 is standard max for a race win
|
||||
const width = 45
|
||||
const height = 14
|
||||
const step = width / Math.max(form.length - 1, 1)
|
||||
|
||||
const points = form.map((val, i) => {
|
||||
const x = i * step
|
||||
const y = height - (val / max) * height
|
||||
return `${x},${y}`
|
||||
}).join(' ')
|
||||
|
||||
return (
|
||||
<svg width={width} height={height} style={{ overflow: 'visible' }}>
|
||||
<polyline
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
points={points}
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
156
frontend/src/pages/ExplorePage.tsx
Normal file
156
frontend/src/pages/ExplorePage.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useQueries, useQuery } from '@tanstack/react-query'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import {
|
||||
fetchChampionshipHub,
|
||||
fetchLocalMeetings,
|
||||
fetchSeasonMeetings,
|
||||
fetchSeasons,
|
||||
fetchWeekend,
|
||||
} from '../api'
|
||||
import { countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
||||
import { meetingHasStarted } from '../lib/schedule'
|
||||
import { teamColor } from '../utils'
|
||||
import type { Weekend } from '../types'
|
||||
import '../styles/weekend.css'
|
||||
|
||||
function analysisKey(weekend: Weekend | undefined): number | undefined {
|
||||
if (!weekend) return undefined
|
||||
const race = weekend.sessions.find((s) => s.session.session_type?.toLowerCase().includes('race'))
|
||||
return race?.session.session_key ?? weekend.default_session_key
|
||||
}
|
||||
|
||||
export function ExplorePage() {
|
||||
const now = useMemo(() => new Date(), [])
|
||||
|
||||
const seasonsQuery = useQuery({ queryKey: ['seasons'], queryFn: fetchSeasons })
|
||||
const season = seasonsQuery.data?.[0] ?? null
|
||||
|
||||
const localMeetingsQuery = useQuery({
|
||||
queryKey: ['meetings', season, 'local'],
|
||||
queryFn: () => fetchLocalMeetings(season!),
|
||||
enabled: season != null,
|
||||
})
|
||||
const seasonMeetingsQuery = useQuery({
|
||||
queryKey: ['season-meetings', season],
|
||||
queryFn: () => fetchSeasonMeetings(season!),
|
||||
enabled: season != null,
|
||||
})
|
||||
const championshipQuery = useQuery({
|
||||
queryKey: ['championship-hub', season],
|
||||
queryFn: () => fetchChampionshipHub(season!),
|
||||
enabled: season != null,
|
||||
})
|
||||
|
||||
const localMeetings = localMeetingsQuery.data ?? []
|
||||
const meetings = seasonMeetingsQuery.data?.length ? seasonMeetingsQuery.data : localMeetings
|
||||
|
||||
const weekendQueries = useQueries({
|
||||
queries: localMeetings.map((m) => ({
|
||||
queryKey: ['weekend', m.meeting_key],
|
||||
queryFn: () => fetchWeekend(m.meeting_key),
|
||||
enabled: localMeetings.length > 0,
|
||||
staleTime: 60_000,
|
||||
})),
|
||||
})
|
||||
const weekendsByKey = useMemo(() => {
|
||||
const map = new Map<number, Weekend>()
|
||||
localMeetings.forEach((m, i) => {
|
||||
const data = weekendQueries[i]?.data
|
||||
if (data) map.set(m.meeting_key, data)
|
||||
})
|
||||
return map
|
||||
}, [localMeetings, weekendQueries])
|
||||
|
||||
const drivers = championshipQuery.data?.drivers ?? []
|
||||
const activeMeetings = meetings.filter((m) => !m.is_cancelled)
|
||||
|
||||
if (seasonsQuery.isLoading) {
|
||||
return <div className="wk-status" data-testid="explore-loading"><p className="wk-status-title">Loading…</p></div>
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="wk-page wk-explore" data-testid="explore-page">
|
||||
<div className="wk-eyebrow mono">Explore · {season ?? 'season'}</div>
|
||||
|
||||
<section className="wk-explore-section" aria-labelledby="explore-calendar-title">
|
||||
<header className="wk-card-head">
|
||||
<span className="wk-card-title" id="explore-calendar-title">Season races</span>
|
||||
<span className="wk-card-link mono">{activeMeetings.length} rounds</span>
|
||||
</header>
|
||||
{activeMeetings.length === 0 ? (
|
||||
<p className="wk-status-sub" data-testid="explore-calendar-empty">No season calendar available yet.</p>
|
||||
) : (
|
||||
<ol className="wk-explore-grid" role="list">
|
||||
{activeMeetings.map((meeting, index) => {
|
||||
const weekend = weekendsByKey.get(meeting.meeting_key)
|
||||
const target = analysisKey(weekend)
|
||||
const done = meetingHasStarted(meeting, now)
|
||||
const card = (
|
||||
<>
|
||||
<div className="wk-explore-top mono">
|
||||
<span>R{String(index + 1).padStart(2, '0')}</span>
|
||||
<span className="wk-explore-flag">
|
||||
{countryFlag(meeting) || meeting.country_code}
|
||||
</span>
|
||||
</div>
|
||||
<div className="wk-explore-name">{meeting.meeting_name}</div>
|
||||
<div className="wk-explore-meta mono">{meeting.circuit_short_name || meeting.location}</div>
|
||||
<div className="wk-explore-meta mono">{formatGpDateRange(meeting)}</div>
|
||||
<span className={`wk-explore-state ${done ? 'is-done' : 'is-upcoming'}`}>
|
||||
{done ? 'Completed' : 'Upcoming'}
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<li key={meeting.meeting_key} className="wk-explore-item" role="listitem">
|
||||
{target ? (
|
||||
<Link
|
||||
to="/race-hub"
|
||||
search={{ session_key: target }}
|
||||
className="wk-explore-card is-link"
|
||||
data-testid={`explore-race-${meeting.meeting_key}`}
|
||||
>
|
||||
{card}
|
||||
</Link>
|
||||
) : (
|
||||
<div className="wk-explore-card" data-testid={`explore-race-${meeting.meeting_key}`}>{card}</div>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="wk-explore-section" aria-labelledby="explore-drivers-title">
|
||||
<header className="wk-card-head">
|
||||
<span className="wk-card-title" id="explore-drivers-title">Drivers</span>
|
||||
<Link to="/championship" className="wk-card-link">Championship →</Link>
|
||||
</header>
|
||||
{drivers.length === 0 ? (
|
||||
<p className="wk-status-sub" data-testid="explore-drivers-empty">Driver data not available yet.</p>
|
||||
) : (
|
||||
<ol className="wk-explore-drivers" role="list">
|
||||
{drivers.map((d) => (
|
||||
<li key={d.driver_number} role="listitem">
|
||||
<Link
|
||||
to="/drivers/$driverNumber"
|
||||
params={{ driverNumber: String(d.driver_number) }}
|
||||
search={season ? { year: season } : {}}
|
||||
className="wk-driver-chip"
|
||||
style={{ ['--wk-team' as string]: teamColor(d.team_colour) }}
|
||||
data-testid={`explore-driver-${d.driver_number}`}
|
||||
>
|
||||
<span className="wk-driver-pos mono">{d.position}</span>
|
||||
<span className="wk-driver-code">{d.name_acronym}</span>
|
||||
<span className="wk-driver-pts mono">{d.points}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
94
frontend/src/pages/WeekendPage.tsx
Normal file
94
frontend/src/pages/WeekendPage.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { useWeekendContext } from '../hooks/useWeekendContext'
|
||||
import { BetweenRacesView } from '../components/weekend/BetweenRacesView'
|
||||
import { BetweenSessionsView } from '../components/weekend/BetweenSessionsView'
|
||||
import { LiveHandoffView } from '../components/weekend/LiveHandoffView'
|
||||
import { PreSessionView } from '../components/weekend/PreSessionView'
|
||||
import { WeekendError, WeekendLimited, WeekendLoading } from '../components/weekend/StatusViews'
|
||||
import { resolveViewState } from '../lib/weekendContext'
|
||||
import type {
|
||||
WeekendBriefingItem,
|
||||
WeekendChampionshipImpact,
|
||||
WeekendContext,
|
||||
WeekendViewState,
|
||||
} from '../types'
|
||||
import '../styles/weekend.css'
|
||||
|
||||
interface RenderArgs {
|
||||
context: WeekendContext
|
||||
now: Date
|
||||
championship?: WeekendChampionshipImpact
|
||||
briefing: WeekendBriefingItem[]
|
||||
/** When true (the /preview alias), foreground the preparation surface. */
|
||||
preview: boolean
|
||||
}
|
||||
|
||||
function renderState(view: WeekendViewState, args: RenderArgs) {
|
||||
const { context, now, championship, briefing, preview } = args
|
||||
// The /preview alias always resolves to the preparation surface as long as
|
||||
// there is a next event to prepare for, regardless of the temporal state. This
|
||||
// keeps saved /preview links and the "Prepare for …" CTA meaningful instead of
|
||||
// redirecting straight back to the same between-races screen.
|
||||
if (preview && context.next_meeting) {
|
||||
return <PreSessionView context={context} now={now} />
|
||||
}
|
||||
|
||||
switch (view) {
|
||||
case 'no_season':
|
||||
return <WeekendLimited season={context.season} />
|
||||
case 'between_weekends':
|
||||
case 'post_weekend':
|
||||
case 'season_complete':
|
||||
return (
|
||||
<BetweenRacesView
|
||||
context={context}
|
||||
now={now}
|
||||
view={view}
|
||||
championship={championship}
|
||||
briefing={briefing}
|
||||
/>
|
||||
)
|
||||
case 'between_sessions':
|
||||
case 'session_settling':
|
||||
return <BetweenSessionsView context={context} now={now} view={view} briefing={briefing} />
|
||||
case 'session_live':
|
||||
return <LiveHandoffView context={context} />
|
||||
case 'pre_session':
|
||||
return <PreSessionView context={context} now={now} />
|
||||
default:
|
||||
return <WeekendLimited season={context.season} />
|
||||
}
|
||||
}
|
||||
|
||||
export function WeekendPage({ preview = false }: { preview?: boolean }) {
|
||||
const { context, loadState, error, championship, briefing, now } = useWeekendContext()
|
||||
|
||||
if (loadState === 'loading') {
|
||||
return (
|
||||
<main className="wk-page" data-testid="weekend-page" data-state="loading">
|
||||
<WeekendLoading />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
if (loadState === 'error' || context == null) {
|
||||
return (
|
||||
<main className="wk-page" data-testid="weekend-page" data-state="error">
|
||||
<WeekendError message={error?.message} />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
const view = resolveViewState(context)
|
||||
|
||||
return (
|
||||
<main
|
||||
className="wk-page"
|
||||
data-testid="weekend-page"
|
||||
data-state={view}
|
||||
data-temporal-state={context.temporal_state}
|
||||
data-preview={preview ? 'true' : undefined}
|
||||
>
|
||||
{renderState(view, { context, now, championship, briefing, preview })}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router'
|
||||
import { Nav } from './components/Nav'
|
||||
import { CommandCenterPage } from './pages/CommandCenterPage'
|
||||
import { WeekendPage } from './pages/WeekendPage'
|
||||
import { ExplorePage } from './pages/ExplorePage'
|
||||
import { RaceHubPage } from './pages/RaceHubPage'
|
||||
import { DataLibraryPage } from './pages/DataLibraryPage'
|
||||
import { LiveTimingPage } from './pages/LiveTimingPage'
|
||||
import { BriefingPage } from './pages/BriefingPage'
|
||||
import { ChampionshipPage } from './pages/ChampionshipPage'
|
||||
import { DriverProfilePage } from './pages/DriverProfilePage'
|
||||
import { RacePreviewPage } from './pages/RacePreviewPage'
|
||||
|
||||
type RaceHubSearch = {
|
||||
session_key?: number
|
||||
@@ -26,10 +26,17 @@ const rootRoute = createRootRoute({
|
||||
),
|
||||
})
|
||||
|
||||
export const commandCenterRoute = createRoute({
|
||||
// Weekend is the adaptive home. `/` renders the current temporal state.
|
||||
export const weekendRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: '/',
|
||||
component: CommandCenterPage,
|
||||
component: WeekendPage,
|
||||
})
|
||||
|
||||
export const exploreRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: '/explore',
|
||||
component: ExplorePage,
|
||||
})
|
||||
|
||||
export const raceHubRoute = createRoute({
|
||||
@@ -90,14 +97,21 @@ export const briefingRoute = createRoute({
|
||||
component: BriefingPage,
|
||||
})
|
||||
|
||||
// Preview folds into the Weekend home. /preview is a stable alias that renders the
|
||||
// Weekend page in its preparation surface (PreSessionView) whenever there is a next
|
||||
// event — so saved preview links and the "Prepare for …" CTA reach real preview
|
||||
// content instead of redirecting back to the same between-races screen.
|
||||
export const previewRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: '/preview',
|
||||
component: RacePreviewPage,
|
||||
component: function PreviewRoute() {
|
||||
return <WeekendPage preview />
|
||||
},
|
||||
})
|
||||
|
||||
const routeTree = rootRoute.addChildren([
|
||||
commandCenterRoute,
|
||||
weekendRoute,
|
||||
exploreRoute,
|
||||
raceHubRoute,
|
||||
adminRoute,
|
||||
dataLibraryRoute,
|
||||
|
||||
@@ -142,6 +142,53 @@ a { color: inherit; text-decoration: none; }
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
/* ── Mobile bottom nav ── */
|
||||
.app-bottom-nav {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
height: 60px;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
background: rgba(18, 18, 18, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.bottom-nav-link {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--text-3);
|
||||
}
|
||||
.bottom-nav-link.active { color: var(--red); }
|
||||
.bottom-nav-link:hover { color: var(--text-2); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* On mobile the bottom bar is the single primary navigation system. The top
|
||||
bar's Primary links are hidden so the two are never both shown; the top bar
|
||||
keeps only the logo and the Admin operator utility. */
|
||||
.app-bottom-nav { display: flex; }
|
||||
.app-nav .nav-links { display: none; }
|
||||
.app-nav { justify-content: space-between; }
|
||||
/* Keep page content clear of the fixed bottom bar. */
|
||||
.wk-page { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0) + var(--s4)); }
|
||||
}
|
||||
|
||||
/* ── Focus visibility (accessibility) ── */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--red);
|
||||
outline-offset: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* ── Page ── */
|
||||
.page {
|
||||
max-width: 1040px;
|
||||
|
||||
378
frontend/src/styles/weekend.css
Normal file
378
frontend/src/styles/weekend.css
Normal file
@@ -0,0 +1,378 @@
|
||||
/* ── Weekend adaptive home ── */
|
||||
.wk-page {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: var(--s6) var(--s6) 64px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wk-eyebrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s4);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-2);
|
||||
margin-bottom: var(--s5);
|
||||
}
|
||||
.wk-eyebrow::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--red), transparent);
|
||||
}
|
||||
|
||||
.wk-card-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--s4);
|
||||
margin-bottom: var(--s4);
|
||||
}
|
||||
.wk-card-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.wk-card-link {
|
||||
font-size: 11px;
|
||||
color: var(--text-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wk-card-link:hover { color: var(--text); }
|
||||
|
||||
.wk-flag { font-size: 22px; line-height: 1; }
|
||||
|
||||
/* ── CTAs ── */
|
||||
.wk-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--s3);
|
||||
padding: var(--s4) var(--s5);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
transition: background 0.12s, border-color 0.12s, transform 0.12s;
|
||||
}
|
||||
.wk-cta-primary { background: var(--red); color: #fff; }
|
||||
.wk-cta-primary:hover { background: #ff3b3f; }
|
||||
.wk-cta-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-2);
|
||||
border: 1px solid var(--border-2);
|
||||
}
|
||||
.wk-cta-ghost:hover { color: var(--text); border-color: var(--text-3); }
|
||||
.wk-cta-wide { width: 100%; }
|
||||
|
||||
/* ── Between-races top grid ── */
|
||||
.wk-top-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--s5);
|
||||
margin-bottom: var(--s5);
|
||||
}
|
||||
.wk-mid-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
|
||||
gap: var(--s5);
|
||||
margin-bottom: var(--s5);
|
||||
}
|
||||
|
||||
.wk-event-card {
|
||||
min-width: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: var(--s5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s5);
|
||||
}
|
||||
.wk-event-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--s4);
|
||||
}
|
||||
.wk-event-id { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
|
||||
.wk-event-name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.wk-event-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wk-tag-done { color: var(--text-2); }
|
||||
.wk-tag-next { color: var(--red); }
|
||||
|
||||
.wk-event-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
|
||||
gap: var(--s5);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* ── Podium ── */
|
||||
.wk-podium { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
|
||||
.wk-podium-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--s4);
|
||||
padding: var(--s3) var(--s4);
|
||||
background: var(--surface-h);
|
||||
border-left: 3px solid var(--wk-team, var(--border-2));
|
||||
border-radius: 4px;
|
||||
}
|
||||
.wk-podium-pos { font-weight: 700; color: var(--text-2); }
|
||||
.wk-podium-code { font-weight: 700; color: var(--wk-team, var(--text)); overflow: hidden; text-overflow: ellipsis; }
|
||||
.wk-podium-gap { color: var(--text-2); font-size: 12px; }
|
||||
.wk-podium-empty { color: var(--text-3); font-size: 12px; padding: var(--s4); }
|
||||
|
||||
.wk-story-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s3);
|
||||
padding: var(--s4);
|
||||
background: rgba(230, 36, 41, 0.05);
|
||||
border: 1px solid rgba(230, 36, 41, 0.25);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.wk-story-label { font-size: 13px; font-weight: 700; color: var(--red); }
|
||||
.wk-story-text { font-size: 12px; color: var(--text-2); flex: 1; }
|
||||
|
||||
/* ── Next event ── */
|
||||
.wk-next-body { display: flex; flex-direction: column; gap: var(--s5); }
|
||||
.wk-countdown { display: flex; gap: var(--s5); align-items: baseline; }
|
||||
.wk-count-unit { font-size: 13px; color: var(--text-2); font-family: var(--f-mono); }
|
||||
.wk-count-unit b { font-size: 40px; color: var(--red); font-weight: 700; margin-right: 2px; }
|
||||
.wk-countdown-clock { font-size: 32px; font-weight: 700; color: var(--blue); }
|
||||
.wk-countdown-live { font-size: 20px; font-weight: 700; color: var(--red); }
|
||||
.wk-next-session { display: flex; flex-direction: column; gap: 2px; }
|
||||
.wk-next-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
|
||||
.wk-next-value { font-size: 15px; font-weight: 600; }
|
||||
.wk-season-complete-copy { font-size: 13px; color: var(--text-2); }
|
||||
|
||||
/* ── Championship impact ── */
|
||||
.wk-champ, .wk-briefing, .wk-season-nav {
|
||||
min-width: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: var(--s5);
|
||||
}
|
||||
.wk-champ-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
|
||||
.wk-champ-row {
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: var(--s4);
|
||||
padding: var(--s2) var(--s3);
|
||||
border-left: 3px solid var(--wk-team, var(--border-2));
|
||||
}
|
||||
.wk-champ-pos { color: var(--text-3); }
|
||||
.wk-champ-code { font-weight: 700; color: var(--wk-team, var(--text)); }
|
||||
.wk-champ-pts { font-weight: 700; }
|
||||
.wk-champ-gap { color: var(--text-3); font-size: 11px; min-width: 34px; text-align: right; }
|
||||
.wk-champ-note { margin-top: var(--s4); font-size: 11px; color: var(--text-3); }
|
||||
|
||||
/* ── Season progress strip ── */
|
||||
.wk-countdown-tbc { font-size: 14px; color: var(--text-3); }
|
||||
.wk-season-progress { display: flex; flex-direction: column; gap: var(--s3); }
|
||||
.wk-season-progress-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
|
||||
.wk-season-bar {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-3);
|
||||
overflow: hidden;
|
||||
}
|
||||
.wk-season-bar-fill {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
background: var(--red);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.wk-season-progress-label { font-size: 11px; color: var(--text-3); }
|
||||
|
||||
/* ── Briefing ── */
|
||||
.wk-briefing-list { list-style: none; display: flex; flex-direction: column; }
|
||||
.wk-briefing-item { border-top: 1px solid var(--border); }
|
||||
.wk-briefing-item:first-child { border-top: none; }
|
||||
.wk-briefing-link {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--s4);
|
||||
padding: var(--s4) 0;
|
||||
}
|
||||
.wk-briefing-link:hover .wk-briefing-title { color: var(--red); }
|
||||
.wk-briefing-cat { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
|
||||
.wk-briefing-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.wk-briefing-source { font-size: 11px; color: var(--text-3); white-space: nowrap; }
|
||||
|
||||
/* ── Between-sessions / live ── */
|
||||
.wk-sessions, .wk-live, .wk-pre { display: flex; flex-direction: column; gap: var(--s5); }
|
||||
.wk-sessions-head { display: flex; flex-direction: column; gap: 2px; }
|
||||
.wk-sessions-title { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
|
||||
.wk-sessions-circuit { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
.wk-timeline {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: var(--s3);
|
||||
overflow-x: auto;
|
||||
padding-bottom: var(--s3);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.wk-timeline-node {
|
||||
flex: 1 0 auto;
|
||||
min-width: 72px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--s2);
|
||||
padding: var(--s3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.wk-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
|
||||
.wk-timeline-done .wk-timeline-dot { background: var(--green); }
|
||||
.wk-timeline-live .wk-timeline-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(230,36,41,0.25); }
|
||||
.wk-timeline-next { border-color: var(--red); }
|
||||
.wk-timeline-next .wk-timeline-dot { border: 2px solid var(--red); }
|
||||
.wk-timeline-name { font-size: 12px; font-weight: 600; }
|
||||
.wk-timeline-state { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
|
||||
.wk-timeline-done .wk-timeline-state { color: var(--green); }
|
||||
.wk-timeline-live .wk-timeline-state, .wk-timeline-next .wk-timeline-state { color: var(--red); }
|
||||
|
||||
.wk-recap-card, .wk-upnext-card, .wk-live-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: var(--s5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s4);
|
||||
}
|
||||
.wk-recap-eyebrow, .wk-upnext-eyebrow { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
|
||||
.wk-recap-title, .wk-upnext-title { font-size: 20px; font-weight: 700; }
|
||||
.wk-upnext-when { font-size: 12px; color: var(--text-3); }
|
||||
.wk-upnext-card { border-color: rgba(230,36,41,0.3); }
|
||||
|
||||
.wk-live-card { border-color: rgba(230,36,41,0.35); }
|
||||
.wk-live-head { display: flex; align-items: center; justify-content: space-between; }
|
||||
.wk-live-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(230,36,41,0.2); }
|
||||
.wk-live-lead { font-size: 14px; color: var(--text-2); }
|
||||
|
||||
/* ── Pre-session ── */
|
||||
.wk-pre-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s5);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wk-pre-countdown { display: flex; flex-direction: column; gap: 2px; margin-left: auto; }
|
||||
.wk-pre-preview { min-width: 0; }
|
||||
/* The folded preview page ships its own max-width page; reset it inside Weekend. */
|
||||
.wk-pre-preview .preview-page { max-width: 100%; padding: 0; }
|
||||
|
||||
/* ── Status views ── */
|
||||
.wk-status {
|
||||
max-width: 640px;
|
||||
margin: 64px auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s4);
|
||||
align-items: center;
|
||||
}
|
||||
.wk-status-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
|
||||
.wk-status-title { font-size: 22px; font-weight: 700; }
|
||||
.wk-status-sub { font-size: 13px; color: var(--text-2); }
|
||||
.wk-status-actions { display: flex; gap: var(--s4); margin-top: var(--s4); }
|
||||
.wk-status-error .wk-status-title { color: var(--red); }
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 900px) {
|
||||
.wk-top-grid, .wk-mid-grid { grid-template-columns: 1fr; }
|
||||
.wk-event-body { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.wk-page { padding: var(--s5) var(--s5) 88px; }
|
||||
.wk-event-name { font-size: 20px; }
|
||||
.wk-sessions-title { font-size: 22px; }
|
||||
.wk-count-unit b { font-size: 32px; }
|
||||
.wk-pre-head { flex-direction: column; align-items: flex-start; }
|
||||
.wk-pre-countdown { margin-left: 0; }
|
||||
}
|
||||
|
||||
/* ── Explore ── */
|
||||
.wk-explore { display: flex; flex-direction: column; gap: var(--s6); }
|
||||
.wk-explore-section {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: var(--s5);
|
||||
}
|
||||
.wk-explore-grid {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: var(--s4);
|
||||
}
|
||||
.wk-explore-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s2);
|
||||
padding: var(--s4);
|
||||
min-width: 0;
|
||||
background: var(--surface-h);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
.wk-explore-card.is-link { transition: border-color 0.12s, background 0.12s; }
|
||||
.wk-explore-card.is-link:hover { border-color: var(--text-3); background: var(--surface-2); }
|
||||
.wk-explore-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-3); }
|
||||
.wk-explore-flag { font-size: 18px; }
|
||||
.wk-explore-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
|
||||
.wk-explore-meta { font-size: 11px; color: var(--text-3); }
|
||||
.wk-explore-state { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--s2); }
|
||||
.wk-explore-state.is-done { color: var(--green); }
|
||||
.wk-explore-state.is-upcoming { color: var(--text-3); }
|
||||
|
||||
.wk-explore-drivers { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3); }
|
||||
.wk-driver-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--s3);
|
||||
padding: var(--s3) var(--s4);
|
||||
background: var(--surface-h);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--wk-team, var(--border-2));
|
||||
border-radius: 6px;
|
||||
transition: border-color 0.12s;
|
||||
}
|
||||
.wk-driver-chip:hover { border-color: var(--text-3); }
|
||||
.wk-driver-pos { color: var(--text-3); font-size: 11px; }
|
||||
.wk-driver-code { font-weight: 700; color: var(--wk-team, var(--text)); }
|
||||
.wk-driver-pts { color: var(--text-2); font-size: 12px; }
|
||||
|
||||
/* ── Reduced motion ── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wk-cta, .wk-briefing-title, .wk-live-pulse, .wk-timeline-live .wk-timeline-dot { transition: none; }
|
||||
}
|
||||
@@ -1,245 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { RouterProvider, createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
|
||||
import { CommandCenterPage } from '../pages/CommandCenterPage'
|
||||
import type { DatasetInfo, Meeting, Weekend } from '../types'
|
||||
|
||||
vi.mock('../api', () => ({
|
||||
fetchSeasons: vi.fn(),
|
||||
fetchLocalMeetings: vi.fn(),
|
||||
fetchSeasonMeetings: vi.fn(),
|
||||
fetchSessions: vi.fn(),
|
||||
fetchWeekend: vi.fn(),
|
||||
fetchLiveState: vi.fn(),
|
||||
fetchChampionshipHub: vi.fn(),
|
||||
fetchRaceHub: vi.fn(),
|
||||
}))
|
||||
|
||||
import {
|
||||
fetchSeasons,
|
||||
fetchLocalMeetings,
|
||||
fetchSeasonMeetings,
|
||||
fetchSessions,
|
||||
fetchWeekend,
|
||||
fetchLiveState,
|
||||
fetchChampionshipHub,
|
||||
fetchRaceHub,
|
||||
} from '../api'
|
||||
|
||||
const mockFetchSeasons = vi.mocked(fetchSeasons)
|
||||
const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
|
||||
const mockFetchSeasonMeetings = vi.mocked(fetchSeasonMeetings)
|
||||
const mockFetchSessions = vi.mocked(fetchSessions)
|
||||
const mockFetchWeekend = vi.mocked(fetchWeekend)
|
||||
const mockFetchLiveState = vi.mocked(fetchLiveState)
|
||||
const mockFetchChampionshipHub = vi.mocked(fetchChampionshipHub)
|
||||
const mockFetchRaceHub = vi.mocked(fetchRaceHub)
|
||||
|
||||
const meeting: Meeting = {
|
||||
meeting_key: 1229,
|
||||
meeting_name: 'Monaco',
|
||||
meeting_official_name: 'FORMULA 1 GRAND PRIX DE MONACO 2025',
|
||||
location: 'Monaco',
|
||||
country_name: 'Monaco',
|
||||
country_code: 'MON',
|
||||
country_flag: '',
|
||||
circuit_short_name: 'Monaco',
|
||||
date_start: '2025-05-23T00:00:00+00:00',
|
||||
date_end: '2025-05-25T00:00:00+00:00',
|
||||
year: 2025,
|
||||
}
|
||||
|
||||
const fullDatasets: Record<string, DatasetInfo> = {
|
||||
meeting: { status: 'available', source: 'local', count: 1 },
|
||||
session: { status: 'available', source: 'local', count: 1 },
|
||||
drivers: { status: 'available', source: 'local', count: 20 },
|
||||
results: { status: 'available', source: 'local', count: 20 },
|
||||
starting_grid: { status: 'available', source: 'local', count: 20 },
|
||||
stints: { status: 'available', source: 'local', count: 2 },
|
||||
pit_stops: { status: 'available', source: 'local', count: 1 },
|
||||
positions: { status: 'available', source: 'local', count: 3 },
|
||||
race_control: { status: 'available', source: 'local', count: 1 },
|
||||
weather: { status: 'available', source: 'local', count: 1 },
|
||||
laps: { status: 'available', source: 'local', count: 1 },
|
||||
}
|
||||
|
||||
const weekend: Weekend = {
|
||||
source: 'local',
|
||||
meeting_key: 1229,
|
||||
meeting,
|
||||
default_session_key: 9472,
|
||||
sessions: [
|
||||
{
|
||||
session: {
|
||||
session_key: 9472,
|
||||
session_name: 'Race',
|
||||
session_type: 'Race',
|
||||
meeting_key: 1229,
|
||||
date_start: '2025-05-25T13:00:00+00:00',
|
||||
date_end: '2025-05-25T15:00:00+00:00',
|
||||
gmt_offset: '02:00:00',
|
||||
},
|
||||
source: 'local',
|
||||
datasets: fullDatasets,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
function renderPage() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
})
|
||||
|
||||
const rootRoute = createRootRoute({
|
||||
component: () => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<CommandCenterPage />
|
||||
</QueryClientProvider>
|
||||
),
|
||||
})
|
||||
|
||||
const indexRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: '/',
|
||||
component: CommandCenterPage,
|
||||
})
|
||||
|
||||
const router = createRouter({ routeTree: rootRoute.addChildren([indexRoute]) })
|
||||
|
||||
return render(<RouterProvider router={router} />)
|
||||
}
|
||||
|
||||
describe('CommandCenterPage', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockFetchLiveState.mockResolvedValue({ is_live: false, data: null })
|
||||
mockFetchSessions.mockResolvedValue([])
|
||||
mockFetchChampionshipHub.mockResolvedValue({
|
||||
season: 2025,
|
||||
round: 1,
|
||||
total_rounds: 1,
|
||||
rounds_left: 0,
|
||||
last_race: 'Monaco',
|
||||
round_labels: ['R1'],
|
||||
drivers: [],
|
||||
teams: [],
|
||||
})
|
||||
mockFetchRaceHub.mockResolvedValue({
|
||||
source: 'local',
|
||||
session_key: 9472,
|
||||
datasets: fullDatasets,
|
||||
results: [
|
||||
{
|
||||
driver_number: 1,
|
||||
position: 1,
|
||||
name_acronym: 'VER',
|
||||
full_name: 'Max Verstappen',
|
||||
team_name: 'Red Bull Racing',
|
||||
team_colour: '3671c6',
|
||||
dnf: false,
|
||||
dns: false,
|
||||
dsq: false,
|
||||
duration: 7200,
|
||||
gap_to_leader: null,
|
||||
number_of_laps: 78,
|
||||
points: 25,
|
||||
session_key: 9472,
|
||||
meeting_key: 1229,
|
||||
},
|
||||
],
|
||||
starting_grid: [],
|
||||
drivers: [],
|
||||
stints: [],
|
||||
pit_stops: [],
|
||||
positions: [],
|
||||
race_control: [],
|
||||
weather: [],
|
||||
laps: [],
|
||||
chapters: [],
|
||||
})
|
||||
})
|
||||
|
||||
it('shows empty state when no seasons are ingested', async () => {
|
||||
mockFetchSeasons.mockResolvedValue([])
|
||||
|
||||
renderPage()
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('command-center-empty')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('No local data yet')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows weekend identity band and schedule when data exists', async () => {
|
||||
mockFetchSeasons.mockResolvedValue([2025])
|
||||
mockFetchLocalMeetings.mockResolvedValue([meeting])
|
||||
mockFetchSeasonMeetings.mockResolvedValue([meeting])
|
||||
mockFetchWeekend.mockResolvedValue(weekend)
|
||||
|
||||
renderPage()
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('command-center')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('cc-session-9472')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
||||
expect(screen.getByTestId('cc-season-calendar')).toHaveTextContent('Season Calendar')
|
||||
expect(screen.getByTestId('cc-calendar-1229')).toHaveTextContent('R01')
|
||||
expect(screen.getByText('No live session')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('hero-last-race-link')).toHaveTextContent('Monaco')
|
||||
})
|
||||
|
||||
it('uses OpenF1 calendar metadata to focus the current weekend when local ingest is behind', async () => {
|
||||
const canada = {
|
||||
...meeting,
|
||||
meeting_key: 1301,
|
||||
meeting_name: 'Canada',
|
||||
country_name: 'Canada',
|
||||
country_code: 'CAN',
|
||||
circuit_short_name: 'Montreal',
|
||||
date_start: '2026-05-22T00:00:00+00:00',
|
||||
date_end: '2026-05-24T23:59:59+00:00',
|
||||
year: 2026,
|
||||
}
|
||||
const monaco = {
|
||||
...meeting,
|
||||
meeting_key: 1302,
|
||||
meeting_name: 'Monaco',
|
||||
date_start: '2026-06-05T00:00:00+00:00',
|
||||
date_end: '2026-06-07T23:59:59+00:00',
|
||||
year: 2026,
|
||||
}
|
||||
|
||||
vi.setSystemTime(new Date('2026-06-06T15:15:00Z'))
|
||||
mockFetchSeasons.mockResolvedValue([2026])
|
||||
mockFetchLocalMeetings.mockResolvedValue([canada])
|
||||
mockFetchSeasonMeetings.mockResolvedValue([canada, monaco])
|
||||
mockFetchWeekend.mockResolvedValue({ ...weekend, meeting: canada, meeting_key: canada.meeting_key })
|
||||
mockFetchSessions.mockResolvedValue([
|
||||
{
|
||||
session_key: 9602,
|
||||
session_name: 'Qualifying',
|
||||
session_type: 'Qualifying',
|
||||
meeting_key: monaco.meeting_key,
|
||||
date_start: '2026-06-06T15:00:00+00:00',
|
||||
date_end: '2026-06-06T16:00:00+00:00',
|
||||
gmt_offset: '02:00:00',
|
||||
},
|
||||
])
|
||||
|
||||
renderPage()
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
||||
})
|
||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Live now')
|
||||
expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track')
|
||||
expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live')
|
||||
|
||||
vi.useRealTimers()
|
||||
})
|
||||
})
|
||||
67
frontend/src/test/Nav.test.tsx
Normal file
67
frontend/src/test/Nav.test.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { render, screen, waitFor, within } from '@testing-library/react'
|
||||
import {
|
||||
Outlet,
|
||||
RouterProvider,
|
||||
createRouter,
|
||||
createRootRoute,
|
||||
createRoute,
|
||||
createMemoryHistory,
|
||||
} from '@tanstack/react-router'
|
||||
import { Nav } from '../components/Nav'
|
||||
|
||||
function renderNav() {
|
||||
const rootRoute = createRootRoute({
|
||||
component: () => (
|
||||
<>
|
||||
<Nav />
|
||||
<Outlet />
|
||||
</>
|
||||
),
|
||||
})
|
||||
const stub = (p: string, id: string) =>
|
||||
createRoute({ getParentRoute: () => rootRoute, path: p, component: () => <div data-testid={id} /> })
|
||||
const router = createRouter({
|
||||
routeTree: rootRoute.addChildren([
|
||||
stub('/', 'home'),
|
||||
stub('/championship', 'championship'),
|
||||
stub('/briefing', 'briefing'),
|
||||
stub('/explore', 'explore'),
|
||||
stub('/admin', 'admin'),
|
||||
]),
|
||||
history: createMemoryHistory({ initialEntries: ['/'] }),
|
||||
})
|
||||
return render(<RouterProvider router={router} />)
|
||||
}
|
||||
|
||||
const DESTINATIONS = ['Weekend', 'Championship', 'Briefing', 'Explore']
|
||||
|
||||
describe('Nav — one primary navigation system per breakpoint', () => {
|
||||
it('exposes exactly two Primary landmarks (one per breakpoint), never more', async () => {
|
||||
renderNav()
|
||||
await waitFor(() => expect(screen.getAllByRole('navigation', { name: 'Primary' })).toHaveLength(2))
|
||||
})
|
||||
|
||||
it('every Primary landmark contains all four destinations', async () => {
|
||||
renderNav()
|
||||
await waitFor(() => expect(screen.getAllByRole('navigation', { name: 'Primary' }).length).toBe(2))
|
||||
const primaries = screen.getAllByRole('navigation', { name: 'Primary' })
|
||||
for (const nav of primaries) {
|
||||
for (const label of DESTINATIONS) {
|
||||
expect(within(nav).getByRole('link', { name: new RegExp(`^${label}$`) })).toBeInTheDocument()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
it('keeps Admin out of every Primary landmark (operator utility only)', async () => {
|
||||
renderNav()
|
||||
await waitFor(() => expect(screen.getAllByRole('navigation', { name: 'Primary' }).length).toBe(2))
|
||||
const primaries = screen.getAllByRole('navigation', { name: 'Primary' })
|
||||
for (const nav of primaries) {
|
||||
expect(within(nav).queryByRole('link', { name: /Admin/i })).not.toBeInTheDocument()
|
||||
}
|
||||
// Admin lives in the operator utilities toolbar.
|
||||
const toolbar = screen.getByRole('toolbar', { name: 'Operator utilities' })
|
||||
expect(within(toolbar).getByRole('link', { name: /Admin/i })).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
309
frontend/src/test/WeekendPage.test.tsx
Normal file
309
frontend/src/test/WeekendPage.test.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import {
|
||||
Outlet,
|
||||
RouterProvider,
|
||||
createRouter,
|
||||
createRootRoute,
|
||||
createRoute,
|
||||
createMemoryHistory,
|
||||
} from '@tanstack/react-router'
|
||||
import { WeekendPage } from '../pages/WeekendPage'
|
||||
import type {
|
||||
ChampionshipHub,
|
||||
ContextAvailability,
|
||||
ContextSession,
|
||||
Meeting,
|
||||
RaceHub,
|
||||
Session,
|
||||
TemporalState,
|
||||
WeekendContext,
|
||||
} from '../types'
|
||||
|
||||
vi.mock('../api', () => ({
|
||||
fetchWeekendContext: vi.fn(),
|
||||
fetchChampionshipHub: vi.fn(),
|
||||
fetchNews: vi.fn(),
|
||||
fetchRaceHub: vi.fn(),
|
||||
// Consumed transitively by RacePreviewPage (folded into PreSessionView):
|
||||
fetchSeasons: vi.fn(),
|
||||
fetchMeetings: vi.fn(),
|
||||
fetchSessions: vi.fn(),
|
||||
fetchResults: vi.fn(),
|
||||
fetchStartingGrid: vi.fn(),
|
||||
fetchTrackOutline: vi.fn(),
|
||||
}))
|
||||
|
||||
import {
|
||||
fetchWeekendContext,
|
||||
fetchChampionshipHub,
|
||||
fetchNews,
|
||||
fetchRaceHub,
|
||||
fetchSeasons,
|
||||
fetchMeetings,
|
||||
fetchSessions,
|
||||
fetchResults,
|
||||
fetchStartingGrid,
|
||||
fetchTrackOutline,
|
||||
} from '../api'
|
||||
|
||||
const mockContext = vi.mocked(fetchWeekendContext)
|
||||
const mockHub = vi.mocked(fetchChampionshipHub)
|
||||
const mockNews = vi.mocked(fetchNews)
|
||||
const mockRaceHub = vi.mocked(fetchRaceHub)
|
||||
const mockSeasons = vi.mocked(fetchSeasons)
|
||||
const mockMeetings = vi.mocked(fetchMeetings)
|
||||
const mockSessions = vi.mocked(fetchSessions)
|
||||
const mockResults = vi.mocked(fetchResults)
|
||||
const mockGrid = vi.mocked(fetchStartingGrid)
|
||||
const mockTrack = vi.mocked(fetchTrackOutline)
|
||||
|
||||
function availability(overrides: Partial<ContextAvailability> = {}): ContextAvailability {
|
||||
return {
|
||||
schedule: 'available',
|
||||
live_transport: 'unknown',
|
||||
live_session: 'inactive',
|
||||
archive: 'unavailable',
|
||||
local_analysis: 'complete',
|
||||
freshness: 'fresh',
|
||||
limitations: [],
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function meeting(overrides: Partial<Meeting> = {}): Meeting {
|
||||
return {
|
||||
meeting_key: 1,
|
||||
meeting_name: 'British Grand Prix',
|
||||
meeting_official_name: 'FORMULA 1 BRITISH GRAND PRIX',
|
||||
location: 'Silverstone',
|
||||
country_name: 'United Kingdom',
|
||||
country_code: 'GBR',
|
||||
country_flag: '',
|
||||
circuit_key: 2,
|
||||
circuit_short_name: 'Silverstone',
|
||||
date_start: '2026-07-03T09:00:00Z',
|
||||
date_end: '2026-07-05T16:00:00Z',
|
||||
year: 2026,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function session(overrides: Partial<Session> = {}): Session {
|
||||
return {
|
||||
session_key: 11,
|
||||
session_name: 'Race',
|
||||
session_type: 'Race',
|
||||
meeting_key: 1,
|
||||
date_start: '2026-07-05T14:00:00Z',
|
||||
date_end: '2026-07-05T16:00:00Z',
|
||||
gmt_offset: '',
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function ctxSession(overrides: Partial<ContextSession> = {}): ContextSession {
|
||||
return {
|
||||
session: session(),
|
||||
meeting: meeting(),
|
||||
availability: availability(),
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function context(overrides: Partial<WeekendContext> = {}): WeekendContext {
|
||||
return {
|
||||
season: 2026,
|
||||
temporal_state: 'between_weekends',
|
||||
championship_round: 5,
|
||||
total_championship_rounds: 24,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
const hub: ChampionshipHub = {
|
||||
season: 2026,
|
||||
round: 5,
|
||||
total_rounds: 24,
|
||||
rounds_left: 19,
|
||||
last_race: 'British GP',
|
||||
round_labels: [],
|
||||
drivers: [
|
||||
{ driver_number: 1, name_acronym: 'VER', full_name: 'Max', team_name: 'RB', team_colour: '3671c6', points: 120, position: 1, wins: 4, podiums: 5, poles: 3, form: [], cumulative: [95, 120], teammate_wins: 0, teammate_losses: 0, round_positions: [] },
|
||||
],
|
||||
teams: [],
|
||||
}
|
||||
|
||||
const raceHub = {
|
||||
session_key: 11,
|
||||
results: [
|
||||
{ driver_number: 1, position: 1, name_acronym: 'VER', full_name: 'Max', team_name: 'RB', team_colour: '3671c6', dnf: false, dns: false, dsq: false, duration: 5400, gap_to_leader: null },
|
||||
],
|
||||
} as unknown as RaceHub
|
||||
|
||||
function renderAt(path: string) {
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
|
||||
|
||||
const rootRoute = createRootRoute({
|
||||
component: () => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Outlet />
|
||||
</QueryClientProvider>
|
||||
),
|
||||
})
|
||||
const homeRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: () => <WeekendPage /> })
|
||||
const previewRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: '/preview',
|
||||
component: () => <WeekendPage preview />,
|
||||
})
|
||||
const raceHubRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: '/race-hub',
|
||||
validateSearch: (s: Record<string, unknown>) => {
|
||||
const sk = Number(s.session_key)
|
||||
return Number.isFinite(sk) && sk > 0 ? { session_key: sk } : {}
|
||||
},
|
||||
component: () => <div data-testid="race-hub-stub" />,
|
||||
})
|
||||
const stub = (p: string, id: string) =>
|
||||
createRoute({ getParentRoute: () => rootRoute, path: p, component: () => <div data-testid={id} /> })
|
||||
|
||||
const router = createRouter({
|
||||
routeTree: rootRoute.addChildren([
|
||||
homeRoute,
|
||||
previewRoute,
|
||||
raceHubRoute,
|
||||
stub('/live', 'live-stub'),
|
||||
stub('/explore', 'explore-stub'),
|
||||
stub('/championship', 'championship-stub'),
|
||||
stub('/briefing', 'briefing-stub'),
|
||||
]),
|
||||
history: createMemoryHistory({ initialEntries: [path] }),
|
||||
})
|
||||
return render(<RouterProvider router={router} />)
|
||||
}
|
||||
|
||||
describe('WeekendPage canonical contract rendering', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
vi.setSystemTime(new Date('2026-07-08T12:00:00Z'))
|
||||
mockHub.mockResolvedValue(hub)
|
||||
mockNews.mockResolvedValue([])
|
||||
mockRaceHub.mockResolvedValue(raceHub)
|
||||
mockSeasons.mockResolvedValue([2026])
|
||||
mockMeetings.mockResolvedValue([meeting()])
|
||||
mockSessions.mockResolvedValue([session()])
|
||||
mockResults.mockResolvedValue([])
|
||||
mockGrid.mockResolvedValue([])
|
||||
mockTrack.mockResolvedValue(null)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('shows the loading surface before the canonical context resolves', async () => {
|
||||
mockContext.mockReturnValue(new Promise(() => {}))
|
||||
renderAt('/')
|
||||
await waitFor(() => expect(screen.getByTestId('weekend-loading')).toBeInTheDocument())
|
||||
})
|
||||
|
||||
it('shows an explicit error surface when the canonical endpoint fails', async () => {
|
||||
mockContext.mockRejectedValue(new Error('API 500: boom'))
|
||||
renderAt('/')
|
||||
await waitFor(() => expect(screen.getByTestId('weekend-error')).toBeInTheDocument())
|
||||
expect(screen.getByTestId('weekend-error')).toHaveTextContent('boom')
|
||||
})
|
||||
|
||||
const stateCases: Array<[TemporalState, string]> = [
|
||||
['between_weekends', 'weekend-between-races'],
|
||||
['post_weekend', 'weekend-between-races'],
|
||||
['season_complete', 'weekend-between-races'],
|
||||
['pre_session', 'weekend-pre-session'],
|
||||
['between_sessions', 'weekend-between-sessions'],
|
||||
['session_settling', 'weekend-between-sessions'],
|
||||
['session_live', 'weekend-live'],
|
||||
]
|
||||
|
||||
it.each(stateCases)('renders a designed surface for canonical temporal_state %s', async (temporal, testid) => {
|
||||
mockContext.mockResolvedValue(
|
||||
context({
|
||||
temporal_state: temporal,
|
||||
previous_completed_session: ctxSession({ session: session({ session_key: 11, session_name: 'Race' }) }),
|
||||
default_analysis_session: ctxSession({ session: session({ session_key: 11 }) }),
|
||||
next_meeting: meeting({ meeting_key: 2, meeting_name: 'Hungarian Grand Prix', date_start: '2026-07-24T09:00:00Z' }),
|
||||
next_session: ctxSession({ session: session({ session_key: 21, session_name: 'Practice 1', date_start: '2026-07-24T09:00:00Z' }) }),
|
||||
active_session: temporal === 'session_live'
|
||||
? ctxSession({ session: session({ session_key: 12, session_name: 'Race' }), availability: availability({ live_session: 'active' }) })
|
||||
: undefined,
|
||||
focus_meeting: meeting(),
|
||||
}),
|
||||
)
|
||||
renderAt('/')
|
||||
await waitFor(() => expect(screen.getByTestId('weekend-page')).toHaveAttribute('data-temporal-state', temporal))
|
||||
expect(screen.getByTestId(testid)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders the limited surface for no_season and never falls through to it for a valid payload', async () => {
|
||||
mockContext.mockResolvedValue(context({ temporal_state: 'no_season', championship_round: 0, total_championship_rounds: 0 }))
|
||||
renderAt('/')
|
||||
await waitFor(() => expect(screen.getByTestId('weekend-limited')).toBeInTheDocument())
|
||||
})
|
||||
|
||||
it('between-races pairs the completed analysis CTA with the next-event countdown and championship impact', async () => {
|
||||
mockContext.mockResolvedValue(
|
||||
context({
|
||||
previous_completed_session: ctxSession({ session: session({ session_key: 11, session_name: 'Race' }) }),
|
||||
default_analysis_session: ctxSession({ session: session({ session_key: 11 }) }),
|
||||
next_meeting: meeting({ meeting_key: 2, meeting_name: 'Hungarian Grand Prix', date_start: '2026-07-24T09:00:00Z' }),
|
||||
next_session: ctxSession({ session: session({ session_key: 21, session_name: 'Practice 1', date_start: '2026-07-24T09:00:00Z' }) }),
|
||||
}),
|
||||
)
|
||||
renderAt('/')
|
||||
await waitFor(() => expect(screen.getByTestId('wk-last-event')).toBeInTheDocument())
|
||||
expect(screen.getByTestId('wk-next-event')).toBeInTheDocument()
|
||||
const story = screen.getByTestId('wk-explore-race-story')
|
||||
expect(story).toHaveAttribute('href', expect.stringContaining('session_key=11'))
|
||||
expect(screen.getByTestId('wk-prepare')).toHaveAttribute('href', '/preview')
|
||||
await waitFor(() => expect(screen.getByTestId('wk-champ-impact')).toBeInTheDocument())
|
||||
expect(screen.getByTestId('wk-season-nav')).toHaveTextContent('Round 5 of 24')
|
||||
})
|
||||
|
||||
it('does not fan out to season/meeting/OpenF1/live queries when the canonical context succeeds', async () => {
|
||||
mockContext.mockResolvedValue(context({ temporal_state: 'between_weekends' }))
|
||||
renderAt('/')
|
||||
await waitFor(() => expect(screen.getByTestId('weekend-between-races')).toBeInTheDocument())
|
||||
// Only supplementary championship + news reads are allowed; no season /
|
||||
// meetings / sessions / live fan-out from the Weekend home hook.
|
||||
expect(mockSeasons).not.toHaveBeenCalled()
|
||||
expect(mockSessions).not.toHaveBeenCalled()
|
||||
// fetchMeetings may still be reached only through the folded preview surface,
|
||||
// which is not mounted in the between-races state.
|
||||
expect(mockMeetings).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('supplementary reads stay dormant while the canonical context is pending', async () => {
|
||||
mockContext.mockReturnValue(new Promise(() => {}))
|
||||
renderAt('/')
|
||||
await waitFor(() => expect(screen.getByTestId('weekend-loading')).toBeInTheDocument())
|
||||
expect(mockHub).not.toHaveBeenCalled()
|
||||
expect(mockNews).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('the /preview alias renders the preparation surface instead of looping back', async () => {
|
||||
mockContext.mockResolvedValue(
|
||||
context({
|
||||
temporal_state: 'between_weekends',
|
||||
next_meeting: meeting({ meeting_key: 2, meeting_name: 'Hungarian Grand Prix', date_start: '2026-07-24T09:00:00Z' }),
|
||||
next_session: ctxSession({ session: session({ session_key: 21, session_name: 'Practice 1', date_start: '2026-07-24T09:00:00Z' }) }),
|
||||
}),
|
||||
)
|
||||
renderAt('/preview')
|
||||
await waitFor(() => expect(screen.getByTestId('weekend-pre-session')).toBeInTheDocument())
|
||||
expect(screen.getByTestId('weekend-page')).toHaveAttribute('data-preview', 'true')
|
||||
// The between-races surface must NOT be what /preview renders.
|
||||
expect(screen.queryByTestId('weekend-between-races')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
223
frontend/src/test/weekendContext.test.ts
Normal file
223
frontend/src/test/weekendContext.test.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import {
|
||||
analysisSessionKey,
|
||||
briefingItems,
|
||||
championshipImpact,
|
||||
hasLocalAnalysis,
|
||||
meetingIdentity,
|
||||
podiumFromResults,
|
||||
resolveViewState,
|
||||
} from '../lib/weekendContext'
|
||||
import type {
|
||||
ChampionshipHub,
|
||||
ContextAvailability,
|
||||
ContextSession,
|
||||
EnrichedResult,
|
||||
Meeting,
|
||||
NewsItem,
|
||||
Session,
|
||||
TemporalState,
|
||||
WeekendContext,
|
||||
} from '../types'
|
||||
|
||||
function availability(overrides: Partial<ContextAvailability> = {}): ContextAvailability {
|
||||
return {
|
||||
schedule: 'available',
|
||||
live_transport: 'unknown',
|
||||
live_session: 'inactive',
|
||||
archive: 'unavailable',
|
||||
local_analysis: 'complete',
|
||||
freshness: 'fresh',
|
||||
limitations: [],
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function meeting(overrides: Partial<Meeting> = {}): Meeting {
|
||||
return {
|
||||
meeting_key: 1,
|
||||
meeting_name: 'British Grand Prix',
|
||||
meeting_official_name: 'FORMULA 1 BRITISH GRAND PRIX',
|
||||
location: 'Silverstone',
|
||||
country_name: 'United Kingdom',
|
||||
country_code: 'GBR',
|
||||
country_flag: '',
|
||||
circuit_key: 2,
|
||||
circuit_short_name: 'Silverstone',
|
||||
date_start: '2026-07-03T09:00:00Z',
|
||||
date_end: '2026-07-05T16:00:00Z',
|
||||
year: 2026,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function session(overrides: Partial<Session> = {}): Session {
|
||||
return {
|
||||
session_key: 11,
|
||||
session_name: 'Race',
|
||||
session_type: 'Race',
|
||||
meeting_key: 1,
|
||||
date_start: '2026-07-05T14:00:00Z',
|
||||
date_end: '2026-07-05T16:00:00Z',
|
||||
gmt_offset: '',
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function ctxSession(overrides: Partial<ContextSession> = {}): ContextSession {
|
||||
return {
|
||||
session: session(),
|
||||
meeting: meeting(),
|
||||
availability: availability(),
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function context(overrides: Partial<WeekendContext> = {}): WeekendContext {
|
||||
return {
|
||||
season: 2026,
|
||||
temporal_state: 'between_weekends',
|
||||
championship_round: 1,
|
||||
total_championship_rounds: 24,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
describe('resolveViewState', () => {
|
||||
const cases: Array<[TemporalState, string]> = [
|
||||
['no_season', 'no_season'],
|
||||
['between_weekends', 'between_weekends'],
|
||||
['pre_session', 'pre_session'],
|
||||
['session_live', 'session_live'],
|
||||
['session_settling', 'session_settling'],
|
||||
['between_sessions', 'between_sessions'],
|
||||
['post_weekend', 'post_weekend'],
|
||||
['season_complete', 'season_complete'],
|
||||
]
|
||||
|
||||
it.each(cases)('maps canonical temporal_state %s to view %s', (temporal, expected) => {
|
||||
expect(resolveViewState(context({ temporal_state: temporal }))).toBe(expected)
|
||||
})
|
||||
|
||||
it('treats an unknown/absent temporal_state as no_season rather than inventing a state', () => {
|
||||
expect(resolveViewState(context({ temporal_state: 'garbage' as TemporalState }))).toBe('no_season')
|
||||
})
|
||||
})
|
||||
|
||||
describe('analysisSessionKey', () => {
|
||||
it('prefers the default analysis session', () => {
|
||||
const ctx = context({
|
||||
default_analysis_session: ctxSession({ session: session({ session_key: 32 }) }),
|
||||
previous_completed_session: ctxSession({ session: session({ session_key: 11 }) }),
|
||||
})
|
||||
expect(analysisSessionKey(ctx)).toBe(32)
|
||||
})
|
||||
|
||||
it('falls back to the previous completed session', () => {
|
||||
const ctx = context({
|
||||
previous_completed_session: ctxSession({ session: session({ session_key: 11 }) }),
|
||||
})
|
||||
expect(analysisSessionKey(ctx)).toBe(11)
|
||||
})
|
||||
|
||||
it('returns undefined when there is no analysable session', () => {
|
||||
expect(analysisSessionKey(context())).toBeUndefined()
|
||||
})
|
||||
|
||||
it('returns undefined for a zero/synthetic session key', () => {
|
||||
const ctx = context({
|
||||
previous_completed_session: ctxSession({ session: session({ session_key: 0 }) }),
|
||||
})
|
||||
expect(analysisSessionKey(ctx)).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('hasLocalAnalysis', () => {
|
||||
it('is true for complete or partial local analysis', () => {
|
||||
expect(hasLocalAnalysis(ctxSession({ availability: availability({ local_analysis: 'complete' }) }))).toBe(true)
|
||||
expect(hasLocalAnalysis(ctxSession({ availability: availability({ local_analysis: 'partial' }) }))).toBe(true)
|
||||
})
|
||||
|
||||
it('is false for pending/not_applicable/absent', () => {
|
||||
expect(hasLocalAnalysis(ctxSession({ availability: availability({ local_analysis: 'pending' }) }))).toBe(false)
|
||||
expect(hasLocalAnalysis(ctxSession({ availability: availability({ local_analysis: 'not_applicable' }) }))).toBe(false)
|
||||
expect(hasLocalAnalysis(undefined)).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('meetingIdentity', () => {
|
||||
it('derives a short name and tolerates partial fields', () => {
|
||||
const id = meetingIdentity(meeting({ meeting_name: 'Monaco Grand Prix', circuit_short_name: '', location: 'Monaco' }))
|
||||
expect(id?.short_name).toBe('Monaco')
|
||||
expect(id?.circuit_short_name).toBe('Monaco')
|
||||
})
|
||||
|
||||
it('returns undefined for an absent meeting', () => {
|
||||
expect(meetingIdentity(undefined)).toBeUndefined()
|
||||
})
|
||||
|
||||
it('drops empty date strings', () => {
|
||||
const id = meetingIdentity(meeting({ date_start: '', date_end: '' }))
|
||||
expect(id?.date_start).toBeUndefined()
|
||||
expect(id?.date_end).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('championshipImpact', () => {
|
||||
const hub: ChampionshipHub = {
|
||||
season: 2026,
|
||||
round: 2,
|
||||
total_rounds: 24,
|
||||
rounds_left: 22,
|
||||
last_race: 'British GP',
|
||||
round_labels: ['R1', 'R2'],
|
||||
drivers: [
|
||||
{ driver_number: 1, name_acronym: 'VER', full_name: 'Max', team_name: 'RB', team_colour: '3671c6', points: 50, position: 1, wins: 2, podiums: 2, poles: 1, form: [], cumulative: [25, 50], teammate_wins: 0, teammate_losses: 0, round_positions: [] },
|
||||
{ driver_number: 4, name_acronym: 'NOR', full_name: 'Lando', team_name: 'McL', team_colour: 'ff8000', points: 40, position: 2, wins: 1, podiums: 2, poles: 0, form: [], cumulative: [18, 40], teammate_wins: 0, teammate_losses: 0, round_positions: [] },
|
||||
],
|
||||
teams: [],
|
||||
}
|
||||
|
||||
it('maps top-3 movers with deltas and a note', () => {
|
||||
const impact = championshipImpact(hub)
|
||||
expect(impact?.leaders).toHaveLength(2)
|
||||
expect(impact?.leaders[0].delta).toBe(25)
|
||||
expect(impact?.note).toContain('British GP')
|
||||
})
|
||||
|
||||
it('returns undefined for an empty hub', () => {
|
||||
expect(championshipImpact(undefined)).toBeUndefined()
|
||||
expect(championshipImpact({ ...hub, drivers: [] })).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('briefingItems', () => {
|
||||
it('caps at three items and maps fields', () => {
|
||||
const news: NewsItem[] = Array.from({ length: 5 }, (_, i) => ({
|
||||
source: 'src',
|
||||
title: `Item ${i}`,
|
||||
url: `https://x/${i}`,
|
||||
fetched_at: '2026-07-06T00:00:00Z',
|
||||
category: 'news',
|
||||
og_image_url: 'img',
|
||||
}))
|
||||
const items = briefingItems(news)
|
||||
expect(items).toHaveLength(3)
|
||||
expect(items[0]).toMatchObject({ title: 'Item 0', image_url: 'img' })
|
||||
})
|
||||
})
|
||||
|
||||
describe('podiumFromResults', () => {
|
||||
it('sorts by position, caps at three, and formats gaps', () => {
|
||||
const results: EnrichedResult[] = [
|
||||
{ driver_number: 44, position: 2, name_acronym: 'HAM', full_name: 'Lewis', team_name: 'Ferrari', team_colour: 'e8002d', dnf: false, dns: false, dsq: false, duration: null, gap_to_leader: 5.123 } as EnrichedResult,
|
||||
{ driver_number: 1, position: 1, name_acronym: 'VER', full_name: 'Max', team_name: 'RB', team_colour: '3671c6', dnf: false, dns: false, dsq: false, duration: 5400, gap_to_leader: null } as EnrichedResult,
|
||||
{ driver_number: 16, position: 3, name_acronym: 'LEC', full_name: 'Charles', team_name: 'Ferrari', team_colour: 'e8002d', dnf: false, dns: false, dsq: false, duration: null, gap_to_leader: '+10.5' } as EnrichedResult,
|
||||
{ driver_number: 55, position: 4, name_acronym: 'SAI', full_name: 'Carlos', team_name: 'W', team_colour: 'fff', dnf: false, dns: false, dsq: false, duration: null, gap_to_leader: 20 } as EnrichedResult,
|
||||
]
|
||||
const podium = podiumFromResults(results)
|
||||
expect(podium.map((p) => p.name_acronym)).toEqual(['VER', 'HAM', 'LEC'])
|
||||
expect(podium[1].gap).toBe('+5.123')
|
||||
expect(podium[2].gap).toBe('+10.5')
|
||||
})
|
||||
})
|
||||
@@ -448,6 +448,107 @@ export interface DriverSummary {
|
||||
rounds: DriverSummaryRound[]
|
||||
}
|
||||
|
||||
// ── Weekend Context ──
|
||||
// Canonical local-first contract for the adaptive Weekend home, served verbatim
|
||||
// by /api/v1/weekend-context (backend story #72, internal/query/context.go).
|
||||
// The frontend consumes this shape as the single source of truth; view-model
|
||||
// derivation lives in lib/weekendContext.ts.
|
||||
|
||||
// TemporalState mirrors query.TemporalState exactly (the JSON `temporal_state`).
|
||||
export type TemporalState =
|
||||
| 'no_season'
|
||||
| 'between_weekends'
|
||||
| 'pre_session'
|
||||
| 'session_live'
|
||||
| 'session_settling'
|
||||
| 'between_sessions'
|
||||
| 'post_weekend'
|
||||
| 'season_complete'
|
||||
|
||||
// ContextAvailability mirrors query.ContextAvailability. Every field is present
|
||||
// in a canonical payload except the optional `observed_at`.
|
||||
export interface ContextAvailability {
|
||||
schedule: string
|
||||
live_transport: string
|
||||
live_session: string
|
||||
archive: string
|
||||
local_analysis: string
|
||||
freshness: string
|
||||
observed_at?: string
|
||||
limitations: string[]
|
||||
}
|
||||
|
||||
// ContextSession mirrors query.ContextSession: a session identity coupled with
|
||||
// its meeting and structured availability contract.
|
||||
export interface ContextSession {
|
||||
session: Session
|
||||
meeting?: Meeting
|
||||
availability: ContextAvailability
|
||||
}
|
||||
|
||||
// WeekendContext mirrors query.WeekendContext (the canonical endpoint body).
|
||||
export interface WeekendContext {
|
||||
season?: number
|
||||
temporal_state: TemporalState
|
||||
previous_meeting?: Meeting
|
||||
focus_meeting?: Meeting
|
||||
next_meeting?: Meeting
|
||||
previous_completed_session?: ContextSession
|
||||
active_session?: ContextSession
|
||||
next_session?: ContextSession
|
||||
default_analysis_session?: ContextSession
|
||||
championship_round: number
|
||||
total_championship_rounds: number
|
||||
}
|
||||
|
||||
// ── Weekend view model (client-only) ──
|
||||
// The rendered Weekend home layers a small set of non-canonical UI states
|
||||
// (loading/error) plus supplementary data (championship movers, briefing) on top
|
||||
// of the canonical context. None of these are part of the #72 contract.
|
||||
export type WeekendViewState =
|
||||
| 'loading'
|
||||
| 'error'
|
||||
| 'no_season'
|
||||
| 'between_weekends'
|
||||
| 'pre_session'
|
||||
| 'session_live'
|
||||
| 'session_settling'
|
||||
| 'between_sessions'
|
||||
| 'post_weekend'
|
||||
| 'season_complete'
|
||||
|
||||
export interface WeekendChampionshipMover {
|
||||
position: number
|
||||
driver_number: number
|
||||
name_acronym: string
|
||||
team_colour: string
|
||||
points: number
|
||||
delta?: number
|
||||
}
|
||||
|
||||
export interface WeekendChampionshipImpact {
|
||||
leaders: WeekendChampionshipMover[]
|
||||
note?: string
|
||||
}
|
||||
|
||||
export interface WeekendBriefingItem {
|
||||
category?: string
|
||||
title: string
|
||||
url: string
|
||||
source: string
|
||||
published_at?: string
|
||||
image_url?: string
|
||||
}
|
||||
|
||||
export interface WeekendPodiumEntry {
|
||||
position: number
|
||||
driver_number: number
|
||||
name_acronym: string
|
||||
team_name: string
|
||||
team_colour: string
|
||||
gap: string
|
||||
}
|
||||
|
||||
export interface NewsItem {
|
||||
source: string
|
||||
title: string
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
const FULL_SESSION = 9472
|
||||
|
||||
test.describe('Command Center', () => {
|
||||
test('loads as default route with weekend identity band', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
|
||||
await expect(page.getByTestId('command-center')).toBeVisible()
|
||||
await expect(page.getByTestId('cc-focus')).toBeVisible()
|
||||
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
|
||||
await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
|
||||
})
|
||||
|
||||
test('nav link reaches command center from race hub', async ({ page }) => {
|
||||
await page.goto(`/race-hub?session_key=${FULL_SESSION}`)
|
||||
await page.getByRole('link', { name: 'Command' }).click()
|
||||
await expect(page).toHaveURL('/')
|
||||
await expect(page.getByTestId('command-center')).toBeVisible()
|
||||
})
|
||||
|
||||
test('open analysis action opens race hub for the focus session', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
|
||||
await page.getByTestId('hero-last-race-link').click()
|
||||
await expect(page).toHaveURL(new RegExp(`/race-hub\\?session_key=${FULL_SESSION}`))
|
||||
await expect(page.getByTestId('rh-identity')).toBeVisible()
|
||||
await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()
|
||||
})
|
||||
|
||||
test('archived live snapshot does not mark command center live', async ({ page }) => {
|
||||
await page.route('**/api/v1/live/state', (route) =>
|
||||
route.fulfill({
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
is_live: false,
|
||||
data: null,
|
||||
last_snapshot: {
|
||||
Drivers: { '1': { RacingNumber: '1', Position: 1 } },
|
||||
DriverInfo: { '1': { RacingNumber: '1', Tla: 'VER', TeamColour: '3671C6' } },
|
||||
Tyres: {},
|
||||
RCMessages: [],
|
||||
Weather: {},
|
||||
Session: { MeetingName: 'Archived GP', SessionName: 'Race', SessionType: 'Race' },
|
||||
TeamRadio: [],
|
||||
SessionStatus: 'Finished',
|
||||
TrackStatus: '1',
|
||||
CurrentLap: 57,
|
||||
TotalLaps: 57,
|
||||
Clock: '',
|
||||
ClockRefTime: '',
|
||||
ClockExtrapolating: false,
|
||||
Stints: {},
|
||||
},
|
||||
last_snapshot_at: '2026-07-04T14:00:00Z',
|
||||
}),
|
||||
}),
|
||||
)
|
||||
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('command-center')).toBeVisible()
|
||||
await expect(page.getByTestId('cc-live-status')).toContainText('No live session')
|
||||
await expect(page.getByTestId('cc-live-status')).not.toContainText('Live session active')
|
||||
})
|
||||
|
||||
test('existing routes continue to work', async ({ page }) => {
|
||||
await page.goto(`/race-hub?session_key=${FULL_SESSION}`)
|
||||
await expect(page.getByTestId('race-hub')).toBeVisible()
|
||||
await expect(page.getByTestId('rh-overview')).toBeVisible()
|
||||
|
||||
await page.goto('/admin')
|
||||
await expect(page.getByTestId('data-library')).toBeVisible()
|
||||
|
||||
await page.goto('/live')
|
||||
await expect(page.getByTestId('live-empty')).toBeVisible()
|
||||
})
|
||||
})
|
||||
@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
|
||||
const FULL_SESSION = 9472
|
||||
|
||||
test.describe('Production serving (Go + built React)', () => {
|
||||
test('serves command center as default route', async ({ page }) => {
|
||||
test('serves the Weekend home as default route', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
|
||||
await expect(page.getByTestId('command-center')).toBeVisible()
|
||||
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
|
||||
await expect(page.getByTestId('weekend-page')).toBeVisible()
|
||||
await expect(page.getByTestId('weekend-between-races')).toBeVisible()
|
||||
})
|
||||
|
||||
test('serves race hub workspace from built assets', async ({ page }) => {
|
||||
@@ -44,16 +44,21 @@ test.describe('Production serving (Go + built React)', () => {
|
||||
await expect(page.getByText('No live session active')).toBeVisible()
|
||||
})
|
||||
|
||||
test('nav links work from built SPA', async ({ page }) => {
|
||||
test('primary nav links and Admin utility work from built SPA', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await page.locator('.app-nav').getByRole('link', { name: 'Race Hub' }).click()
|
||||
await expect(page).toHaveURL(/\/race-hub/)
|
||||
const primary = page.getByRole('navigation', { name: 'Primary' }).first()
|
||||
|
||||
await page.locator('.app-nav').getByRole('link', { name: 'Admin', exact: true }).click()
|
||||
await primary.getByRole('link', { name: 'Championship', exact: true }).click()
|
||||
await expect(page).toHaveURL(/\/championship/)
|
||||
|
||||
await primary.getByRole('link', { name: 'Explore', exact: true }).click()
|
||||
await expect(page).toHaveURL(/\/explore/)
|
||||
|
||||
await primary.getByRole('link', { name: 'Weekend', exact: true }).click()
|
||||
await expect(page).toHaveURL('/')
|
||||
|
||||
// Admin is an operator utility outside the Primary landmark.
|
||||
await page.getByRole('toolbar', { name: 'Operator utilities' }).getByRole('link', { name: 'Admin' }).click()
|
||||
await expect(page).toHaveURL(/\/admin/)
|
||||
|
||||
await page.getByRole('link', { name: 'Live', exact: true }).click()
|
||||
await expect(page).toHaveURL(/\/live/)
|
||||
await expect(page.getByTestId('live-empty')).toBeVisible()
|
||||
})
|
||||
})
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
BIN
tests/visual/__snapshots__/desktop/weekend.png
Normal file
BIN
tests/visual/__snapshots__/desktop/weekend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
BIN
tests/visual/__snapshots__/mobile/weekend.png
Normal file
BIN
tests/visual/__snapshots__/mobile/weekend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
BIN
tests/visual/__snapshots__/tablet/weekend.png
Normal file
BIN
tests/visual/__snapshots__/tablet/weekend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@@ -14,16 +14,13 @@ export async function waitForScreenshotReady(page: Page): Promise<void> {
|
||||
await page.waitForTimeout(150)
|
||||
}
|
||||
|
||||
export async function gotoCommandCenterReady(page: Page): Promise<void> {
|
||||
export async function gotoWeekendReady(page: Page): Promise<void> {
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('command-center')).toBeVisible()
|
||||
await expect(page.getByTestId('cc-focus')).toBeVisible()
|
||||
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
|
||||
// The e2e stack runs with an unreachable OpenF1 base URL, so wait for the
|
||||
// season-calendar query to settle on its local fallback before screenshotting.
|
||||
await expect(
|
||||
page.getByText('Using local meetings because the full calendar could not load.'),
|
||||
).toBeVisible()
|
||||
await expect(page.getByTestId('weekend-page')).toBeVisible()
|
||||
// The seeded hermetic DB (Monaco 2025, completed) resolves to season_complete,
|
||||
// rendered by the between-races surface.
|
||||
await expect(page.getByTestId('weekend-between-races')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-last-event')).toBeVisible()
|
||||
await waitForScreenshotReady(page)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { test } from '@playwright/test'
|
||||
import {
|
||||
gotoCommandCenterReady,
|
||||
gotoWeekendReady,
|
||||
gotoDataLibraryReady,
|
||||
gotoLiveEmptyReady,
|
||||
gotoRaceHubReady,
|
||||
@@ -8,9 +8,9 @@ import {
|
||||
} from './helpers'
|
||||
|
||||
test.describe('MVP visual regression', () => {
|
||||
test('command-center', async ({ page }) => {
|
||||
await gotoCommandCenterReady(page)
|
||||
await screenshotPage(page, 'command-center')
|
||||
test('weekend', async ({ page }) => {
|
||||
await gotoWeekendReady(page)
|
||||
await screenshotPage(page, 'weekend')
|
||||
})
|
||||
|
||||
test('race-hub', async ({ page }) => {
|
||||
|
||||
156
tests/weekend-states.spec.ts
Normal file
156
tests/weekend-states.spec.ts
Normal file
@@ -0,0 +1,156 @@
|
||||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
// These journeys inject the canonical /api/v1/weekend-context payload directly so
|
||||
// each temporal state is exercised deterministically and hermetically, regardless
|
||||
// of the seeded database clock. The payloads mirror internal/query.WeekendContext.
|
||||
|
||||
const availability = {
|
||||
schedule: 'available',
|
||||
live_transport: 'unknown',
|
||||
live_session: 'inactive',
|
||||
archive: 'unavailable',
|
||||
local_analysis: 'complete',
|
||||
freshness: 'fresh',
|
||||
limitations: [],
|
||||
}
|
||||
|
||||
function meeting(key: number, name: string, start: string) {
|
||||
return {
|
||||
meeting_key: key,
|
||||
meeting_name: name,
|
||||
meeting_official_name: name,
|
||||
location: name,
|
||||
country_code: 'GBR',
|
||||
country_name: 'United Kingdom',
|
||||
country_flag: '',
|
||||
circuit_key: key,
|
||||
circuit_short_name: name,
|
||||
date_start: start,
|
||||
date_end: start,
|
||||
year: 2026,
|
||||
}
|
||||
}
|
||||
|
||||
function ctxSession(key: number, name: string, start: string, meetingKey: number) {
|
||||
return {
|
||||
session: {
|
||||
session_key: key,
|
||||
session_name: name,
|
||||
session_type: name,
|
||||
meeting_key: meetingKey,
|
||||
date_start: start,
|
||||
date_end: start,
|
||||
gmt_offset: '',
|
||||
},
|
||||
meeting: meeting(meetingKey, 'British Grand Prix', start),
|
||||
availability,
|
||||
}
|
||||
}
|
||||
|
||||
async function stubContext(page: Page, body: Record<string, unknown>): Promise<void> {
|
||||
await page.route('**/api/v1/weekend-context', (route) =>
|
||||
route.fulfill({ contentType: 'application/json', body: JSON.stringify(body) }),
|
||||
)
|
||||
// Keep supplementary reads hermetic and empty.
|
||||
await page.route('**/api/v1/news**', (route) =>
|
||||
route.fulfill({ contentType: 'application/json', body: '[]' }),
|
||||
)
|
||||
}
|
||||
|
||||
test.describe('Weekend canonical temporal states (injected)', () => {
|
||||
test('between_weekends pairs the last completed event with the next-event countdown and Prepare CTA', async ({ page }) => {
|
||||
await stubContext(page, {
|
||||
season: 2026,
|
||||
temporal_state: 'between_weekends',
|
||||
previous_meeting: meeting(1, 'British Grand Prix', '2026-07-05T14:00:00Z'),
|
||||
previous_completed_session: ctxSession(11, 'Race', '2026-07-05T14:00:00Z', 1),
|
||||
default_analysis_session: ctxSession(11, 'Race', '2026-07-05T14:00:00Z', 1),
|
||||
next_meeting: meeting(2, 'Hungarian Grand Prix', '2026-07-24T09:00:00Z'),
|
||||
next_session: ctxSession(21, 'Practice 1', '2026-07-24T09:00:00Z', 2),
|
||||
focus_meeting: meeting(2, 'Hungarian Grand Prix', '2026-07-24T09:00:00Z'),
|
||||
championship_round: 12,
|
||||
total_championship_rounds: 24,
|
||||
})
|
||||
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('weekend-between-races')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-last-event')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-next-event')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-prepare')).toHaveAttribute('href', '/preview')
|
||||
await expect(page.getByTestId('wk-season-nav')).toContainText('Round 12 of 24')
|
||||
})
|
||||
|
||||
test('between_races Prepare CTA folds into the preparation surface instead of looping', async ({ page }) => {
|
||||
await stubContext(page, {
|
||||
season: 2026,
|
||||
temporal_state: 'between_weekends',
|
||||
next_meeting: meeting(2, 'Hungarian Grand Prix', '2026-07-24T09:00:00Z'),
|
||||
next_session: ctxSession(21, 'Practice 1', '2026-07-24T09:00:00Z', 2),
|
||||
championship_round: 12,
|
||||
total_championship_rounds: 24,
|
||||
})
|
||||
|
||||
await page.goto('/')
|
||||
await page.getByTestId('wk-prepare').click()
|
||||
await expect(page).toHaveURL(/\/preview$/)
|
||||
await expect(page.getByTestId('weekend-pre-session')).toBeVisible()
|
||||
await expect(page.getByTestId('weekend-between-races')).toHaveCount(0)
|
||||
})
|
||||
|
||||
test('pre_session surfaces the preview and the next-session countdown', async ({ page }) => {
|
||||
await stubContext(page, {
|
||||
season: 2026,
|
||||
temporal_state: 'pre_session',
|
||||
next_meeting: meeting(2, 'Hungarian Grand Prix', '2026-07-24T09:00:00Z'),
|
||||
next_session: ctxSession(21, 'Practice 1', '2026-07-24T09:00:00Z', 2),
|
||||
focus_meeting: meeting(2, 'Hungarian Grand Prix', '2026-07-24T09:00:00Z'),
|
||||
championship_round: 12,
|
||||
total_championship_rounds: 24,
|
||||
})
|
||||
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('weekend-pre-session')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-pre-head')).toBeVisible()
|
||||
})
|
||||
|
||||
test('between_sessions shows the last result recap and the next-session countdown together', async ({ page }) => {
|
||||
await stubContext(page, {
|
||||
season: 2026,
|
||||
temporal_state: 'between_sessions',
|
||||
focus_meeting: meeting(1, 'British Grand Prix', '2026-07-04T10:00:00Z'),
|
||||
previous_completed_session: ctxSession(11, 'Sprint', '2026-07-04T10:00:00Z', 1),
|
||||
default_analysis_session: ctxSession(11, 'Sprint', '2026-07-04T10:00:00Z', 1),
|
||||
next_session: ctxSession(12, 'Race', '2026-07-05T14:00:00Z', 1),
|
||||
championship_round: 12,
|
||||
total_championship_rounds: 24,
|
||||
})
|
||||
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('weekend-between-sessions')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-last-session')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-next-session')).toBeVisible()
|
||||
})
|
||||
|
||||
test('session_live hands off to live timing', async ({ page }) => {
|
||||
await stubContext(page, {
|
||||
season: 2026,
|
||||
temporal_state: 'session_live',
|
||||
focus_meeting: meeting(1, 'British Grand Prix', '2026-07-05T14:00:00Z'),
|
||||
active_session: ctxSession(11, 'Race', '2026-07-05T14:00:00Z', 1),
|
||||
championship_round: 12,
|
||||
total_championship_rounds: 24,
|
||||
})
|
||||
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('weekend-live')).toBeVisible()
|
||||
await expect(page.getByTestId('wk-watch-live')).toHaveAttribute('href', '/live')
|
||||
})
|
||||
|
||||
test('an error from the canonical endpoint shows an explicit error surface', async ({ page }) => {
|
||||
await page.route('**/api/v1/weekend-context', (route) =>
|
||||
route.fulfill({ status: 500, contentType: 'application/json', body: '{"error":"boom"}' }),
|
||||
)
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('weekend-error')).toBeVisible()
|
||||
})
|
||||
})
|
||||
118
tests/weekend.spec.ts
Normal file
118
tests/weekend.spec.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
const FULL_SESSION = 9472
|
||||
|
||||
async function documentOverflow(page: Page): Promise<number> {
|
||||
return page.evaluate(() => {
|
||||
const doc = document.documentElement
|
||||
return doc.scrollWidth - doc.clientWidth
|
||||
})
|
||||
}
|
||||
|
||||
test.describe('Weekend home (seeded canonical context)', () => {
|
||||
test('renders the Weekend home from the canonical endpoint, not the limited fallback', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
|
||||
await expect(page.getByTestId('weekend-page')).toBeVisible()
|
||||
// The seeded DB (Monaco 2025, completed) resolves to season_complete, driven
|
||||
// by the canonical /api/v1/weekend-context endpoint.
|
||||
await expect(page.getByTestId('weekend-page')).toHaveAttribute('data-temporal-state', 'season_complete')
|
||||
await expect(page.getByTestId('weekend-between-races')).toBeVisible()
|
||||
await expect(page.getByTestId('weekend-limited')).toHaveCount(0)
|
||||
// No ingest/dataset terminology on the Weekend surface.
|
||||
await expect(page.getByText(/ingest/i)).toHaveCount(0)
|
||||
})
|
||||
|
||||
test('the completed-event CTA opens the canonical analysis session in Race Hub', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('wk-last-event')).toBeVisible()
|
||||
await page.getByTestId('wk-explore-race-story').click()
|
||||
await expect(page).toHaveURL(/\/race-hub\?session_key=\d+/)
|
||||
await expect(page.getByTestId('race-hub')).toBeVisible()
|
||||
})
|
||||
|
||||
test('/preview alias resolves without looping back to the same screen', async ({ page }) => {
|
||||
await page.goto('/preview')
|
||||
// In the seeded season-complete state there is no next event, so /preview
|
||||
// resolves to the Weekend home rather than a redirect loop.
|
||||
await expect(page.getByTestId('weekend-page')).toBeVisible()
|
||||
await expect(page).toHaveURL(/\/preview$/)
|
||||
})
|
||||
|
||||
test('existing deep-link routes remain valid', async ({ page }) => {
|
||||
await page.goto(`/race-hub?session_key=${FULL_SESSION}`)
|
||||
await expect(page.getByTestId('race-hub')).toBeVisible()
|
||||
await expect(page.getByTestId('rh-overview')).toBeVisible()
|
||||
|
||||
await page.goto('/admin')
|
||||
await expect(page.getByTestId('data-library')).toBeVisible()
|
||||
|
||||
await page.goto('/live')
|
||||
await expect(page.getByTestId('live-empty')).toBeVisible()
|
||||
|
||||
await page.goto('/explore')
|
||||
await expect(page.getByTestId('explore-page')).toBeVisible()
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Weekend navigation hierarchy', () => {
|
||||
test('all four destinations are reachable from primary navigation', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
const primary = page.getByRole('navigation', { name: 'Primary' }).first()
|
||||
for (const [label, url] of [
|
||||
['Championship', /\/championship/],
|
||||
['Briefing', /\/briefing/],
|
||||
['Explore', /\/explore/],
|
||||
['Weekend', /\/$/],
|
||||
] as const) {
|
||||
await primary.getByRole('link', { name: label, exact: true }).click()
|
||||
await expect(page).toHaveURL(url)
|
||||
}
|
||||
})
|
||||
|
||||
test('Admin is an operator utility outside the Primary landmark', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
const primaries = page.getByRole('navigation', { name: 'Primary' })
|
||||
await expect(primaries.first()).toBeVisible()
|
||||
// Admin must not appear inside any Primary landmark.
|
||||
await expect(primaries.getByRole('link', { name: /Admin/i })).toHaveCount(0)
|
||||
await expect(
|
||||
page.getByRole('toolbar', { name: 'Operator utilities' }).getByRole('link', { name: 'Admin' }),
|
||||
).toBeVisible()
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Weekend responsive — no global horizontal overflow', () => {
|
||||
for (const { name, width, height } of [
|
||||
{ name: 'mobile 390', width: 390, height: 844 },
|
||||
{ name: 'tablet 768', width: 768, height: 1024 },
|
||||
{ name: 'desktop 1440', width: 1440, height: 900 },
|
||||
]) {
|
||||
test(`no document overflow at ${name}`, async ({ page }) => {
|
||||
await page.setViewportSize({ width, height })
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('weekend-between-races')).toBeVisible()
|
||||
expect(await documentOverflow(page)).toBeLessThanOrEqual(1)
|
||||
})
|
||||
}
|
||||
|
||||
test('mobile shows exactly one visible primary navigation (bottom bar)', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 })
|
||||
await page.goto('/')
|
||||
await expect(page.getByTestId('weekend-page')).toBeVisible()
|
||||
|
||||
// The bottom bar is the single visible primary nav; the top bar's links are
|
||||
// hidden by CSS at this breakpoint.
|
||||
const bottom = page.locator('.app-bottom-nav')
|
||||
await expect(bottom).toBeVisible()
|
||||
await expect(bottom.getByRole('link')).toHaveCount(4)
|
||||
|
||||
const topLinks = page.locator('.app-nav .nav-links')
|
||||
await expect(topLinks).toBeHidden()
|
||||
|
||||
// All four destinations remain reachable via the bottom bar.
|
||||
for (const label of ['Weekend', 'Championship', 'Briefing', 'Explore']) {
|
||||
await expect(bottom.getByRole('link', { name: new RegExp(label) })).toBeVisible()
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user