mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
Compare commits
1 Commits
feat/issue
...
feat/issue
| Author | SHA1 | Date | |
|---|---|---|---|
|
0977861806 |
@@ -1,415 +0,0 @@
|
|||||||
import { Link } from '@tanstack/react-router'
|
|
||||||
import { Activity, ArrowRight, Play } from 'lucide-react'
|
|
||||||
import { sessionTypeAbbrev } from '../lib/coverage'
|
|
||||||
import { countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
|
||||||
import { classifySessionStatus, type HeroStateKind } from '../lib/hero'
|
|
||||||
import { sortLiveTimingRows, trackStatusInfo } from '../lib/live'
|
|
||||||
import {
|
|
||||||
formatCountdown,
|
|
||||||
formatSessionScheduleTime,
|
|
||||||
meetingStartTime,
|
|
||||||
sessionStartTime,
|
|
||||||
type FocusMeetingKind,
|
|
||||||
} from '../lib/schedule'
|
|
||||||
import type { EnrichedResult, LiveStreamData, Meeting, Session, WeekendSession } from '../types'
|
|
||||||
import '../styles/hero.css'
|
|
||||||
|
|
||||||
export interface CommandCenterHeroProps {
|
|
||||||
state: HeroStateKind
|
|
||||||
now: Date
|
|
||||||
accent: string
|
|
||||||
liveActive: boolean
|
|
||||||
liveData: LiveStreamData | null | undefined
|
|
||||||
focusMeeting: Meeting
|
|
||||||
focusKind: FocusMeetingKind
|
|
||||||
sessions: WeekendSession[]
|
|
||||||
currentSession: Session | null
|
|
||||||
nextSession: Session | null
|
|
||||||
analysisSessionKey?: number
|
|
||||||
analysisSessionName?: string
|
|
||||||
lastRaceName: string
|
|
||||||
lastRacePodium: EnrichedResult[]
|
|
||||||
lastRaceSessionKey?: number
|
|
||||||
nextMeeting: Meeting | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CommandCenterHero({
|
|
||||||
state,
|
|
||||||
now,
|
|
||||||
accent,
|
|
||||||
liveActive,
|
|
||||||
liveData,
|
|
||||||
focusMeeting,
|
|
||||||
focusKind,
|
|
||||||
sessions,
|
|
||||||
currentSession,
|
|
||||||
nextSession,
|
|
||||||
analysisSessionKey,
|
|
||||||
analysisSessionName,
|
|
||||||
lastRaceName,
|
|
||||||
lastRacePodium,
|
|
||||||
lastRaceSessionKey,
|
|
||||||
nextMeeting,
|
|
||||||
}: CommandCenterHeroProps) {
|
|
||||||
const accentStyle = {
|
|
||||||
'--gp-accent': accent,
|
|
||||||
'--hero-accent': accent,
|
|
||||||
} as React.CSSProperties
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="hero-panel cc-hero" data-testid="cc-focus">
|
|
||||||
<section className="hero-card ui-card glass-panel" style={accentStyle}>
|
|
||||||
<div
|
|
||||||
className={`hero-accent${state === 'live' ? ' hero-accent--live' : ''}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<div className="hero-body">
|
|
||||||
<div className="hero-inner">
|
|
||||||
{state === 'live' && (
|
|
||||||
<LiveHero
|
|
||||||
liveActive={liveActive}
|
|
||||||
liveData={liveData}
|
|
||||||
currentSession={currentSession}
|
|
||||||
focusMeeting={focusMeeting}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{state === 'upcoming' && (
|
|
||||||
<UpcomingHero
|
|
||||||
now={now}
|
|
||||||
focusMeeting={focusMeeting}
|
|
||||||
focusKind={focusKind}
|
|
||||||
sessions={sessions}
|
|
||||||
currentSession={currentSession}
|
|
||||||
nextSession={nextSession}
|
|
||||||
liveActive={liveActive}
|
|
||||||
analysisSessionKey={analysisSessionKey}
|
|
||||||
analysisSessionName={analysisSessionName}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{state === 'between' && (
|
|
||||||
<BetweenHero
|
|
||||||
now={now}
|
|
||||||
lastRaceName={lastRaceName}
|
|
||||||
lastRacePodium={lastRacePodium}
|
|
||||||
lastRaceSessionKey={lastRaceSessionKey}
|
|
||||||
nextMeeting={nextMeeting}
|
|
||||||
analysisSessionKey={analysisSessionKey}
|
|
||||||
analysisSessionName={analysisSessionName}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function LiveHero({
|
|
||||||
liveActive,
|
|
||||||
liveData,
|
|
||||||
currentSession,
|
|
||||||
focusMeeting,
|
|
||||||
}: {
|
|
||||||
liveActive: boolean
|
|
||||||
liveData: LiveStreamData | null | undefined
|
|
||||||
currentSession: Session | null
|
|
||||||
focusMeeting: Meeting
|
|
||||||
}) {
|
|
||||||
const sessionName =
|
|
||||||
liveData?.Session?.SessionName ?? currentSession?.session_name ?? 'Live session'
|
|
||||||
const trackStatus = trackStatusInfo(liveData?.TrackStatus)
|
|
||||||
const topThree = sortLiveTimingRows(liveData).filter((r) => r.Position > 0).slice(0, 3)
|
|
||||||
const decal = countryDecal(focusMeeting)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="hero-row">
|
|
||||||
<span className="hero-decal mono">{decal}</span>
|
|
||||||
<div className="hero-identity">
|
|
||||||
<div className="hero-eyebrow hero-eyebrow--live mono">● Live now</div>
|
|
||||||
<h1 className="hero-title">{sessionName}</h1>
|
|
||||||
<div className="hero-sub mono">
|
|
||||||
{[focusMeeting.meeting_name, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')}
|
|
||||||
</div>
|
|
||||||
<div className={`hero-track-status hero-track-status--${trackStatus.key}`}>
|
|
||||||
{trackStatus.label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{topThree.length > 0 && (
|
|
||||||
<div className="hero-timing" data-testid="hero-live-timing">
|
|
||||||
{topThree.map((row) => (
|
|
||||||
<div key={row.RacingNumber} className="hero-timing-row">
|
|
||||||
<span className={`hero-timing-pos hero-timing-pos--p${row.Position}`}>
|
|
||||||
P{row.Position}
|
|
||||||
</span>
|
|
||||||
<span className="hero-timing-driver">
|
|
||||||
<span
|
|
||||||
className="hero-timing-bar"
|
|
||||||
style={{ background: `#${row.Info?.TeamColour ?? '9aa0a6'}` }}
|
|
||||||
/>
|
|
||||||
{row.Info?.Tla ?? row.RacingNumber}
|
|
||||||
</span>
|
|
||||||
<span className="hero-timing-gap">
|
|
||||||
{row.Position === 1 ? 'LEAD' : row.Driver.Interval || row.Driver.GapToLeader || '—'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="hero-countdown">
|
|
||||||
<div className="hero-cd-label mono">{liveActive ? 'SignalR' : 'On track'}</div>
|
|
||||||
<div className="hero-cd-value hero-cd-value--live mono">LIVE</div>
|
|
||||||
<div className="hero-cd-sub mono">{sessionName}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="hero-actions">
|
|
||||||
<Link to="/live" className="hero-cta hero-cta--primary" data-testid="hero-live-link">
|
|
||||||
Open Live Timing <ArrowRight size={16} />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function UpcomingHero({
|
|
||||||
now,
|
|
||||||
focusMeeting,
|
|
||||||
focusKind,
|
|
||||||
sessions,
|
|
||||||
currentSession,
|
|
||||||
nextSession,
|
|
||||||
liveActive,
|
|
||||||
analysisSessionKey,
|
|
||||||
analysisSessionName,
|
|
||||||
}: {
|
|
||||||
now: Date
|
|
||||||
focusMeeting: Meeting
|
|
||||||
focusKind: FocusMeetingKind
|
|
||||||
sessions: WeekendSession[]
|
|
||||||
currentSession: Session | null
|
|
||||||
nextSession: Session | null
|
|
||||||
liveActive: boolean
|
|
||||||
analysisSessionKey?: number
|
|
||||||
analysisSessionName?: string
|
|
||||||
}) {
|
|
||||||
const decal = countryDecal(focusMeeting)
|
|
||||||
const countdownTarget =
|
|
||||||
nextSession && sessionStartTime(nextSession)
|
|
||||||
? sessionStartTime(nextSession)!
|
|
||||||
: meetingStartTime(focusMeeting)
|
|
||||||
|
|
||||||
const kindLabel =
|
|
||||||
focusKind === 'current'
|
|
||||||
? 'Current weekend'
|
|
||||||
: focusKind === 'next'
|
|
||||||
? 'Next weekend'
|
|
||||||
: 'Weekend'
|
|
||||||
|
|
||||||
const sortedSessions = [...sessions].sort((a, b) => {
|
|
||||||
const left = sessionStartTime(a.session)?.getTime() ?? 0
|
|
||||||
const right = sessionStartTime(b.session)?.getTime() ?? 0
|
|
||||||
return left - right
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="hero-row">
|
|
||||||
<span className="hero-decal mono">{decal}</span>
|
|
||||||
<div className="hero-identity">
|
|
||||||
<div className="hero-eyebrow mono">{kindLabel}</div>
|
|
||||||
<h1 className="hero-title">{focusMeeting.meeting_name}</h1>
|
|
||||||
<div className="hero-sub mono">
|
|
||||||
{[focusMeeting.location, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')}
|
|
||||||
</div>
|
|
||||||
<div className="hero-sub mono">{formatGpDateRange(focusMeeting)}</div>
|
|
||||||
</div>
|
|
||||||
<div className="hero-countdown" data-testid="hero-countdown">
|
|
||||||
{nextSession ? (
|
|
||||||
<>
|
|
||||||
<div className="hero-cd-label mono">Next · {nextSession.session_name}</div>
|
|
||||||
{countdownTarget && (
|
|
||||||
<div className="hero-cd-value mono">{formatCountdown(countdownTarget, now)}</div>
|
|
||||||
)}
|
|
||||||
<div className="hero-cd-sub mono">{formatSessionScheduleTime(nextSession.date_start)}</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="hero-cd-label mono">Status</div>
|
|
||||||
<div className="hero-cd-value mono">Complete</div>
|
|
||||||
<div className="hero-cd-sub mono">Weekend finished</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{sortedSessions.length > 0 && (
|
|
||||||
<div className="hero-schedule-strip" data-testid="hero-schedule-strip" role="list">
|
|
||||||
{sortedSessions.map(({ session }) => {
|
|
||||||
const status = classifySessionStatus(session, now)
|
|
||||||
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={`hero-schedule-card${isNext ? ' is-next' : ''}${
|
|
||||||
status === 'done' ? ' is-done' : ''
|
|
||||||
}${isLive ? ' is-live' : ''}`}
|
|
||||||
role="listitem"
|
|
||||||
>
|
|
||||||
<div className="hero-schedule-abbrev mono">
|
|
||||||
{sessionTypeAbbrev(session.session_type, session.session_name)}
|
|
||||||
</div>
|
|
||||||
<div className="hero-schedule-name">{session.session_name}</div>
|
|
||||||
<div className="hero-schedule-time mono">
|
|
||||||
{formatSessionScheduleTime(session.date_start)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={`hero-schedule-marker mono${
|
|
||||||
isLive ? ' hero-schedule-marker--live' : isNext ? ' hero-schedule-marker--next' : ''
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="hero-actions">
|
|
||||||
<Link
|
|
||||||
to="/live"
|
|
||||||
className="hero-secondary-link"
|
|
||||||
style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<Play size={14} /> Watch Live
|
|
||||||
</Link>
|
|
||||||
{analysisSessionKey != null && (
|
|
||||||
<Link
|
|
||||||
to="/race-hub"
|
|
||||||
search={{ session_key: analysisSessionKey }}
|
|
||||||
className="hero-secondary-link"
|
|
||||||
data-testid="hero-analysis-link"
|
|
||||||
style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<Activity size={14} /> Open Analysis
|
|
||||||
{analysisSessionName ? ` · ${analysisSessionName}` : ''}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function BetweenHero({
|
|
||||||
now,
|
|
||||||
lastRaceName,
|
|
||||||
lastRacePodium,
|
|
||||||
lastRaceSessionKey,
|
|
||||||
nextMeeting,
|
|
||||||
analysisSessionKey,
|
|
||||||
analysisSessionName,
|
|
||||||
}: {
|
|
||||||
now: Date
|
|
||||||
lastRaceName: string
|
|
||||||
lastRacePodium: EnrichedResult[]
|
|
||||||
lastRaceSessionKey?: number
|
|
||||||
nextMeeting: Meeting | null
|
|
||||||
analysisSessionKey?: number
|
|
||||||
analysisSessionName?: string
|
|
||||||
}) {
|
|
||||||
const nextStart = nextMeeting ? meetingStartTime(nextMeeting) : null
|
|
||||||
const podium = lastRacePodium
|
|
||||||
.filter((r) => r.position >= 1 && r.position <= 3)
|
|
||||||
.sort((a, b) => a.position - b.position)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="hero-row">
|
|
||||||
<div className="hero-identity">
|
|
||||||
<div className="hero-eyebrow mono">Between race weekends</div>
|
|
||||||
{lastRaceName && (
|
|
||||||
<h1 className="hero-title" data-testid="hero-last-race">
|
|
||||||
After {lastRaceName}
|
|
||||||
</h1>
|
|
||||||
)}
|
|
||||||
{!lastRaceName && <h1 className="hero-title">Season pause</h1>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{podium.length > 0 && (
|
|
||||||
<div className="hero-podium" data-testid="hero-podium">
|
|
||||||
{podium.map((r) => (
|
|
||||||
<div key={r.driver_number} className="hero-podium-row">
|
|
||||||
<span className={`hero-podium-pos hero-podium-pos--p${r.position} mono`}>
|
|
||||||
P{r.position}
|
|
||||||
</span>
|
|
||||||
<span className="hero-podium-driver">
|
|
||||||
<span
|
|
||||||
className="hero-timing-bar"
|
|
||||||
style={{ background: `#${r.team_colour}` }}
|
|
||||||
/>
|
|
||||||
{r.name_acronym}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{nextMeeting && (
|
|
||||||
<div className="hero-countdown" data-testid="hero-next-gp-countdown">
|
|
||||||
<div className="hero-between-next">
|
|
||||||
{countryFlag(nextMeeting) && (
|
|
||||||
<span className="hero-flag" aria-hidden="true">
|
|
||||||
{countryFlag(nextMeeting)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<div>
|
|
||||||
<div className="hero-cd-label mono">Next GP</div>
|
|
||||||
<div className="hero-title" style={{ fontSize: '20px' }}>
|
|
||||||
{nextMeeting.meeting_name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{nextStart && (
|
|
||||||
<>
|
|
||||||
<div className="hero-cd-value mono" style={{ marginTop: 'var(--s3)' }}>
|
|
||||||
{formatCountdown(nextStart, now)}
|
|
||||||
</div>
|
|
||||||
<div className="hero-cd-sub mono">{formatGpDateRange(nextMeeting)}</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hero-actions">
|
|
||||||
{lastRaceSessionKey != null && (
|
|
||||||
<Link
|
|
||||||
to="/race-hub"
|
|
||||||
search={{ session_key: lastRaceSessionKey }}
|
|
||||||
className="hero-secondary-link"
|
|
||||||
data-testid="hero-last-race-link"
|
|
||||||
>
|
|
||||||
View {lastRaceName || 'last race'} results →
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{analysisSessionKey != null && analysisSessionKey !== lastRaceSessionKey && (
|
|
||||||
<Link
|
|
||||||
to="/race-hub"
|
|
||||||
search={{ session_key: analysisSessionKey }}
|
|
||||||
className="hero-secondary-link"
|
|
||||||
data-testid="hero-analysis-link"
|
|
||||||
>
|
|
||||||
Open Analysis{analysisSessionName ? ` · ${analysisSessionName}` : ''}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<Link to="/live" className="hero-secondary-link">
|
|
||||||
Live Timing →
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
282
frontend/src/components/charts/DeltaTimeGraph.tsx
Normal file
282
frontend/src/components/charts/DeltaTimeGraph.tsx
Normal file
@@ -0,0 +1,282 @@
|
|||||||
|
import { useCallback, useMemo, useRef, useState } from 'react'
|
||||||
|
import {
|
||||||
|
computeCumulativeDeltas,
|
||||||
|
deltaPolylineSegments,
|
||||||
|
formatDeltaSeconds,
|
||||||
|
type DeltaSeries,
|
||||||
|
type DriverDeltaResult,
|
||||||
|
} from '../../lib/delta'
|
||||||
|
import '../../styles/delta-graph.css'
|
||||||
|
|
||||||
|
export type { DeltaSeries }
|
||||||
|
|
||||||
|
export interface DeltaTimeGraphProps {
|
||||||
|
series: DeltaSeries[]
|
||||||
|
referenceLabel?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const W = 640
|
||||||
|
const H = 220
|
||||||
|
const PL = 44
|
||||||
|
const PR = 16
|
||||||
|
const PT = 12
|
||||||
|
const PB = 28
|
||||||
|
|
||||||
|
function lapCount(series: ReadonlyArray<DeltaSeries>): number {
|
||||||
|
return series.reduce((max, s) => Math.max(max, s.lapTimes.length), 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
function yExtent(drivers: ReadonlyArray<DriverDeltaResult>): { min: number; max: number } {
|
||||||
|
let min = 0
|
||||||
|
let max = 0
|
||||||
|
for (const driver of drivers) {
|
||||||
|
for (const delta of driver.deltas) {
|
||||||
|
if (delta === null) continue
|
||||||
|
min = Math.min(min, delta)
|
||||||
|
max = Math.max(max, delta)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (min === max) {
|
||||||
|
const pad = 1
|
||||||
|
return { min: min - pad, max: max + pad }
|
||||||
|
}
|
||||||
|
const span = max - min
|
||||||
|
const pad = span * 0.08
|
||||||
|
return { min: min - pad, max: max + pad }
|
||||||
|
}
|
||||||
|
|
||||||
|
function niceYTicks(min: number, max: number): number[] {
|
||||||
|
const span = max - min
|
||||||
|
if (span <= 0) return [0]
|
||||||
|
const rough = span / 4
|
||||||
|
const magnitude = Math.pow(10, Math.floor(Math.log10(rough)))
|
||||||
|
const step = Math.ceil(rough / magnitude) * magnitude
|
||||||
|
const ticks: number[] = []
|
||||||
|
const start = Math.ceil(min / step) * step
|
||||||
|
for (let v = start; v <= max + step * 0.01; v += step) {
|
||||||
|
ticks.push(Number(v.toFixed(6)))
|
||||||
|
}
|
||||||
|
if (!ticks.some((t) => Math.abs(t) < step * 0.01)) {
|
||||||
|
ticks.push(0)
|
||||||
|
ticks.sort((a, b) => a - b)
|
||||||
|
}
|
||||||
|
return ticks
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DeltaTimeGraph({ series, referenceLabel }: DeltaTimeGraphProps) {
|
||||||
|
const svgRef = useRef<SVGSVGElement>(null)
|
||||||
|
const [hoverLap, setHoverLap] = useState<number | null>(null)
|
||||||
|
|
||||||
|
const drivers = useMemo(
|
||||||
|
() => computeCumulativeDeltas(series, referenceLabel),
|
||||||
|
[series, referenceLabel],
|
||||||
|
)
|
||||||
|
|
||||||
|
const laps = useMemo(() => lapCount(series), [series])
|
||||||
|
const plotW = W - PL - PR
|
||||||
|
const plotH = H - PT - PB
|
||||||
|
const { min: yMin, max: yMax } = useMemo(() => yExtent(drivers), [drivers])
|
||||||
|
const yTicks = useMemo(() => niceYTicks(yMin, yMax), [yMin, yMax])
|
||||||
|
|
||||||
|
const toX = useCallback(
|
||||||
|
(lapIndex: number) => {
|
||||||
|
if (laps <= 1) return PL + plotW / 2
|
||||||
|
return PL + (lapIndex / (laps - 1)) * plotW
|
||||||
|
},
|
||||||
|
[laps, plotW],
|
||||||
|
)
|
||||||
|
|
||||||
|
const toY = useCallback(
|
||||||
|
(delta: number) => {
|
||||||
|
const span = yMax - yMin || 1
|
||||||
|
return PT + ((delta - yMin) / span) * plotH
|
||||||
|
},
|
||||||
|
[yMin, yMax, plotH],
|
||||||
|
)
|
||||||
|
|
||||||
|
const lapTickNumbers = useMemo(() => {
|
||||||
|
const ticks: number[] = []
|
||||||
|
for (let lap = 5; lap <= laps; lap += 5) {
|
||||||
|
ticks.push(lap)
|
||||||
|
}
|
||||||
|
return ticks
|
||||||
|
}, [laps])
|
||||||
|
|
||||||
|
const handlePointerMove = useCallback(
|
||||||
|
(e: React.PointerEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>) => {
|
||||||
|
if (!svgRef.current || laps === 0) return
|
||||||
|
const rect = svgRef.current.getBoundingClientRect()
|
||||||
|
if (rect.width <= 0) return
|
||||||
|
const x = ((e.clientX - rect.left) / rect.width) * W
|
||||||
|
const frac = Math.max(0, Math.min(1, (x - PL) / plotW))
|
||||||
|
const lapIndex = laps <= 1 ? 0 : Math.round(frac * (laps - 1))
|
||||||
|
if (!Number.isFinite(lapIndex)) return
|
||||||
|
setHoverLap(Math.max(0, Math.min(laps - 1, lapIndex)))
|
||||||
|
},
|
||||||
|
[laps, plotW],
|
||||||
|
)
|
||||||
|
|
||||||
|
const handlePointerLeave = useCallback(() => setHoverLap(null), [])
|
||||||
|
|
||||||
|
if (series.length === 0 || laps === 0) {
|
||||||
|
return (
|
||||||
|
<div className="delta-graph" data-testid="delta-time-graph-empty">
|
||||||
|
<p className="delta-graph-empty">No lap data to compare.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (drivers.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="delta-graph" data-testid="delta-time-graph-empty">
|
||||||
|
<p className="delta-graph-empty">Select at least two drivers to compare.</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const hoverX = hoverLap !== null ? toX(hoverLap) : null
|
||||||
|
const tooltipRows = hoverLap !== null
|
||||||
|
? drivers
|
||||||
|
.map((d) => {
|
||||||
|
const delta = d.deltas[hoverLap]
|
||||||
|
if (delta == null) return null
|
||||||
|
return { label: d.label, color: d.color, delta }
|
||||||
|
})
|
||||||
|
.filter((row): row is { label: string; color: string; delta: number } => row !== null)
|
||||||
|
: []
|
||||||
|
|
||||||
|
const tooltipH = 18 + tooltipRows.length * 14
|
||||||
|
const tooltipW = 120
|
||||||
|
const tooltipX = hoverX !== null ? Math.min(Math.max(hoverX + 8, PL), W - PR - tooltipW) : 0
|
||||||
|
const tooltipY = PT
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="delta-graph" data-testid="delta-time-graph">
|
||||||
|
<svg
|
||||||
|
ref={svgRef}
|
||||||
|
className="delta-graph-svg"
|
||||||
|
viewBox={`0 0 ${W} ${H}`}
|
||||||
|
role="img"
|
||||||
|
aria-label="Cumulative delta time chart"
|
||||||
|
>
|
||||||
|
{yTicks.map((tick) => (
|
||||||
|
<g key={`y-${tick}`}>
|
||||||
|
<line
|
||||||
|
x1={PL}
|
||||||
|
x2={W - PR}
|
||||||
|
y1={toY(tick)}
|
||||||
|
y2={toY(tick)}
|
||||||
|
className={Math.abs(tick) < 1e-9 ? 'delta-graph-zero-line' : 'delta-graph-grid-line'}
|
||||||
|
data-testid={Math.abs(tick) < 1e-9 ? 'delta-zero-line' : undefined}
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={PL - 6}
|
||||||
|
y={toY(tick) + 3}
|
||||||
|
textAnchor="end"
|
||||||
|
className="delta-graph-axis-label"
|
||||||
|
>
|
||||||
|
{formatDeltaSeconds(tick)}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{lapTickNumbers.map((lap) => {
|
||||||
|
const x = toX(lap - 1)
|
||||||
|
return (
|
||||||
|
<g key={`lap-${lap}`}>
|
||||||
|
<line
|
||||||
|
x1={x}
|
||||||
|
x2={x}
|
||||||
|
y1={H - PB}
|
||||||
|
y2={H - PB + 4}
|
||||||
|
className="delta-graph-grid-line"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={x}
|
||||||
|
y={H - PB + 16}
|
||||||
|
textAnchor="middle"
|
||||||
|
className="delta-graph-axis-label"
|
||||||
|
>
|
||||||
|
{lap}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{drivers.map((driver) => {
|
||||||
|
const segments = deltaPolylineSegments(driver.deltas, (lapIndex, delta) =>
|
||||||
|
`${toX(lapIndex).toFixed(1)},${toY(delta).toFixed(1)}`,
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
<g key={driver.label} data-testid={`delta-line-${driver.label}`}>
|
||||||
|
{segments.map((points, i) => (
|
||||||
|
<polyline
|
||||||
|
key={`${driver.label}-${i}`}
|
||||||
|
points={points}
|
||||||
|
className="delta-graph-driver-line"
|
||||||
|
stroke={driver.color}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{hoverX !== null && (
|
||||||
|
<>
|
||||||
|
<line
|
||||||
|
x1={hoverX}
|
||||||
|
x2={hoverX}
|
||||||
|
y1={PT}
|
||||||
|
y2={H - PB}
|
||||||
|
className="delta-graph-crosshair"
|
||||||
|
data-testid="delta-crosshair"
|
||||||
|
/>
|
||||||
|
{tooltipRows.length > 0 && (
|
||||||
|
<g className="delta-graph-tooltip" data-testid="delta-tooltip">
|
||||||
|
<rect
|
||||||
|
x={tooltipX}
|
||||||
|
y={tooltipY}
|
||||||
|
width={tooltipW}
|
||||||
|
height={tooltipH}
|
||||||
|
rx={4}
|
||||||
|
className="delta-graph-tooltip-bg"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={tooltipX + 8}
|
||||||
|
y={tooltipY + 14}
|
||||||
|
className="delta-graph-tooltip-title"
|
||||||
|
>
|
||||||
|
Lap {hoverLap! + 1}
|
||||||
|
</text>
|
||||||
|
{tooltipRows.map((row, i) => (
|
||||||
|
<text
|
||||||
|
key={row.label}
|
||||||
|
x={tooltipX + 8}
|
||||||
|
y={tooltipY + 28 + i * 14}
|
||||||
|
className="delta-graph-tooltip-row"
|
||||||
|
fill={row.color}
|
||||||
|
>
|
||||||
|
{row.label} {formatDeltaSeconds(row.delta)}
|
||||||
|
</text>
|
||||||
|
))}
|
||||||
|
</g>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<rect
|
||||||
|
x={PL}
|
||||||
|
y={PT}
|
||||||
|
width={plotW}
|
||||||
|
height={plotH}
|
||||||
|
fill="transparent"
|
||||||
|
className="delta-graph-hover-layer"
|
||||||
|
onPointerMove={handlePointerMove}
|
||||||
|
onMouseMove={handlePointerMove}
|
||||||
|
onPointerLeave={handlePointerLeave}
|
||||||
|
onMouseLeave={handlePointerLeave}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
112
frontend/src/lib/delta.ts
Normal file
112
frontend/src/lib/delta.ts
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
// Cumulative lap-time delta math for driver comparison charts.
|
||||||
|
// Pure functions only — no React — so everything is unit-testable.
|
||||||
|
|
||||||
|
export interface DeltaSeries {
|
||||||
|
label: string
|
||||||
|
color: string
|
||||||
|
/** Lap duration in seconds; null = no time (pit/out lap). */
|
||||||
|
lapTimes: (number | null)[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DriverDeltaResult {
|
||||||
|
label: string
|
||||||
|
color: string
|
||||||
|
/** Cumulative delta vs reference (seconds); null when that lap has no time. */
|
||||||
|
deltas: (number | null)[]
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Format a delta value for axis labels and tooltips (e.g. "+2.5s", "-1.2s"). */
|
||||||
|
export function formatDeltaSeconds(delta: number): string {
|
||||||
|
const sign = delta >= 0 ? '+' : ''
|
||||||
|
return `${sign}${delta.toFixed(1)}s`
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildCumulative(lapTimes: ReadonlyArray<number | null>): number[] {
|
||||||
|
const cumulative: number[] = []
|
||||||
|
let running = 0
|
||||||
|
for (const lap of lapTimes) {
|
||||||
|
if (lap !== null) {
|
||||||
|
running += lap
|
||||||
|
}
|
||||||
|
cumulative.push(running)
|
||||||
|
}
|
||||||
|
return cumulative
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveReference(
|
||||||
|
series: ReadonlyArray<DeltaSeries>,
|
||||||
|
referenceLabel?: string,
|
||||||
|
): DeltaSeries | null {
|
||||||
|
if (series.length === 0) return null
|
||||||
|
if (referenceLabel) {
|
||||||
|
return series.find((s) => s.label === referenceLabel) ?? series[0]
|
||||||
|
}
|
||||||
|
return series[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Compute per-lap cumulative time delta for each non-reference driver.
|
||||||
|
* Positive = behind reference; negative = ahead.
|
||||||
|
* Null laps carry cumulative forward but emit null in deltas (skip when plotting).
|
||||||
|
*/
|
||||||
|
export function computeCumulativeDeltas(
|
||||||
|
series: ReadonlyArray<DeltaSeries>,
|
||||||
|
referenceLabel?: string,
|
||||||
|
): DriverDeltaResult[] {
|
||||||
|
const reference = resolveReference(series, referenceLabel)
|
||||||
|
if (!reference) return []
|
||||||
|
|
||||||
|
const refCumulative = buildCumulative(reference.lapTimes)
|
||||||
|
|
||||||
|
return series
|
||||||
|
.filter((s) => s.label !== reference.label)
|
||||||
|
.map((driver) => {
|
||||||
|
const driverCumulative = buildCumulative(driver.lapTimes)
|
||||||
|
const lapCount = Math.max(driver.lapTimes.length, refCumulative.length)
|
||||||
|
const deltas: (number | null)[] = []
|
||||||
|
|
||||||
|
for (let i = 0; i < lapCount; i++) {
|
||||||
|
if (driver.lapTimes[i] === null) {
|
||||||
|
deltas.push(null)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
const refValue = refCumulative[i] ?? refCumulative[refCumulative.length - 1] ?? 0
|
||||||
|
const driverValue =
|
||||||
|
driverCumulative[i] ?? driverCumulative[driverCumulative.length - 1] ?? 0
|
||||||
|
deltas.push(driverValue - refValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
label: driver.label,
|
||||||
|
color: driver.color,
|
||||||
|
deltas,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Split delta samples into contiguous SVG polyline point strings (gaps at null laps). */
|
||||||
|
export function deltaPolylineSegments(
|
||||||
|
deltas: ReadonlyArray<number | null>,
|
||||||
|
toPoint: (lapIndex: number, delta: number) => string,
|
||||||
|
): string[] {
|
||||||
|
const segments: string[] = []
|
||||||
|
let current: string[] = []
|
||||||
|
|
||||||
|
for (let i = 0; i < deltas.length; i++) {
|
||||||
|
const value = deltas[i]
|
||||||
|
if (value === null) {
|
||||||
|
if (current.length > 0) {
|
||||||
|
segments.push(current.join(' '))
|
||||||
|
current = []
|
||||||
|
}
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
current.push(toPoint(i, value))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (current.length > 0) {
|
||||||
|
segments.push(current.join(' '))
|
||||||
|
}
|
||||||
|
|
||||||
|
return segments
|
||||||
|
}
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import type { Session } from '../types'
|
|
||||||
import { sessionEndTime, sessionStartTime, type FocusMeetingKind } from './schedule'
|
|
||||||
|
|
||||||
export type HeroStateKind = 'live' | 'upcoming' | 'between'
|
|
||||||
|
|
||||||
export interface HeroStateInputs {
|
|
||||||
now: Date
|
|
||||||
liveActive: boolean
|
|
||||||
currentSession: Session | null
|
|
||||||
focusKind: FocusMeetingKind | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
|
|
||||||
const start = sessionStartTime(session)
|
|
||||||
const end = sessionEndTime(session)
|
|
||||||
if (start && end && now >= start && now < end) return 'live'
|
|
||||||
if (start && now >= start) return 'done'
|
|
||||||
return 'upcoming'
|
|
||||||
}
|
|
||||||
|
|
||||||
export function heroState(inputs: HeroStateInputs): HeroStateKind {
|
|
||||||
const { liveActive, currentSession, focusKind } = inputs
|
|
||||||
|
|
||||||
if (liveActive || currentSession) return 'live'
|
|
||||||
if (focusKind === 'current') return 'upcoming'
|
|
||||||
return 'between'
|
|
||||||
}
|
|
||||||
@@ -1,38 +1,38 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { useQueries, useQuery } from '@tanstack/react-query'
|
import { useQueries, useQuery } from '@tanstack/react-query'
|
||||||
import { Link } from '@tanstack/react-router'
|
import { Link } from '@tanstack/react-router'
|
||||||
import {
|
import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend, fetchChampionshipHub } from '../api'
|
||||||
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 { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
|
||||||
import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
|
||||||
import { classifySessionStatus, heroState } from '../lib/hero'
|
|
||||||
import {
|
import {
|
||||||
currentAndNextSession,
|
currentAndNextSession,
|
||||||
focusMeetingKind,
|
focusMeetingKind,
|
||||||
|
formatCountdown,
|
||||||
formatSessionScheduleTime,
|
formatSessionScheduleTime,
|
||||||
meetingHasStarted,
|
meetingHasStarted,
|
||||||
mostRecentPastMeeting,
|
|
||||||
nextUpcomingMeeting,
|
|
||||||
pickFocusMeeting,
|
pickFocusMeeting,
|
||||||
|
sessionEndTime,
|
||||||
|
sessionStartTime,
|
||||||
sortSessionsByStart,
|
sortSessionsByStart,
|
||||||
} from '../lib/schedule'
|
} from '../lib/schedule'
|
||||||
|
import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
||||||
import type { Meeting, Session, Weekend, WeekendSession } from '../types'
|
import type { Meeting, Session, Weekend, WeekendSession } from '../types'
|
||||||
import { Trophy } from 'lucide-react'
|
import { PaddockBriefing } from '../components/PaddockBriefing'
|
||||||
|
import { Play, Activity, Calendar, Trophy } from 'lucide-react'
|
||||||
|
|
||||||
|
type WeekendStatusKind = 'live' | 'current' | 'next' | 'recent' | 'fallback'
|
||||||
|
|
||||||
const missingDatasets = Object.fromEntries(
|
const missingDatasets = Object.fromEntries(
|
||||||
RACE_HUB_DATASETS.map((dataset) => [dataset, { status: 'missing', source: 'none', count: 0 }]),
|
RACE_HUB_DATASETS.map((dataset) => [dataset, { status: 'missing', source: 'none', count: 0 }]),
|
||||||
) as WeekendSession['datasets']
|
) as WeekendSession['datasets']
|
||||||
|
|
||||||
|
function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
|
||||||
|
const start = sessionStartTime(session)
|
||||||
|
const end = sessionEndTime(session)
|
||||||
|
if (start && end && now >= start && now < end) return 'live'
|
||||||
|
if (start && now >= start) return 'done'
|
||||||
|
return 'upcoming'
|
||||||
|
}
|
||||||
|
|
||||||
function meetingStatus(meeting: Meeting, focusKey: number | undefined, now: Date) {
|
function meetingStatus(meeting: Meeting, focusKey: number | undefined, now: Date) {
|
||||||
if (meeting.meeting_key === focusKey) return 'focus'
|
if (meeting.meeting_key === focusKey) return 'focus'
|
||||||
if (meetingHasStarted(meeting, now)) return 'past'
|
if (meetingHasStarted(meeting, now)) return 'past'
|
||||||
@@ -148,36 +148,7 @@ export function CommandCenterPage() {
|
|||||||
focusWeekendSessions[0]?.session
|
focusWeekendSessions[0]?.session
|
||||||
const analysisSessionKey = actionSession?.session_key
|
const analysisSessionKey = actionSession?.session_key
|
||||||
|
|
||||||
const liveActive = liveQuery.data?.is_live === true
|
const weekendsLoading = weekendQueries.some((q) => q.isLoading)
|
||||||
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) {
|
if (seasonsQuery.isLoading) {
|
||||||
return <div className="page loading-state">loading command center…</div>
|
return <div className="page loading-state">loading command center…</div>
|
||||||
@@ -218,7 +189,19 @@ export function CommandCenterPage() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const liveActive = liveQuery.data?.is_live === true
|
||||||
|
const statusKind: WeekendStatusKind = liveActive
|
||||||
|
? 'live'
|
||||||
|
: focusKind === 'current'
|
||||||
|
? 'current'
|
||||||
|
: focusKind === 'next'
|
||||||
|
? 'next'
|
||||||
|
: focusKind === 'recent'
|
||||||
|
? 'recent'
|
||||||
|
: 'fallback'
|
||||||
|
|
||||||
const accent = countryAccent(focusMeeting ?? null)
|
const accent = countryAccent(focusMeeting ?? null)
|
||||||
|
const decal = countryDecal(focusMeeting ?? null)
|
||||||
const accentStyle = { '--gp-accent': accent } as React.CSSProperties
|
const accentStyle = { '--gp-accent': accent } as React.CSSProperties
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -241,25 +224,76 @@ export function CommandCenterPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{focusMeeting && focusKind && (
|
{focusMeeting && (
|
||||||
<CommandCenterHero
|
<div className="cc-hero">
|
||||||
state={heroStateKind}
|
<section className="cc-weekend-band ui-card glass-panel" data-testid="cc-focus">
|
||||||
now={nowDate}
|
<div className="cc-band-accent" aria-hidden="true" />
|
||||||
accent={accent}
|
<div className="cc-band-body">
|
||||||
liveActive={liveActive}
|
<div className="cc-band-row">
|
||||||
liveData={liveQuery.data?.data}
|
<span className="cc-band-decal mono">{decal}</span>
|
||||||
focusMeeting={focusMeeting}
|
<div className="cc-band-titles">
|
||||||
focusKind={focusKind}
|
<div className="cc-band-eyebrow mono">
|
||||||
sessions={focusWeekendSessions}
|
<WeekendKindLabel kind={statusKind} />
|
||||||
currentSession={currentSession}
|
</div>
|
||||||
nextSession={nextSession}
|
<h1 className="cc-band-name">{focusMeeting.meeting_name}</h1>
|
||||||
analysisSessionKey={analysisSessionKey}
|
<div className="cc-band-sub mono">
|
||||||
analysisSessionName={actionSession?.session_name}
|
{[focusMeeting.location, focusMeeting.circuit_short_name]
|
||||||
lastRaceName={lastRaceName}
|
.filter(Boolean)
|
||||||
lastRacePodium={lastRacePodium}
|
.join(' · ')}
|
||||||
lastRaceSessionKey={lastRaceSessionKey}
|
</div>
|
||||||
nextMeeting={nextMeetingForHero}
|
<div className="cc-band-sub mono cc-band-dates">{formatGpDateRange(focusMeeting)}</div>
|
||||||
/>
|
</div>
|
||||||
|
<CountdownBlock
|
||||||
|
liveActive={liveActive}
|
||||||
|
currentSession={currentSession}
|
||||||
|
nextSession={nextSession}
|
||||||
|
meeting={focusMeeting}
|
||||||
|
now={nowDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="cc-actions-row" data-testid="cc-actions">
|
||||||
|
<Link
|
||||||
|
to="/live"
|
||||||
|
className={`cc-pri-action ui-card interactive ${liveActive ? 'is-live ui-cta-primary' : ''}`}
|
||||||
|
data-testid="cc-action-live"
|
||||||
|
>
|
||||||
|
<span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Play size={16} /> Watch Live</span>
|
||||||
|
<span className="cc-pri-meta mono">{liveActive ? 'Feed active' : 'Standby'}</span>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/race-hub"
|
||||||
|
search={analysisSessionKey ? { session_key: analysisSessionKey } : {}}
|
||||||
|
className="cc-pri-action ui-card interactive"
|
||||||
|
data-testid="cc-action-race-hub"
|
||||||
|
>
|
||||||
|
<span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Activity size={16} /> Open Analysis</span>
|
||||||
|
<span className="cc-pri-meta mono">
|
||||||
|
{actionSession
|
||||||
|
? `${actionSession.session_name} · session ${actionSession.session_key}`
|
||||||
|
: 'Pick a session'}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
{nextSession && sessionStartTime(nextSession) && (
|
||||||
|
<a
|
||||||
|
href="#cc-schedule"
|
||||||
|
className="cc-pri-action ui-card interactive"
|
||||||
|
data-testid="cc-action-schedule"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
document.getElementById('cc-schedule')?.scrollIntoView({ behavior: 'smooth' })
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Calendar size={16} /> Schedule</span>
|
||||||
|
<span className="cc-pri-meta mono">
|
||||||
|
next: {nextSession.session_name}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="cc-dashboard-grid">
|
<div className="cc-dashboard-grid">
|
||||||
@@ -449,3 +483,65 @@ function FormSparkline({ form, color }: { form: number[], color: string }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function WeekendKindLabel({ kind }: { kind: WeekendStatusKind }) {
|
||||||
|
switch (kind) {
|
||||||
|
case 'live':
|
||||||
|
return <span className="cc-kind cc-kind-live">● Live now</span>
|
||||||
|
case 'current':
|
||||||
|
return <span className="cc-kind cc-kind-current">Current weekend</span>
|
||||||
|
case 'next':
|
||||||
|
return <span className="cc-kind cc-kind-next">Next weekend</span>
|
||||||
|
case 'recent':
|
||||||
|
return <span className="cc-kind cc-kind-recent">Recent weekend</span>
|
||||||
|
default:
|
||||||
|
return <span className="cc-kind">Weekend</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CountdownBlockProps {
|
||||||
|
liveActive: boolean
|
||||||
|
currentSession: Session | null
|
||||||
|
nextSession: Session | null
|
||||||
|
meeting: Meeting
|
||||||
|
now: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
function CountdownBlock({ liveActive, currentSession, nextSession, meeting, now }: CountdownBlockProps) {
|
||||||
|
if (liveActive) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">SignalR</div>
|
||||||
|
<div className="cc-cd-value cc-cd-live">LIVE</div>
|
||||||
|
<div className="cc-cd-sub mono">{currentSession?.session_name ?? 'Feed connected'}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (currentSession) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">On Track</div>
|
||||||
|
<div className="cc-cd-value cc-cd-current">{currentSession.session_name}</div>
|
||||||
|
<div className="cc-cd-sub mono">In session</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (nextSession && sessionStartTime(nextSession)) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">Next · {nextSession.session_name}</div>
|
||||||
|
<div className="cc-cd-value mono">{formatCountdown(sessionStartTime(nextSession)!, now)}</div>
|
||||||
|
<div className="cc-cd-sub mono">{formatSessionScheduleTime(nextSession.date_start)}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (meetingHasStarted(meeting, now)) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">Status</div>
|
||||||
|
<div className="cc-cd-value cc-cd-done">Complete</div>
|
||||||
|
<div className="cc-cd-sub mono">Weekend finished</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|||||||
76
frontend/src/styles/delta-graph.css
Normal file
76
frontend/src/styles/delta-graph.css
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
.delta-graph {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 280px;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-svg {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-empty {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-zero-line {
|
||||||
|
stroke: var(--text-3);
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 4 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-grid-line {
|
||||||
|
stroke: var(--border);
|
||||||
|
stroke-width: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-axis-label {
|
||||||
|
fill: var(--text-3);
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-driver-line {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-crosshair {
|
||||||
|
stroke: var(--text-2);
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 3 3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-hover-layer {
|
||||||
|
cursor: crosshair;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-tooltip {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-tooltip-bg {
|
||||||
|
fill: var(--bg-elevated, var(--bg));
|
||||||
|
stroke: var(--border);
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-tooltip-title {
|
||||||
|
fill: var(--text-1);
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delta-graph-tooltip-row {
|
||||||
|
fill: var(--text-2);
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
@@ -1,373 +0,0 @@
|
|||||||
.hero-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-card {
|
|
||||||
display: flex;
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 124px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-accent {
|
|
||||||
width: 4px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
box-shadow: 0 0 12px var(--hero-accent, var(--gp-accent));
|
|
||||||
background: var(--hero-accent, var(--gp-accent));
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-accent--live {
|
|
||||||
animation: hero-pulse 1.4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes hero-pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.55; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-body {
|
|
||||||
flex: 1;
|
|
||||||
padding: var(--s5);
|
|
||||||
min-width: 0;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background:
|
|
||||||
radial-gradient(ellipse at top right, color-mix(in srgb, var(--gp-accent) 15%, transparent), transparent 60%),
|
|
||||||
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
||||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
||||||
var(--surface);
|
|
||||||
background-size: 100% 100%, 20px 20px, 20px 20px, 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-body::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-inner {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: var(--s6);
|
|
||||||
min-width: 0;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-identity {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-decal {
|
|
||||||
font-size: 56px;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 0.85;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
color: color-mix(in srgb, var(--gp-accent) 35%, var(--text-3));
|
|
||||||
opacity: 0.9;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-eyebrow {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--text-3);
|
|
||||||
margin-bottom: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-eyebrow--live {
|
|
||||||
color: var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-sub {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-2);
|
|
||||||
margin-top: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-countdown {
|
|
||||||
text-align: right;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-label {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.12em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--text-3);
|
|
||||||
margin-bottom: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-value {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-value--live {
|
|
||||||
color: var(--red);
|
|
||||||
font-size: 28px;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-sub {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-3);
|
|
||||||
margin-top: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-track-status {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.12em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: var(--s2) var(--s3);
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-top: var(--s3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-track-status--green { color: #3dd68c; background: rgba(61, 214, 140, 0.1); }
|
|
||||||
.hero-track-status--yellow { color: #f5c842; background: rgba(245, 200, 66, 0.1); }
|
|
||||||
.hero-track-status--sc,
|
|
||||||
.hero-track-status--vsc { color: #f5a623; background: rgba(245, 166, 35, 0.12); }
|
|
||||||
.hero-track-status--red { color: var(--red); background: rgba(225, 6, 0, 0.12); }
|
|
||||||
.hero-track-status--unknown { color: var(--text-3); background: rgba(255, 255, 255, 0.05); }
|
|
||||||
|
|
||||||
.hero-timing {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s2);
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 28px 1fr auto;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
padding: var(--s2) var(--s3);
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-pos {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-3);
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-pos--p1 { color: #ffd700; }
|
|
||||||
.hero-timing-pos--p2 { color: #c0c0c0; }
|
|
||||||
.hero-timing-pos--p3 { color: #cd7f32; }
|
|
||||||
|
|
||||||
.hero-timing-bar {
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
border-radius: 2px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-driver {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-gap {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-3);
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cta {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--red);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: opacity 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cta:hover {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cta--primary {
|
|
||||||
padding: var(--s3) var(--s5);
|
|
||||||
background: rgba(225, 6, 0, 0.12);
|
|
||||||
border: 1px solid rgba(225, 6, 0, 0.35);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: var(--s3);
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-secondary-link {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-2);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-secondary-link:hover {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-strip {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--s3);
|
|
||||||
overflow-x: auto;
|
|
||||||
padding-bottom: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
min-width: 120px;
|
|
||||||
padding: var(--s3) var(--s4);
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
transition: background 0.1s, border-color 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card.is-next {
|
|
||||||
border-color: color-mix(in srgb, var(--gp-accent) 50%, transparent);
|
|
||||||
background: color-mix(in srgb, var(--gp-accent) 8%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card.is-done {
|
|
||||||
opacity: 0.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card.is-live {
|
|
||||||
border-color: rgba(225, 6, 0, 0.4);
|
|
||||||
background: rgba(225, 6, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-abbrev {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-name {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: var(--s2) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-time {
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-marker {
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-top: var(--s2);
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-marker--next { color: var(--gp-accent); }
|
|
||||||
.hero-schedule-marker--live { color: var(--red); }
|
|
||||||
|
|
||||||
.hero-podium {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s2);
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-podium-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 32px 1fr;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
padding: var(--s2) var(--s3);
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-podium-pos {
|
|
||||||
font-weight: 700;
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-podium-pos--p1 { color: #ffd700; }
|
|
||||||
.hero-podium-pos--p2 { color: #c0c0c0; }
|
|
||||||
.hero-podium-pos--p3 { color: #cd7f32; }
|
|
||||||
|
|
||||||
.hero-podium-driver {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-between-next {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-flag {
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 700px) {
|
|
||||||
.hero-row {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -12,20 +12,9 @@ vi.mock('../api', () => ({
|
|||||||
fetchSessions: vi.fn(),
|
fetchSessions: vi.fn(),
|
||||||
fetchWeekend: vi.fn(),
|
fetchWeekend: vi.fn(),
|
||||||
fetchLiveState: vi.fn(),
|
fetchLiveState: vi.fn(),
|
||||||
fetchChampionshipHub: vi.fn(),
|
|
||||||
fetchRaceHub: vi.fn(),
|
|
||||||
}))
|
}))
|
||||||
|
|
||||||
import {
|
import { fetchSeasons, fetchLocalMeetings, fetchSeasonMeetings, fetchSessions, fetchWeekend, fetchLiveState } from '../api'
|
||||||
fetchSeasons,
|
|
||||||
fetchLocalMeetings,
|
|
||||||
fetchSeasonMeetings,
|
|
||||||
fetchSessions,
|
|
||||||
fetchWeekend,
|
|
||||||
fetchLiveState,
|
|
||||||
fetchChampionshipHub,
|
|
||||||
fetchRaceHub,
|
|
||||||
} from '../api'
|
|
||||||
|
|
||||||
const mockFetchSeasons = vi.mocked(fetchSeasons)
|
const mockFetchSeasons = vi.mocked(fetchSeasons)
|
||||||
const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
|
const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
|
||||||
@@ -33,8 +22,6 @@ const mockFetchSeasonMeetings = vi.mocked(fetchSeasonMeetings)
|
|||||||
const mockFetchSessions = vi.mocked(fetchSessions)
|
const mockFetchSessions = vi.mocked(fetchSessions)
|
||||||
const mockFetchWeekend = vi.mocked(fetchWeekend)
|
const mockFetchWeekend = vi.mocked(fetchWeekend)
|
||||||
const mockFetchLiveState = vi.mocked(fetchLiveState)
|
const mockFetchLiveState = vi.mocked(fetchLiveState)
|
||||||
const mockFetchChampionshipHub = vi.mocked(fetchChampionshipHub)
|
|
||||||
const mockFetchRaceHub = vi.mocked(fetchRaceHub)
|
|
||||||
|
|
||||||
const meeting: Meeting = {
|
const meeting: Meeting = {
|
||||||
meeting_key: 1229,
|
meeting_key: 1229,
|
||||||
@@ -115,48 +102,6 @@ describe('CommandCenterPage', () => {
|
|||||||
vi.clearAllMocks()
|
vi.clearAllMocks()
|
||||||
mockFetchLiveState.mockResolvedValue({ is_live: false, data: null })
|
mockFetchLiveState.mockResolvedValue({ is_live: false, data: null })
|
||||||
mockFetchSessions.mockResolvedValue([])
|
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: [],
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('shows empty state when no seasons are ingested', async () => {
|
it('shows empty state when no seasons are ingested', async () => {
|
||||||
@@ -186,10 +131,11 @@ describe('CommandCenterPage', () => {
|
|||||||
expect(screen.getByTestId('cc-session-9472')).toBeInTheDocument()
|
expect(screen.getByTestId('cc-session-9472')).toBeInTheDocument()
|
||||||
})
|
})
|
||||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
||||||
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('MON')
|
||||||
expect(screen.getByTestId('cc-season-calendar')).toHaveTextContent('Season Calendar')
|
expect(screen.getByTestId('cc-season-calendar')).toHaveTextContent('Season Calendar')
|
||||||
expect(screen.getByTestId('cc-calendar-1229')).toHaveTextContent('R01')
|
expect(screen.getByTestId('cc-calendar-1229')).toHaveTextContent('R01')
|
||||||
expect(screen.getByText('No live session')).toBeInTheDocument()
|
expect(screen.getByText('No live session')).toBeInTheDocument()
|
||||||
expect(screen.getByTestId('hero-last-race-link')).toHaveTextContent('Monaco')
|
expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Race')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('uses OpenF1 calendar metadata to focus the current weekend when local ingest is behind', async () => {
|
it('uses OpenF1 calendar metadata to focus the current weekend when local ingest is behind', async () => {
|
||||||
@@ -235,9 +181,9 @@ describe('CommandCenterPage', () => {
|
|||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
||||||
})
|
})
|
||||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Live now')
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Current weekend')
|
||||||
expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track')
|
expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track')
|
||||||
expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live')
|
expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Qualifying')
|
||||||
|
|
||||||
vi.useRealTimers()
|
vi.useRealTimers()
|
||||||
})
|
})
|
||||||
|
|||||||
121
frontend/src/test/delta-time-graph.test.tsx
Normal file
121
frontend/src/test/delta-time-graph.test.tsx
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import { describe, expect, it, vi } from 'vitest'
|
||||||
|
import { render, screen, fireEvent } from '@testing-library/react'
|
||||||
|
import { DeltaTimeGraph } from '../components/charts/DeltaTimeGraph'
|
||||||
|
import {
|
||||||
|
computeCumulativeDeltas,
|
||||||
|
deltaPolylineSegments,
|
||||||
|
formatDeltaSeconds,
|
||||||
|
type DeltaSeries,
|
||||||
|
} from '../lib/delta'
|
||||||
|
|
||||||
|
const reference: DeltaSeries = {
|
||||||
|
label: 'VER',
|
||||||
|
color: '#3671C6',
|
||||||
|
lapTimes: [90, 91, 92],
|
||||||
|
}
|
||||||
|
|
||||||
|
const challenger: DeltaSeries = {
|
||||||
|
label: 'HAM',
|
||||||
|
color: '#E8002D',
|
||||||
|
lapTimes: [89, 92, 90],
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('formatDeltaSeconds', () => {
|
||||||
|
it('formats signed deltas with one decimal and s suffix', () => {
|
||||||
|
expect(formatDeltaSeconds(2.5)).toBe('+2.5s')
|
||||||
|
expect(formatDeltaSeconds(-1.2)).toBe('-1.2s')
|
||||||
|
expect(formatDeltaSeconds(0)).toBe('+0.0s')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('computeCumulativeDeltas', () => {
|
||||||
|
it('computes cumulative delta vs the first series by default', () => {
|
||||||
|
const result = computeCumulativeDeltas([reference, challenger])
|
||||||
|
expect(result).toHaveLength(1)
|
||||||
|
expect(result[0].label).toBe('HAM')
|
||||||
|
// Lap 1: 89-90=-1, Lap 2: (89+92)-(90+91)=0, Lap 3: (89+92+90)-(90+91+92)=-2
|
||||||
|
expect(result[0].deltas[0]).toBeCloseTo(-1)
|
||||||
|
expect(result[0].deltas[1]).toBeCloseTo(0)
|
||||||
|
expect(result[0].deltas[2]).toBeCloseTo(-2)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('respects an explicit reference label', () => {
|
||||||
|
const result = computeCumulativeDeltas([reference, challenger], 'HAM')
|
||||||
|
expect(result).toHaveLength(1)
|
||||||
|
expect(result[0].label).toBe('VER')
|
||||||
|
expect(result[0].deltas[0]).toBeCloseTo(1)
|
||||||
|
expect(result[0].deltas[2]).toBeCloseTo(2)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits null for missing lap times while carrying cumulative forward', () => {
|
||||||
|
const withNull: DeltaSeries = {
|
||||||
|
label: 'NOR',
|
||||||
|
color: '#FF8000',
|
||||||
|
lapTimes: [88, null, 93],
|
||||||
|
}
|
||||||
|
const result = computeCumulativeDeltas([reference, withNull])
|
||||||
|
expect(result[0].deltas[0]).toBeCloseTo(-2)
|
||||||
|
expect(result[0].deltas[1]).toBeNull()
|
||||||
|
// After null: NOR cum=181, VER cum=273 → delta -92
|
||||||
|
expect(result[0].deltas[2]).toBeCloseTo(-92)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns an empty array when only one series is provided', () => {
|
||||||
|
expect(computeCumulativeDeltas([reference])).toEqual([])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('deltaPolylineSegments', () => {
|
||||||
|
it('splits polylines at null laps', () => {
|
||||||
|
const segments = deltaPolylineSegments(
|
||||||
|
[1, null, 2],
|
||||||
|
(lap, delta) => `${lap},${delta}`,
|
||||||
|
)
|
||||||
|
expect(segments).toEqual(['0,1', '2,2'])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('DeltaTimeGraph', () => {
|
||||||
|
it('renders an empty state with no series', () => {
|
||||||
|
render(<DeltaTimeGraph series={[]} />)
|
||||||
|
expect(screen.getByTestId('delta-time-graph-empty')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText(/No lap data/i)).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders an empty state with only the reference driver', () => {
|
||||||
|
render(<DeltaTimeGraph series={[reference]} />)
|
||||||
|
expect(screen.getByTestId('delta-time-graph-empty')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText(/at least two drivers/i)).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders a zero line and one polyline per non-reference driver', () => {
|
||||||
|
const { container } = render(<DeltaTimeGraph series={[reference, challenger]} />)
|
||||||
|
expect(screen.getByTestId('delta-time-graph')).toBeInTheDocument()
|
||||||
|
expect(container.querySelector('[data-testid="delta-zero-line"]')).toBeInTheDocument()
|
||||||
|
expect(screen.getByTestId('delta-line-HAM')).toBeInTheDocument()
|
||||||
|
expect(container.querySelectorAll('.delta-graph-driver-line')).toHaveLength(1)
|
||||||
|
expect(screen.queryByTestId('delta-line-VER')).not.toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows a crosshair tooltip on hover', () => {
|
||||||
|
vi.spyOn(SVGSVGElement.prototype, 'getBoundingClientRect').mockReturnValue({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
width: 640,
|
||||||
|
height: 220,
|
||||||
|
right: 640,
|
||||||
|
bottom: 220,
|
||||||
|
toJSON: () => ({}),
|
||||||
|
})
|
||||||
|
const { container } = render(<DeltaTimeGraph series={[reference, challenger]} />)
|
||||||
|
const hoverLayer = container.querySelector('.delta-graph-hover-layer')
|
||||||
|
expect(hoverLayer).toBeTruthy()
|
||||||
|
fireEvent.mouseMove(hoverLayer!, { clientX: 44, clientY: 100 })
|
||||||
|
expect(screen.getByTestId('delta-crosshair')).toBeInTheDocument()
|
||||||
|
expect(screen.getByTestId('delta-tooltip')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText(/Lap 1/)).toBeInTheDocument()
|
||||||
|
vi.restoreAllMocks()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest'
|
|
||||||
import { heroState, classifySessionStatus } from '../lib/hero'
|
|
||||||
import { currentAndNextSession } from '../lib/schedule'
|
|
||||||
import type { Session } from '../types'
|
|
||||||
|
|
||||||
const session = (overrides: Partial<Session> = {}): Session => ({
|
|
||||||
session_key: 9472,
|
|
||||||
session_name: 'Race',
|
|
||||||
session_type: 'Race',
|
|
||||||
meeting_key: 1,
|
|
||||||
date_start: '2025-05-25T13:00:00+00:00',
|
|
||||||
date_end: '2025-05-25T15:00:00+00:00',
|
|
||||||
gmt_offset: '02:00:00',
|
|
||||||
...overrides,
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('heroState', () => {
|
|
||||||
it('returns live when the live snapshot is active', () => {
|
|
||||||
const now = new Date('2025-05-24T12:00:00Z')
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: true,
|
|
||||||
currentSession: null,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('live')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns live when a session is in progress', () => {
|
|
||||||
const now = new Date('2025-05-25T14:00:00Z')
|
|
||||||
const sessions = [session()]
|
|
||||||
const { current } = currentAndNextSession(sessions, now)
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: current,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('live')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns upcoming during a focus weekend gap before the next session', () => {
|
|
||||||
const now = new Date('2025-05-24T12:00:00Z')
|
|
||||||
const sessions = [
|
|
||||||
session({
|
|
||||||
session_key: 1,
|
|
||||||
session_name: 'FP1',
|
|
||||||
date_start: '2025-05-23T10:00:00+00:00',
|
|
||||||
date_end: '2025-05-23T11:00:00+00:00',
|
|
||||||
}),
|
|
||||||
session({
|
|
||||||
session_key: 2,
|
|
||||||
session_name: 'Race',
|
|
||||||
date_start: '2025-05-25T13:00:00+00:00',
|
|
||||||
date_end: '2025-05-25T15:00:00+00:00',
|
|
||||||
}),
|
|
||||||
]
|
|
||||||
const { current, next } = currentAndNextSession(sessions, now)
|
|
||||||
expect(current).toBeNull()
|
|
||||||
expect(next?.session_key).toBe(2)
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: current,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('upcoming')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns upcoming when the weekend just ended but is still the focus weekend', () => {
|
|
||||||
const now = new Date('2025-05-25T16:00:00Z')
|
|
||||||
const sessions = [session()]
|
|
||||||
const { current } = currentAndNextSession(sessions, now)
|
|
||||||
expect(current).toBeNull()
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: current,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('upcoming')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns between before the next grand prix weekend', () => {
|
|
||||||
const now = new Date('2025-06-01T12:00:00Z')
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: null,
|
|
||||||
focusKind: 'next',
|
|
||||||
}),
|
|
||||||
).toBe('between')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns between after the season when only a recent meeting remains', () => {
|
|
||||||
const now = new Date('2026-01-01T00:00:00Z')
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: null,
|
|
||||||
focusKind: 'recent',
|
|
||||||
}),
|
|
||||||
).toBe('between')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('classifySessionStatus', () => {
|
|
||||||
it('marks a session as done immediately after it ends', () => {
|
|
||||||
const now = new Date('2025-05-25T15:00:00Z')
|
|
||||||
expect(classifySessionStatus(session(), now)).toBe('done')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('marks a session as live during its window', () => {
|
|
||||||
const now = new Date('2025-05-25T14:00:00Z')
|
|
||||||
expect(classifySessionStatus(session(), now)).toBe('live')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,257 +0,0 @@
|
|||||||
import { describe, it, expect, vi } from 'vitest'
|
|
||||||
import type { ComponentProps, ReactNode } from 'react'
|
|
||||||
import { render, screen } from '@testing-library/react'
|
|
||||||
import type { EnrichedResult, LiveStreamData, Meeting, WeekendSession } from '../types'
|
|
||||||
|
|
||||||
vi.mock('@tanstack/react-router', () => ({
|
|
||||||
Link: ({
|
|
||||||
to,
|
|
||||||
children,
|
|
||||||
...rest
|
|
||||||
}: {
|
|
||||||
to: string
|
|
||||||
children: ReactNode
|
|
||||||
className?: string
|
|
||||||
'data-testid'?: string
|
|
||||||
}) => (
|
|
||||||
<a href={to} {...rest}>
|
|
||||||
{children}
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
}))
|
|
||||||
|
|
||||||
import { CommandCenterHero } from '../components/CommandCenterHero'
|
|
||||||
|
|
||||||
const focusMeeting: 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 weekendSessions: WeekendSession[] = [
|
|
||||||
{
|
|
||||||
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: {} as WeekendSession['datasets'],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const liveData: LiveStreamData = {
|
|
||||||
Drivers: {
|
|
||||||
'1': {
|
|
||||||
RacingNumber: '1',
|
|
||||||
Position: 1,
|
|
||||||
PrevPosition: 1,
|
|
||||||
GapToLeader: '',
|
|
||||||
Interval: '',
|
|
||||||
LastLapTime: '1:14.000',
|
|
||||||
LastLapPB: false,
|
|
||||||
LastLapOB: false,
|
|
||||||
BestLapTime: '1:13.500',
|
|
||||||
BestLapPB: false,
|
|
||||||
BestLapOB: false,
|
|
||||||
BestLapNum: 10,
|
|
||||||
InPit: false,
|
|
||||||
PitOut: false,
|
|
||||||
Retired: false,
|
|
||||||
KnockedOut: false,
|
|
||||||
Cutoff: false,
|
|
||||||
OnFlyingLap: false,
|
|
||||||
NumberOfLaps: 10,
|
|
||||||
SpeedTrap: '',
|
|
||||||
Sectors: [],
|
|
||||||
},
|
|
||||||
'44': {
|
|
||||||
RacingNumber: '44',
|
|
||||||
Position: 2,
|
|
||||||
PrevPosition: 2,
|
|
||||||
GapToLeader: '+1.2',
|
|
||||||
Interval: '+1.2',
|
|
||||||
LastLapTime: '1:14.200',
|
|
||||||
LastLapPB: false,
|
|
||||||
LastLapOB: false,
|
|
||||||
BestLapTime: '1:13.700',
|
|
||||||
BestLapPB: false,
|
|
||||||
BestLapOB: false,
|
|
||||||
BestLapNum: 10,
|
|
||||||
InPit: false,
|
|
||||||
PitOut: false,
|
|
||||||
Retired: false,
|
|
||||||
KnockedOut: false,
|
|
||||||
Cutoff: false,
|
|
||||||
OnFlyingLap: false,
|
|
||||||
NumberOfLaps: 10,
|
|
||||||
SpeedTrap: '',
|
|
||||||
Sectors: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
DriverInfo: {
|
|
||||||
'1': {
|
|
||||||
RacingNumber: '1',
|
|
||||||
BroadcastName: 'M VERSTAPPEN',
|
|
||||||
Tla: 'VER',
|
|
||||||
TeamName: 'Red Bull Racing',
|
|
||||||
TeamColour: '3671c6',
|
|
||||||
FirstName: 'Max',
|
|
||||||
LastName: 'Verstappen',
|
|
||||||
},
|
|
||||||
'44': {
|
|
||||||
RacingNumber: '44',
|
|
||||||
BroadcastName: 'L HAMILTON',
|
|
||||||
Tla: 'HAM',
|
|
||||||
TeamName: 'Ferrari',
|
|
||||||
TeamColour: 'e8002d',
|
|
||||||
FirstName: 'Lewis',
|
|
||||||
LastName: 'Hamilton',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
Tyres: {},
|
|
||||||
RCMessages: [],
|
|
||||||
Weather: {
|
|
||||||
AirTemp: 20,
|
|
||||||
TrackTemp: 30,
|
|
||||||
Humidity: 50,
|
|
||||||
WindSpeed: 1,
|
|
||||||
WindDir: 0,
|
|
||||||
Rainfall: false,
|
|
||||||
},
|
|
||||||
Session: {
|
|
||||||
MeetingName: 'Monaco',
|
|
||||||
CircuitName: 'Monaco',
|
|
||||||
SessionType: 'Race',
|
|
||||||
SessionName: 'Race',
|
|
||||||
},
|
|
||||||
TrackStatus: '1',
|
|
||||||
CurrentLap: 10,
|
|
||||||
TotalLaps: 78,
|
|
||||||
Clock: '',
|
|
||||||
ClockRefTime: '',
|
|
||||||
ClockExtrapolating: false,
|
|
||||||
Stints: {},
|
|
||||||
}
|
|
||||||
|
|
||||||
const podium: EnrichedResult[] = [
|
|
||||||
{
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
driver_number: 44,
|
|
||||||
position: 2,
|
|
||||||
name_acronym: 'HAM',
|
|
||||||
full_name: 'Lewis Hamilton',
|
|
||||||
team_name: 'Ferrari',
|
|
||||||
team_colour: 'e8002d',
|
|
||||||
dnf: false,
|
|
||||||
dns: false,
|
|
||||||
dsq: false,
|
|
||||||
duration: 7205,
|
|
||||||
gap_to_leader: 3.2,
|
|
||||||
number_of_laps: 78,
|
|
||||||
points: 18,
|
|
||||||
session_key: 9472,
|
|
||||||
meeting_key: 1229,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
function renderHero(overrides: Partial<ComponentProps<typeof CommandCenterHero>> = {}) {
|
|
||||||
const props: ComponentProps<typeof CommandCenterHero> = {
|
|
||||||
state: 'upcoming',
|
|
||||||
now: new Date('2025-05-24T12:00:00Z'),
|
|
||||||
accent: '#d61a3e',
|
|
||||||
liveActive: false,
|
|
||||||
liveData: null,
|
|
||||||
focusMeeting,
|
|
||||||
focusKind: 'current',
|
|
||||||
sessions: weekendSessions,
|
|
||||||
currentSession: null,
|
|
||||||
nextSession: weekendSessions[0].session,
|
|
||||||
lastRaceName: '',
|
|
||||||
lastRacePodium: [],
|
|
||||||
nextMeeting: null,
|
|
||||||
...overrides,
|
|
||||||
}
|
|
||||||
|
|
||||||
return render(<CommandCenterHero {...props} />)
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('CommandCenterHero', () => {
|
|
||||||
it('renders live timing link and top three in live state', () => {
|
|
||||||
renderHero({
|
|
||||||
state: 'live',
|
|
||||||
liveActive: true,
|
|
||||||
liveData,
|
|
||||||
currentSession: weekendSessions[0].session,
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live')
|
|
||||||
expect(screen.getByTestId('hero-live-timing')).toHaveTextContent('VER')
|
|
||||||
expect(screen.getByTestId('hero-live-timing')).toHaveTextContent('HAM')
|
|
||||||
expect(screen.getByText('TRACK CLEAR')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders countdown and schedule strip in upcoming state', () => {
|
|
||||||
renderHero({
|
|
||||||
state: 'upcoming',
|
|
||||||
nextSession: weekendSessions[0].session,
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(screen.getByTestId('hero-countdown')).toHaveTextContent('1d 01h 00m 00s')
|
|
||||||
expect(screen.getByTestId('hero-schedule-strip')).toHaveTextContent('Race')
|
|
||||||
expect(screen.getByTestId('hero-schedule-strip')).toHaveTextContent('Next')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders last race podium and next GP countdown in between state', () => {
|
|
||||||
const nextMeeting: Meeting = {
|
|
||||||
...focusMeeting,
|
|
||||||
meeting_key: 1301,
|
|
||||||
meeting_name: 'Canada',
|
|
||||||
country_code: 'CAN',
|
|
||||||
date_start: '2025-06-06T00:00:00+00:00',
|
|
||||||
date_end: '2025-06-08T00:00:00+00:00',
|
|
||||||
}
|
|
||||||
|
|
||||||
renderHero({
|
|
||||||
state: 'between',
|
|
||||||
lastRaceName: 'Monaco',
|
|
||||||
lastRacePodium: podium,
|
|
||||||
nextMeeting,
|
|
||||||
now: new Date('2025-06-01T12:00:00Z'),
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(screen.getByTestId('hero-last-race')).toHaveTextContent('After Monaco')
|
|
||||||
expect(screen.getByTestId('hero-podium')).toHaveTextContent('VER')
|
|
||||||
expect(screen.getByTestId('hero-podium')).toHaveTextContent('HAM')
|
|
||||||
expect(screen.getByTestId('hero-next-gp-countdown')).toHaveTextContent('Canada')
|
|
||||||
expect(screen.getByTestId('hero-next-gp-countdown')).toHaveTextContent('4d')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -9,7 +9,7 @@ test.describe('Command Center', () => {
|
|||||||
await expect(page.getByTestId('command-center')).toBeVisible()
|
await expect(page.getByTestId('command-center')).toBeVisible()
|
||||||
await expect(page.getByTestId('cc-focus')).toBeVisible()
|
await expect(page.getByTestId('cc-focus')).toBeVisible()
|
||||||
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
|
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
|
||||||
await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
|
await expect(page.getByTestId('cc-actions')).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('nav link reaches command center from race hub', async ({ page }) => {
|
test('nav link reaches command center from race hub', async ({ page }) => {
|
||||||
@@ -21,8 +21,8 @@ test.describe('Command Center', () => {
|
|||||||
|
|
||||||
test('open analysis action opens race hub for the focus session', async ({ page }) => {
|
test('open analysis action opens race hub for the focus session', async ({ page }) => {
|
||||||
await page.goto('/')
|
await page.goto('/')
|
||||||
await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
|
await expect(page.getByTestId('cc-action-race-hub')).toContainText(String(FULL_SESSION))
|
||||||
await page.getByTestId('hero-last-race-link').click()
|
await page.getByTestId('cc-action-race-hub').click()
|
||||||
await expect(page).toHaveURL(new RegExp(`/race-hub\\?session_key=${FULL_SESSION}`))
|
await expect(page).toHaveURL(new RegExp(`/race-hub\\?session_key=${FULL_SESSION}`))
|
||||||
await expect(page.getByTestId('rh-identity')).toBeVisible()
|
await expect(page.getByTestId('rh-identity')).toBeVisible()
|
||||||
await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()
|
await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()
|
||||||
|
|||||||
Reference in New Issue
Block a user