diff --git a/.agents/harnesses.sh b/.agents/harnesses.sh index 2634692..0142a2a 100644 --- a/.agents/harnesses.sh +++ b/.agents/harnesses.sh @@ -26,6 +26,21 @@ harness_opencode() { # opencode — non-interactive run ( cd "$dir" && opencode run "$(cat "$prompt")" ) } +harness_cursor() { # Cursor CLI agent — composer-2.5, headless full-auto + local dir="$1" prompt="$2" + ( cd "$dir" && cursor-agent -p "$(cat "$prompt")" --model composer-2.5 --force --trust ) +} + +harness_agy() { # Antigravity CLI — UNRELIABLE headless (2026-07): with + # --new-project it ignores the prompt and asks to scaffold a project; without it, it + # resumes the previous conversation (silently keeping its old model — --model only + # applies to new conversations) and can hang past the print timeout. Do not trust for + # dispatch until fixed upstream; verify with a trivial prompt first. + local dir="$1" prompt="$2" + ( cd "$dir" && agy --print --print-timeout 60m \ + --model="Gemini 3.1 Pro (High)" --dangerously-skip-permissions "$(cat "$prompt")" ) +} + # ---- NICE-TO-HAVE (verify the exact invocation for your version before trusting) ---- harness_pi() { # pi — CONFIRM headless CLI + flags @@ -33,11 +48,6 @@ harness_pi() { # pi — CONFIRM headless CLI + flags ( cd "$dir" && pi run "$(cat "$prompt")" ) # placeholder — verify } -harness_cursor() { # Cursor CLI agent — CONFIRM flags - local dir="$1" prompt="$2" - ( cd "$dir" && cursor-agent -p "$(cat "$prompt")" --force ) # placeholder — verify -} - # ---- build/typecheck gate (fast, local) ---- # Returns non-zero on failure. This is a smoke gate — CI runs the full suite. Tune freely. run_gate() { diff --git a/docs/phase-1/screenshots/command-center-hero-between.png b/docs/phase-1/screenshots/command-center-hero-between.png new file mode 100644 index 0000000..3e20c6a Binary files /dev/null and b/docs/phase-1/screenshots/command-center-hero-between.png differ diff --git a/docs/phase-1/screenshots/live-event-tyre-radio-mocked.png b/docs/phase-1/screenshots/live-event-tyre-radio-mocked.png new file mode 100644 index 0000000..4582d0a Binary files /dev/null and b/docs/phase-1/screenshots/live-event-tyre-radio-mocked.png differ diff --git a/docs/phase-1/screenshots/race-hub-compare-telemetry-delta.png b/docs/phase-1/screenshots/race-hub-compare-telemetry-delta.png new file mode 100644 index 0000000..347ca24 Binary files /dev/null and b/docs/phase-1/screenshots/race-hub-compare-telemetry-delta.png differ diff --git a/docs/phase-1/screenshots/race-hub-strategy-timeline.png b/docs/phase-1/screenshots/race-hub-strategy-timeline.png new file mode 100644 index 0000000..78ef566 Binary files /dev/null and b/docs/phase-1/screenshots/race-hub-strategy-timeline.png differ diff --git a/frontend/src/api.ts b/frontend/src/api.ts index a42330a..1b7d972 100644 --- a/frontend/src/api.ts +++ b/frontend/src/api.ts @@ -1,6 +1,8 @@ import type { ArticleContent, + CarDataSample, ChampionshipHub, + LapsComparisonResponse, LiveStateResponse, LiveSessionMeta, Meeting, @@ -126,3 +128,32 @@ export async function markNewsRead(articleUrl: string): Promise { body: JSON.stringify({ url: articleUrl }), }) } + +export async function fetchTelemetry( + sessionKey: number, + driverNumber: number, +): Promise { + const res = await fetch( + `/api/v1/telemetry?session_key=${sessionKey}&driver_number=${driverNumber}`, + ) + if (!res.ok) { + throw new Error(`API ${res.status}: ${res.statusText}`) + } + const data = await res.json() + return Array.isArray(data) ? data : [] +} + +export async function fetchLapsComparison( + sessionKey: number, + drivers?: number[], +): Promise { + const params = new URLSearchParams({ session_key: String(sessionKey) }) + if (drivers?.length) { + params.set('drivers', drivers.join(',')) + } + const res = await fetch(`/api/v1/laps/comparison?${params}`) + if (!res.ok) { + throw new Error(`API ${res.status}: ${res.statusText}`) + } + return res.json() +} diff --git a/frontend/src/components/CommandCenterHero.tsx b/frontend/src/components/CommandCenterHero.tsx new file mode 100644 index 0000000..a67391f --- /dev/null +++ b/frontend/src/components/CommandCenterHero.tsx @@ -0,0 +1,415 @@ +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 ( +
+
+
+
+ ) +} + +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 ( + <> +
+ {decal} +
+
● Live now
+

{sessionName}

+
+ {[focusMeeting.meeting_name, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')} +
+
+ {trackStatus.label} +
+
+ {topThree.length > 0 && ( +
+ {topThree.map((row) => ( +
+ + P{row.Position} + + + + {row.Info?.Tla ?? row.RacingNumber} + + + {row.Position === 1 ? 'LEAD' : row.Driver.Interval || row.Driver.GapToLeader || '—'} + +
+ ))} +
+ )} +
+
{liveActive ? 'SignalR' : 'On track'}
+
LIVE
+
{sessionName}
+
+
+
+ + Open Live Timing + +
+ + ) +} + +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 ( + <> +
+ {decal} +
+
{kindLabel}
+

{focusMeeting.meeting_name}

+
+ {[focusMeeting.location, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')} +
+
{formatGpDateRange(focusMeeting)}
+
+
+ {nextSession ? ( + <> +
Next · {nextSession.session_name}
+ {countdownTarget && ( +
{formatCountdown(countdownTarget, now)}
+ )} +
{formatSessionScheduleTime(nextSession.date_start)}
+ + ) : ( + <> +
Status
+
Complete
+
Weekend finished
+ + )} +
+
+ + {sortedSessions.length > 0 && ( +
+ {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 ( + +
+ {sessionTypeAbbrev(session.session_type, session.session_name)} +
+
{session.session_name}
+
+ {formatSessionScheduleTime(session.date_start)} +
+
+ {isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'} +
+ + ) + })} +
+ )} + +
+ + Watch Live + + {analysisSessionKey != null && ( + + Open Analysis + {analysisSessionName ? ` · ${analysisSessionName}` : ''} + + )} +
+ + ) +} + +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 ( + <> +
+
+
Between race weekends
+ {lastRaceName && ( +

+ After {lastRaceName} +

+ )} + {!lastRaceName &&

Season pause

} +
+ + {podium.length > 0 && ( +
+ {podium.map((r) => ( +
+ + P{r.position} + + + + {r.name_acronym} + +
+ ))} +
+ )} + + {nextMeeting && ( +
+
+ {countryFlag(nextMeeting) && ( + + )} +
+
Next GP
+
+ {nextMeeting.meeting_name} +
+
+
+ {nextStart && ( + <> +
+ {formatCountdown(nextStart, now)} +
+
{formatGpDateRange(nextMeeting)}
+ + )} +
+ )} +
+ +
+ {lastRaceSessionKey != null && ( + + View {lastRaceName || 'last race'} results → + + )} + {analysisSessionKey != null && analysisSessionKey !== lastRaceSessionKey && ( + + Open Analysis{analysisSessionName ? ` · ${analysisSessionName}` : ''} + + )} + + Live Timing → + +
+ + ) +} diff --git a/frontend/src/components/CompareView.tsx b/frontend/src/components/CompareView.tsx new file mode 100644 index 0000000..2328b09 --- /dev/null +++ b/frontend/src/components/CompareView.tsx @@ -0,0 +1,251 @@ +import { useEffect, useMemo, useRef, useState } from 'react' +import { useQuery } from '@tanstack/react-query' +import { fetchLapsComparison, fetchTelemetry } from '../api' +import { + buildBestLapTraceSeries, + compareDriverOptions, + comparisonToDeltaSeries, + defaultCompareDriverNumbers, + formatPitLapsCaption, +} from '../lib/compare' +import type { Driver, EnrichedResult } from '../types' +import { teamColor } from '../utils' +import { DriverCell } from './DriverCell' +import { TelemetryTraceChart } from './charts/TelemetryTraceChart' +import { DeltaTimeGraph } from './charts/DeltaTimeGraph' +import '../styles/compare-view.css' + +interface Props { + sessionKey: number + results: EnrichedResult[] + drivers: Driver[] +} + +function SectionState({ + loading, + error, + empty, + emptyMessage, + children, +}: { + loading: boolean + error: Error | null + empty: boolean + emptyMessage: string + children: React.ReactNode +}) { + if (loading) { + return
loading…
+ } + if (error) { + return
{error.message}
+ } + if (empty) { + return
{emptyMessage}
+ } + return <>{children} +} + +export function CompareView({ sessionKey, results, drivers }: Props) { + const driverOptions = useMemo( + () => compareDriverOptions(drivers, results), + [drivers, results], + ) + + const initialPair = useMemo( + () => defaultCompareDriverNumbers(results, drivers), + [results, drivers], + ) + + const previousSessionKey = useRef(sessionKey) + const [driverA, setDriverA] = useState(initialPair?.[0] ?? null) + const [driverB, setDriverB] = useState(initialPair?.[1] ?? null) + + useEffect(() => { + if (previousSessionKey.current !== sessionKey) { + previousSessionKey.current = sessionKey + setDriverA(initialPair?.[0] ?? null) + setDriverB(initialPair?.[1] ?? null) + return + } + + if (driverA != null && driverB != null) return + if (!initialPair) return + setDriverA(initialPair[0]) + setDriverB(initialPair[1]) + }, [sessionKey, initialPair, driverA, driverB]) + + const pair = useMemo((): [number, number] | null => { + if (driverA == null || driverB == null || driverA === driverB) return null + return [driverA, driverB] + }, [driverA, driverB]) + + const comparisonQuery = useQuery({ + queryKey: ['laps-comparison', sessionKey, pair?.[0], pair?.[1]], + queryFn: () => fetchLapsComparison(sessionKey, pair!), + enabled: pair != null, + staleTime: 60_000, + }) + + const telemetryAQuery = useQuery({ + queryKey: ['telemetry', sessionKey, pair?.[0]], + queryFn: () => fetchTelemetry(sessionKey, pair![0]), + enabled: pair != null, + staleTime: 60_000, + }) + + const telemetryBQuery = useQuery({ + queryKey: ['telemetry', sessionKey, pair?.[1]], + queryFn: () => fetchTelemetry(sessionKey, pair![1]), + enabled: pair != null, + staleTime: 60_000, + }) + + const comparison = comparisonQuery.data + const referenceLabel = useMemo(() => { + if (!pair) return undefined + const meta = comparison?.drivers.find((d) => d.driver_number === pair[0]) + const session = drivers.find((d) => d.driver_number === pair[0]) + return meta?.name_acronym || session?.name_acronym + }, [pair, comparison, drivers]) + + const deltaSeries = useMemo(() => { + if (!comparison || !pair) return [] + return comparisonToDeltaSeries(comparison, pair, drivers) + }, [comparison, pair, drivers]) + + const pitCaption = useMemo(() => { + if (!comparison || !pair) return null + return formatPitLapsCaption(comparison.pit_laps, pair, comparison, drivers) + }, [comparison, pair, drivers]) + + const traceSeries = useMemo(() => { + if (!pair || !comparison) return [] + const out = [] + + for (const dn of pair) { + const comp = comparison.drivers.find((d) => d.driver_number === dn) + const session = drivers.find((d) => d.driver_number === dn) + const label = comp?.name_acronym || session?.name_acronym || `#${dn}` + const color = teamColor(comp?.team_colour || session?.team_colour) + + const carData = + dn === pair[0] ? (telemetryAQuery.data ?? []) : (telemetryBQuery.data ?? []) + const series = buildBestLapTraceSeries(carData, comp?.laps ?? [], label, color) + if (series) out.push(series) + } + + return out + }, [pair, comparison, drivers, telemetryAQuery.data, telemetryBQuery.data]) + + const telemetryLoading = telemetryAQuery.isLoading || telemetryBQuery.isLoading + const telemetryError = telemetryAQuery.error ?? telemetryBQuery.error + + if (driverOptions.length < 2) { + return ( +
+ Need at least two drivers in this session to compare. +
+ ) + } + + const driverAInfo = driverOptions.find((d) => d.driver_number === driverA) + const driverBInfo = driverOptions.find((d) => d.driver_number === driverB) + + return ( +
+
+
+ Reference + + {driverAInfo && ( + + )} +
+ +
+ Challenger + + {driverBInfo && ( + + )} +
+
+ + {driverA === driverB && ( +
+ Pick two different drivers to run a comparison. +
+ )} + +
+
+
Best lap telemetry
+
+ Speed, throttle, and brake traces for each driver's fastest lap +
+
+ + + +
+ +
+
+
Race pace
+
+ Cumulative lap-time delta vs {referenceLabel ?? 'reference'} +
+
+ + + {pitCaption && ( +

+ {pitCaption} +

+ )} + +
+
+ ) +} diff --git a/frontend/src/components/Meaning.tsx b/frontend/src/components/Meaning.tsx new file mode 100644 index 0000000..9c5d470 --- /dev/null +++ b/frontend/src/components/Meaning.tsx @@ -0,0 +1,26 @@ +import type { ReactNode } from 'react' +import '../styles/meaning.css' + +export interface MeaningProps { + value: ReactNode + meaning?: string | null + /** Long-form explanation for the native tooltip; falls back to meaning. */ + title?: string | null + tone?: 'good' | 'bad' | 'neutral' | 'warn' +} + +export function Meaning({ value, meaning, title, tone }: MeaningProps) { + if (!meaning) { + return <>{value} + } + + const tooltip = title ?? meaning + const toneClass = tone ? `meaning-caption--${tone}` : '' + + return ( + + {value} + {meaning} + + ) +} diff --git a/frontend/src/components/StrategyView.tsx b/frontend/src/components/StrategyView.tsx index 3dee6a4..4904fd8 100644 --- a/frontend/src/components/StrategyView.tsx +++ b/frontend/src/components/StrategyView.tsx @@ -1,28 +1,9 @@ import type { EnrichedResult, Stint, PitStop } from '../types' import { compareFinishPosition } from '../utils' - -const COMPOUND_COLORS: Record = { - SOFT: '#e8002d', - MEDIUM: '#ffd600', - HARD: '#e8e8e4', - INTERMEDIATE: '#39b54a', - WET: '#0067ff', -} - -function compoundColor(c: string): string { - return COMPOUND_COLORS[c.toUpperCase()] ?? '#666' -} - -function compoundInitial(c: string): string { - const abbr: Record = { - SOFT: 'S', - MEDIUM: 'M', - HARD: 'H', - INTERMEDIATE: 'I', - WET: 'W', - } - return abbr[c.toUpperCase()] ?? c[0] ?? '?' -} +import { + TyreStintTimeline, + type StintTimelineRow, +} from './charts/TyreStintTimeline' interface Props { results: EnrichedResult[] @@ -31,7 +12,7 @@ interface Props { hasStints: boolean } -export function StrategyView({ results, stints, pit_stops, hasStints }: Props) { +export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints }: Props) { if (!hasStints) { return (
@@ -89,147 +70,29 @@ export function StrategyView({ results, stints, pit_stops, hasStints }: Props) { const cmp = compareFinishPosition(a.position, b.position) return cmp !== 0 ? cmp : a.driver_number - b.driver_number }) + const totalLaps = Math.max( ...stints.map((s) => s.lap_end), ...results.map((r) => r.number_of_laps), - 1 + 1, ) - const SVG_W = 640 - const LEFT = 48 - const RIGHT = 12 - const ROW_H = 28 - const BAR_H = 14 - const BAR_Y = 7 - const BAR_W = SVG_W - LEFT - RIGHT - const SVG_H = sortedDrivers.length * ROW_H + 8 - - const lapX = (lap: number) => LEFT + ((lap - 1) / totalLaps) * BAR_W - const stintW = (s: Stint) => - Math.max(2, ((s.lap_end - s.lap_start + 1) / totalLaps) * BAR_W) - - const usedCompounds = [...new Set(stints.map((s) => s.compound.toUpperCase()))].filter( - (c) => c in COMPOUND_COLORS - ) + const timelineRows: StintTimelineRow[] = sortedDrivers.map((driver) => ({ + label: driver.name_acronym || String(driver.driver_number), + color: driver.team_colour ? `#${driver.team_colour}` : '#888', + stints: stints + .filter((s) => s.driver_number === driver.driver_number) + .map((s) => ({ + compound: s.compound, + lapStart: s.lap_start, + lapEnd: s.lap_end, + isNew: s.tyre_age_at_start === 0, + })), + })) return (
-
- - {sortedDrivers.map((driver, i) => { - const rowY = i * ROW_H - const color = driver.team_colour ? `#${driver.team_colour}` : '#888' - const dStints = stints.filter((s) => s.driver_number === driver.driver_number) - const dPits = pit_stops.filter((p) => p.driver_number === driver.driver_number) - - return ( - - - {driver.name_acronym} - - - {dStints.map((stint, si) => { - const x = lapX(stint.lap_start) - const w = stintW(stint) - const fill = compoundColor(stint.compound) - return ( - - - {w > 18 && ( - - {compoundInitial(stint.compound)} - - )} - - ) - })} - - {dPits.map((pit, pi) => { - const x = lapX(pit.lap_number) - return ( - - ) - })} - - ) - })} - -
- -
- {usedCompounds.map((c) => ( - - - {c.charAt(0) + c.slice(1).toLowerCase()} - - ))} - {pit_stops.length > 0 && ( - - - Pit stop - - )} - - {totalLaps} laps - -
+
) } diff --git a/frontend/src/components/TabBar.tsx b/frontend/src/components/TabBar.tsx index 41707f3..5d1678c 100644 --- a/frontend/src/components/TabBar.tsx +++ b/frontend/src/components/TabBar.tsx @@ -2,6 +2,7 @@ export type Tab = | 'overview' | 'race_story' | 'strategy' + | 'compare' | 'lap_data' | 'conditions' | 'race_control' @@ -11,6 +12,7 @@ const TABS: { id: Tab; label: string }[] = [ { id: 'overview', label: 'Overview' }, { id: 'race_story', label: 'Race Story' }, { id: 'strategy', label: 'Strategy' }, + { id: 'compare', label: 'Compare' }, { id: 'lap_data', label: 'Lap Data' }, { id: 'conditions', label: 'Conditions' }, { id: 'race_control', label: 'Race Control' }, diff --git a/frontend/src/components/charts/DeltaTimeGraph.tsx b/frontend/src/components/charts/DeltaTimeGraph.tsx new file mode 100644 index 0000000..c4e840f --- /dev/null +++ b/frontend/src/components/charts/DeltaTimeGraph.tsx @@ -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): number { + return series.reduce((max, s) => Math.max(max, s.lapTimes.length), 0) +} + +function yExtent(drivers: ReadonlyArray): { 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(null) + const [hoverLap, setHoverLap] = useState(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 | React.MouseEvent) => { + 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 ( +
+

No lap data to compare.

+
+ ) + } + + if (drivers.length === 0) { + return ( +
+

Select at least two drivers to compare.

+
+ ) + } + + 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 ( +
+ + {yTicks.map((tick) => ( + + + + {formatDeltaSeconds(tick)} + + + ))} + + {lapTickNumbers.map((lap) => { + const x = toX(lap - 1) + return ( + + + + {lap} + + + ) + })} + + {drivers.map((driver) => { + const segments = deltaPolylineSegments(driver.deltas, (lapIndex, delta) => + `${toX(lapIndex).toFixed(1)},${toY(delta).toFixed(1)}`, + ) + return ( + + {segments.map((points, i) => ( + + ))} + + ) + })} + + {hoverX !== null && ( + <> + + {tooltipRows.length > 0 && ( + + + + Lap {hoverLap! + 1} + + {tooltipRows.map((row, i) => ( + + {row.label} {formatDeltaSeconds(row.delta)} + + ))} + + )} + + )} + + + +
+ ) +} diff --git a/frontend/src/components/charts/TelemetryTraceChart.tsx b/frontend/src/components/charts/TelemetryTraceChart.tsx new file mode 100644 index 0000000..90d446f --- /dev/null +++ b/frontend/src/components/charts/TelemetryTraceChart.tsx @@ -0,0 +1,194 @@ +import { useMemo, useRef, useState } from 'react' +import '../../styles/telemetry-trace.css' + +export interface TelemetryTraceSample { + speed: number + throttle: number + brake: number +} + +export interface TelemetryTraceSeries { + label: string + color: string + samples: TelemetryTraceSample[] +} + +export type TelemetryTraceChannel = 'speed' | 'throttle' | 'brake' + +export interface TelemetryTraceChartProps { + series: TelemetryTraceSeries[] + channels?: TelemetryTraceChannel[] + /** Height of each channel panel in SVG units (viewBox space). */ + height?: number +} + +const VIEW_WIDTH = 800 +const PANEL_GAP = 18 +const PAD_TOP = 6 +const PAD_BOTTOM = 6 + +const CHANNEL_LABELS: Record = { + speed: 'Speed', + throttle: 'Throttle', + brake: 'Brake', +} + +const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v)) + +function channelValue(sample: TelemetryTraceSample, channel: TelemetryTraceChannel): number { + const raw = sample[channel] + // Throttle/brake are percentages; clamp so out-of-range API values can't + // draw outside the panel. Speed is clamped to >= 0. + if (channel === 'speed') return Math.max(0, raw) + return clamp(raw, 0, 100) +} + +function formatValue(value: number, channel: TelemetryTraceChannel): string { + if (channel === 'speed') return `${Math.round(value)} km/h` + return `${Math.round(value)}%` +} + +export function TelemetryTraceChart({ + series, + channels = ['speed', 'throttle', 'brake'], + height = 110, +}: TelemetryTraceChartProps) { + const svgRef = useRef(null) + const [hoverIndex, setHoverIndex] = useState(null) + + // Series are index-aligned; mismatched lengths are clamped to the shortest + // series so every drawn x has a value for every driver. + const sampleCount = useMemo( + () => (series.length === 0 ? 0 : Math.min(...series.map((s) => s.samples.length))), + [series], + ) + + const speedMax = useMemo(() => { + let max = 0 + for (const s of series) { + for (let i = 0; i < sampleCount; i++) { + max = Math.max(max, channelValue(s.samples[i], 'speed')) + } + } + return max > 0 ? max : 1 + }, [series, sampleCount]) + + if (series.length === 0 || sampleCount === 0 || channels.length === 0) { + return
No telemetry data
+ } + + // Clamp a stale hover index in case the series prop shrank between renders. + const hover = hoverIndex === null ? null : Math.min(hoverIndex, sampleCount - 1) + + const panelHeight = height + const totalHeight = channels.length * panelHeight + (channels.length - 1) * PANEL_GAP + const xAt = (i: number) => (i / Math.max(1, sampleCount - 1)) * VIEW_WIDTH + + const channelMax = (channel: TelemetryTraceChannel) => (channel === 'speed' ? speedMax : 100) + + const yAt = (value: number, channel: TelemetryTraceChannel, panelTop: number) => { + const usable = panelHeight - PAD_TOP - PAD_BOTTOM + const frac = channelValue({ speed: value, throttle: value, brake: value }, channel) / channelMax(channel) + return panelTop + PAD_TOP + (1 - frac) * usable + } + + const handleMouseMove = (e: React.MouseEvent) => { + const rect = svgRef.current?.getBoundingClientRect() + if (!rect || rect.width === 0) { + setHoverIndex(0) + return + } + const frac = clamp((e.clientX - rect.left) / rect.width, 0, 1) + setHoverIndex(clamp(Math.round(frac * (sampleCount - 1)), 0, sampleCount - 1)) + } + + return ( +
+
+ {series.map((s) => ( + + + ))} +
+ setHoverIndex(null)} + > + {channels.map((channel, panelIdx) => { + const panelTop = panelIdx * (panelHeight + PANEL_GAP) + return ( + + + + {CHANNEL_LABELS[channel]} + + + {channel === 'speed' ? `${Math.round(speedMax)} km/h` : '100%'} + + {series.map((s) => { + const points = Array.from({ length: sampleCount }, (_, i) => { + const x = xAt(i) + const y = yAt(s.samples[i][channel], channel, panelTop) + return `${x.toFixed(2)},${y.toFixed(2)}` + }).join(' ') + return ( + + ) + })} + + ) + })} + {hover !== null && ( + + )} + + {hover !== null && ( +
+ Sample {hover} + {series.map((s) => ( + + + ))} +
+ )} +
+ ) +} diff --git a/frontend/src/components/charts/TyreStintTimeline.tsx b/frontend/src/components/charts/TyreStintTimeline.tsx new file mode 100644 index 0000000..731574c --- /dev/null +++ b/frontend/src/components/charts/TyreStintTimeline.tsx @@ -0,0 +1,182 @@ +import { compoundClass } from '../../lib/live' +import '../../styles/stint-timeline.css' + +export interface StintTimelineStint { + compound: string + lapStart: number + lapEnd: number + isNew?: boolean +} + +export interface StintTimelineRow { + label: string + color: string + stints: StintTimelineStint[] +} + +interface TyreStintTimelineProps { + rows: StintTimelineRow[] + totalLaps: number +} + +const SVG_W = 640 +const LEFT = 48 +const RIGHT = 12 +const ROW_H = 28 +const BAR_H = 14 +const BAR_Y = 7 +const AXIS_H = 20 +const BAR_W = SVG_W - LEFT - RIGHT + +const COMPOUND_ORDER = ['SOFT', 'MEDIUM', 'HARD', 'INTERMEDIATE', 'WET'] as const + +function compoundLabel(compound: string): string { + const upper = compound.toUpperCase() + if (upper === 'INTERMEDIATE') return 'Intermediate' + return upper.charAt(0) + upper.slice(1).toLowerCase() +} + +function stintLength(stint: StintTimelineStint): number { + return stint.lapEnd - stint.lapStart + 1 +} + +function stintTitle(stint: StintTimelineStint): string { + const length = stintLength(stint) + return `${compoundLabel(stint.compound)} · L${stint.lapStart}–${stint.lapEnd} · ${length} lap${length === 1 ? '' : 's'}` +} + +function lapX(lap: number, totalLaps: number): number { + return LEFT + (lap / totalLaps) * BAR_W +} + +function stintBarX(stint: StintTimelineStint, totalLaps: number): number { + return LEFT + ((stint.lapStart - 1) / totalLaps) * BAR_W +} + +function stintBarW(stint: StintTimelineStint, totalLaps: number): number { + return Math.max(2, (stintLength(stint) / totalLaps) * BAR_W) +} + +function axisTicks(totalLaps: number): number[] { + const ticks: number[] = [] + for (let lap = 0; lap <= totalLaps; lap += 10) { + ticks.push(lap) + } + return ticks +} + +function collectUsedCompounds(rows: StintTimelineRow[]): string[] { + const seen = new Set() + for (const row of rows) { + for (const stint of row.stints) { + seen.add(stint.compound.toUpperCase()) + } + } + const ordered = COMPOUND_ORDER.filter((c) => seen.has(c)) + const extras = [...seen] + .filter((c) => !COMPOUND_ORDER.includes(c as (typeof COMPOUND_ORDER)[number])) + .sort() + return [...ordered, ...extras] +} + +export function TyreStintTimeline({ rows, totalLaps }: TyreStintTimelineProps) { + const safeTotal = Math.max(totalLaps, 1) + const usedCompounds = collectUsedCompounds(rows) + const ticks = axisTicks(safeTotal) + const chartH = rows.length * ROW_H + const svgH = chartH + AXIS_H + 4 + + if (rows.length === 0) { + return ( +
+
No stint data to display.
+
+ ) + } + + return ( +
+
+ + {rows.map((row, i) => { + const rowY = i * ROW_H + return ( + + + {row.label} + + + {row.stints.map((stint, si) => ( + + {stintTitle(stint)} + + ))} + + ) + })} + + + + {ticks.map((lap) => ( + + + + {lap} + + + ))} + + +
+ +
+ {usedCompounds.map((compound) => ( + + + {compoundLabel(compound)} + + ))} + {safeTotal} laps +
+
+ ) +} diff --git a/frontend/src/components/live/EventRail.tsx b/frontend/src/components/live/EventRail.tsx new file mode 100644 index 0000000..c8fa6c1 --- /dev/null +++ b/frontend/src/components/live/EventRail.tsx @@ -0,0 +1,72 @@ +import { useAutoAnimate } from '@formkit/auto-animate/react' +import { + Flag, + LogOut, + Megaphone, + OctagonX, + Swords, + Timer, + TrendingDown, + TrendingUp, + Wrench, + Zap, +} from 'lucide-react' +import type { LucideIcon } from 'lucide-react' +import type { LiveDriverInfo } from '../../types' +import type { LiveEvent, LiveEventKind } from '../../lib/events' +import { teamColor } from '../../utils' +import '../../styles/event-rail.css' + +interface Props { + events: LiveEvent[] + driverInfo?: Record +} + +const KIND_ICONS: Record = { + overtake: Swords, + 'position-gain': TrendingUp, + 'position-loss': TrendingDown, + 'pit-in': Wrench, + 'pit-out': LogOut, + 'personal-best': Timer, + 'fastest-lap': Zap, + retirement: OctagonX, + 'track-status': Flag, + 'race-control': Megaphone, +} + +export function EventRail({ events, driverInfo }: Props) { + const [listRef] = useAutoAnimate() + + return ( +
+
+ What Just Happened + {events.length > 0 && {events.length} events} +
+ {events.length === 0 ? ( +
Events will appear here as the session unfolds.
+ ) : ( +
+ {events.map((event) => { + const Icon = KIND_ICONS[event.kind] ?? Megaphone + const colour = driverInfo?.[event.racingNumbers[0]]?.TeamColour + const accent = event.racingNumbers.length > 0 ? teamColor(colour) : 'var(--border-2)' + return ( +
+ +
+ {event.headline} + {event.detail && {event.detail}} +
+ {event.lap > 0 && L{event.lap}} +
+ ) + })} +
+ )} +
+ ) +} diff --git a/frontend/src/components/live/TeamRadioTicker.tsx b/frontend/src/components/live/TeamRadioTicker.tsx new file mode 100644 index 0000000..459e299 --- /dev/null +++ b/frontend/src/components/live/TeamRadioTicker.tsx @@ -0,0 +1,108 @@ +import { useMemo, useRef, useState } from 'react' +import { Pause, Play } from 'lucide-react' +import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../../types' +import { radioCaptureKey, radioClipUrl } from '../../lib/radio' +import { teamColor } from '../../utils' +import '../../styles/team-radio.css' + +interface Props { + captures?: LiveRadioCapture[] + driverInfo?: Record + session?: LiveSessionMeta +} + +function relativeTime(utc: string): string { + const timestamp = new Date(utc).getTime() + if (!utc || Number.isNaN(timestamp)) return '--' + + const diffSeconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000)) + if (diffSeconds < 60) return `${diffSeconds}s ago` + const minutes = Math.floor(diffSeconds / 60) + if (minutes < 60) return `${minutes}m ago` + const hours = Math.floor(minutes / 60) + if (hours < 24) return `${hours}h ago` + return new Date(utc).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) +} + +function driverLabel(info: LiveDriverInfo | undefined, racingNumber: string): string { + return info?.Tla || racingNumber +} + +export function TeamRadioTicker({ captures = [], driverInfo = {}, session }: Props) { + const audioRef = useRef(null) + const [playingKey, setPlayingKey] = useState(null) + + const newestFirst = useMemo(() => [...captures].reverse(), [captures]) + + const toggleCapture = (capture: LiveRadioCapture) => { + const key = radioCaptureKey(capture) + const audio = audioRef.current + const url = radioClipUrl(session, capture) + if (!audio || !url) return + + if (playingKey === key) { + audio.pause() + setPlayingKey(null) + return + } + + audio.pause() + audio.src = url + setPlayingKey(key) + const play = audio.play() + if (play) { + play.catch(() => setPlayingKey(null)) + } + } + + return ( +
+
+ Team Radio + {captures.length > 0 && {captures.length} clips} +
+ +
+ ) +} diff --git a/frontend/src/components/live/TimingTower.tsx b/frontend/src/components/live/TimingTower.tsx index b20810b..0b38dcd 100644 --- a/frontend/src/components/live/TimingTower.tsx +++ b/frontend/src/components/live/TimingTower.tsx @@ -12,6 +12,9 @@ import { tyreLabel, } from '../../lib/live' import type { GapHistoryMap } from '../../lib/gapHistory' +import { parseIntervalSeconds } from '../../lib/gapHistory' +import { intervalMeaning } from '../../lib/meaning' +import { Meaning } from '../Meaning' import { GapSparkline } from './GapSparkline' import { StintHistory } from './StintHistory' import { Pin } from 'lucide-react' @@ -100,7 +103,11 @@ export function TimingTower({ const showCutoffAfter = row.Position === sessionDisplay.cutoffPosition const gapText = gapMode === 'interval' && isRace ? (driver.Interval || driver.GapToLeader) : driver.GapToLeader - + const intervalAnnotation = + gapMode === 'interval' && isRace && row.Position > 1 + ? intervalMeaning(parseIntervalSeconds(gapText)) + : null + const renderSector = (idx: number) => { const sec = driver.Sectors?.[idx] if (!sec) return '-' @@ -149,7 +156,14 @@ export function TimingTower({ {driver.LastLapTime || '-'} - {gapText || '-'} + + + {isRace && ( diff --git a/frontend/src/components/live/TyreDegPanel.tsx b/frontend/src/components/live/TyreDegPanel.tsx new file mode 100644 index 0000000..3c15f74 --- /dev/null +++ b/frontend/src/components/live/TyreDegPanel.tsx @@ -0,0 +1,140 @@ +import { useEffect, useMemo, useState } from 'react' +import { teamColor } from '../../utils' +import type { LiveTimingRow } from '../../lib/live' +import { compoundClass, driverCode, tyreLabel } from '../../lib/live' +import { sparklinePoints } from '../../lib/gapHistory' +import { isRaceSession } from '../../lib/battles' +import type { StintHistoryMap } from '../../lib/tyredeg' +import { + PIT_LOSS_SECONDS, + degradationModel, + estimatePitRejoin, + formatSlope, + recordStintSamples, + stintInputFromRow, +} from '../../lib/tyredeg' +import { tyreAgeMeaning } from '../../lib/meaning' +import { Meaning } from '../Meaning' +import '../../styles/tyredeg.css' + +const TOP_DRIVER_COUNT = 10 +const SPARK_WIDTH = 64 +const SPARK_HEIGHT = 16 + +interface Props { + rows: LiveTimingRow[] + sessionType: string | undefined + pinned: string[] +} + +function StintSparkline({ seconds }: { seconds: number[] }) { + if (seconds.length < 2) return · + const points = sparklinePoints(seconds, SPARK_WIDTH, SPARK_HEIGHT) + return ( + + ) +} + +export function TyreDegPanel({ rows, sessionType, pinned }: Props) { + const [collapsed, setCollapsed] = useState(false) + const [stints, setStints] = useState({}) + + // One lap-history update per received snapshot (rows is rebuilt per snapshot). + useEffect(() => { + if (rows.length === 0) return + setStints((prev) => recordStintSamples(prev, rows.map(stintInputFromRow))) + }, [rows]) + + const isRace = isRaceSession(sessionType) + + const visible = useMemo( + () => + rows.filter( + (row) => + row.Position > 0 && + !row.Driver.Retired && + (row.Position <= TOP_DRIVER_COUNT || pinned.includes(row.RacingNumber)), + ), + [rows, pinned], + ) + + if (visible.length === 0) return null + + return ( +
+ + + {!collapsed && ( +
+ {visible.map((row) => { + const model = degradationModel(stints[row.RacingNumber]?.samples ?? []) + const rejoin = isRace ? estimatePitRejoin(rows, row.RacingNumber) : null + const ageAnnotation = tyreAgeMeaning(row.Tyre?.Compound, row.Tyre?.Age) + return ( +
+ P{row.Position} + + {driverCode(row)} + + + + {model ? ( + <> + + sample.seconds)} /> + + + {formatSlope(model.slope)} + + + ) : ( + warming up + )} + {rejoin && ( + + → ~P{rejoin.rejoinPosition} + {rejoin.aheadCode && rejoin.behindCode && ( + + {rejoin.aheadCode} · {rejoin.behindCode} + + )} + + )} +
+ ) + })} +
+ )} +
+ ) +} diff --git a/frontend/src/lib/compare.ts b/frontend/src/lib/compare.ts new file mode 100644 index 0000000..9209b7e --- /dev/null +++ b/frontend/src/lib/compare.ts @@ -0,0 +1,202 @@ +// Driver comparison mapping — pure functions for telemetry traces and lap deltas. + +import type { TelemetryTraceSeries } from '../components/charts/TelemetryTraceChart' +import type { DeltaSeries } from '../lib/delta' +import type { + CarDataSample, + ComparisonLap, + Driver, + EnrichedResult, + LapsComparisonResponse, +} from '../types' +import { compareFinishPosition, teamColor } from '../utils' + +function sortDriversByResults(drivers: Driver[], results: EnrichedResult[]): Driver[] { + const order = new Map( + [...results] + .filter((r) => r.position > 0) + .sort((a, b) => compareFinishPosition(a.position, b.position)) + .map((r, i) => [r.driver_number, i]), + ) + return [...drivers].sort((a, b) => { + const ao = order.get(a.driver_number) ?? 999 + const bo = order.get(b.driver_number) ?? 999 + if (ao !== bo) return ao - bo + return a.driver_number - b.driver_number + }) +} + +/** Default compare pair: top two classified finishers, else first two session drivers. */ +export function defaultCompareDriverNumbers( + results: EnrichedResult[], + drivers: Driver[], +): [number, number] | null { + const classified = [...results] + .filter((r) => r.position > 0) + .sort((a, b) => compareFinishPosition(a.position, b.position)) + + if (classified.length >= 2) { + return [classified[0].driver_number, classified[1].driver_number] + } + + if (drivers.length >= 2) { + const sorted = sortDriversByResults(drivers, results) + return [sorted[0].driver_number, sorted[1].driver_number] + } + + if (classified.length === 1 && drivers.length >= 1) { + const other = drivers.find((d) => d.driver_number !== classified[0].driver_number) + if (other) return [classified[0].driver_number, other.driver_number] + } + + return null +} + +/** Lap records → per-lap duration array (index 0 = lap 1); null for pit/out laps. */ +export function lapsToLapTimes(laps: ComparisonLap[]): (number | null)[] { + if (laps.length === 0) return [] + + const maxLap = laps.reduce((max, lap) => Math.max(max, lap.lap_number), 0) + const times: (number | null)[] = Array.from({ length: maxLap }, () => null) + + for (const lap of laps) { + const idx = lap.lap_number - 1 + if (idx < 0) continue + if (lap.is_pit_out_lap || lap.lap_duration == null || lap.lap_duration <= 0) { + times[idx] = null + } else { + times[idx] = lap.lap_duration + } + } + + return times +} + +export function findBestLap(laps: ComparisonLap[]): ComparisonLap | null { + let best: ComparisonLap | null = null + for (const lap of laps) { + if (lap.lap_duration == null || lap.lap_duration <= 0) continue + if (!best || (best.lap_duration ?? Infinity) > lap.lap_duration) { + best = lap + } + } + return best +} + +/** Keep car-data samples whose timestamps fall within a lap window. */ +export function filterCarDataToLap( + samples: CarDataSample[], + lap: ComparisonLap, +): CarDataSample[] { + if (!lap.date_start || samples.length === 0) return samples + + const start = new Date(lap.date_start).getTime() + if (!Number.isFinite(start)) return samples + + const end = start + (lap.lap_duration ?? 0) * 1000 + 500 + + return samples.filter((s) => { + const t = new Date(s.date).getTime() + return Number.isFinite(t) && t >= start && t <= end + }) +} + +export function carDataToTraceSeries( + samples: CarDataSample[], + label: string, + color: string, +): TelemetryTraceSeries { + return { + label, + color, + samples: samples.map((s) => ({ + speed: s.speed, + throttle: s.throttle, + brake: s.brake, + })), + } +} + +export function buildBestLapTraceSeries( + carData: CarDataSample[], + laps: ComparisonLap[], + label: string, + color: string, +): TelemetryTraceSeries | null { + const best = findBestLap(laps) + if (!best) return null + + const filtered = filterCarDataToLap(carData, best) + if (filtered.length === 0) return null + + return carDataToTraceSeries(filtered, label, color) +} + +function driverMeta( + driverNumber: number, + comparison: LapsComparisonResponse | undefined, + drivers: Driver[], +): { label: string; color: string; laps: ComparisonLap[] } { + const comp = comparison?.drivers.find((d) => d.driver_number === driverNumber) + const session = drivers.find((d) => d.driver_number === driverNumber) + return { + label: comp?.name_acronym || session?.name_acronym || `#${driverNumber}`, + color: teamColor(comp?.team_colour || session?.team_colour), + laps: comp?.laps ?? [], + } +} + +export function comparisonToDeltaSeries( + comparison: LapsComparisonResponse, + driverNumbers: [number, number], + drivers: Driver[], +): DeltaSeries[] { + return driverNumbers.map((dn) => { + const meta = driverMeta(dn, comparison, drivers) + return { + label: meta.label, + color: meta.color, + lapTimes: lapsToLapTimes(meta.laps), + } + }) +} + +export function formatPitLapsCaption( + pitLaps: Record, + driverNumbers: [number, number], + comparison: LapsComparisonResponse | undefined, + drivers: Driver[], +): string | null { + const parts: string[] = [] + + for (const dn of driverNumbers) { + const laps = pitLaps[String(dn)] + if (!laps?.length) continue + const meta = driverMeta(dn, comparison, drivers) + parts.push(`${meta.label}: L${laps.join(', L')}`) + } + + return parts.length > 0 ? `Pit stops — ${parts.join(' · ')}` : null +} + +export function compareDriverOptions( + drivers: Driver[], + results: EnrichedResult[], +): Driver[] { + if (drivers.length > 0) { + return sortDriversByResults(drivers, results) + } + return results.map((r) => ({ + driver_number: r.driver_number, + name_acronym: r.name_acronym, + full_name: r.full_name, + first_name: '', + last_name: '', + team_name: r.team_name, + team_colour: r.team_colour, + headshot_url: '', + broadcast_name: r.full_name, + session_key: r.session_key, + meeting_key: r.meeting_key, + })) +} diff --git a/frontend/src/lib/delta.ts b/frontend/src/lib/delta.ts new file mode 100644 index 0000000..eb8fc64 --- /dev/null +++ b/frontend/src/lib/delta.ts @@ -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[] { + 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, + 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, + 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, + 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 +} diff --git a/frontend/src/lib/events.ts b/frontend/src/lib/events.ts new file mode 100644 index 0000000..3f1db43 --- /dev/null +++ b/frontend/src/lib/events.ts @@ -0,0 +1,318 @@ +// "What just happened" event synthesis for the live page. +// Pure functions only — no React, no side effects — so everything is unit-testable. +// Mirrors the gapHistory/battles precedent: successive LiveStreamData snapshots +// in, typed events out; the page owns the buffer, this module owns the diffing. + +import type { + LiveDriverData, + LiveRCMessage, + LiveSessionMeta, + LiveStreamData, +} from '../types' + +export const MAX_EVENTS = 30 + +export type LiveEventKind = + | 'overtake' + | 'position-gain' + | 'position-loss' + | 'pit-in' + | 'pit-out' + | 'personal-best' + | 'fastest-lap' + | 'retirement' + | 'track-status' + | 'race-control' + +export interface LiveEvent { + id: string + kind: LiveEventKind + lap: number + timestamp: string + headline: string + detail?: string + racingNumbers: string[] +} + +/** + * Identity of the running session, used to reset the event buffer when a new + * session starts. LiveSessionMeta carries no numeric session key, so the + * meeting + session name/type triple stands in for one. + */ +export function sessionSignature(session: LiveSessionMeta | null | undefined): string { + if (!session) return '' + return [session.MeetingName, session.SessionName, session.SessionType].join('|') +} + +/** + * Prepend freshly diffed events onto the newest-first buffer, dropping any + * whose id is already present (re-renders and replayed diffs must not + * duplicate) and evicting the oldest events beyond `cap`. + */ +export function appendEvents( + buffer: ReadonlyArray, + incoming: ReadonlyArray, + cap = MAX_EVENTS, +): LiveEvent[] { + const seen = new Set(buffer.map((event) => event.id)) + const fresh = incoming.filter((event) => { + if (seen.has(event.id)) return false + seen.add(event.id) + return true + }) + if (fresh.length === 0) return [...buffer] + // Within one diff the array is oldest-first; reverse so the last-produced + // event ends up at the top of the newest-first rail. + return [...fresh.reverse(), ...buffer].slice(0, cap) +} + +const TRACK_STATUS_HEADLINES: Record = { + '1': 'Green flag — track clear', + '2': 'Yellow flag', + '4': 'Safety Car deployed', + '5': 'Red flag — session stopped', + '6': 'Virtual Safety Car deployed', + '7': 'Virtual Safety Car ending', +} + +const RC_CATEGORIES = new Set(['flag', 'safetycar', 'drs']) + +/** + * Diff two successive live snapshots into a chronological list of synthesized + * events. Callers are expected to feed genuinely consecutive snapshots of the + * same session; diffing across a session boundary is the caller's job to + * prevent (see sessionSignature). + */ +export function diffSnapshots(prev: LiveStreamData, next: LiveStreamData): LiveEvent[] { + if (!prev || !next || prev === next) return [] + + const events: LiveEvent[] = [] + const lap = next.CurrentLap || 0 + const timestamp = next.Clock || '' + const code = (racingNumber: string): string => + next.DriverInfo?.[racingNumber]?.Tla || + prev.DriverInfo?.[racingNumber]?.Tla || + `#${racingNumber}` + + diffTrackStatus(prev, next, lap, timestamp, events) + diffRaceControl(prev, next, events) + + const prevDrivers = prev.Drivers ?? {} + const nextDrivers = next.Drivers ?? {} + const numbers = Object.keys(nextDrivers).filter((number) => prevDrivers[number]) + + // Racing numbers whose position loss is already explained by an overtake + // event, so we don't also report a generic "drops to Pn". + const overtakenNumbers = new Set() + + for (const number of numbers) { + const before = prevDrivers[number] + const after = nextDrivers[number] + + if (!before.Retired && after.Retired) { + events.push({ + id: `ret:${number}`, + kind: 'retirement', + lap, + timestamp, + headline: `${code(number)} retires`, + detail: before.Position > 0 ? `Was running P${before.Position}` : undefined, + racingNumbers: [number], + }) + } + + if (!before.InPit && after.InPit && !after.Retired) { + const fromPosition = before.Position > 0 ? ` from P${before.Position}` : '' + events.push({ + id: `pit-in:${number}:l${lap}`, + kind: 'pit-in', + lap, + timestamp, + headline: `${code(number)} pits${fromPosition}`, + racingNumbers: [number], + }) + } + + if (before.InPit && !after.InPit && !after.Retired) { + const compound = next.Tyres?.[number]?.Compound || '' + const stops = Math.max(0, (next.Stints?.[number]?.length ?? 0) - 1) + const parts = [compound, stops > 0 ? `${ordinal(stops)} stop` : ''].filter(Boolean) + const rejoined = after.Position > 0 ? ` P${after.Position}` : '' + events.push({ + id: `pit-out:${number}:l${lap}`, + kind: 'pit-out', + lap, + timestamp, + headline: `${code(number)} rejoins${rejoined}${parts.length > 0 ? ` (${parts.join(', ')})` : ''}`, + racingNumbers: [number], + }) + } + + diffBestLap(number, before, after, code, lap, timestamp, events) + } + + // Position gains, with overtake attribution via position swaps. + for (const number of numbers) { + const before = prevDrivers[number] + const after = nextDrivers[number] + if (before.Position <= 0 || after.Position <= 0) continue + if (after.Position >= before.Position) continue + if (after.InPit || after.Retired) continue + + const overtaken = numbers.find((other) => { + if (other === number) return false + const otherBefore = prevDrivers[other] + const otherAfter = nextDrivers[other] + return ( + otherBefore.Position === after.Position && + otherAfter.Position > otherBefore.Position && + !otherAfter.InPit && + !otherAfter.Retired + ) + }) + + if (overtaken) { + overtakenNumbers.add(overtaken) + events.push({ + id: `overtake:${number}:${overtaken}:p${after.Position}:l${lap}`, + kind: 'overtake', + lap, + timestamp, + headline: `${code(number)} overtakes ${code(overtaken)} for P${after.Position}`, + detail: before.Position - after.Position > 1 ? `Up from P${before.Position}` : undefined, + racingNumbers: [number, overtaken], + }) + } else { + events.push({ + id: `pos:${number}:${before.Position}-${after.Position}:l${lap}`, + kind: 'position-gain', + lap, + timestamp, + headline: `${code(number)} moves up to P${after.Position} (from P${before.Position})`, + racingNumbers: [number], + }) + } + } + + // Position losses not already explained by an overtake or a pit visit. + for (const number of numbers) { + const before = prevDrivers[number] + const after = nextDrivers[number] + if (before.Position <= 0 || after.Position <= 0) continue + if (after.Position <= before.Position) continue + if (overtakenNumbers.has(number)) continue + if (after.InPit || after.PitOut || after.Retired || before.InPit) continue + + events.push({ + id: `pos:${number}:${before.Position}-${after.Position}:l${lap}`, + kind: 'position-loss', + lap, + timestamp, + headline: `${code(number)} drops to P${after.Position} (from P${before.Position})`, + racingNumbers: [number], + }) + } + + return events +} + +function diffTrackStatus( + prev: LiveStreamData, + next: LiveStreamData, + lap: number, + timestamp: string, + events: LiveEvent[], +): void { + if (!prev.TrackStatus || !next.TrackStatus) return + if (prev.TrackStatus === next.TrackStatus) return + events.push({ + id: `track:${next.TrackStatus}:l${lap}`, + kind: 'track-status', + lap, + timestamp, + headline: TRACK_STATUS_HEADLINES[next.TrackStatus] ?? `Track status ${next.TrackStatus}`, + racingNumbers: [], + }) +} + +function diffRaceControl(prev: LiveStreamData, next: LiveStreamData, events: LiveEvent[]): void { + const prevMessages = prev.RCMessages ?? [] + const seen = new Set(prevMessages.map(rcMessageKey)) + for (const message of next.RCMessages ?? []) { + if (!message.Message || seen.has(rcMessageKey(message))) continue + if (!RC_CATEGORIES.has((message.Category || '').toLowerCase())) continue + events.push({ + id: `rc:${rcMessageKey(message)}`, + kind: 'race-control', + lap: message.Lap || 0, + timestamp: message.Time || '', + headline: humanizeRaceControl(message.Message), + racingNumbers: carNumbersIn(message.Message), + }) + } +} + +function diffBestLap( + number: string, + before: LiveDriverData, + after: LiveDriverData, + code: (racingNumber: string) => string, + lap: number, + timestamp: string, + events: LiveEvent[], +): void { + if (!after.LastLapTime) return + const isNewLap = after.LastLapTime !== before.LastLapTime + + if (after.LastLapOB && (isNewLap || !before.LastLapOB)) { + events.push({ + id: `ob:${number}:${after.LastLapTime}`, + kind: 'fastest-lap', + lap, + timestamp, + headline: `${code(number)} sets the fastest lap — ${after.LastLapTime}`, + racingNumbers: [number], + }) + return + } + + if (after.LastLapPB && !after.LastLapOB && (isNewLap || !before.LastLapPB)) { + events.push({ + id: `pb:${number}:${after.LastLapTime}`, + kind: 'personal-best', + lap, + timestamp, + headline: `${code(number)} sets a personal best — ${after.LastLapTime}`, + racingNumbers: [number], + }) + } +} + +function rcMessageKey(message: LiveRCMessage): string { + return `${message.Time}:${message.Message}` +} + +/** "SAFETY CAR DEPLOYED" -> "Safety car deployed", keeping known acronyms upper-cased. */ +export function humanizeRaceControl(message: string): string { + const lower = message.trim().toLowerCase() + if (!lower) return '' + const sentence = lower.charAt(0).toUpperCase() + lower.slice(1) + return sentence.replace(/\b(drs|vsc|sc|fia)\b/gi, (acronym) => acronym.toUpperCase()) +} + +function carNumbersIn(message: string): string[] { + const numbers: string[] = [] + for (const match of message.matchAll(/CAR (\d+)/gi)) { + if (!numbers.includes(match[1])) numbers.push(match[1]) + } + return numbers +} + +function ordinal(n: number): string { + const rem10 = n % 10 + const rem100 = n % 100 + if (rem10 === 1 && rem100 !== 11) return `${n}st` + if (rem10 === 2 && rem100 !== 12) return `${n}nd` + if (rem10 === 3 && rem100 !== 13) return `${n}rd` + return `${n}th` +} diff --git a/frontend/src/lib/hero.ts b/frontend/src/lib/hero.ts new file mode 100644 index 0000000..3c12636 --- /dev/null +++ b/frontend/src/lib/hero.ts @@ -0,0 +1,27 @@ +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' +} diff --git a/frontend/src/lib/meaning.ts b/frontend/src/lib/meaning.ts new file mode 100644 index 0000000..25db0a9 --- /dev/null +++ b/frontend/src/lib/meaning.ts @@ -0,0 +1,146 @@ +// Pure interpretation helpers for pairing numbers with their "so-what". +// Thresholds are exported consts so they are cheap to tune in one place. + +import { PIT_LOSS_SECONDS } from './tyredeg' + +/** Gaps under this (seconds) are DRS attack range. */ +export const INTERVAL_DRS_MAX_SECONDS = 1.0 + +/** Lower bound of the undercut window (seconds); contiguous with DRS range. */ +export const INTERVAL_UNDERCUT_MIN_SECONDS = INTERVAL_DRS_MAX_SECONDS + +/** + * Upper bound of the undercut window (seconds). Kept well below typical pit + * loss ({@link PIT_LOSS_SECONDS}s) — only a few seconds matter for strategy. + */ +export const INTERVAL_UNDERCUT_MAX_SECONDS = Math.min(3.0, PIT_LOSS_SECONDS / 7) + +/** + * Rough per-compound cliff lap estimates (dry compounds). Wet/intermediate + * values are conservative — deg varies wildly with conditions. + */ +export const TYRE_CLIFF_LAPS: Readonly> = { + SOFT: 18, + MEDIUM: 28, + HARD: 38, + INTERMEDIATE: 20, + WET: 15, +} + +/** Default cliff when compound is unknown. */ +export const TYRE_CLIFF_DEFAULT_LAPS = 25 + +/** Championship max points per race (winner). */ +export const MAX_POINTS_PER_ROUND = 25 + +export interface MeaningAnnotation { + caption: string + title: string + tone?: 'good' | 'bad' | 'neutral' | 'warn' +} + +function cliffLaps(compound: string | null | undefined): number { + if (!compound) return TYRE_CLIFF_DEFAULT_LAPS + return TYRE_CLIFF_LAPS[compound.toUpperCase()] ?? TYRE_CLIFF_DEFAULT_LAPS +} + +/** + * Interval / gap-to-ahead meaning for the live timing tower. + * Returns null for leader gaps, out-of-range values, or unparsable input. + */ +export function intervalMeaning(seconds: number | null | undefined): MeaningAnnotation | null { + if (seconds == null || !Number.isFinite(seconds) || seconds < 0) return null + + if (seconds < INTERVAL_DRS_MAX_SECONDS) { + return { + caption: 'DRS range', + title: `Within ${INTERVAL_DRS_MAX_SECONDS}s — DRS enabled next straight`, + tone: 'good', + } + } + + if (seconds >= INTERVAL_UNDERCUT_MIN_SECONDS && seconds <= INTERVAL_UNDERCUT_MAX_SECONDS) { + return { + caption: 'undercut window', + title: `${INTERVAL_UNDERCUT_MIN_SECONDS}–${INTERVAL_UNDERCUT_MAX_SECONDS}s — pit now could gain a position (vs ~${PIT_LOSS_SECONDS}s stop)`, + tone: 'warn', + } + } + + return null +} + +/** + * Tyre-age meaning for deg / stint panels. + */ +export function tyreAgeMeaning( + compound: string | null | undefined, + age: number | null | undefined, +): MeaningAnnotation | null { + if (age == null || !Number.isFinite(age) || age < 0) return null + + const cliff = cliffLaps(compound) + const freshEnd = Math.ceil(cliff * 0.25) + const midEnd = Math.ceil(cliff * 0.65) + + if (age <= freshEnd) { + return { + caption: 'fresh', + title: `${age} lap${age === 1 ? '' : 's'} on ${compound ?? 'tyre'} — early stint grip`, + tone: 'good', + } + } + + if (age <= midEnd) { + return { + caption: 'mid-life', + title: `${age} laps — tyre in its working window before cliff (~${cliff} laps)`, + tone: 'neutral', + } + } + + const lapsToCliff = cliff - age + if (lapsToCliff <= 0) { + return { + caption: 'past cliff', + title: `${age} laps — beyond typical ${compound ?? 'tyre'} cliff (~${cliff} laps)`, + tone: 'bad', + } + } + + return { + caption: `~${lapsToCliff} laps to cliff`, + title: `${age} of ~${cliff} laps before deg cliff on ${compound ?? 'tyre'}`, + tone: 'warn', + } +} + +/** + * Points gap to the driver directly ahead — catchable-or-not v1. + */ +export function pointsGapMeaning( + gapToAhead: number | null | undefined, + roundsLeft: number, + driverAhead?: string | null, +): MeaningAnnotation | null { + if (gapToAhead == null || !Number.isFinite(gapToAhead) || gapToAhead <= 0) return null + if (!Number.isFinite(roundsLeft) || roundsLeft <= 0) return null + + const maxCatchable = roundsLeft * MAX_POINTS_PER_ROUND + const ahead = driverAhead?.trim() || 'ahead' + + if (gapToAhead > maxCatchable) { + return { + caption: 'out of reach', + title: `+${gapToAhead} pts with ${roundsLeft} round${roundsLeft === 1 ? '' : 's'} left (max ${maxCatchable} available)`, + tone: 'bad', + } + } + + const perRound = Math.ceil(gapToAhead / roundsLeft) + return { + caption: `~${perRound} pts/round`, + title: `Needs ~${perRound} pts per round on ${ahead} to catch (${gapToAhead} pts in ${roundsLeft} round${roundsLeft === 1 ? '' : 's'})`, + tone: perRound <= 10 ? 'good' : 'warn', + } +} diff --git a/frontend/src/lib/radio.ts b/frontend/src/lib/radio.ts new file mode 100644 index 0000000..6ff21d9 --- /dev/null +++ b/frontend/src/lib/radio.ts @@ -0,0 +1,22 @@ +import type { LiveRadioCapture, LiveSessionMeta } from '../types' + +export const LIVE_TIMING_STATIC_BASE = 'https://livetiming.formula1.com/static/' + +export function radioClipUrl( + session: Pick | null | undefined, + capture: Pick | null | undefined, +): string { + const sessionPath = session?.Path?.trim() + const capturePath = capture?.Path?.trim() + if (!sessionPath || !capturePath) return '' + if (/^https?:\/\//i.test(capturePath)) return capturePath + + const base = LIVE_TIMING_STATIC_BASE.replace(/\/+$/, '') + const normalizedSession = sessionPath.replace(/^\/+|\/+$/g, '') + const normalizedCapture = capturePath.replace(/^\/+/g, '') + return `${base}/${normalizedSession}/${normalizedCapture}` +} + +export function radioCaptureKey(capture: LiveRadioCapture): string { + return `${capture.Utc}-${capture.RacingNumber}-${capture.Path}` +} diff --git a/frontend/src/lib/tyredeg.ts b/frontend/src/lib/tyredeg.ts new file mode 100644 index 0000000..2e4cb12 --- /dev/null +++ b/frontend/src/lib/tyredeg.ts @@ -0,0 +1,271 @@ +// Tyre degradation + pit-window estimation for the live timing page. +// Pure functions only — no React, no side effects — so everything is unit-testable. +// +// Lap-time samples are accumulated client-side from successive SSE snapshots +// (mirroring the gapHistory/battles precedent); nothing here talks to the server. + +import type { LiveTimingRow } from './live' +import { driverCode } from './live' +import { parseIntervalSeconds } from './gapHistory' + +/** + * Rough typical pit-lane time loss (entry + stop + exit vs a flying lap), in + * seconds. Per-track values are deliberately out of scope for v1. + */ +export const PIT_LOSS_SECONDS = 22 + +/** Minimum clean laps in the current stint before a slope is trustworthy. */ +export const MIN_CLEAN_LAPS = 4 + +/** + * Laps more than this many seconds off the stint median are treated as + * outliers (traffic, spins, safety car) and excluded from the fit. + */ +export const OUTLIER_DELTA_SECONDS = 5 + +/** + * Slope classification thresholds (seconds per lap): + * slope <= -DEG_SLOPE_THRESHOLD -> 'improving' (track evolution, fuel burn dominating) + * slope >= +DEG_SLOPE_THRESHOLD -> 'degrading' (tyre wear dominating) + * otherwise -> 'stable' + */ +export const DEG_SLOPE_THRESHOLD = 0.05 + +/** Safety cap so a very long stint cannot grow the buffer unbounded. */ +export const MAX_STINT_SAMPLES = 80 + +export type DegTrend = 'improving' | 'stable' | 'degrading' + +export interface StintSample { + lap: number + seconds: number +} + +export interface DriverStintHistory { + compound: string + tyreAge: number + lastLapNumber: number + lastLapTime: string + /** The next completed lap is an out-lap (fresh stint) and must be discarded. */ + skipNextLap: boolean + samples: StintSample[] +} + +/** Per-driver current-stint lap history, keyed by racing number. */ +export type StintHistoryMap = Record + +export interface StintLapInput { + racingNumber: string + lapNumber: number + lastLapTime: string + compound: string + tyreAge: number + inPit: boolean + pitOut: boolean +} + +/** + * Parse an F1 live-timing lap time string ("1:23.456", "83.456") into seconds. + * Same conventions as parseIntervalSeconds, but a lap time is never signed and + * never a lapped/leader marker; zero or negative values are rejected. + */ +export function parseLapTimeSeconds(raw: string | null | undefined): number | null { + const value = parseIntervalSeconds(raw) + if (value === null || value <= 0) return null + return value +} + +export function stintInputFromRow(row: LiveTimingRow): StintLapInput { + return { + racingNumber: row.RacingNumber, + lapNumber: row.Driver.NumberOfLaps || 0, + lastLapTime: row.Driver.LastLapTime || '', + compound: row.Tyre?.Compound || '', + tyreAge: row.Tyre?.Age ?? 0, + inPit: Boolean(row.Driver.InPit), + pitOut: Boolean(row.Driver.PitOut), + } +} + +/** + * Record one snapshot's worth of lap samples for each driver's current stint. + * Returns a new map (input is not mutated); drivers missing from `inputs` are + * pruned. + * + * A lap counts as completed when LastLapTime changes to a new non-empty value + * (NumberOfLaps can tick before the lap time arrives, so the time string is + * the trigger; a sample for the same lap number is replaced, not duplicated). + * The stint buffer resets when the compound changes or the tyre age drops + * (new set fitted), and laps completed in the pit lane (in-lap), on pit exit + * (out-lap), or immediately after a reset are excluded. + */ +export function recordStintSamples( + history: StintHistoryMap, + inputs: ReadonlyArray, +): StintHistoryMap { + const next: StintHistoryMap = {} + + for (const input of inputs) { + if (!input.racingNumber) continue + + const prior = history[input.racingNumber] + if (!prior) { + next[input.racingNumber] = { + compound: input.compound, + tyreAge: input.tyreAge, + lastLapNumber: input.lapNumber, + lastLapTime: input.lastLapTime, + skipNextLap: false, + samples: [], + } + continue + } + + let samples = prior.samples + let skipNextLap = prior.skipNextLap + + const compoundChanged = Boolean(input.compound) && Boolean(prior.compound) && input.compound !== prior.compound + const freshSet = input.tyreAge < prior.tyreAge + if (compoundChanged || freshSet || input.inPit) { + // Stint over (or a new one starting): drop the old laps and flag the + // upcoming out-lap for exclusion. + samples = [] + skipNextLap = true + } + + const lapCompleted = Boolean(input.lastLapTime) && input.lastLapTime !== prior.lastLapTime + if (lapCompleted) { + const seconds = parseLapTimeSeconds(input.lastLapTime) + const dirty = input.inPit || input.pitOut || skipNextLap + if (seconds !== null && !dirty) { + const last = samples[samples.length - 1] + if (last && last.lap === input.lapNumber) { + samples = [...samples.slice(0, -1), { lap: input.lapNumber, seconds }] + } else { + samples = [...samples, { lap: input.lapNumber, seconds }] + if (samples.length > MAX_STINT_SAMPLES) { + samples = samples.slice(samples.length - MAX_STINT_SAMPLES) + } + } + } + if (!input.inPit) skipNextLap = false + } + + next[input.racingNumber] = { + compound: input.compound || prior.compound, + tyreAge: input.tyreAge, + lastLapNumber: input.lapNumber, + lastLapTime: input.lastLapTime || prior.lastLapTime, + skipNextLap, + samples, + } + } + + return next +} + +export interface DegModel { + /** Least-squares slope of lap time vs lap number, in seconds per lap. */ + slope: number + trend: DegTrend + /** Clean (outlier-filtered) samples the fit ran over, in lap order. */ + samples: StintSample[] +} + +/** Drop laps more than OUTLIER_DELTA_SECONDS off the stint median. */ +export function cleanStintSamples( + samples: ReadonlyArray, + maxDelta = OUTLIER_DELTA_SECONDS, +): StintSample[] { + if (samples.length === 0) return [] + const sorted = samples.map((sample) => sample.seconds).sort((a, b) => a - b) + const mid = Math.floor(sorted.length / 2) + const median = sorted.length % 2 === 1 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2 + return samples.filter((sample) => Math.abs(sample.seconds - median) <= maxDelta) +} + +/** + * Fit a linear degradation model over the stint's clean laps. + * Returns null with fewer than MIN_CLEAN_LAPS clean samples — the caller + * should show a "warming up" placeholder rather than a junk slope. + */ +export function degradationModel(samples: ReadonlyArray): DegModel | null { + const clean = cleanStintSamples(samples) + if (clean.length < MIN_CLEAN_LAPS) return null + + const n = clean.length + const meanLap = clean.reduce((sum, s) => sum + s.lap, 0) / n + const meanSec = clean.reduce((sum, s) => sum + s.seconds, 0) / n + + let numerator = 0 + let denominator = 0 + for (const sample of clean) { + numerator += (sample.lap - meanLap) * (sample.seconds - meanSec) + denominator += (sample.lap - meanLap) ** 2 + } + if (denominator === 0) return null + + const slope = numerator / denominator + const trend: DegTrend = + slope <= -DEG_SLOPE_THRESHOLD ? 'improving' : slope >= DEG_SLOPE_THRESHOLD ? 'degrading' : 'stable' + + return { slope, trend, samples: clean } +} + +/** "+0.08s/lap" / "-0.12s/lap" display form. */ +export function formatSlope(slope: number): string { + const sign = slope >= 0 ? '+' : '−' + return `${sign}${Math.abs(slope).toFixed(2)}s/lap` +} + +export interface PitRejoinEstimate { + rejoinPosition: number + /** Cars behind that would get past during the stop. */ + positionsLost: number + /** Driver code directly ahead after rejoining, if any. */ + aheadCode: string | null + /** Driver code directly behind after rejoining, if any. */ + behindCode: string | null +} + +/** + * Estimate where a driver rejoins after a pit stop costing `pitLoss` seconds. + * + * Walks the cars behind the driver, accumulating their Interval (gap to car + * ahead) values: every car whose cumulative gap to the driver is under the + * pit loss gets past. An unparsable interval (lapped marker like "1L") ends + * the walk — those cars are at least a lap down and stay behind. Cars in the + * pits or retired are excluded from the ladder. + */ +export function estimatePitRejoin( + rows: ReadonlyArray, + racingNumber: string, + pitLoss = PIT_LOSS_SECONDS, +): PitRejoinEstimate | null { + const ladder = rows + .filter((row) => row.Position > 0 && !row.Driver.Retired && !row.Driver.InPit) + .sort((a, b) => a.Position - b.Position) + + const index = ladder.findIndex((row) => row.RacingNumber === racingNumber) + if (index === -1) return null + + let cumulative = 0 + let positionsLost = 0 + for (let i = index + 1; i < ladder.length; i++) { + const gap = parseIntervalSeconds(ladder[i].Driver.Interval) + if (gap === null) break + cumulative += Math.max(0, gap) + if (cumulative >= pitLoss) break + positionsLost += 1 + } + + const ahead = positionsLost > 0 ? ladder[index + positionsLost] : ladder[index - 1] + const behind = ladder[index + positionsLost + 1] + + return { + rejoinPosition: ladder[index].Position + positionsLost, + positionsLost, + aheadCode: ahead ? driverCode(ahead) : null, + behindCode: behind ? driverCode(behind) : null, + } +} diff --git a/frontend/src/pages/ChampionshipPage.tsx b/frontend/src/pages/ChampionshipPage.tsx index d1c293e..c004eb1 100644 --- a/frontend/src/pages/ChampionshipPage.tsx +++ b/frontend/src/pages/ChampionshipPage.tsx @@ -4,6 +4,8 @@ import { fetchChampionshipHub, fetchSeasons } from '../api' import { teamColor } from '../utils' import type { ChampHubDriver, ChampionshipHub } from '../types' import { ChampionshipSimulator } from '../components/ChampionshipSimulator' +import { Meaning } from '../components/Meaning' +import { pointsGapMeaning } from '../lib/meaning' type View = 'drivers' | 'constructors' | 'progression' | 'simulator' @@ -138,6 +140,8 @@ function ChampionshipBody({ hub, view, setView }: BodyProps) { color: teamColor(d.team_colour), gapLeader: i === 0 ? 'LEADER' : `+${fmtPts(gapLeaderNum)}`, gapAhead: gapAheadNum == null ? '—' : `+${fmtPts(gapAheadNum)}`, + gapAheadNum, + driverAhead: i === 0 ? null : drivers[i - 1].name_acronym, spark: sparkPoints(d.form), h2h: `${d.teammate_wins}–${d.teammate_losses}`, h2hWin: d.teammate_wins >= d.teammate_losses, @@ -233,7 +237,12 @@ function ChampionshipBody({ hub, view, setView }: BodyProps) {
{view === 'drivers' && ( - + )} {view === 'constructors' && } {view === 'progression' && } @@ -248,6 +257,8 @@ interface EnrichedDriver { color: string gapLeader: string gapAhead: string + gapAheadNum: number | null + driverAhead: string | null spark: string h2h: string h2hWin: boolean @@ -259,10 +270,12 @@ function DriversView({ enriched, leaderPoints, titleMath, + roundsLeft, }: { enriched: EnrichedDriver[] leaderPoints: number titleMath: string + roundsLeft: number }) { const podium = enriched.slice(0, 3) return ( @@ -357,7 +370,19 @@ function DriversView({ {e.d.team_name} {fmtPts(e.d.points)} {e.gapLeader} - {e.gapAhead} + + {(() => { + const gapAnnotation = pointsGapMeaning(e.gapAheadNum, roundsLeft, e.driverAhead) + return ( + + ) + })()} + 0 ? 'var(--text)' : 'var(--text-3)' }}> {e.d.wins} diff --git a/frontend/src/pages/CommandCenterPage.tsx b/frontend/src/pages/CommandCenterPage.tsx index 7f54907..29c7493 100644 --- a/frontend/src/pages/CommandCenterPage.tsx +++ b/frontend/src/pages/CommandCenterPage.tsx @@ -1,38 +1,38 @@ import { useEffect, useMemo, useState } from 'react' import { useQueries, useQuery } from '@tanstack/react-query' import { Link } from '@tanstack/react-router' -import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend, fetchChampionshipHub } from '../api' +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, - formatCountdown, formatSessionScheduleTime, meetingHasStarted, + mostRecentPastMeeting, + nextUpcomingMeeting, pickFocusMeeting, - sessionEndTime, - sessionStartTime, sortSessionsByStart, } from '../lib/schedule' -import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity' import type { Meeting, Session, Weekend, WeekendSession } from '../types' -import { PaddockBriefing } from '../components/PaddockBriefing' -import { Play, Activity, Calendar, Trophy } from 'lucide-react' - -type WeekendStatusKind = 'live' | 'current' | 'next' | 'recent' | 'fallback' +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 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) { if (meeting.meeting_key === focusKey) return 'focus' if (meetingHasStarted(meeting, now)) return 'past' @@ -148,7 +148,36 @@ export function CommandCenterPage() { focusWeekendSessions[0]?.session const analysisSessionKey = actionSession?.session_key - const weekendsLoading = weekendQueries.some((q) => q.isLoading) + 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
loading command center…
@@ -189,19 +218,7 @@ 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 decal = countryDecal(focusMeeting ?? null) const accentStyle = { '--gp-accent': accent } as React.CSSProperties return ( @@ -224,76 +241,25 @@ export function CommandCenterPage() { )} - {focusMeeting && ( -
-
-
- -
- - Watch Live - {liveActive ? 'Feed active' : 'Standby'} - - - Open Analysis - - {actionSession - ? `${actionSession.session_name} · session ${actionSession.session_key}` - : 'Pick a session'} - - - {nextSession && sessionStartTime(nextSession) && ( - { - e.preventDefault() - document.getElementById('cc-schedule')?.scrollIntoView({ behavior: 'smooth' }) - }} - > - Schedule - - next: {nextSession.session_name} - - - )} -
-
+ {focusMeeting && focusKind && ( + )}
@@ -483,65 +449,3 @@ function FormSparkline({ form, color }: { form: number[], color: string }) { ) } -function WeekendKindLabel({ kind }: { kind: WeekendStatusKind }) { - switch (kind) { - case 'live': - return ● Live now - case 'current': - return Current weekend - case 'next': - return Next weekend - case 'recent': - return Recent weekend - default: - return Weekend - } -} - -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 ( -
-
SignalR
-
LIVE
-
{currentSession?.session_name ?? 'Feed connected'}
-
- ) - } - if (currentSession) { - return ( -
-
On Track
-
{currentSession.session_name}
-
In session
-
- ) - } - if (nextSession && sessionStartTime(nextSession)) { - return ( -
-
Next · {nextSession.session_name}
-
{formatCountdown(sessionStartTime(nextSession)!, now)}
-
{formatSessionScheduleTime(nextSession.date_start)}
-
- ) - } - if (meetingHasStarted(meeting, now)) { - return ( -
-
Status
-
Complete
-
Weekend finished
-
- ) - } - return null -} diff --git a/frontend/src/pages/LiveTimingPage.tsx b/frontend/src/pages/LiveTimingPage.tsx index fd478eb..6440a12 100644 --- a/frontend/src/pages/LiveTimingPage.tsx +++ b/frontend/src/pages/LiveTimingPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import { useQuery } from '@tanstack/react-query' import { fetchLiveState, fetchLiveTrackOutline } from '../api' import type { LivePosition, LiveStreamData } from '../types' @@ -15,13 +15,18 @@ import type { VisibleSectorState } from '../lib/live' import type { GapHistoryMap } from '../lib/gapHistory' import { recordGapSamples } from '../lib/gapHistory' import { battleNumbers, detectBattles } from '../lib/battles' +import type { LiveEvent } from '../lib/events' +import { appendEvents, diffSnapshots, sessionSignature } from '../lib/events' import { SessionBanner } from '../components/live/SessionBanner' import { TrackStatusBanner } from '../components/live/TrackStatusBanner' import { TimingTower } from '../components/live/TimingTower' import { BattleChips } from '../components/live/BattleChips' import { PinnedDrivers } from '../components/live/PinnedDrivers' import { RaceControlFeed } from '../components/live/RaceControlFeed' +import { EventRail } from '../components/live/EventRail' +import { TeamRadioTicker } from '../components/live/TeamRadioTicker' import { TrackMap } from '../components/live/TrackMap' +import { TyreDegPanel } from '../components/live/TyreDegPanel' import { Radio } from 'lucide-react' type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error' @@ -35,6 +40,9 @@ export function LiveTimingPage() { const [pinned, setPinned] = useState(() => loadPinnedDrivers()) const [visibleSectors, setVisibleSectors] = useState({}) const [positions, setPositions] = useState>({}) + const [events, setEvents] = useState([]) + const prevSnapshotRef = useRef(null) + const sessionSigRef = useRef('') const { data, isLoading, isError, error } = useQuery({ queryKey: ['live-state'], @@ -112,6 +120,23 @@ export function LiveTimingPage() { } }, []) + // Synthesize "what just happened" events from successive snapshots; the + // buffer resets whenever a different session starts streaming. + useEffect(() => { + if (!snapshot) return + const signature = sessionSignature(snapshot.Session) + const prev = prevSnapshotRef.current + prevSnapshotRef.current = snapshot + if (signature !== sessionSigRef.current) { + sessionSigRef.current = signature + setEvents([]) + return + } + if (!prev || prev === snapshot) return + const fresh = diffSnapshots(prev, snapshot) + if (fresh.length > 0) setEvents((current) => appendEvents(current, fresh)) + }, [snapshot]) + const rawRows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot]) useEffect(() => { @@ -193,6 +218,7 @@ export function LiveTimingPage() { driverInfo={snapshot.DriverInfo} loading={trackOutlineQuery.isLoading} /> +
@@ -211,7 +237,13 @@ export function LiveTimingPage() { />
+ +
diff --git a/frontend/src/pages/RaceHubPage.tsx b/frontend/src/pages/RaceHubPage.tsx index 5c98f81..e680e9d 100644 --- a/frontend/src/pages/RaceHubPage.tsx +++ b/frontend/src/pages/RaceHubPage.tsx @@ -13,6 +13,7 @@ import { TabBar, type Tab } from '../components/TabBar' import { DatasetStatusView } from '../components/DatasetStatusView' import { StrategyView } from '../components/StrategyView' import { LapsView } from '../components/LapsView' +import { CompareView } from '../components/CompareView' import { RaceControlView } from '../components/RaceControlView' import { WeatherView } from '../components/WeatherView' import { OverviewView } from '../components/OverviewView' @@ -307,6 +308,19 @@ export function RaceHubPage({ sessionKey }: Props) {
)} + {activeTab === 'compare' && ( +
+
+ Driver Compare +
+ +
+ )} + {activeTab === 'lap_data' && (
diff --git a/frontend/src/styles/compare-view.css b/frontend/src/styles/compare-view.css new file mode 100644 index 0000000..cbe5685 --- /dev/null +++ b/frontend/src/styles/compare-view.css @@ -0,0 +1,78 @@ +.compare-view { + display: flex; + flex-direction: column; + gap: var(--s5); +} + +.compare-pickers { + display: flex; + flex-wrap: wrap; + gap: var(--s4); + align-items: flex-end; +} + +.compare-picker { + display: flex; + flex-direction: column; + gap: var(--s3); + min-width: 180px; +} + +.compare-picker-label { + font-family: var(--f-mono); + font-size: 11px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--text-3); +} + +.compare-picker-select { + font-family: var(--f-mono); + font-size: 13px; + padding: var(--s2) var(--s3); + border: 1px solid var(--border); + border-radius: var(--r1); + background: var(--surface-2); + color: var(--text); +} + +.compare-picker-select:focus { + outline: 2px solid var(--gp-accent, var(--red)); + outline-offset: 1px; +} + +.compare-section { + display: flex; + flex-direction: column; + gap: var(--s3); +} + +.compare-section-title { + font-family: var(--f-mono); + font-size: 12px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--text-2); +} + +.compare-section-meta { + font-family: var(--f-mono); + font-size: 11px; + color: var(--text-3); +} + +.compare-pit-caption { + font-family: var(--f-mono); + font-size: 11px; + color: var(--text-3); + margin: 0; +} + +.compare-stale-notice { + font-size: 12px; + color: var(--amber, #f59e0b); + background: rgba(245, 158, 11, 0.08); + border: 1px solid rgba(245, 158, 11, 0.25); + border-radius: var(--r1); + padding: var(--s2) var(--s3); +} diff --git a/frontend/src/styles/delta-graph.css b/frontend/src/styles/delta-graph.css new file mode 100644 index 0000000..e3fafd5 --- /dev/null +++ b/frontend/src/styles/delta-graph.css @@ -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; +} diff --git a/frontend/src/styles/event-rail.css b/frontend/src/styles/event-rail.css new file mode 100644 index 0000000..1ed33ae --- /dev/null +++ b/frontend/src/styles/event-rail.css @@ -0,0 +1,67 @@ +/* ── "What just happened" event rail (live page) ── */ + +.event-rail { + margin-top: var(--s5); +} + +.event-rail-list { + display: flex; + flex-direction: column; + gap: var(--s3); + padding-top: var(--s4); +} + +.event-rail-row { + display: flex; + align-items: flex-start; + gap: var(--s4); + padding: var(--s3) var(--s4); + border-left: 3px solid var(--border-2); + background: rgba(255, 255, 255, 0.03); + border-radius: 0 4px 4px 0; +} + +.event-rail-icon { + display: inline-flex; + align-items: center; + color: var(--text-2); + padding-top: 1px; + flex-shrink: 0; +} + +.event-kind-fastest-lap .event-rail-icon { color: var(--purple); } +.event-kind-personal-best .event-rail-icon { color: var(--green); } +.event-kind-overtake .event-rail-icon, +.event-kind-position-gain .event-rail-icon { color: var(--green); } +.event-kind-position-loss .event-rail-icon { color: var(--yellow); } +.event-kind-retirement .event-rail-icon, +.event-kind-track-status .event-rail-icon { color: var(--red); } +.event-kind-pit-in .event-rail-icon, +.event-kind-pit-out .event-rail-icon { color: var(--blue); } + +.event-rail-body { + display: flex; + flex-direction: column; + gap: var(--s1); + min-width: 0; + flex: 1; +} + +.event-rail-headline { + font-size: 12px; + color: var(--text); + line-height: 1.4; +} + +.event-rail-detail { + font-size: 11px; + color: var(--text-2); +} + +.event-rail-lap { + font-family: var(--f-mono); + font-size: 10px; + color: var(--text-3); + flex-shrink: 0; + padding-top: 2px; +} diff --git a/frontend/src/styles/hero.css b/frontend/src/styles/hero.css new file mode 100644 index 0000000..7f1a8c1 --- /dev/null +++ b/frontend/src/styles/hero.css @@ -0,0 +1,373 @@ +.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; + } +} diff --git a/frontend/src/styles/meaning.css b/frontend/src/styles/meaning.css new file mode 100644 index 0000000..3c245bf --- /dev/null +++ b/frontend/src/styles/meaning.css @@ -0,0 +1,48 @@ +/* Compact value + muted meaning caption (issue #18). */ + +.meaning { + display: inline-flex; + flex-direction: column; + align-items: inherit; + gap: 1px; + line-height: 1.2; +} + +.meaning-value { + /* inherits table cell mono styling from parent */ +} + +.meaning-caption { + font-size: 10px; + font-family: var(--f-mono); + color: var(--text-3); + letter-spacing: 0.02em; + white-space: nowrap; +} + +.meaning-caption--good { + color: var(--green); +} + +.meaning-caption--bad { + color: var(--red); +} + +.meaning-caption--warn { + color: var(--yellow, #e8c547); +} + +.meaning-caption--neutral { + color: var(--text-3); +} + +/* Table cells: right-align caption under numeric values */ +td.r .meaning, +.champ-td-dim .meaning, +.champ-td-muted .meaning { + align-items: flex-end; +} + +.tyredeg-row .meaning { + align-items: flex-start; +} diff --git a/frontend/src/styles/stint-timeline.css b/frontend/src/styles/stint-timeline.css new file mode 100644 index 0000000..38e9219 --- /dev/null +++ b/frontend/src/styles/stint-timeline.css @@ -0,0 +1,94 @@ +.stint-timeline { + --stint-left: 48px; + --stint-right: 12px; + --stint-row-h: 28px; + --stint-bar-h: 14px; + --stint-axis-h: 20px; +} + +.stint-timeline__scroll { + overflow-x: auto; +} + +.stint-timeline__svg { + width: 100%; + min-width: 280px; + max-width: 640px; + display: block; +} + +.stint-timeline__label { + font-family: var(--f-mono); + font-weight: 700; + font-size: 10px; +} + +.stint-timeline__bar { + stroke: none; +} + +.stint-timeline__bar.tyre-soft { fill: var(--tyre-soft); } +.stint-timeline__bar.tyre-medium { fill: var(--tyre-medium); } +.stint-timeline__bar.tyre-hard { fill: var(--tyre-hard); stroke: #555; stroke-width: 0.5; } +.stint-timeline__bar.tyre-inter { fill: var(--tyre-inter); } +.stint-timeline__bar.tyre-wet { fill: var(--tyre-wet); } +.stint-timeline__bar.tyre-unknown { fill: var(--surface-2); stroke: var(--border-2); stroke-width: 0.5; } + +.stint-timeline__bar--new { + stroke: var(--text); + stroke-width: 1; + stroke-dasharray: 2 1; +} + +.stint-timeline__axis-tick { + font-family: var(--f-mono); + font-size: 9px; + fill: var(--text-3); +} + +.stint-timeline__axis-line { + stroke: var(--border-2); + stroke-width: 1; +} + +.stint-timeline__legend { + display: flex; + gap: var(--s4); + flex-wrap: wrap; + margin-top: var(--s4); + font-size: 11px; + color: var(--text-3); + align-items: center; +} + +.stint-timeline__legend-swatch { + width: 10px; + height: 10px; + border-radius: 2px; + display: inline-block; +} + +.stint-timeline__legend-swatch.tyre-hard { + border: 1px solid #555; +} + +.stint-timeline__legend-item { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.stint-timeline__meta { + margin-left: auto; + font-family: var(--f-mono); + font-size: 10px; +} + +.stint-timeline__empty { + padding: var(--s5); + color: var(--text-3); + font-size: 13px; + text-align: center; + border: 1px dashed var(--border-2); + border-radius: var(--r2); +} diff --git a/frontend/src/styles/team-radio.css b/frontend/src/styles/team-radio.css new file mode 100644 index 0000000..152a405 --- /dev/null +++ b/frontend/src/styles/team-radio.css @@ -0,0 +1,82 @@ +.team-radio { + display: flex; + flex-direction: column; + min-height: 0; + overflow: hidden; +} + +.team-radio-audio { + display: none; +} + +.team-radio-list { + display: flex; + flex-direction: column; + gap: 6px; + max-height: 260px; + overflow-y: auto; + padding-right: 2px; +} + +.team-radio-row { + display: grid; + grid-template-columns: 28px minmax(44px, 56px) minmax(68px, 1fr); + align-items: center; + gap: 8px; + min-height: 34px; + padding: 6px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.team-radio-row:last-child { + border-bottom: 0; +} + +.team-radio-play { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 0; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 50%; + color: var(--text-1); + background: rgba(255, 255, 255, 0.06); + cursor: pointer; +} + +.team-radio-play:hover:not(:disabled), +.team-radio-play:focus-visible:not(:disabled) { + border-color: rgba(255, 255, 255, 0.36); + background: rgba(255, 255, 255, 0.12); +} + +.team-radio-play:disabled { + color: var(--text-3); + cursor: not-allowed; + opacity: 0.55; +} + +.team-radio-driver { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 44px; + height: 24px; + border-left: 3px solid var(--text-3); + color: var(--text-1); + font-family: var(--font-mono); + font-size: 12px; + font-weight: 700; + letter-spacing: 0; +} + +.team-radio-time { + min-width: 0; + color: var(--text-2); + font-family: var(--font-mono); + font-size: 12px; + text-align: right; + white-space: nowrap; +} diff --git a/frontend/src/styles/telemetry-trace.css b/frontend/src/styles/telemetry-trace.css new file mode 100644 index 0000000..87b316f --- /dev/null +++ b/frontend/src/styles/telemetry-trace.css @@ -0,0 +1,101 @@ +.telemetry-trace { + display: flex; + flex-direction: column; + gap: 8px; +} + +.telemetry-trace-empty { + padding: 24px; + text-align: center; + color: var(--text-3); + font-size: 13px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; +} + +.telemetry-trace-legend { + display: flex; + flex-wrap: wrap; + gap: 14px; + font-size: 12px; + color: var(--text-2); +} + +.telemetry-trace-legend-item { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.telemetry-trace-swatch { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 2px; + flex: none; +} + +.telemetry-trace-svg { + display: block; + width: 100%; + height: auto; +} + +.telemetry-trace-panel-bg { + fill: var(--surface); + stroke: var(--border); + stroke-width: 1; + rx: 4; +} + +.telemetry-trace-panel-title { + fill: var(--text-2); + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.telemetry-trace-axis-max { + fill: var(--text-3); + font-size: 10px; +} + +.telemetry-trace-crosshair { + stroke: var(--text-2); + stroke-width: 1; + stroke-dasharray: 3 3; + pointer-events: none; +} + +.telemetry-trace-readout { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px; + padding: 6px 10px; + font-size: 12px; + color: var(--text-2); + background: var(--surface-h); + border: 1px solid var(--border); + border-radius: 6px; +} + +.telemetry-trace-readout-index { + color: var(--text-3); +} + +.telemetry-trace-readout-driver { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.telemetry-trace-readout-label { + color: var(--text); + font-weight: 600; +} + +.telemetry-trace-readout-value { + font-variant-numeric: tabular-nums; +} diff --git a/frontend/src/styles/tyredeg.css b/frontend/src/styles/tyredeg.css new file mode 100644 index 0000000..c6d6950 --- /dev/null +++ b/frontend/src/styles/tyredeg.css @@ -0,0 +1,84 @@ +/* Live tyre-degradation & pit-window panel (see components/live/TyreDegPanel.tsx) */ + +.live-tyredeg-panel { + margin-bottom: var(--s5); +} + +.tyredeg-toggle { + width: 100%; + background: none; + border: none; + padding: 0; + cursor: pointer; + text-align: left; +} + +.tyredeg-chevron { + margin-left: auto; + font-size: 10px; + color: var(--text-3); +} + +.tyredeg-rows { + display: flex; + flex-direction: column; + gap: 3px; +} + +.tyredeg-row { + display: flex; + align-items: center; + gap: var(--s4); + padding: var(--s2) var(--s4); + background: var(--surface); + border: 1px solid var(--border); + border-radius: 3px; + font-size: 12px; +} + +.tyredeg-row .drv-bar { height: 16px; } + +.tyredeg-pos { + min-width: 28px; + color: var(--text-2); + font-size: 11px; +} + +.tyredeg-spark { display: block; } +.tyredeg-spark-empty { color: var(--text-3); } + +.tyredeg-trend { display: inline-flex; align-items: center; } +.tyredeg-trend-improving { color: var(--green); } +.tyredeg-trend-stable { color: var(--text-3); } +.tyredeg-trend-degrading { color: #ff6b6b; } + +.tyredeg-slope { + min-width: 78px; + font-size: 11px; +} + +.tyredeg-warmup { + color: var(--text-3); + font-size: 11px; + font-style: italic; +} + +.tyredeg-rejoin { + margin-left: auto; + display: inline-flex; + align-items: baseline; + gap: var(--s3); + color: var(--text-2); + font-size: 11px; + white-space: nowrap; +} + +.tyredeg-rejoin-between { + color: var(--text-3); + font-size: 10px; +} + +@media (max-width: 640px) { + .tyredeg-rejoin-between { display: none; } + .tyredeg-slope { min-width: 0; } +} diff --git a/frontend/src/test/ChampionshipPage.test.tsx b/frontend/src/test/ChampionshipPage.test.tsx index 75b2833..35c5774 100644 --- a/frontend/src/test/ChampionshipPage.test.tsx +++ b/frontend/src/test/ChampionshipPage.test.tsx @@ -112,6 +112,7 @@ describe('ChampionshipPage', () => { expect(screen.getAllByText('VER').length).toBeGreaterThan(0) expect(screen.getByText('Monaco GP', { exact: false })).toBeInTheDocument() expect(screen.getByTestId('champ-titlemath')).toHaveTextContent('mathematically win the title') + expect(screen.getAllByText('~10 pts/round').length).toBeGreaterThan(0) }) it('switches to constructors and progression views', async () => { diff --git a/frontend/src/test/CommandCenterPage.test.tsx b/frontend/src/test/CommandCenterPage.test.tsx index 4ec99f8..1519c59 100644 --- a/frontend/src/test/CommandCenterPage.test.tsx +++ b/frontend/src/test/CommandCenterPage.test.tsx @@ -12,9 +12,20 @@ vi.mock('../api', () => ({ fetchSessions: vi.fn(), fetchWeekend: vi.fn(), fetchLiveState: vi.fn(), + fetchChampionshipHub: vi.fn(), + fetchRaceHub: vi.fn(), })) -import { fetchSeasons, fetchLocalMeetings, fetchSeasonMeetings, fetchSessions, fetchWeekend, fetchLiveState } from '../api' +import { + fetchSeasons, + fetchLocalMeetings, + fetchSeasonMeetings, + fetchSessions, + fetchWeekend, + fetchLiveState, + fetchChampionshipHub, + fetchRaceHub, +} from '../api' const mockFetchSeasons = vi.mocked(fetchSeasons) const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings) @@ -22,6 +33,8 @@ 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, @@ -102,6 +115,48 @@ describe('CommandCenterPage', () => { 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: [], + }) }) it('shows empty state when no seasons are ingested', async () => { @@ -131,11 +186,10 @@ describe('CommandCenterPage', () => { expect(screen.getByTestId('cc-session-9472')).toBeInTheDocument() }) 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-calendar-1229')).toHaveTextContent('R01') expect(screen.getByText('No live session')).toBeInTheDocument() - expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Race') + 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 () => { @@ -181,9 +235,9 @@ describe('CommandCenterPage', () => { await waitFor(() => { expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco') }) - expect(screen.getByTestId('cc-focus')).toHaveTextContent('Current weekend') + expect(screen.getByTestId('cc-focus')).toHaveTextContent('Live now') expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track') - expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Qualifying') + expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live') vi.useRealTimers() }) diff --git a/frontend/src/test/LiveComponents.test.tsx b/frontend/src/test/LiveComponents.test.tsx index c3df461..95ea7ac 100644 --- a/frontend/src/test/LiveComponents.test.tsx +++ b/frontend/src/test/LiveComponents.test.tsx @@ -189,6 +189,26 @@ describe('TimingTower', () => { expect(screen.getByText(/no driver timing rows/i)).toBeInTheDocument() }) + it('annotates DRS-range intervals in race mode', () => { + const raceRows = [ + makeRow('1', 1, 'VER'), + makeRow('4', 2, 'NOR', { Interval: '+0.4', GapToLeader: '+0.4' }), + ] + render( + , + ) + expect(screen.getByText('DRS range')).toBeInTheDocument() + }) + it('renders the SQ1 cutoff after P17 and marks rows below as at risk', () => { const sprintRows = Array.from({ length: 22 }, (_, index) => makeRow(String(index + 1), index + 1, `D${index + 1}`), @@ -201,6 +221,7 @@ describe('TimingTower', () => { CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying', + Path: '', }} />, ) diff --git a/frontend/src/test/Meaning.test.tsx b/frontend/src/test/Meaning.test.tsx new file mode 100644 index 0000000..94b0e58 --- /dev/null +++ b/frontend/src/test/Meaning.test.tsx @@ -0,0 +1,26 @@ +import { describe, expect, it } from 'vitest' +import { render, screen } from '@testing-library/react' +import { Meaning } from '../components/Meaning' + +describe('Meaning', () => { + it('renders bare value when meaning is null', () => { + render() + expect(screen.getByText('+1.234')).toBeInTheDocument() + expect(screen.queryByText('DRS range')).not.toBeInTheDocument() + }) + + it('renders value with caption and tooltip title', () => { + render( + , + ) + const value = screen.getByText('+0.4') + expect(value).toBeInTheDocument() + expect(screen.getByText('DRS range')).toHaveClass('meaning-caption--good') + expect(value.closest('.meaning')).toHaveAttribute('title', 'Within 1.0s — DRS enabled next straight') + }) +}) diff --git a/frontend/src/test/TabBar.test.tsx b/frontend/src/test/TabBar.test.tsx index de9a1b0..da6dd41 100644 --- a/frontend/src/test/TabBar.test.tsx +++ b/frontend/src/test/TabBar.test.tsx @@ -8,6 +8,7 @@ describe('TabBar', () => { expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument() expect(screen.getByRole('tab', { name: 'Race Story' })).toBeInTheDocument() expect(screen.getByRole('tab', { name: 'Strategy' })).toBeInTheDocument() + expect(screen.getByRole('tab', { name: 'Compare' })).toBeInTheDocument() expect(screen.getByRole('tab', { name: 'Lap Data' })).toBeInTheDocument() expect(screen.getByRole('tab', { name: 'Conditions' })).toBeInTheDocument() expect(screen.getByRole('tab', { name: 'Race Control' })).toBeInTheDocument() diff --git a/frontend/src/test/TeamRadioTicker.test.tsx b/frontend/src/test/TeamRadioTicker.test.tsx new file mode 100644 index 0000000..02569a1 --- /dev/null +++ b/frontend/src/test/TeamRadioTicker.test.tsx @@ -0,0 +1,87 @@ +import { afterEach, describe, expect, it, vi } from 'vitest' +import { fireEvent, render, screen } from '@testing-library/react' +import { TeamRadioTicker } from '../components/live/TeamRadioTicker' +import { radioClipUrl } from '../lib/radio' +import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../types' + +const session: LiveSessionMeta = { + MeetingName: 'British Grand Prix', + CircuitName: 'Silverstone', + SessionType: 'Race', + SessionName: 'Race', + Path: '/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/', +} + +const driverInfo: Record = { + '4': { + RacingNumber: '4', + BroadcastName: 'L NORRIS', + Tla: 'NOR', + TeamName: 'McLaren', + TeamColour: 'ff8000', + FirstName: 'Lando', + LastName: 'Norris', + }, + '16': { + RacingNumber: '16', + BroadcastName: 'C LECLERC', + Tla: 'LEC', + TeamName: 'Ferrari', + TeamColour: 'e8002d', + FirstName: 'Charles', + LastName: 'Leclerc', + }, +} + +const captures: LiveRadioCapture[] = [ + { Utc: '2026-07-05T14:05:00Z', RacingNumber: '16', Path: '/TeamRadio/LEC-1.mp3' }, + { Utc: '2026-07-05T14:07:00Z', RacingNumber: '4', Path: 'TeamRadio/NOR-1.mp3' }, +] + +afterEach(() => { + vi.restoreAllMocks() +}) + +describe('radioClipUrl', () => { + it('builds static CDN URLs from the session path and capture path', () => { + expect(radioClipUrl(session, captures[0])).toBe( + 'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/LEC-1.mp3', + ) + }) + + it('returns an empty URL without path data', () => { + expect(radioClipUrl({ ...session, Path: '' }, captures[0])).toBe('') + expect(radioClipUrl(session, { ...captures[0], Path: '' })).toBe('') + }) +}) + +describe('TeamRadioTicker', () => { + it('renders captures newest first with driver labels', () => { + vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-07-05T14:10:00Z')) + + render() + + const rows = screen.getAllByRole('button') + expect(rows).toHaveLength(2) + expect(screen.getByText('NOR')).toBeInTheDocument() + expect(screen.getByText('LEC')).toBeInTheDocument() + expect(screen.getAllByText(/m ago/).map((node) => node.textContent)).toEqual(['3m ago', '5m ago']) + }) + + it('uses one audio element and toggles play/pause per clip', () => { + const play = vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockResolvedValue() + const pause = vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {}) + + render() + + fireEvent.click(screen.getByLabelText('Play NOR radio')) + expect(play).toHaveBeenCalledTimes(1) + expect(document.querySelectorAll('audio')).toHaveLength(1) + expect(document.querySelector('audio')?.getAttribute('src')).toBe( + 'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/NOR-1.mp3', + ) + + fireEvent.click(screen.getByLabelText('Pause NOR radio')) + expect(pause).toHaveBeenCalled() + }) +}) diff --git a/frontend/src/test/TyreDegPanel.test.tsx b/frontend/src/test/TyreDegPanel.test.tsx new file mode 100644 index 0000000..40975a3 --- /dev/null +++ b/frontend/src/test/TyreDegPanel.test.tsx @@ -0,0 +1,108 @@ +import { describe, expect, it } from 'vitest' +import { fireEvent, render, screen } from '@testing-library/react' +import { TyreDegPanel } from '../components/live/TyreDegPanel' +import type { LiveTimingRow } from '../lib/live' +import type { LiveDriverData, LiveTyreData } from '../types' + +function makeRow( + number: string, + position: number, + tla: string, + driver: Partial = {}, + tyre: Partial = {}, +): LiveTimingRow { + return { + RacingNumber: number, + Position: position, + Driver: { + RacingNumber: number, + Position: position, + Interval: position === 1 ? '' : '+5.0', + GapToLeader: '', + LastLapTime: '1:30.000', + NumberOfLaps: 10, + InPit: false, + PitOut: false, + Retired: false, + ...driver, + } as LiveDriverData, + Info: { + RacingNumber: number, + BroadcastName: '', + Tla: tla, + TeamName: '', + TeamColour: '3671c6', + FirstName: '', + LastName: '', + }, + Tyre: { Compound: 'MEDIUM', New: false, Age: 5, ...tyre } as LiveTyreData, + } +} + +function snapshotRows(lap: number, lastLapTime: string): LiveTimingRow[] { + return [ + makeRow('1', 1, 'VER', { NumberOfLaps: lap, LastLapTime: lastLapTime }), + makeRow('4', 2, 'NOR', { NumberOfLaps: lap, LastLapTime: lastLapTime }), + ] +} + +describe('TyreDegPanel', () => { + it('shows a warming-up placeholder until enough clean laps accumulate', () => { + render() + const panel = screen.getByTestId('tyredeg-panel') + expect(panel).toHaveTextContent('VER') + expect(panel).toHaveTextContent('M +5') + expect(panel).toHaveTextContent('fresh') + expect(panel).toHaveTextContent('warming up') + }) + + it('annotates tyre age meaning on stint rows', () => { + const rows = [ + makeRow('1', 1, 'VER', { NumberOfLaps: 10, LastLapTime: '1:30.000' }, { Compound: 'MEDIUM', Age: 12 }), + ] + render() + expect(screen.getByText('mid-life')).toBeInTheDocument() + }) + + it('renders slope and rejoin estimate once laps accumulate across snapshots', () => { + const { rerender } = render( + , + ) + // Five completed laps at +0.1s/lap after the first observed snapshot. + for (let lap = 2; lap <= 6; lap++) { + const time = `1:30.${String((lap - 1) * 100).padStart(3, '0')}` + rerender() + } + + const panel = screen.getByTestId('tyredeg-panel') + expect(panel).toHaveTextContent('+0.10s/lap') + expect(panel).not.toHaveTextContent('warming up') + // VER pits from P1 with NOR +5.0 behind: NOR gets past -> rejoin ~P2. + expect(panel).toHaveTextContent('→ ~P2') + }) + + it('hides the rejoin estimate outside race sessions and collapses on toggle', () => { + render() + const panel = screen.getByTestId('tyredeg-panel') + expect(panel).not.toHaveTextContent('~P') + + expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(2) + fireEvent.click(screen.getByRole('button', { name: /tyre deg/i })) + expect(screen.queryAllByTestId('tyredeg-row')).toHaveLength(0) + }) + + it('limits rows to the top ten plus pinned drivers', () => { + const rows = Array.from({ length: 15 }, (_, index) => + makeRow(String(index + 1), index + 1, `D${index + 1}`), + ) + render() + expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(11) + expect(screen.getByText('D14')).toBeInTheDocument() + expect(screen.queryByText('D12')).not.toBeInTheDocument() + }) + + it('renders nothing without rows', () => { + render() + expect(screen.queryByTestId('tyredeg-panel')).not.toBeInTheDocument() + }) +}) diff --git a/frontend/src/test/compare-view.test.tsx b/frontend/src/test/compare-view.test.tsx new file mode 100644 index 0000000..0eccbaf --- /dev/null +++ b/frontend/src/test/compare-view.test.tsx @@ -0,0 +1,439 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest' +import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { CompareView } from '../components/CompareView' +import type { Driver, EnrichedResult, LapsComparisonResponse } from '../types' +import { + buildBestLapTraceSeries, + carDataToTraceSeries, + comparisonToDeltaSeries, + defaultCompareDriverNumbers, + filterCarDataToLap, + findBestLap, + formatPitLapsCaption, + lapsToLapTimes, +} from '../lib/compare' +import { computeCumulativeDeltas } from '../lib/delta' + +vi.mock('../api', () => ({ + fetchTelemetry: vi.fn(), + fetchLapsComparison: vi.fn(), +})) + +import { fetchTelemetry, fetchLapsComparison } from '../api' + +const mockFetchTelemetry = vi.mocked(fetchTelemetry) +const mockFetchLapsComparison = vi.mocked(fetchLapsComparison) + +const results: 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: null, + 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: null, + gap_to_leader: 5.1, + number_of_laps: 78, + points: 18, + session_key: 9472, + meeting_key: 1229, + }, +] + +const drivers: Driver[] = [ + { + driver_number: 1, + name_acronym: 'VER', + full_name: 'Max Verstappen', + first_name: 'Max', + last_name: 'Verstappen', + team_name: 'Red Bull Racing', + team_colour: '3671C6', + headshot_url: '', + broadcast_name: 'M VERSTAPPEN', + session_key: 9472, + meeting_key: 1229, + }, + { + driver_number: 44, + name_acronym: 'HAM', + full_name: 'Lewis Hamilton', + first_name: 'Lewis', + last_name: 'Hamilton', + team_name: 'Ferrari', + team_colour: 'E8002D', + headshot_url: '', + broadcast_name: 'L HAMILTON', + session_key: 9472, + meeting_key: 1229, + }, +] + +const comparison: LapsComparisonResponse = { + session_key: 9472, + sc_periods: [], + pit_laps: { '44': [19, 40] }, + drivers: [ + { + driver_number: 1, + name_acronym: 'VER', + team_colour: '3671C6', + laps: [ + { + session_key: 9472, + driver_number: 1, + meeting_key: 1229, + lap_number: 1, + date_start: '2025-05-25T13:00:00.000Z', + lap_duration: 92.1, + is_pit_out_lap: false, + }, + { + session_key: 9472, + driver_number: 1, + meeting_key: 1229, + lap_number: 2, + date_start: '2025-05-25T13:01:32.100Z', + lap_duration: 90.5, + is_pit_out_lap: false, + }, + ], + }, + { + driver_number: 44, + name_acronym: 'HAM', + team_colour: 'E8002D', + laps: [ + { + session_key: 9472, + driver_number: 44, + meeting_key: 1229, + lap_number: 1, + date_start: '2025-05-25T13:00:01.000Z', + lap_duration: 93.0, + is_pit_out_lap: false, + }, + { + session_key: 9472, + driver_number: 44, + meeting_key: 1229, + lap_number: 2, + date_start: '2025-05-25T13:01:34.000Z', + lap_duration: null, + is_pit_out_lap: true, + }, + { + session_key: 9472, + driver_number: 44, + meeting_key: 1229, + lap_number: 3, + date_start: '2025-05-25T13:03:10.000Z', + lap_duration: 91.2, + is_pit_out_lap: false, + }, + ], + }, + ], +} + +const nextSessionResults: EnrichedResult[] = [ + { + driver_number: 16, + position: 1, + name_acronym: 'LEC', + full_name: 'Charles Leclerc', + team_name: 'Ferrari', + team_colour: 'E8002D', + dnf: false, + dns: false, + dsq: false, + duration: null, + gap_to_leader: null, + number_of_laps: 57, + points: 25, + session_key: 9550, + meeting_key: 1234, + }, + { + driver_number: 55, + position: 2, + name_acronym: 'SAI', + full_name: 'Carlos Sainz', + team_name: 'Williams', + team_colour: '64C4FF', + dnf: false, + dns: false, + dsq: false, + duration: null, + gap_to_leader: 3.2, + number_of_laps: 57, + points: 18, + session_key: 9550, + meeting_key: 1234, + }, +] + +const nextSessionDrivers: Driver[] = [ + { + driver_number: 16, + name_acronym: 'LEC', + full_name: 'Charles Leclerc', + first_name: 'Charles', + last_name: 'Leclerc', + team_name: 'Ferrari', + team_colour: 'E8002D', + headshot_url: '', + broadcast_name: 'C LECLERC', + session_key: 9550, + meeting_key: 1234, + }, + { + driver_number: 55, + name_acronym: 'SAI', + full_name: 'Carlos Sainz', + first_name: 'Carlos', + last_name: 'Sainz', + team_name: 'Williams', + team_colour: '64C4FF', + headshot_url: '', + broadcast_name: 'C SAINZ', + session_key: 9550, + meeting_key: 1234, + }, +] + +function renderCompareView( + props: { + sessionKey?: number + results?: EnrichedResult[] + drivers?: Driver[] + } = {}, +) { + const client = new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }) + return render( + + + , + ) +} + +describe('compare mapping helpers', () => { + it('defaults to top two finishers', () => { + expect(defaultCompareDriverNumbers(results, drivers)).toEqual([1, 44]) + }) + + it('maps comparison laps to delta series with null pit laps', () => { + const series = comparisonToDeltaSeries(comparison, [1, 44], drivers) + expect(series).toHaveLength(2) + expect(series[0].label).toBe('VER') + expect(series[1].lapTimes[1]).toBeNull() + + const deltas = computeCumulativeDeltas(series, 'VER') + expect(deltas[0].deltas[0]).toBeCloseTo(0.9) + }) + + it('maps car data to trace series', () => { + const trace = carDataToTraceSeries( + [ + { + speed: 300, + throttle: 100, + brake: 0, + date: '', + driver_number: 1, + drs: 0, + meeting_key: 1, + n_gear: 8, + rpm: 12000, + session_key: 1, + }, + ], + 'VER', + '#3671C6', + ) + expect(trace.samples[0]).toEqual({ speed: 300, throttle: 100, brake: 0 }) + }) + + it('filters car data to best lap window', () => { + const best = findBestLap(comparison.drivers[0].laps) + expect(best?.lap_number).toBe(2) + + const samples = [ + { + date: '2025-05-25T13:01:32.100Z', + speed: 280, + throttle: 90, + brake: 0, + driver_number: 1, + drs: 0, + meeting_key: 1229, + n_gear: 7, + rpm: 11000, + session_key: 9472, + }, + { + date: '2025-05-25T13:00:00.000Z', + speed: 200, + throttle: 50, + brake: 10, + driver_number: 1, + drs: 0, + meeting_key: 1229, + n_gear: 4, + rpm: 9000, + session_key: 9472, + }, + ] + + const filtered = filterCarDataToLap(samples, best!) + expect(filtered).toHaveLength(1) + expect(filtered[0].speed).toBe(280) + }) + + it('builds best-lap trace series from car data and laps', () => { + const series = buildBestLapTraceSeries( + [ + { + date: '2025-05-25T13:01:33.000Z', + speed: 310, + throttle: 100, + brake: 0, + driver_number: 1, + drs: 10, + meeting_key: 1229, + n_gear: 8, + rpm: 12000, + session_key: 9472, + }, + ], + comparison.drivers[0].laps, + 'VER', + '#3671C6', + ) + expect(series?.samples).toHaveLength(1) + expect(series?.samples[0].speed).toBe(310) + }) + + it('maps laps to lap time arrays with nulls', () => { + expect(lapsToLapTimes(comparison.drivers[1].laps)).toEqual([93.0, null, 91.2]) + }) + + it('formats pit lap captions', () => { + expect(formatPitLapsCaption(comparison.pit_laps, [1, 44], comparison, drivers)).toBe( + 'Pit stops — HAM: L19, L40', + ) + }) +}) + +describe('CompareView', () => { + beforeEach(() => { + vi.clearAllMocks() + mockFetchLapsComparison.mockResolvedValue(comparison) + mockFetchTelemetry.mockResolvedValue([ + { + date: '2025-05-25T13:01:33.000Z', + speed: 310, + throttle: 100, + brake: 0, + driver_number: 1, + drs: 10, + meeting_key: 1229, + n_gear: 8, + rpm: 12000, + session_key: 9472, + }, + ]) + }) + + it('renders pickers defaulting to top two finishers', async () => { + renderCompareView() + expect(screen.getByTestId('compare-picker-a')).toHaveValue('1') + expect(screen.getByTestId('compare-picker-b')).toHaveValue('44') + expect(screen.getAllByText('VER').length).toBeGreaterThan(0) + expect(screen.getAllByText('HAM').length).toBeGreaterThan(0) + }) + + it('resets the selected pair when the mounted session changes', async () => { + const { rerender } = renderCompareView() + + fireEvent.change(screen.getByTestId('compare-picker-a'), { target: { value: '44' } }) + expect(screen.getByTestId('compare-picker-a')).toHaveValue('44') + + rerender( + + + , + ) + + await waitFor(() => { + expect(screen.getByTestId('compare-picker-a')).toHaveValue('16') + expect(screen.getByTestId('compare-picker-b')).toHaveValue('55') + }) + }) + + it('renders telemetry and pace sections with mocked queries', async () => { + renderCompareView() + + await waitFor(() => { + expect(mockFetchLapsComparison).toHaveBeenCalledWith(9472, [1, 44]) + }) + + await waitFor(() => { + expect(screen.getByTestId('telemetry-trace')).toBeInTheDocument() + }) + + expect(screen.getByTestId('delta-time-graph')).toBeInTheDocument() + expect(screen.getByTestId('compare-pit-caption')).toHaveTextContent('HAM: L19, L40') + }) + + it('shows error state when comparison fetch fails', async () => { + mockFetchLapsComparison.mockRejectedValue(new Error('comparison unavailable')) + renderCompareView() + + await waitFor(() => { + expect(screen.getByText('comparison unavailable')).toBeInTheDocument() + }) + }) + + it('shows empty state when fewer than two drivers', () => { + const client = new QueryClient({ defaultOptions: { queries: { retry: false } } }) + render( + + + , + ) + expect(screen.getByTestId('compare-view-empty')).toBeInTheDocument() + }) +}) diff --git a/frontend/src/test/delta-time-graph.test.tsx b/frontend/src/test/delta-time-graph.test.tsx new file mode 100644 index 0000000..291d136 --- /dev/null +++ b/frontend/src/test/delta-time-graph.test.tsx @@ -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() + 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() + 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() + 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() + 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() + }) +}) diff --git a/frontend/src/test/events.test.ts b/frontend/src/test/events.test.ts new file mode 100644 index 0000000..63aefdf --- /dev/null +++ b/frontend/src/test/events.test.ts @@ -0,0 +1,268 @@ +import { describe, expect, it } from 'vitest' +import { + MAX_EVENTS, + appendEvents, + diffSnapshots, + humanizeRaceControl, + sessionSignature, +} from '../lib/events' +import type { LiveEvent } from '../lib/events' +import type { + LiveDriverData, + LiveDriverInfo, + LiveRCMessage, + LiveStreamData, +} from '../types' + +function driver(number: string, position: number, overrides: Partial = {}): LiveDriverData { + return { + RacingNumber: number, + Position: position, + PrevPosition: position, + GapToLeader: '', + Interval: '', + LastLapTime: '', + LastLapPB: false, + LastLapOB: false, + BestLapTime: '', + BestLapPB: false, + BestLapOB: false, + BestLapNum: 0, + InPit: false, + PitOut: false, + Retired: false, + KnockedOut: false, + Cutoff: false, + OnFlyingLap: false, + NumberOfLaps: 10, + SpeedTrap: '', + Sectors: [], + ...overrides, + } +} + +function info(number: string, tla: string): LiveDriverInfo { + return { + RacingNumber: number, + BroadcastName: tla, + Tla: tla, + TeamName: '', + TeamColour: '3671C6', + FirstName: '', + LastName: '', + } +} + +function snapshot( + drivers: Record, + overrides: Partial = {}, +): LiveStreamData { + return { + Drivers: drivers, + DriverInfo: { + '1': info('1', 'VER'), + '4': info('4', 'NOR'), + '44': info('44', 'HAM'), + }, + Tyres: {}, + RCMessages: [], + TeamRadio: [], + Weather: {} as LiveStreamData['Weather'], + Session: { + MeetingName: 'Test Grand Prix', + CircuitName: 'Test Circuit', + SessionType: 'Race', + SessionName: 'Race', + Path: '', + }, + TrackStatus: '1', + CurrentLap: 12, + TotalLaps: 57, + Clock: '01:23:45', + ClockRefTime: '', + ClockExtrapolating: false, + Stints: {}, + ...overrides, + } +} + +function rc(message: string, category: string, overrides: Partial = {}): LiveRCMessage { + return { Time: '2026-07-03T14:00:00Z', Category: category, Flag: '', Message: message, Lap: 12, ...overrides } +} + +describe('diffSnapshots', () => { + it('returns no events for identical snapshots', () => { + const prev = snapshot({ '1': driver('1', 1), '44': driver('44', 2) }) + const next = snapshot({ '1': driver('1', 1), '44': driver('44', 2) }) + expect(diffSnapshots(prev, next)).toEqual([]) + }) + + it('reports an overtake when two drivers swap positions', () => { + const prev = snapshot({ '1': driver('1', 3), '44': driver('44', 2) }) + const next = snapshot({ '1': driver('1', 2), '44': driver('44', 3) }) + const events = diffSnapshots(prev, next) + expect(events).toHaveLength(1) + expect(events[0].kind).toBe('overtake') + expect(events[0].headline).toBe('VER overtakes HAM for P2') + expect(events[0].racingNumbers).toEqual(['1', '44']) + expect(events[0].lap).toBe(12) + }) + + it('reports a generic gain when the displaced driver pitted instead', () => { + const prev = snapshot({ '1': driver('1', 3), '44': driver('44', 2) }) + const next = snapshot({ '1': driver('1', 2), '44': driver('44', 5, { InPit: true }) }) + const events = diffSnapshots(prev, next) + const gain = events.find((event) => event.kind === 'position-gain') + expect(gain?.headline).toBe('VER moves up to P2 (from P3)') + // HAM's drop is covered by the pit-in event, not a position-loss one. + expect(events.some((event) => event.kind === 'position-loss')).toBe(false) + expect(events.some((event) => event.kind === 'pit-in')).toBe(true) + }) + + it('reports a position loss not explained by an overtake or pit stop', () => { + const prev = snapshot({ '44': driver('44', 3) }) + const next = snapshot({ '44': driver('44', 6) }) + const events = diffSnapshots(prev, next) + expect(events).toHaveLength(1) + expect(events[0].kind).toBe('position-loss') + expect(events[0].headline).toBe('HAM drops to P6 (from P3)') + }) + + it('reports pit entry with the position pitted from', () => { + const prev = snapshot({ '4': driver('4', 3) }) + const next = snapshot({ '4': driver('4', 3, { InPit: true }) }) + const events = diffSnapshots(prev, next) + expect(events).toHaveLength(1) + expect(events[0].kind).toBe('pit-in') + expect(events[0].headline).toBe('NOR pits from P3') + expect(events[0].racingNumbers).toEqual(['4']) + }) + + it('reports pit exit with rejoin position, compound, and stop count', () => { + const prev = snapshot({ '4': driver('4', 3, { InPit: true }) }) + const next = snapshot( + { '4': driver('4', 6, { PitOut: true }) }, + { + Tyres: { '4': { Compound: 'MEDIUM', New: true, Age: 0 } }, + Stints: { + '4': [ + { Compound: 'SOFT', New: true, Laps: 12 }, + { Compound: 'HARD', New: true, Laps: 20 }, + { Compound: 'MEDIUM', New: true, Laps: 0 }, + ], + }, + }, + ) + const events = diffSnapshots(prev, next) + expect(events).toHaveLength(1) + expect(events[0].kind).toBe('pit-out') + expect(events[0].headline).toBe('NOR rejoins P6 (MEDIUM, 2nd stop)') + }) + + it('reports personal and overall best laps once per lap time', () => { + const prev = snapshot({ + '1': driver('1', 1, { LastLapTime: '1:24.500' }), + '4': driver('4', 2, { LastLapTime: '1:25.100' }), + }) + const next = snapshot({ + '1': driver('1', 1, { LastLapTime: '1:23.456', LastLapPB: true, LastLapOB: true }), + '4': driver('4', 2, { LastLapTime: '1:24.900', LastLapPB: true }), + }) + const events = diffSnapshots(prev, next) + const fastest = events.find((event) => event.kind === 'fastest-lap') + const personal = events.find((event) => event.kind === 'personal-best') + expect(fastest?.headline).toBe('VER sets the fastest lap — 1:23.456') + expect(personal?.headline).toBe('NOR sets a personal best — 1:24.900') + // A repeat diff of the same state produces nothing new. + expect(diffSnapshots(next, snapshot(next.Drivers))).toEqual([]) + }) + + it('reports a retirement with the last running position', () => { + const prev = snapshot({ '44': driver('44', 5) }) + const next = snapshot({ '44': driver('44', 5, { Retired: true }) }) + const events = diffSnapshots(prev, next) + expect(events).toHaveLength(1) + expect(events[0].kind).toBe('retirement') + expect(events[0].headline).toBe('HAM retires') + expect(events[0].detail).toBe('Was running P5') + }) + + it('reports track status transitions as human sentences', () => { + const prev = snapshot({ '1': driver('1', 1) }) + const next = snapshot({ '1': driver('1', 1) }, { TrackStatus: '4' }) + const events = diffSnapshots(prev, next) + expect(events).toHaveLength(1) + expect(events[0].kind).toBe('track-status') + expect(events[0].headline).toBe('Safety Car deployed') + }) + + it('reports new Flag/SafetyCar/Drs race-control messages and skips other categories', () => { + const existing = rc('YELLOW IN TRACK SECTOR 7', 'Flag', { Time: '2026-07-03T13:00:00Z' }) + const prev = snapshot({ '1': driver('1', 1) }, { RCMessages: [existing] }) + const next = snapshot({ '1': driver('1', 1) }, { + RCMessages: [ + existing, + rc('DRS ENABLED', 'Drs'), + rc('FIA STEWARDS: CAR 4 (NOR) UNDER INVESTIGATION', 'Other'), + ], + }) + const events = diffSnapshots(prev, next) + expect(events).toHaveLength(1) + expect(events[0].kind).toBe('race-control') + expect(events[0].headline).toBe('DRS enabled') + }) + + it('produces stable ids across repeated diffs of the same snapshots', () => { + const prev = snapshot({ '1': driver('1', 3), '44': driver('44', 2) }) + const next = snapshot({ '1': driver('1', 2), '44': driver('44', 3) }) + const first = diffSnapshots(prev, next) + const second = diffSnapshots(prev, next) + expect(first.map((event) => event.id)).toEqual(second.map((event) => event.id)) + }) +}) + +describe('humanizeRaceControl', () => { + it('sentence-cases while preserving acronyms', () => { + expect(humanizeRaceControl('SAFETY CAR DEPLOYED')).toBe('Safety car deployed') + expect(humanizeRaceControl('DRS ENABLED')).toBe('DRS enabled') + expect(humanizeRaceControl('VSC DEPLOYED')).toBe('VSC deployed') + }) +}) + +describe('appendEvents', () => { + const event = (id: string): LiveEvent => ({ + id, + kind: 'race-control', + lap: 1, + timestamp: '', + headline: id, + racingNumbers: [], + }) + + it('prepends new events newest-first and dedups by id', () => { + const buffer = appendEvents([event('a')], [event('a'), event('b'), event('c')]) + expect(buffer.map((entry) => entry.id)).toEqual(['c', 'b', 'a']) + // Re-appending the same diff output changes nothing. + const again = appendEvents(buffer, [event('b'), event('c')]) + expect(again.map((entry) => entry.id)).toEqual(['c', 'b', 'a']) + }) + + it('evicts the oldest events beyond the cap', () => { + let buffer: LiveEvent[] = [] + for (let index = 0; index < MAX_EVENTS + 5; index += 1) { + buffer = appendEvents(buffer, [event(`event-${index}`)]) + } + expect(buffer).toHaveLength(MAX_EVENTS) + expect(buffer[0].id).toBe(`event-${MAX_EVENTS + 4}`) + expect(buffer[buffer.length - 1].id).toBe('event-5') + }) +}) + +describe('sessionSignature', () => { + it('changes when the session changes, enabling buffer resets', () => { + const race = snapshot({}).Session + expect(sessionSignature(race)).toBe('Test Grand Prix|Race|Race') + expect(sessionSignature({ ...race, SessionName: 'Qualifying' })).not.toBe(sessionSignature(race)) + expect(sessionSignature(null)).toBe('') + }) +}) diff --git a/frontend/src/test/hero.test.ts b/frontend/src/test/hero.test.ts new file mode 100644 index 0000000..21af353 --- /dev/null +++ b/frontend/src/test/hero.test.ts @@ -0,0 +1,123 @@ +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_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') + }) +}) diff --git a/frontend/src/test/hero.test.tsx b/frontend/src/test/hero.test.tsx new file mode 100644 index 0000000..3db06d1 --- /dev/null +++ b/frontend/src/test/hero.test.tsx @@ -0,0 +1,257 @@ +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 + }) => ( + + {children} + + ), +})) + +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> = {}) { + const props: ComponentProps = { + 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() +} + +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') + }) +}) diff --git a/frontend/src/test/live.test.ts b/frontend/src/test/live.test.ts index 28b90ef..68b331b 100644 --- a/frontend/src/test/live.test.ts +++ b/frontend/src/test/live.test.ts @@ -100,7 +100,8 @@ const snapshot: LiveStreamData = { { Time: '14:08', Category: 'Drs', Flag: '', Message: 'DRS ENABLED', Lap: 3 }, ], Weather: { AirTemp: 20, TrackTemp: 31, Humidity: 55, WindSpeed: 2, WindDir: 180, Rainfall: false }, - Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' }, + Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '2026/Monaco/Race' }, + TeamRadio: [], TrackStatus: '1', CurrentLap: 21, TotalLaps: 78, @@ -220,7 +221,7 @@ describe('track status mapping', () => { describe('live qualifying display', () => { it('puts the SQ1 cutoff after P17 for a 22-car sprint qualifying session', () => { const display = liveSessionDisplay( - { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying' }, + { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying', Path: '' }, rows(22), ) expect(display.phaseLabel).toBe('SQ1') @@ -232,7 +233,7 @@ describe('live qualifying display', () => { it('keeps the normal Q1 cutoff after P15 for a 20-car qualifying session', () => { const display = liveSessionDisplay( - { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' }, + { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' }, rows(20), ) expect(display.phaseLabel).toBe('Q1') @@ -241,7 +242,7 @@ describe('live qualifying display', () => { it('moves phase 2 cutoff after P10 once five cars are knocked out', () => { const display = liveSessionDisplay( - { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' }, + { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' }, rows(20, 5), ) expect(display.phaseLabel).toBe('Q2') @@ -251,13 +252,13 @@ describe('live qualifying display', () => { it('shows no cutoff for race sessions or Q3', () => { expect( liveSessionDisplay( - { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' }, + { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '' }, rows(20), ).cutoffPosition, ).toBeNull() expect( liveSessionDisplay( - { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3' }, + { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3', Path: '' }, rows(10), ).cutoffPosition, ).toBeNull() diff --git a/frontend/src/test/meaning.test.ts b/frontend/src/test/meaning.test.ts new file mode 100644 index 0000000..8d7c6e6 --- /dev/null +++ b/frontend/src/test/meaning.test.ts @@ -0,0 +1,71 @@ +import { describe, expect, it } from 'vitest' +import { + INTERVAL_DRS_MAX_SECONDS, + INTERVAL_UNDERCUT_MAX_SECONDS, + INTERVAL_UNDERCUT_MIN_SECONDS, + MAX_POINTS_PER_ROUND, + TYRE_CLIFF_LAPS, + intervalMeaning, + pointsGapMeaning, + tyreAgeMeaning, +} from '../lib/meaning' + +describe('intervalMeaning', () => { + it('returns DRS range below the threshold', () => { + expect(intervalMeaning(0.4)?.caption).toBe('DRS range') + expect(intervalMeaning(INTERVAL_DRS_MAX_SECONDS - 0.01)?.caption).toBe('DRS range') + }) + + it('returns undercut window in the middle band', () => { + expect(intervalMeaning(INTERVAL_UNDERCUT_MIN_SECONDS)?.caption).toBe('undercut window') + expect(intervalMeaning(2.0)?.caption).toBe('undercut window') + expect(intervalMeaning(INTERVAL_UNDERCUT_MAX_SECONDS)?.caption).toBe('undercut window') + }) + + it('returns null outside known bands', () => { + expect(intervalMeaning(INTERVAL_UNDERCUT_MAX_SECONDS + 0.5)).toBeNull() + expect(intervalMeaning(10)).toBeNull() + expect(intervalMeaning(null)).toBeNull() + expect(intervalMeaning(undefined)).toBeNull() + expect(intervalMeaning(-1)).toBeNull() + }) +}) + +describe('tyreAgeMeaning', () => { + it('labels fresh, mid-life, and laps-to-cliff for SOFT', () => { + const cliff = TYRE_CLIFF_LAPS.SOFT + expect(tyreAgeMeaning('SOFT', 2)?.caption).toBe('fresh') + expect(tyreAgeMeaning('SOFT', Math.ceil(cliff * 0.5))?.caption).toBe('mid-life') + expect(tyreAgeMeaning('SOFT', cliff - 2)?.caption).toBe('~2 laps to cliff') + expect(tyreAgeMeaning('SOFT', cliff + 5)?.caption).toBe('past cliff') + }) + + it('handles unknown compounds with defaults', () => { + expect(tyreAgeMeaning('UNKNOWN', 3)?.caption).toBe('fresh') + expect(tyreAgeMeaning(undefined, 3)?.caption).toBe('fresh') + }) + + it('returns null for invalid age', () => { + expect(tyreAgeMeaning('MEDIUM', null)).toBeNull() + expect(tyreAgeMeaning('MEDIUM', -1)).toBeNull() + }) +}) + +describe('pointsGapMeaning', () => { + it('computes catchable pts/round', () => { + const result = pointsGapMeaning(40, 4, 'VER') + expect(result?.caption).toBe('~10 pts/round') + expect(result?.title).toContain('VER') + }) + + it('marks uncatchable gaps', () => { + const max = 3 * MAX_POINTS_PER_ROUND + expect(pointsGapMeaning(max + 1, 3, 'VER')?.caption).toBe('out of reach') + }) + + it('returns null for leader or invalid input', () => { + expect(pointsGapMeaning(0, 4)).toBeNull() + expect(pointsGapMeaning(10, 0)).toBeNull() + expect(pointsGapMeaning(null, 4)).toBeNull() + }) +}) diff --git a/frontend/src/test/telemetry-trace-chart.test.tsx b/frontend/src/test/telemetry-trace-chart.test.tsx new file mode 100644 index 0000000..1281cb7 --- /dev/null +++ b/frontend/src/test/telemetry-trace-chart.test.tsx @@ -0,0 +1,118 @@ +import { describe, expect, it } from 'vitest' +import { fireEvent, render, screen } from '@testing-library/react' +import { + TelemetryTraceChart, + type TelemetryTraceSeries, +} from '../components/charts/TelemetryTraceChart' + +function makeSeries(label: string, color: string, speeds: number[]): TelemetryTraceSeries { + return { + label, + color, + samples: speeds.map((speed, i) => ({ + speed, + throttle: (i * 25) % 101, + brake: i % 2 === 0 ? 100 : 0, + })), + } +} + +const VER = makeSeries('VER', '#2563eb', [280, 310, 190, 90, 240]) +const LEC = makeSeries('LEC', '#dc2626', [275, 305, 200, 95, 235]) + +describe('TelemetryTraceChart', () => { + it('renders one polyline per series per channel', () => { + const { container } = render() + const lines = container.querySelectorAll('polyline.telemetry-trace-line') + expect(lines).toHaveLength(2 * 3) + for (const channel of ['speed', 'throttle', 'brake']) { + expect( + container.querySelectorAll(`polyline.telemetry-trace-line[data-channel="${channel}"]`), + ).toHaveLength(2) + } + expect( + container.querySelectorAll('polyline.telemetry-trace-line[data-series="VER"]'), + ).toHaveLength(3) + }) + + it('respects the channels prop', () => { + const { container } = render() + expect(container.querySelectorAll('polyline.telemetry-trace-line')).toHaveLength(1) + expect(container.querySelectorAll('.telemetry-trace-panel')).toHaveLength(1) + }) + + it('renders an empty state for no series', () => { + render() + expect(screen.getByText('No telemetry data')).toBeInTheDocument() + }) + + it('renders an empty state when a series has no samples', () => { + render() + expect(screen.getByText('No telemetry data')).toBeInTheDocument() + }) + + it('survives a single sample and mismatched series lengths', () => { + const short = makeSeries('VER', '#2563eb', [300]) + const long = makeSeries('LEC', '#dc2626', [280, 290, 300]) + const { container } = render() + // Clamped to the shortest series: every polyline has exactly one point. + const lines = container.querySelectorAll('polyline.telemetry-trace-line') + expect(lines).toHaveLength(6) + for (const line of lines) { + expect(line.getAttribute('points')!.trim().split(' ')).toHaveLength(1) + } + }) + + it('clamps throttle values to 0-100 within the panel', () => { + const wild: TelemetryTraceSeries = { + label: 'VER', + color: '#2563eb', + samples: [ + { speed: 100, throttle: 150, brake: 0 }, + { speed: 100, throttle: -20, brake: 0 }, + { speed: 100, throttle: 50, brake: 0 }, + ], + } + const { container } = render( + , + ) + const line = container.querySelector('polyline.telemetry-trace-line[data-channel="throttle"]')! + const ys = line + .getAttribute('points')! + .split(' ') + .map((p) => Number(p.split(',')[1])) + // Panel occupies y 0..110 with 6px padding; clamped values pin to the edges. + expect(ys[0]).toBeCloseTo(6, 1) // 150% -> 100% -> panel top + expect(ys[1]).toBeCloseTo(104, 1) // -20% -> 0% -> panel bottom + expect(ys[2]).toBeCloseTo(55, 1) // 50% -> middle + }) + + it('shows the speed axis max in km/h', () => { + render() + expect(screen.getByText('310 km/h')).toBeInTheDocument() + }) + + it('lists every series in the legend with a color swatch', () => { + const { container } = render() + const legend = container.querySelector('.telemetry-trace-legend')! + expect(legend.textContent).toContain('VER') + expect(legend.textContent).toContain('LEC') + expect(legend.querySelectorAll('.telemetry-trace-swatch')).toHaveLength(2) + }) + + it('shows a crosshair and per-driver readout on hover, hides on leave', () => { + const { container } = render() + const svg = container.querySelector('svg.telemetry-trace-svg')! + expect(screen.queryByTestId('telemetry-trace-crosshair')).not.toBeInTheDocument() + + fireEvent.mouseMove(svg, { clientX: 0, clientY: 10 }) + expect(screen.getByTestId('telemetry-trace-crosshair')).toBeInTheDocument() + const readout = screen.getByTestId('telemetry-trace-readout') + expect(readout.textContent).toContain('VER') + expect(readout.textContent).toContain('LEC') + expect(readout.textContent).toContain('km/h') + + fireEvent.mouseLeave(svg) + expect(screen.queryByTestId('telemetry-trace-crosshair')).not.toBeInTheDocument() + }) +}) diff --git a/frontend/src/test/tyre-stint-timeline.test.tsx b/frontend/src/test/tyre-stint-timeline.test.tsx new file mode 100644 index 0000000..b090c2e --- /dev/null +++ b/frontend/src/test/tyre-stint-timeline.test.tsx @@ -0,0 +1,149 @@ +import { describe, it, expect } from 'vitest' +import { render, screen } from '@testing-library/react' +import { TyreStintTimeline, type StintTimelineRow } from '../components/charts/TyreStintTimeline' +import { StrategyView } from '../components/StrategyView' +import type { EnrichedResult, Stint, PitStop } from '../types' + +const sampleRows: StintTimelineRow[] = [ + { + label: 'VER', + color: '#3671C6', + stints: [ + { compound: 'MEDIUM', lapStart: 1, lapEnd: 30 }, + { compound: 'SOFT', lapStart: 31, lapEnd: 78 }, + ], + }, + { + label: 'HAM', + color: '#E8002D', + stints: [{ compound: 'SOFT', lapStart: 1, lapEnd: 18 }], + }, +] + +describe('TyreStintTimeline', () => { + it('renders one rect per stint', () => { + const { container } = render( + , + ) + expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(3) + }) + + it('maps compounds to color classes', () => { + const { container } = render( + , + ) + const bars = container.querySelectorAll('.stint-timeline__bar') + expect(bars[0]).toHaveClass('tyre-medium') + expect(bars[1]).toHaveClass('tyre-soft') + expect(bars[2]).toHaveClass('tyre-soft') + }) + + it('shows native title with compound, lap range, and stint length', () => { + const { container } = render( + , + ) + const titles = [...container.querySelectorAll('title')].map((t) => t.textContent) + expect(titles).toContain('Medium · L1–30 · 30 laps') + expect(titles).toContain('Soft · L31–78 · 48 laps') + expect(titles).toContain('Soft · L1–18 · 18 laps') + }) + + it('renders lap-axis ticks every 10 laps', () => { + render() + expect(screen.getByText('0')).toBeInTheDocument() + expect(screen.getByText('10')).toBeInTheDocument() + expect(screen.getByText('20')).toBeInTheDocument() + expect(screen.getByText('70')).toBeInTheDocument() + }) + + it('shows legend only for used compounds', () => { + render() + expect(screen.getByTestId('legend-soft')).toBeInTheDocument() + expect(screen.getByTestId('legend-medium')).toBeInTheDocument() + expect(screen.queryByTestId('legend-hard')).not.toBeInTheDocument() + expect(screen.queryByTestId('legend-wet')).not.toBeInTheDocument() + expect(screen.getByText('Soft')).toBeInTheDocument() + expect(screen.getByText('Medium')).toBeInTheDocument() + }) + + it('renders empty state when rows are empty', () => { + render() + expect(screen.getByTestId('stint-timeline-empty')).toBeInTheDocument() + expect(screen.getByText(/No stint data/i)).toBeInTheDocument() + }) +}) + +const results: 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: null, + 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: null, + gap_to_leader: 5.1, + number_of_laps: 78, + points: 18, + session_key: 9472, + meeting_key: 1229, + }, +] + +const stints: Stint[] = [ + { + session_key: 9472, + driver_number: 1, + meeting_key: 1229, + stint_number: 1, + compound: 'MEDIUM', + lap_start: 1, + lap_end: 30, + tyre_age_at_start: 0, + }, + { + session_key: 9472, + driver_number: 44, + meeting_key: 1229, + stint_number: 1, + compound: 'SOFT', + lap_start: 1, + lap_end: 18, + tyre_age_at_start: 0, + }, +] + +const pitStops: PitStop[] = [] + +describe('StrategyView integration', () => { + it('renders timeline when stints exist', () => { + const { container } = render( + , + ) + expect(container.querySelector('[data-testid="strategy-chart"]')).toBeInTheDocument() + expect(screen.getByTestId('stint-timeline')).toBeInTheDocument() + expect(screen.getByText('VER')).toBeInTheDocument() + expect(screen.getByText('HAM')).toBeInTheDocument() + expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(2) + }) +}) diff --git a/frontend/src/test/tyredeg.test.ts b/frontend/src/test/tyredeg.test.ts new file mode 100644 index 0000000..99fb867 --- /dev/null +++ b/frontend/src/test/tyredeg.test.ts @@ -0,0 +1,281 @@ +import { describe, expect, it } from 'vitest' +import { + DEG_SLOPE_THRESHOLD, + MIN_CLEAN_LAPS, + PIT_LOSS_SECONDS, + cleanStintSamples, + degradationModel, + estimatePitRejoin, + formatSlope, + parseLapTimeSeconds, + recordStintSamples, + stintInputFromRow, +} from '../lib/tyredeg' +import type { StintHistoryMap, StintLapInput, StintSample } from '../lib/tyredeg' +import type { LiveTimingRow } from '../lib/live' +import type { LiveDriverData } from '../types' + +function makeInput(overrides: Partial = {}): StintLapInput { + return { + racingNumber: '1', + lapNumber: 1, + lastLapTime: '1:30.000', + compound: 'MEDIUM', + tyreAge: 1, + inPit: false, + pitOut: false, + ...overrides, + } +} + +/** Feed a sequence of snapshots for one driver through the accumulator. */ +function accumulate(snapshots: Array>): StintHistoryMap { + let history: StintHistoryMap = {} + for (const snapshot of snapshots) { + history = recordStintSamples(history, [makeInput(snapshot)]) + } + return history +} + +function makeRow( + number: string, + position: number, + tla: string, + driver: Partial = {}, +): LiveTimingRow { + return { + RacingNumber: number, + Position: position, + Driver: { + RacingNumber: number, + Position: position, + Interval: '', + GapToLeader: '', + LastLapTime: '1:30.000', + NumberOfLaps: 10, + InPit: false, + PitOut: false, + Retired: false, + ...driver, + } as LiveDriverData, + Info: { + RacingNumber: number, + BroadcastName: '', + Tla: tla, + TeamName: '', + TeamColour: '3671c6', + FirstName: '', + LastName: '', + }, + } +} + +describe('parseLapTimeSeconds', () => { + it('parses minute-form and plain-second lap times', () => { + expect(parseLapTimeSeconds('1:23.456')).toBeCloseTo(83.456) + expect(parseLapTimeSeconds('83.456')).toBeCloseTo(83.456) + }) + + it('rejects empty, garbage, and non-positive values', () => { + expect(parseLapTimeSeconds('')).toBeNull() + expect(parseLapTimeSeconds(undefined)).toBeNull() + expect(parseLapTimeSeconds(null)).toBeNull() + expect(parseLapTimeSeconds('LAP 12')).toBeNull() + expect(parseLapTimeSeconds('-1:30.000')).toBeNull() + }) +}) + +describe('recordStintSamples', () => { + it('accumulates one sample per completed lap across snapshots', () => { + const history = accumulate([ + { lapNumber: 1, lastLapTime: '1:30.000' }, + { lapNumber: 2, lastLapTime: '1:30.100' }, + { lapNumber: 2, lastLapTime: '1:30.100' }, // repeated snapshot, same lap + { lapNumber: 3, lastLapTime: '1:30.200' }, + ]) + expect(history['1'].samples).toEqual([ + { lap: 2, seconds: 90.1 }, + { lap: 3, seconds: 90.2 }, + ]) + }) + + it('does not record a lap from the very first snapshot seen', () => { + const history = accumulate([{ lapNumber: 5, lastLapTime: '1:29.000' }]) + expect(history['1'].samples).toEqual([]) + }) + + it('replaces (not duplicates) a sample when the lap time is corrected', () => { + const history = accumulate([ + { lapNumber: 1, lastLapTime: '1:30.000' }, + { lapNumber: 2, lastLapTime: '1:30.500' }, + { lapNumber: 2, lastLapTime: '1:30.400' }, // late correction for lap 2 + ]) + expect(history['1'].samples).toEqual([{ lap: 2, seconds: 90.4 }]) + }) + + it('resets the stint on compound change and skips the next lap', () => { + const history = accumulate([ + { lapNumber: 1, lastLapTime: '1:30.000', compound: 'SOFT', tyreAge: 1 }, + { lapNumber: 2, lastLapTime: '1:30.100', compound: 'SOFT', tyreAge: 2 }, + { lapNumber: 3, lastLapTime: '1:30.200', compound: 'SOFT', tyreAge: 3 }, + // Boxed for hards: old samples dropped, out-lap (lap 4) excluded. + { lapNumber: 4, lastLapTime: '1:52.000', compound: 'HARD', tyreAge: 0 }, + { lapNumber: 5, lastLapTime: '1:31.000', compound: 'HARD', tyreAge: 1 }, + { lapNumber: 6, lastLapTime: '1:31.100', compound: 'HARD', tyreAge: 2 }, + ]) + expect(history['1'].samples).toEqual([ + { lap: 5, seconds: 91.0 }, + { lap: 6, seconds: 91.1 }, + ]) + }) + + it('resets on a fresh set of the same compound (tyre age drops)', () => { + const history = accumulate([ + { lapNumber: 1, lastLapTime: '1:30.000', tyreAge: 10 }, + { lapNumber: 2, lastLapTime: '1:30.100', tyreAge: 11 }, + { lapNumber: 3, lastLapTime: '1:50.000', tyreAge: 0 }, // new mediums + { lapNumber: 4, lastLapTime: '1:30.500', tyreAge: 1 }, + ]) + expect(history['1'].samples).toEqual([{ lap: 4, seconds: 90.5 }]) + }) + + it('excludes laps completed in the pit lane or on pit exit', () => { + const history = accumulate([ + { lapNumber: 1, lastLapTime: '1:30.000' }, + { lapNumber: 2, lastLapTime: '1:30.100' }, + { lapNumber: 3, lastLapTime: '1:48.000', inPit: true }, // in-lap + { lapNumber: 4, lastLapTime: '1:45.000', pitOut: true, tyreAge: 0 }, // out-lap + { lapNumber: 5, lastLapTime: '1:30.300', tyreAge: 1 }, + ]) + expect(history['1'].samples).toEqual([{ lap: 5, seconds: 90.3 }]) + }) + + it('prunes drivers missing from the snapshot and does not mutate input', () => { + const initial = accumulate([ + { lapNumber: 1, lastLapTime: '1:30.000' }, + { lapNumber: 2, lastLapTime: '1:30.100' }, + ]) + const next = recordStintSamples(initial, [makeInput({ racingNumber: '44' })]) + expect(next['1']).toBeUndefined() + expect(next['44']).toBeDefined() + expect(initial['1'].samples).toHaveLength(1) + }) +}) + +describe('degradationModel', () => { + const series = (times: number[], startLap = 1): StintSample[] => + times.map((seconds, index) => ({ lap: startLap + index, seconds })) + + it('fits the slope of a known linear series', () => { + const model = degradationModel(series([90.0, 90.1, 90.2, 90.3, 90.4])) + expect(model).not.toBeNull() + expect(model!.slope).toBeCloseTo(0.1, 5) + expect(model!.trend).toBe('degrading') + }) + + it('classifies improving and stable stints', () => { + expect(degradationModel(series([91.0, 90.8, 90.6, 90.4]))!.trend).toBe('improving') + expect(degradationModel(series([90.0, 90.01, 90.0, 90.02, 90.01]))!.trend).toBe('stable') + // A slope clearly under the threshold stays stable. + expect(DEG_SLOPE_THRESHOLD).toBeGreaterThan(0.03) + expect(degradationModel(series([90.0, 90.03, 90.06, 90.09, 90.12]))!.trend).toBe('stable') + }) + + it('excludes outliers more than ~5s off the stint median', () => { + // Clean laps follow +0.1s/lap; the 97.5 (traffic/spin) must not skew the fit. + const samples = series([90.0, 90.1, 97.5, 90.3, 90.4, 90.5]) + expect(cleanStintSamples(samples)).toHaveLength(5) + const model = degradationModel(samples) + expect(model!.samples).toHaveLength(5) + expect(model!.slope).toBeCloseTo(0.1, 5) + }) + + it('returns null with fewer than MIN_CLEAN_LAPS clean laps', () => { + expect(degradationModel(series([90.0, 90.1, 90.2]))).toBeNull() + // 4 raw laps but one outlier -> only 3 clean -> still warming up + expect(degradationModel(series([90.0, 90.1, 90.2, 99.0]))).toBeNull() + expect(MIN_CLEAN_LAPS).toBe(4) + }) +}) + +describe('formatSlope', () => { + it('renders signed seconds-per-lap', () => { + expect(formatSlope(0.083)).toBe('+0.08s/lap') + expect(formatSlope(-0.125)).toBe('−0.13s/lap') + }) +}) + +describe('estimatePitRejoin', () => { + const ladder = [ + makeRow('1', 1, 'VER'), + makeRow('4', 2, 'NOR', { Interval: '+5.0' }), + makeRow('44', 3, 'HAM', { Interval: '+10.0' }), + makeRow('14', 4, 'ALO', { Interval: '+15.0' }), + makeRow('16', 5, 'LEC', { Interval: '+20.0' }), + ] + + it('projects the rejoin slot between the right cars', () => { + // VER pits from P1: NOR (5s) and HAM (15s cumulative) get past; + // ALO would be 30s back -> stays behind. Rejoin ~P3. + const estimate = estimatePitRejoin(ladder, '1') + expect(estimate).toEqual({ + rejoinPosition: 3, + positionsLost: 2, + aheadCode: 'HAM', + behindCode: 'ALO', + }) + }) + + it('keeps position when the cars behind are further than the pit loss', () => { + const estimate = estimatePitRejoin(ladder, '14') + // LEC is 20s behind ALO — inside the 22s window, so he gets past. + expect(estimate!.rejoinPosition).toBe(5) + expect(estimate!.aheadCode).toBe('LEC') + expect(estimate!.behindCode).toBeNull() + + const wide = estimatePitRejoin( + [makeRow('1', 1, 'VER'), makeRow('4', 2, 'NOR', { Interval: `+${PIT_LOSS_SECONDS + 3}.0` })], + '1', + ) + expect(wide!.rejoinPosition).toBe(1) + expect(wide!.positionsLost).toBe(0) + expect(wide!.behindCode).toBe('NOR') + }) + + it('stops the ladder walk at lapped cars and skips pitted/retired ones', () => { + const estimate = estimatePitRejoin( + [ + makeRow('1', 1, 'VER'), + makeRow('4', 2, 'NOR', { Interval: '+5.0', InPit: true }), // mid-stop, excluded + makeRow('44', 3, 'HAM', { Interval: '+10.0' }), + makeRow('16', 4, 'LEC', { Interval: '1L' }), // lapped — walk ends here + makeRow('14', 5, 'ALO', { Interval: '+2.0' }), + ], + '1', + ) + expect(estimate!.positionsLost).toBe(1) // only HAM gets past + expect(estimate!.rejoinPosition).toBe(2) + expect(estimate!.aheadCode).toBe('HAM') + expect(estimate!.behindCode).toBe('LEC') + }) + + it('returns null for unknown drivers', () => { + expect(estimatePitRejoin(ladder, '99')).toBeNull() + }) +}) + +describe('stintInputFromRow', () => { + it('maps tower rows into accumulator inputs', () => { + const row = makeRow('4', 2, 'NOR', { NumberOfLaps: 12, LastLapTime: '1:29.900' }) + row.Tyre = { Compound: 'HARD', New: false, Age: 7 } + expect(stintInputFromRow(row)).toEqual({ + racingNumber: '4', + lapNumber: 12, + lastLapTime: '1:29.900', + compound: 'HARD', + tyreAge: 7, + inPit: false, + pitOut: false, + }) + }) +}) diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 68e4929..0e6c326 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -158,6 +158,37 @@ export interface Lap { is_pit_out_lap: boolean } +export interface CarDataSample { + brake: number + date: string + driver_number: number + drs: number + meeting_key: number + n_gear: number + rpm: number + session_key: number + speed: number + throttle: number +} + +export interface ComparisonLap extends Lap { + compound?: string +} + +export interface ComparisonDriver { + driver_number: number + name_acronym: string + team_colour: string + laps: ComparisonLap[] +} + +export interface LapsComparisonResponse { + session_key: number + sc_periods: unknown[] + pit_laps: Record + drivers: ComparisonDriver[] +} + export interface WeekendSession { session: Session source: 'local' | 'partial' | 'none' | 'cancelled' @@ -261,6 +292,7 @@ export interface LiveSessionMeta { CircuitName: string SessionType: string SessionName: string + Path: string } export interface LiveStintData { @@ -269,6 +301,12 @@ export interface LiveStintData { Laps: number } +export interface LiveRadioCapture { + Utc: string + RacingNumber: string + Path: string +} + export interface LiveStreamData { Drivers: Record DriverInfo: Record @@ -277,6 +315,7 @@ export interface LiveStreamData { RCMessages: LiveRCMessage[] Weather: LiveWeatherData Session: LiveSessionMeta + TeamRadio: LiveRadioCapture[] TrackStatus: string CurrentLap: number TotalLaps: number diff --git a/internal/live/parser_test.go b/internal/live/parser_test.go index 5667a45..4f60166 100644 --- a/internal/live/parser_test.go +++ b/internal/live/parser_test.go @@ -5,6 +5,7 @@ import ( "compress/flate" "encoding/base64" "encoding/json" + "fmt" "testing" "time" @@ -211,12 +212,16 @@ func TestProcessTopicSessionInfoCircuitName(t *testing.T) { state.ProcessTopic("SessionInfo", json.RawMessage(`{ "Meeting": {"Name": "British Grand Prix", "Circuit": {"ShortName": "Silverstone"}}, "Name": "Race", - "Type": "Race" + "Type": "Race", + "Path": "2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/" }`)) s := state.Snapshot().Session if s.MeetingName != "British Grand Prix" || s.CircuitName != "Silverstone" { t.Fatalf("session = %+v", s) } + if s.Path != "2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/" { + t.Fatalf("session path = %q", s.Path) + } } func TestProcessTopicDriverList(t *testing.T) { @@ -285,6 +290,68 @@ func TestProcessTopicRaceControlMessages(t *testing.T) { } } +func TestProcessTopicTeamRadioSnapshotAndPatch(t *testing.T) { + state := live.NewState() + snapshot := json.RawMessage(`{ + "Captures": [ + {"Utc": "2026-07-05T14:05:30Z", "RacingNumber": "4", "Path": "TeamRadio/NOR-1.mp3"}, + {"Utc": "2026-07-05T14:04:10Z", "RacingNumber": "16", "Path": "TeamRadio/LEC-1.mp3"} + ] + }`) + + if !state.ProcessTopic("TeamRadio", snapshot) { + t.Fatal("TeamRadio snapshot should update state") + } + + patch := json.RawMessage(`{ + "Captures": { + "2": {"Utc": "2026-07-05T14:06:00Z", "RacingNumber": "44", "Path": "TeamRadio/HAM-1.mp3"} + } + }`) + if !state.ProcessTopic("TeamRadio", patch) { + t.Fatal("TeamRadio keyed patch should update state") + } + + radio := state.Snapshot().TeamRadio + if len(radio) != 3 { + t.Fatalf("radio captures = %d, want 3", len(radio)) + } + if radio[0].RacingNumber != "16" || radio[1].RacingNumber != "4" || radio[2].RacingNumber != "44" { + t.Fatalf("radio order = %+v", radio) + } +} + +func TestProcessTopicTeamRadioMalformed(t *testing.T) { + state := live.NewState() + if state.ProcessTopic("TeamRadio", json.RawMessage(`{"Captures": {"1": {"Utc": "2026-07-05T14:06:00Z", "Path": "missing-driver.mp3"}}}`)) { + t.Fatal("incomplete TeamRadio capture should not update state") + } + if state.ProcessTopic("TeamRadio", json.RawMessage(`{"Captures": "not-a-list"}`)) { + t.Fatal("unexpected TeamRadio captures shape should not update state") + } + if len(state.Snapshot().TeamRadio) != 0 { + t.Fatalf("malformed captures mutated state: %+v", state.Snapshot().TeamRadio) + } +} + +func TestProcessTopicTeamRadioCapsAtTwenty(t *testing.T) { + state := live.NewState() + for i := 0; i < 25; i++ { + payload := json.RawMessage([]byte(fmt.Sprintf(`{ + "Captures": [{"Utc": "2026-07-05T14:%02d:00Z", "RacingNumber": "%d", "Path": "TeamRadio/%02d.mp3"}] + }`, i, i, i))) + state.ProcessTopic("TeamRadio", payload) + } + + radio := state.Snapshot().TeamRadio + if len(radio) != 20 { + t.Fatalf("radio captures = %d, want 20", len(radio)) + } + if radio[0].Utc != "2026-07-05T14:05:00Z" || radio[19].Utc != "2026-07-05T14:24:00Z" { + t.Fatalf("radio cap kept wrong captures: first=%+v last=%+v", radio[0], radio[19]) + } +} + func TestProcessTopicWeatherData(t *testing.T) { state := live.NewState() state.ProcessTopic("WeatherData", json.RawMessage(`{ diff --git a/internal/live/signalr.go b/internal/live/signalr.go index e9b8342..9265d70 100644 --- a/internal/live/signalr.go +++ b/internal/live/signalr.go @@ -105,6 +105,7 @@ func connectToF1SignalRCore(dataChan chan LiveStreamData) error { "RaceControlMessages", "WeatherData", "SessionInfo", + "TeamRadio", "CurrentTyres", "TimingAppData", "TimingStats", @@ -196,7 +197,7 @@ func connectToF1LegacySignalR(dataChan chan LiveStreamData) error { return err } - subscribeMsg := []byte(`{"H":"Streaming","M":"Subscribe","A":[["Heartbeat","TimingData","Position.z","CarData.z","DriverList","LapCount","ExtrapolatedClock","TrackStatus","RaceControlMessages","WeatherData","SessionInfo","CurrentTyres","TimingAppData","TimingStats"]],"I":1}`) + subscribeMsg := []byte(`{"H":"Streaming","M":"Subscribe","A":[["Heartbeat","TimingData","Position.z","CarData.z","DriverList","LapCount","ExtrapolatedClock","TrackStatus","RaceControlMessages","WeatherData","SessionInfo","TeamRadio","CurrentTyres","TimingAppData","TimingStats"]],"I":1}`) err = c.WriteMessage(websocket.TextMessage, subscribeMsg) if err != nil { return err diff --git a/internal/live/state.go b/internal/live/state.go index bd7d8d4..08d1488 100644 --- a/internal/live/state.go +++ b/internal/live/state.go @@ -8,6 +8,8 @@ import ( "encoding/json" "fmt" "io" + "log" + "sort" "strings" "time" ) @@ -23,6 +25,7 @@ type State struct { RCMessages []LiveRCMessage Weather LiveWeatherData Session LiveSessionMeta + TeamRadio []LiveRadioCapture TrackStatus string CurrentLap int TotalLaps int @@ -34,6 +37,7 @@ type State struct { } const signalRRecordSeparator = byte(0x1e) +const maxTeamRadioCaptures = 20 // NewState returns an empty live timing accumulator. func NewState() *State { @@ -71,6 +75,8 @@ func (s *State) Snapshot() LiveStreamData { } cpyRC := make([]LiveRCMessage, len(s.RCMessages)) copy(cpyRC, s.RCMessages) + cpyRadio := make([]LiveRadioCapture, len(s.TeamRadio)) + copy(cpyRadio, s.TeamRadio) cpyStints := make(map[string][]LiveStintData, len(s.Stints)) for k, v := range s.Stints { st := make([]LiveStintData, len(v)) @@ -86,6 +92,7 @@ func (s *State) Snapshot() LiveStreamData { RCMessages: cpyRC, Weather: s.Weather, Session: s.Session, + TeamRadio: cpyRadio, TrackStatus: s.TrackStatus, CurrentLap: s.CurrentLap, TotalLaps: s.TotalLaps, @@ -335,6 +342,7 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool { } `json:"Meeting"` Name string `json:"Name"` Type string `json:"Type"` + Path string `json:"Path"` } if json.Unmarshal(data, &si) == nil { if si.Meeting.Name != "" { @@ -349,8 +357,13 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool { if si.Type != "" { s.Session.SessionType = si.Type } + if si.Path != "" { + s.Session.Path = si.Path + } updated = true } + case "TeamRadio": + updated = s.updateTeamRadio(data) case "CurrentTyres": var ct map[string]json.RawMessage if json.Unmarshal(data, &ct) == nil { @@ -483,6 +496,62 @@ func readCompressed(r io.ReadCloser, err error) ([]byte, bool) { return out, err == nil } +func (s *State) updateTeamRadio(data json.RawMessage) bool { + var payload struct { + Captures json.RawMessage `json:"Captures"` + } + if err := json.Unmarshal(data, &payload); err != nil { + log.Printf("live: skipping malformed TeamRadio payload: %v", err) + return false + } + if len(payload.Captures) == 0 || string(payload.Captures) == "null" { + log.Printf("live: skipping TeamRadio payload without Captures") + return false + } + + captures := indexedRawValues(payload.Captures) + if len(captures) == 0 { + log.Printf("live: skipping TeamRadio payload with unexpected Captures shape") + return false + } + + updated := false + for _, captureRaw := range captures { + var capture LiveRadioCapture + if err := json.Unmarshal(captureRaw.Raw, &capture); err != nil { + log.Printf("live: skipping malformed TeamRadio capture: %v", err) + continue + } + if capture.Utc == "" || capture.RacingNumber == "" || capture.Path == "" { + log.Printf("live: skipping incomplete TeamRadio capture: utc=%q racing_number=%q path=%q", capture.Utc, capture.RacingNumber, capture.Path) + continue + } + if s.hasTeamRadioCapture(capture) { + continue + } + s.TeamRadio = append(s.TeamRadio, capture) + updated = true + } + if updated { + sort.SliceStable(s.TeamRadio, func(i, j int) bool { + return s.TeamRadio[i].Utc < s.TeamRadio[j].Utc + }) + if len(s.TeamRadio) > maxTeamRadioCaptures { + s.TeamRadio = append([]LiveRadioCapture(nil), s.TeamRadio[len(s.TeamRadio)-maxTeamRadioCaptures:]...) + } + } + return updated +} + +func (s *State) hasTeamRadioCapture(capture LiveRadioCapture) bool { + for _, existing := range s.TeamRadio { + if existing.Utc == capture.Utc && existing.RacingNumber == capture.RacingNumber && existing.Path == capture.Path { + return true + } + } + return false +} + func (s *State) updatePositions(data json.RawMessage) bool { var payload struct { Position json.RawMessage `json:"Position"` @@ -799,6 +868,9 @@ func indexedRawValues(raw json.RawMessage) []indexedRaw { fmt.Sscanf(k, "%d", &i) values = append(values, indexedRaw{Index: i, Raw: v}) } + sort.Slice(values, func(i, j int) bool { + return values[i].Index < values[j].Index + }) return values } diff --git a/internal/live/types.go b/internal/live/types.go index 72e047c..4d62f6d 100644 --- a/internal/live/types.go +++ b/internal/live/types.go @@ -85,6 +85,7 @@ type LiveSessionMeta struct { CircuitName string SessionType string SessionName string + Path string } // LivePositionData is the latest raw F1 GPS position for one driver. @@ -144,6 +145,13 @@ type LiveStintData struct { Laps int } +// LiveRadioCapture is one team radio audio clip from the live timing feed. +type LiveRadioCapture struct { + Utc string + RacingNumber string + Path string +} + // LiveStreamData is an immutable snapshot of all live timing state. type LiveStreamData struct { Drivers map[string]LiveDriverData @@ -153,6 +161,7 @@ type LiveStreamData struct { RCMessages []LiveRCMessage Weather LiveWeatherData Session LiveSessionMeta + TeamRadio []LiveRadioCapture TrackStatus string // "1"=green "2"=yellow "4"=SC "5"=red "6"=VSC CurrentLap int TotalLaps int diff --git a/tests/command-center.spec.ts b/tests/command-center.spec.ts index a744e23..a63e327 100644 --- a/tests/command-center.spec.ts +++ b/tests/command-center.spec.ts @@ -9,7 +9,7 @@ test.describe('Command Center', () => { 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('cc-actions')).toBeVisible() + await expect(page.getByTestId('hero-last-race-link')).toBeVisible() }) 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 }) => { await page.goto('/') - await expect(page.getByTestId('cc-action-race-hub')).toContainText(String(FULL_SESSION)) - await page.getByTestId('cc-action-race-hub').click() + 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() diff --git a/tests/visual/__snapshots__/desktop/command-center.png b/tests/visual/__snapshots__/desktop/command-center.png index a83de76..b06f103 100644 Binary files a/tests/visual/__snapshots__/desktop/command-center.png and b/tests/visual/__snapshots__/desktop/command-center.png differ diff --git a/tests/visual/__snapshots__/mobile/command-center.png b/tests/visual/__snapshots__/mobile/command-center.png index d7820fc..02d443c 100644 Binary files a/tests/visual/__snapshots__/mobile/command-center.png and b/tests/visual/__snapshots__/mobile/command-center.png differ diff --git a/tests/visual/__snapshots__/mobile/data-library.png b/tests/visual/__snapshots__/mobile/data-library.png index 711e629..055a052 100644 Binary files a/tests/visual/__snapshots__/mobile/data-library.png and b/tests/visual/__snapshots__/mobile/data-library.png differ diff --git a/tests/visual/__snapshots__/tablet/command-center.png b/tests/visual/__snapshots__/tablet/command-center.png index f77f6e8..52c6adf 100644 Binary files a/tests/visual/__snapshots__/tablet/command-center.png and b/tests/visual/__snapshots__/tablet/command-center.png differ