mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-08 04:06:18 -04:00
Compare commits
1 Commits
feat/issue
...
chore/agen
| Author | SHA1 | Date | |
|---|---|---|---|
|
cd282366be |
@@ -26,21 +26,6 @@ harness_opencode() { # opencode — non-interactive run
|
|||||||
( cd "$dir" && opencode run "$(cat "$prompt")" )
|
( 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) ----
|
# ---- NICE-TO-HAVE (verify the exact invocation for your version before trusting) ----
|
||||||
|
|
||||||
harness_pi() { # pi — CONFIRM headless CLI + flags
|
harness_pi() { # pi — CONFIRM headless CLI + flags
|
||||||
@@ -48,6 +33,11 @@ harness_pi() { # pi — CONFIRM headless CLI + flags
|
|||||||
( cd "$dir" && pi run "$(cat "$prompt")" ) # placeholder — verify
|
( 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) ----
|
# ---- build/typecheck gate (fast, local) ----
|
||||||
# Returns non-zero on failure. This is a smoke gate — CI runs the full suite. Tune freely.
|
# Returns non-zero on failure. This is a smoke gate — CI runs the full suite. Tune freely.
|
||||||
run_gate() {
|
run_gate() {
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
import type {
|
import type {
|
||||||
ArticleContent,
|
ArticleContent,
|
||||||
CarDataSample,
|
|
||||||
ChampionshipHub,
|
ChampionshipHub,
|
||||||
LapsComparisonResponse,
|
|
||||||
LiveStateResponse,
|
LiveStateResponse,
|
||||||
LiveSessionMeta,
|
LiveSessionMeta,
|
||||||
Meeting,
|
Meeting,
|
||||||
@@ -128,32 +126,3 @@ export async function markNewsRead(articleUrl: string): Promise<void> {
|
|||||||
body: JSON.stringify({ url: articleUrl }),
|
body: JSON.stringify({ url: articleUrl }),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchTelemetry(
|
|
||||||
sessionKey: number,
|
|
||||||
driverNumber: number,
|
|
||||||
): Promise<CarDataSample[]> {
|
|
||||||
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<LapsComparisonResponse> {
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,415 +0,0 @@
|
|||||||
import { Link } from '@tanstack/react-router'
|
|
||||||
import { Activity, ArrowRight, Play } from 'lucide-react'
|
|
||||||
import { sessionTypeAbbrev } from '../lib/coverage'
|
|
||||||
import { countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
|
||||||
import { classifySessionStatus, type HeroStateKind } from '../lib/hero'
|
|
||||||
import { sortLiveTimingRows, trackStatusInfo } from '../lib/live'
|
|
||||||
import {
|
|
||||||
formatCountdown,
|
|
||||||
formatSessionScheduleTime,
|
|
||||||
meetingStartTime,
|
|
||||||
sessionStartTime,
|
|
||||||
type FocusMeetingKind,
|
|
||||||
} from '../lib/schedule'
|
|
||||||
import type { EnrichedResult, LiveStreamData, Meeting, Session, WeekendSession } from '../types'
|
|
||||||
import '../styles/hero.css'
|
|
||||||
|
|
||||||
export interface CommandCenterHeroProps {
|
|
||||||
state: HeroStateKind
|
|
||||||
now: Date
|
|
||||||
accent: string
|
|
||||||
liveActive: boolean
|
|
||||||
liveData: LiveStreamData | null | undefined
|
|
||||||
focusMeeting: Meeting
|
|
||||||
focusKind: FocusMeetingKind
|
|
||||||
sessions: WeekendSession[]
|
|
||||||
currentSession: Session | null
|
|
||||||
nextSession: Session | null
|
|
||||||
analysisSessionKey?: number
|
|
||||||
analysisSessionName?: string
|
|
||||||
lastRaceName: string
|
|
||||||
lastRacePodium: EnrichedResult[]
|
|
||||||
lastRaceSessionKey?: number
|
|
||||||
nextMeeting: Meeting | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CommandCenterHero({
|
|
||||||
state,
|
|
||||||
now,
|
|
||||||
accent,
|
|
||||||
liveActive,
|
|
||||||
liveData,
|
|
||||||
focusMeeting,
|
|
||||||
focusKind,
|
|
||||||
sessions,
|
|
||||||
currentSession,
|
|
||||||
nextSession,
|
|
||||||
analysisSessionKey,
|
|
||||||
analysisSessionName,
|
|
||||||
lastRaceName,
|
|
||||||
lastRacePodium,
|
|
||||||
lastRaceSessionKey,
|
|
||||||
nextMeeting,
|
|
||||||
}: CommandCenterHeroProps) {
|
|
||||||
const accentStyle = {
|
|
||||||
'--gp-accent': accent,
|
|
||||||
'--hero-accent': accent,
|
|
||||||
} as React.CSSProperties
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="hero-panel cc-hero" data-testid="cc-focus">
|
|
||||||
<section className="hero-card ui-card glass-panel" style={accentStyle}>
|
|
||||||
<div
|
|
||||||
className={`hero-accent${state === 'live' ? ' hero-accent--live' : ''}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<div className="hero-body">
|
|
||||||
<div className="hero-inner">
|
|
||||||
{state === 'live' && (
|
|
||||||
<LiveHero
|
|
||||||
liveActive={liveActive}
|
|
||||||
liveData={liveData}
|
|
||||||
currentSession={currentSession}
|
|
||||||
focusMeeting={focusMeeting}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{state === 'upcoming' && (
|
|
||||||
<UpcomingHero
|
|
||||||
now={now}
|
|
||||||
focusMeeting={focusMeeting}
|
|
||||||
focusKind={focusKind}
|
|
||||||
sessions={sessions}
|
|
||||||
currentSession={currentSession}
|
|
||||||
nextSession={nextSession}
|
|
||||||
liveActive={liveActive}
|
|
||||||
analysisSessionKey={analysisSessionKey}
|
|
||||||
analysisSessionName={analysisSessionName}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{state === 'between' && (
|
|
||||||
<BetweenHero
|
|
||||||
now={now}
|
|
||||||
lastRaceName={lastRaceName}
|
|
||||||
lastRacePodium={lastRacePodium}
|
|
||||||
lastRaceSessionKey={lastRaceSessionKey}
|
|
||||||
nextMeeting={nextMeeting}
|
|
||||||
analysisSessionKey={analysisSessionKey}
|
|
||||||
analysisSessionName={analysisSessionName}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function LiveHero({
|
|
||||||
liveActive,
|
|
||||||
liveData,
|
|
||||||
currentSession,
|
|
||||||
focusMeeting,
|
|
||||||
}: {
|
|
||||||
liveActive: boolean
|
|
||||||
liveData: LiveStreamData | null | undefined
|
|
||||||
currentSession: Session | null
|
|
||||||
focusMeeting: Meeting
|
|
||||||
}) {
|
|
||||||
const sessionName =
|
|
||||||
liveData?.Session?.SessionName ?? currentSession?.session_name ?? 'Live session'
|
|
||||||
const trackStatus = trackStatusInfo(liveData?.TrackStatus)
|
|
||||||
const topThree = sortLiveTimingRows(liveData).filter((r) => r.Position > 0).slice(0, 3)
|
|
||||||
const decal = countryDecal(focusMeeting)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="hero-row">
|
|
||||||
<span className="hero-decal mono">{decal}</span>
|
|
||||||
<div className="hero-identity">
|
|
||||||
<div className="hero-eyebrow hero-eyebrow--live mono">● Live now</div>
|
|
||||||
<h1 className="hero-title">{sessionName}</h1>
|
|
||||||
<div className="hero-sub mono">
|
|
||||||
{[focusMeeting.meeting_name, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')}
|
|
||||||
</div>
|
|
||||||
<div className={`hero-track-status hero-track-status--${trackStatus.key}`}>
|
|
||||||
{trackStatus.label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{topThree.length > 0 && (
|
|
||||||
<div className="hero-timing" data-testid="hero-live-timing">
|
|
||||||
{topThree.map((row) => (
|
|
||||||
<div key={row.RacingNumber} className="hero-timing-row">
|
|
||||||
<span className={`hero-timing-pos hero-timing-pos--p${row.Position}`}>
|
|
||||||
P{row.Position}
|
|
||||||
</span>
|
|
||||||
<span className="hero-timing-driver">
|
|
||||||
<span
|
|
||||||
className="hero-timing-bar"
|
|
||||||
style={{ background: `#${row.Info?.TeamColour ?? '9aa0a6'}` }}
|
|
||||||
/>
|
|
||||||
{row.Info?.Tla ?? row.RacingNumber}
|
|
||||||
</span>
|
|
||||||
<span className="hero-timing-gap">
|
|
||||||
{row.Position === 1 ? 'LEAD' : row.Driver.Interval || row.Driver.GapToLeader || '—'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="hero-countdown">
|
|
||||||
<div className="hero-cd-label mono">{liveActive ? 'SignalR' : 'On track'}</div>
|
|
||||||
<div className="hero-cd-value hero-cd-value--live mono">LIVE</div>
|
|
||||||
<div className="hero-cd-sub mono">{sessionName}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="hero-actions">
|
|
||||||
<Link to="/live" className="hero-cta hero-cta--primary" data-testid="hero-live-link">
|
|
||||||
Open Live Timing <ArrowRight size={16} />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function UpcomingHero({
|
|
||||||
now,
|
|
||||||
focusMeeting,
|
|
||||||
focusKind,
|
|
||||||
sessions,
|
|
||||||
currentSession,
|
|
||||||
nextSession,
|
|
||||||
liveActive,
|
|
||||||
analysisSessionKey,
|
|
||||||
analysisSessionName,
|
|
||||||
}: {
|
|
||||||
now: Date
|
|
||||||
focusMeeting: Meeting
|
|
||||||
focusKind: FocusMeetingKind
|
|
||||||
sessions: WeekendSession[]
|
|
||||||
currentSession: Session | null
|
|
||||||
nextSession: Session | null
|
|
||||||
liveActive: boolean
|
|
||||||
analysisSessionKey?: number
|
|
||||||
analysisSessionName?: string
|
|
||||||
}) {
|
|
||||||
const decal = countryDecal(focusMeeting)
|
|
||||||
const countdownTarget =
|
|
||||||
nextSession && sessionStartTime(nextSession)
|
|
||||||
? sessionStartTime(nextSession)!
|
|
||||||
: meetingStartTime(focusMeeting)
|
|
||||||
|
|
||||||
const kindLabel =
|
|
||||||
focusKind === 'current'
|
|
||||||
? 'Current weekend'
|
|
||||||
: focusKind === 'next'
|
|
||||||
? 'Next weekend'
|
|
||||||
: 'Weekend'
|
|
||||||
|
|
||||||
const sortedSessions = [...sessions].sort((a, b) => {
|
|
||||||
const left = sessionStartTime(a.session)?.getTime() ?? 0
|
|
||||||
const right = sessionStartTime(b.session)?.getTime() ?? 0
|
|
||||||
return left - right
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="hero-row">
|
|
||||||
<span className="hero-decal mono">{decal}</span>
|
|
||||||
<div className="hero-identity">
|
|
||||||
<div className="hero-eyebrow mono">{kindLabel}</div>
|
|
||||||
<h1 className="hero-title">{focusMeeting.meeting_name}</h1>
|
|
||||||
<div className="hero-sub mono">
|
|
||||||
{[focusMeeting.location, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')}
|
|
||||||
</div>
|
|
||||||
<div className="hero-sub mono">{formatGpDateRange(focusMeeting)}</div>
|
|
||||||
</div>
|
|
||||||
<div className="hero-countdown" data-testid="hero-countdown">
|
|
||||||
{nextSession ? (
|
|
||||||
<>
|
|
||||||
<div className="hero-cd-label mono">Next · {nextSession.session_name}</div>
|
|
||||||
{countdownTarget && (
|
|
||||||
<div className="hero-cd-value mono">{formatCountdown(countdownTarget, now)}</div>
|
|
||||||
)}
|
|
||||||
<div className="hero-cd-sub mono">{formatSessionScheduleTime(nextSession.date_start)}</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="hero-cd-label mono">Status</div>
|
|
||||||
<div className="hero-cd-value mono">Complete</div>
|
|
||||||
<div className="hero-cd-sub mono">Weekend finished</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{sortedSessions.length > 0 && (
|
|
||||||
<div className="hero-schedule-strip" data-testid="hero-schedule-strip" role="list">
|
|
||||||
{sortedSessions.map(({ session }) => {
|
|
||||||
const status = classifySessionStatus(session, now)
|
|
||||||
const isNext = nextSession?.session_key === session.session_key
|
|
||||||
const isCurrent = currentSession?.session_key === session.session_key
|
|
||||||
const isLive = isCurrent && liveActive
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={session.session_key}
|
|
||||||
to="/race-hub"
|
|
||||||
search={{ session_key: session.session_key }}
|
|
||||||
className={`hero-schedule-card${isNext ? ' is-next' : ''}${
|
|
||||||
status === 'done' ? ' is-done' : ''
|
|
||||||
}${isLive ? ' is-live' : ''}`}
|
|
||||||
role="listitem"
|
|
||||||
>
|
|
||||||
<div className="hero-schedule-abbrev mono">
|
|
||||||
{sessionTypeAbbrev(session.session_type, session.session_name)}
|
|
||||||
</div>
|
|
||||||
<div className="hero-schedule-name">{session.session_name}</div>
|
|
||||||
<div className="hero-schedule-time mono">
|
|
||||||
{formatSessionScheduleTime(session.date_start)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={`hero-schedule-marker mono${
|
|
||||||
isLive ? ' hero-schedule-marker--live' : isNext ? ' hero-schedule-marker--next' : ''
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="hero-actions">
|
|
||||||
<Link
|
|
||||||
to="/live"
|
|
||||||
className="hero-secondary-link"
|
|
||||||
style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<Play size={14} /> Watch Live
|
|
||||||
</Link>
|
|
||||||
{analysisSessionKey != null && (
|
|
||||||
<Link
|
|
||||||
to="/race-hub"
|
|
||||||
search={{ session_key: analysisSessionKey }}
|
|
||||||
className="hero-secondary-link"
|
|
||||||
data-testid="hero-analysis-link"
|
|
||||||
style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<Activity size={14} /> Open Analysis
|
|
||||||
{analysisSessionName ? ` · ${analysisSessionName}` : ''}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function BetweenHero({
|
|
||||||
now,
|
|
||||||
lastRaceName,
|
|
||||||
lastRacePodium,
|
|
||||||
lastRaceSessionKey,
|
|
||||||
nextMeeting,
|
|
||||||
analysisSessionKey,
|
|
||||||
analysisSessionName,
|
|
||||||
}: {
|
|
||||||
now: Date
|
|
||||||
lastRaceName: string
|
|
||||||
lastRacePodium: EnrichedResult[]
|
|
||||||
lastRaceSessionKey?: number
|
|
||||||
nextMeeting: Meeting | null
|
|
||||||
analysisSessionKey?: number
|
|
||||||
analysisSessionName?: string
|
|
||||||
}) {
|
|
||||||
const nextStart = nextMeeting ? meetingStartTime(nextMeeting) : null
|
|
||||||
const podium = lastRacePodium
|
|
||||||
.filter((r) => r.position >= 1 && r.position <= 3)
|
|
||||||
.sort((a, b) => a.position - b.position)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="hero-row">
|
|
||||||
<div className="hero-identity">
|
|
||||||
<div className="hero-eyebrow mono">Between race weekends</div>
|
|
||||||
{lastRaceName && (
|
|
||||||
<h1 className="hero-title" data-testid="hero-last-race">
|
|
||||||
After {lastRaceName}
|
|
||||||
</h1>
|
|
||||||
)}
|
|
||||||
{!lastRaceName && <h1 className="hero-title">Season pause</h1>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{podium.length > 0 && (
|
|
||||||
<div className="hero-podium" data-testid="hero-podium">
|
|
||||||
{podium.map((r) => (
|
|
||||||
<div key={r.driver_number} className="hero-podium-row">
|
|
||||||
<span className={`hero-podium-pos hero-podium-pos--p${r.position} mono`}>
|
|
||||||
P{r.position}
|
|
||||||
</span>
|
|
||||||
<span className="hero-podium-driver">
|
|
||||||
<span
|
|
||||||
className="hero-timing-bar"
|
|
||||||
style={{ background: `#${r.team_colour}` }}
|
|
||||||
/>
|
|
||||||
{r.name_acronym}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{nextMeeting && (
|
|
||||||
<div className="hero-countdown" data-testid="hero-next-gp-countdown">
|
|
||||||
<div className="hero-between-next">
|
|
||||||
{countryFlag(nextMeeting) && (
|
|
||||||
<span className="hero-flag" aria-hidden="true">
|
|
||||||
{countryFlag(nextMeeting)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<div>
|
|
||||||
<div className="hero-cd-label mono">Next GP</div>
|
|
||||||
<div className="hero-title" style={{ fontSize: '20px' }}>
|
|
||||||
{nextMeeting.meeting_name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{nextStart && (
|
|
||||||
<>
|
|
||||||
<div className="hero-cd-value mono" style={{ marginTop: 'var(--s3)' }}>
|
|
||||||
{formatCountdown(nextStart, now)}
|
|
||||||
</div>
|
|
||||||
<div className="hero-cd-sub mono">{formatGpDateRange(nextMeeting)}</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hero-actions">
|
|
||||||
{lastRaceSessionKey != null && (
|
|
||||||
<Link
|
|
||||||
to="/race-hub"
|
|
||||||
search={{ session_key: lastRaceSessionKey }}
|
|
||||||
className="hero-secondary-link"
|
|
||||||
data-testid="hero-last-race-link"
|
|
||||||
>
|
|
||||||
View {lastRaceName || 'last race'} results →
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{analysisSessionKey != null && analysisSessionKey !== lastRaceSessionKey && (
|
|
||||||
<Link
|
|
||||||
to="/race-hub"
|
|
||||||
search={{ session_key: analysisSessionKey }}
|
|
||||||
className="hero-secondary-link"
|
|
||||||
data-testid="hero-analysis-link"
|
|
||||||
>
|
|
||||||
Open Analysis{analysisSessionName ? ` · ${analysisSessionName}` : ''}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<Link to="/live" className="hero-secondary-link">
|
|
||||||
Live Timing →
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,244 +0,0 @@
|
|||||||
import { useEffect, useMemo, 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 <div className="loading-state">loading…</div>
|
|
||||||
}
|
|
||||||
if (error) {
|
|
||||||
return <div className="error-box">{error.message}</div>
|
|
||||||
}
|
|
||||||
if (empty) {
|
|
||||||
return <div className="missing-notice">{emptyMessage}</div>
|
|
||||||
}
|
|
||||||
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 [driverA, setDriverA] = useState<number | null>(initialPair?.[0] ?? null)
|
|
||||||
const [driverB, setDriverB] = useState<number | null>(initialPair?.[1] ?? null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (driverA != null && driverB != null) return
|
|
||||||
const pair = defaultCompareDriverNumbers(results, drivers)
|
|
||||||
if (!pair) return
|
|
||||||
setDriverA(pair[0])
|
|
||||||
setDriverB(pair[1])
|
|
||||||
}, [results, drivers, 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 (
|
|
||||||
<div className="missing-notice" data-testid="compare-view-empty">
|
|
||||||
Need at least two drivers in this session to compare.
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const driverAInfo = driverOptions.find((d) => d.driver_number === driverA)
|
|
||||||
const driverBInfo = driverOptions.find((d) => d.driver_number === driverB)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="compare-view" data-testid="compare-view">
|
|
||||||
<div className="compare-pickers">
|
|
||||||
<div className="compare-picker">
|
|
||||||
<span className="compare-picker-label">Reference</span>
|
|
||||||
<select
|
|
||||||
className="compare-picker-select"
|
|
||||||
value={driverA ?? ''}
|
|
||||||
onChange={(e) => setDriverA(Number(e.target.value))}
|
|
||||||
data-testid="compare-picker-a"
|
|
||||||
>
|
|
||||||
{driverOptions.map((d) => (
|
|
||||||
<option key={d.driver_number} value={d.driver_number}>
|
|
||||||
{d.name_acronym} · #{d.driver_number}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{driverAInfo && (
|
|
||||||
<DriverCell
|
|
||||||
acronym={driverAInfo.name_acronym}
|
|
||||||
number={driverAInfo.driver_number}
|
|
||||||
colour={driverAInfo.team_colour}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="compare-picker">
|
|
||||||
<span className="compare-picker-label">Challenger</span>
|
|
||||||
<select
|
|
||||||
className="compare-picker-select"
|
|
||||||
value={driverB ?? ''}
|
|
||||||
onChange={(e) => setDriverB(Number(e.target.value))}
|
|
||||||
data-testid="compare-picker-b"
|
|
||||||
>
|
|
||||||
{driverOptions.map((d) => (
|
|
||||||
<option key={d.driver_number} value={d.driver_number}>
|
|
||||||
{d.name_acronym} · #{d.driver_number}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{driverBInfo && (
|
|
||||||
<DriverCell
|
|
||||||
acronym={driverBInfo.name_acronym}
|
|
||||||
number={driverBInfo.driver_number}
|
|
||||||
colour={driverBInfo.team_colour}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{driverA === driverB && (
|
|
||||||
<div className="analysis-notice">
|
|
||||||
<strong>Pick two different drivers</strong> to run a comparison.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<section className="compare-section" data-testid="compare-telemetry-section">
|
|
||||||
<div>
|
|
||||||
<div className="compare-section-title">Best lap telemetry</div>
|
|
||||||
<div className="compare-section-meta">
|
|
||||||
Speed, throttle, and brake traces for each driver's fastest lap
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<SectionState
|
|
||||||
loading={telemetryLoading}
|
|
||||||
error={telemetryError instanceof Error ? telemetryError : null}
|
|
||||||
empty={!telemetryLoading && !telemetryError && traceSeries.length === 0}
|
|
||||||
emptyMessage="No telemetry samples for the best laps. Car data may not be available for this session."
|
|
||||||
>
|
|
||||||
<TelemetryTraceChart series={traceSeries} />
|
|
||||||
</SectionState>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="compare-section" data-testid="compare-pace-section">
|
|
||||||
<div>
|
|
||||||
<div className="compare-section-title">Race pace</div>
|
|
||||||
<div className="compare-section-meta">
|
|
||||||
Cumulative lap-time delta vs {referenceLabel ?? 'reference'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<SectionState
|
|
||||||
loading={comparisonQuery.isLoading}
|
|
||||||
error={comparisonQuery.error instanceof Error ? comparisonQuery.error : null}
|
|
||||||
empty={!comparisonQuery.isLoading && !comparisonQuery.error && deltaSeries.length < 2}
|
|
||||||
emptyMessage="No lap comparison data for the selected drivers."
|
|
||||||
>
|
|
||||||
<DeltaTimeGraph series={deltaSeries} referenceLabel={referenceLabel} />
|
|
||||||
{pitCaption && (
|
|
||||||
<p className="compare-pit-caption" data-testid="compare-pit-caption">
|
|
||||||
{pitCaption}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</SectionState>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,9 +1,28 @@
|
|||||||
import type { EnrichedResult, Stint, PitStop } from '../types'
|
import type { EnrichedResult, Stint, PitStop } from '../types'
|
||||||
import { compareFinishPosition } from '../utils'
|
import { compareFinishPosition } from '../utils'
|
||||||
import {
|
|
||||||
TyreStintTimeline,
|
const COMPOUND_COLORS: Record<string, string> = {
|
||||||
type StintTimelineRow,
|
SOFT: '#e8002d',
|
||||||
} from './charts/TyreStintTimeline'
|
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<string, string> = {
|
||||||
|
SOFT: 'S',
|
||||||
|
MEDIUM: 'M',
|
||||||
|
HARD: 'H',
|
||||||
|
INTERMEDIATE: 'I',
|
||||||
|
WET: 'W',
|
||||||
|
}
|
||||||
|
return abbr[c.toUpperCase()] ?? c[0] ?? '?'
|
||||||
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
results: EnrichedResult[]
|
results: EnrichedResult[]
|
||||||
@@ -12,7 +31,7 @@ interface Props {
|
|||||||
hasStints: boolean
|
hasStints: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints }: Props) {
|
export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
|
||||||
if (!hasStints) {
|
if (!hasStints) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@@ -70,29 +89,147 @@ export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints
|
|||||||
const cmp = compareFinishPosition(a.position, b.position)
|
const cmp = compareFinishPosition(a.position, b.position)
|
||||||
return cmp !== 0 ? cmp : a.driver_number - b.driver_number
|
return cmp !== 0 ? cmp : a.driver_number - b.driver_number
|
||||||
})
|
})
|
||||||
|
|
||||||
const totalLaps = Math.max(
|
const totalLaps = Math.max(
|
||||||
...stints.map((s) => s.lap_end),
|
...stints.map((s) => s.lap_end),
|
||||||
...results.map((r) => r.number_of_laps),
|
...results.map((r) => r.number_of_laps),
|
||||||
1,
|
1
|
||||||
)
|
)
|
||||||
|
|
||||||
const timelineRows: StintTimelineRow[] = sortedDrivers.map((driver) => ({
|
const SVG_W = 640
|
||||||
label: driver.name_acronym || String(driver.driver_number),
|
const LEFT = 48
|
||||||
color: driver.team_colour ? `#${driver.team_colour}` : '#888',
|
const RIGHT = 12
|
||||||
stints: stints
|
const ROW_H = 28
|
||||||
.filter((s) => s.driver_number === driver.driver_number)
|
const BAR_H = 14
|
||||||
.map((s) => ({
|
const BAR_Y = 7
|
||||||
compound: s.compound,
|
const BAR_W = SVG_W - LEFT - RIGHT
|
||||||
lapStart: s.lap_start,
|
const SVG_H = sortedDrivers.length * ROW_H + 8
|
||||||
lapEnd: s.lap_end,
|
|
||||||
isNew: s.tyre_age_at_start === 0,
|
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
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-testid="strategy-chart">
|
<div data-testid="strategy-chart">
|
||||||
<TyreStintTimeline rows={timelineRows} totalLaps={totalLaps} />
|
<div className="scroll-x">
|
||||||
|
<svg
|
||||||
|
viewBox={`0 0 ${SVG_W} ${SVG_H}`}
|
||||||
|
style={{ width: '100%', minWidth: 280, maxWidth: SVG_W, display: 'block' }}
|
||||||
|
role="img"
|
||||||
|
aria-label="Race strategy stint chart"
|
||||||
|
>
|
||||||
|
{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 (
|
||||||
|
<g key={driver.driver_number} transform={`translate(0,${rowY})`}>
|
||||||
|
<text
|
||||||
|
x={LEFT - 5}
|
||||||
|
y={BAR_Y + BAR_H / 2 + 4}
|
||||||
|
textAnchor="end"
|
||||||
|
fill={color}
|
||||||
|
fontFamily="var(--f-mono)"
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={10}
|
||||||
|
>
|
||||||
|
{driver.name_acronym}
|
||||||
|
</text>
|
||||||
|
|
||||||
|
{dStints.map((stint, si) => {
|
||||||
|
const x = lapX(stint.lap_start)
|
||||||
|
const w = stintW(stint)
|
||||||
|
const fill = compoundColor(stint.compound)
|
||||||
|
return (
|
||||||
|
<g key={si}>
|
||||||
|
<rect x={x} y={BAR_Y} width={w} height={BAR_H} fill={fill} rx={1.5} />
|
||||||
|
{w > 18 && (
|
||||||
|
<text
|
||||||
|
x={x + w / 2}
|
||||||
|
y={BAR_Y + BAR_H / 2 + 4}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill="#111"
|
||||||
|
fontFamily="var(--f-mono)"
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={8}
|
||||||
|
>
|
||||||
|
{compoundInitial(stint.compound)}
|
||||||
|
</text>
|
||||||
|
)}
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{dPits.map((pit, pi) => {
|
||||||
|
const x = lapX(pit.lap_number)
|
||||||
|
return (
|
||||||
|
<line
|
||||||
|
key={pi}
|
||||||
|
x1={x}
|
||||||
|
x2={x}
|
||||||
|
y1={BAR_Y - 3}
|
||||||
|
y2={BAR_Y + BAR_H + 3}
|
||||||
|
stroke="var(--text)"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
opacity={0.7}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: 'var(--s4)',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
marginTop: 'var(--s4)',
|
||||||
|
fontSize: 11,
|
||||||
|
color: 'var(--text-3)',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{usedCompounds.map((c) => (
|
||||||
|
<span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
background: COMPOUND_COLORS[c],
|
||||||
|
borderRadius: 2,
|
||||||
|
display: 'inline-block',
|
||||||
|
border: c === 'HARD' ? '1px solid #555' : undefined,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{c.charAt(0) + c.slice(1).toLowerCase()}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{pit_stops.length > 0 && (
|
||||||
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginLeft: 4 }}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
width: 1,
|
||||||
|
height: 12,
|
||||||
|
background: 'var(--text)',
|
||||||
|
display: 'inline-block',
|
||||||
|
opacity: 0.7,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
Pit stop
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span style={{ marginLeft: 'auto', fontFamily: 'var(--f-mono)', fontSize: 10 }}>
|
||||||
|
{totalLaps} laps
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ export type Tab =
|
|||||||
| 'overview'
|
| 'overview'
|
||||||
| 'race_story'
|
| 'race_story'
|
||||||
| 'strategy'
|
| 'strategy'
|
||||||
| 'compare'
|
|
||||||
| 'lap_data'
|
| 'lap_data'
|
||||||
| 'conditions'
|
| 'conditions'
|
||||||
| 'race_control'
|
| 'race_control'
|
||||||
@@ -12,7 +11,6 @@ const TABS: { id: Tab; label: string }[] = [
|
|||||||
{ id: 'overview', label: 'Overview' },
|
{ id: 'overview', label: 'Overview' },
|
||||||
{ id: 'race_story', label: 'Race Story' },
|
{ id: 'race_story', label: 'Race Story' },
|
||||||
{ id: 'strategy', label: 'Strategy' },
|
{ id: 'strategy', label: 'Strategy' },
|
||||||
{ id: 'compare', label: 'Compare' },
|
|
||||||
{ id: 'lap_data', label: 'Lap Data' },
|
{ id: 'lap_data', label: 'Lap Data' },
|
||||||
{ id: 'conditions', label: 'Conditions' },
|
{ id: 'conditions', label: 'Conditions' },
|
||||||
{ id: 'race_control', label: 'Race Control' },
|
{ id: 'race_control', label: 'Race Control' },
|
||||||
|
|||||||
@@ -1,282 +0,0 @@
|
|||||||
import { useCallback, useMemo, useRef, useState } from 'react'
|
|
||||||
import {
|
|
||||||
computeCumulativeDeltas,
|
|
||||||
deltaPolylineSegments,
|
|
||||||
formatDeltaSeconds,
|
|
||||||
type DeltaSeries,
|
|
||||||
type DriverDeltaResult,
|
|
||||||
} from '../../lib/delta'
|
|
||||||
import '../../styles/delta-graph.css'
|
|
||||||
|
|
||||||
export type { DeltaSeries }
|
|
||||||
|
|
||||||
export interface DeltaTimeGraphProps {
|
|
||||||
series: DeltaSeries[]
|
|
||||||
referenceLabel?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const W = 640
|
|
||||||
const H = 220
|
|
||||||
const PL = 44
|
|
||||||
const PR = 16
|
|
||||||
const PT = 12
|
|
||||||
const PB = 28
|
|
||||||
|
|
||||||
function lapCount(series: ReadonlyArray<DeltaSeries>): number {
|
|
||||||
return series.reduce((max, s) => Math.max(max, s.lapTimes.length), 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
function yExtent(drivers: ReadonlyArray<DriverDeltaResult>): { min: number; max: number } {
|
|
||||||
let min = 0
|
|
||||||
let max = 0
|
|
||||||
for (const driver of drivers) {
|
|
||||||
for (const delta of driver.deltas) {
|
|
||||||
if (delta === null) continue
|
|
||||||
min = Math.min(min, delta)
|
|
||||||
max = Math.max(max, delta)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (min === max) {
|
|
||||||
const pad = 1
|
|
||||||
return { min: min - pad, max: max + pad }
|
|
||||||
}
|
|
||||||
const span = max - min
|
|
||||||
const pad = span * 0.08
|
|
||||||
return { min: min - pad, max: max + pad }
|
|
||||||
}
|
|
||||||
|
|
||||||
function niceYTicks(min: number, max: number): number[] {
|
|
||||||
const span = max - min
|
|
||||||
if (span <= 0) return [0]
|
|
||||||
const rough = span / 4
|
|
||||||
const magnitude = Math.pow(10, Math.floor(Math.log10(rough)))
|
|
||||||
const step = Math.ceil(rough / magnitude) * magnitude
|
|
||||||
const ticks: number[] = []
|
|
||||||
const start = Math.ceil(min / step) * step
|
|
||||||
for (let v = start; v <= max + step * 0.01; v += step) {
|
|
||||||
ticks.push(Number(v.toFixed(6)))
|
|
||||||
}
|
|
||||||
if (!ticks.some((t) => Math.abs(t) < step * 0.01)) {
|
|
||||||
ticks.push(0)
|
|
||||||
ticks.sort((a, b) => a - b)
|
|
||||||
}
|
|
||||||
return ticks
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DeltaTimeGraph({ series, referenceLabel }: DeltaTimeGraphProps) {
|
|
||||||
const svgRef = useRef<SVGSVGElement>(null)
|
|
||||||
const [hoverLap, setHoverLap] = useState<number | null>(null)
|
|
||||||
|
|
||||||
const drivers = useMemo(
|
|
||||||
() => computeCumulativeDeltas(series, referenceLabel),
|
|
||||||
[series, referenceLabel],
|
|
||||||
)
|
|
||||||
|
|
||||||
const laps = useMemo(() => lapCount(series), [series])
|
|
||||||
const plotW = W - PL - PR
|
|
||||||
const plotH = H - PT - PB
|
|
||||||
const { min: yMin, max: yMax } = useMemo(() => yExtent(drivers), [drivers])
|
|
||||||
const yTicks = useMemo(() => niceYTicks(yMin, yMax), [yMin, yMax])
|
|
||||||
|
|
||||||
const toX = useCallback(
|
|
||||||
(lapIndex: number) => {
|
|
||||||
if (laps <= 1) return PL + plotW / 2
|
|
||||||
return PL + (lapIndex / (laps - 1)) * plotW
|
|
||||||
},
|
|
||||||
[laps, plotW],
|
|
||||||
)
|
|
||||||
|
|
||||||
const toY = useCallback(
|
|
||||||
(delta: number) => {
|
|
||||||
const span = yMax - yMin || 1
|
|
||||||
return PT + ((delta - yMin) / span) * plotH
|
|
||||||
},
|
|
||||||
[yMin, yMax, plotH],
|
|
||||||
)
|
|
||||||
|
|
||||||
const lapTickNumbers = useMemo(() => {
|
|
||||||
const ticks: number[] = []
|
|
||||||
for (let lap = 5; lap <= laps; lap += 5) {
|
|
||||||
ticks.push(lap)
|
|
||||||
}
|
|
||||||
return ticks
|
|
||||||
}, [laps])
|
|
||||||
|
|
||||||
const handlePointerMove = useCallback(
|
|
||||||
(e: React.PointerEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>) => {
|
|
||||||
if (!svgRef.current || laps === 0) return
|
|
||||||
const rect = svgRef.current.getBoundingClientRect()
|
|
||||||
if (rect.width <= 0) return
|
|
||||||
const x = ((e.clientX - rect.left) / rect.width) * W
|
|
||||||
const frac = Math.max(0, Math.min(1, (x - PL) / plotW))
|
|
||||||
const lapIndex = laps <= 1 ? 0 : Math.round(frac * (laps - 1))
|
|
||||||
if (!Number.isFinite(lapIndex)) return
|
|
||||||
setHoverLap(Math.max(0, Math.min(laps - 1, lapIndex)))
|
|
||||||
},
|
|
||||||
[laps, plotW],
|
|
||||||
)
|
|
||||||
|
|
||||||
const handlePointerLeave = useCallback(() => setHoverLap(null), [])
|
|
||||||
|
|
||||||
if (series.length === 0 || laps === 0) {
|
|
||||||
return (
|
|
||||||
<div className="delta-graph" data-testid="delta-time-graph-empty">
|
|
||||||
<p className="delta-graph-empty">No lap data to compare.</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (drivers.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="delta-graph" data-testid="delta-time-graph-empty">
|
|
||||||
<p className="delta-graph-empty">Select at least two drivers to compare.</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const hoverX = hoverLap !== null ? toX(hoverLap) : null
|
|
||||||
const tooltipRows = hoverLap !== null
|
|
||||||
? drivers
|
|
||||||
.map((d) => {
|
|
||||||
const delta = d.deltas[hoverLap]
|
|
||||||
if (delta == null) return null
|
|
||||||
return { label: d.label, color: d.color, delta }
|
|
||||||
})
|
|
||||||
.filter((row): row is { label: string; color: string; delta: number } => row !== null)
|
|
||||||
: []
|
|
||||||
|
|
||||||
const tooltipH = 18 + tooltipRows.length * 14
|
|
||||||
const tooltipW = 120
|
|
||||||
const tooltipX = hoverX !== null ? Math.min(Math.max(hoverX + 8, PL), W - PR - tooltipW) : 0
|
|
||||||
const tooltipY = PT
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="delta-graph" data-testid="delta-time-graph">
|
|
||||||
<svg
|
|
||||||
ref={svgRef}
|
|
||||||
className="delta-graph-svg"
|
|
||||||
viewBox={`0 0 ${W} ${H}`}
|
|
||||||
role="img"
|
|
||||||
aria-label="Cumulative delta time chart"
|
|
||||||
>
|
|
||||||
{yTicks.map((tick) => (
|
|
||||||
<g key={`y-${tick}`}>
|
|
||||||
<line
|
|
||||||
x1={PL}
|
|
||||||
x2={W - PR}
|
|
||||||
y1={toY(tick)}
|
|
||||||
y2={toY(tick)}
|
|
||||||
className={Math.abs(tick) < 1e-9 ? 'delta-graph-zero-line' : 'delta-graph-grid-line'}
|
|
||||||
data-testid={Math.abs(tick) < 1e-9 ? 'delta-zero-line' : undefined}
|
|
||||||
/>
|
|
||||||
<text
|
|
||||||
x={PL - 6}
|
|
||||||
y={toY(tick) + 3}
|
|
||||||
textAnchor="end"
|
|
||||||
className="delta-graph-axis-label"
|
|
||||||
>
|
|
||||||
{formatDeltaSeconds(tick)}
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{lapTickNumbers.map((lap) => {
|
|
||||||
const x = toX(lap - 1)
|
|
||||||
return (
|
|
||||||
<g key={`lap-${lap}`}>
|
|
||||||
<line
|
|
||||||
x1={x}
|
|
||||||
x2={x}
|
|
||||||
y1={H - PB}
|
|
||||||
y2={H - PB + 4}
|
|
||||||
className="delta-graph-grid-line"
|
|
||||||
/>
|
|
||||||
<text
|
|
||||||
x={x}
|
|
||||||
y={H - PB + 16}
|
|
||||||
textAnchor="middle"
|
|
||||||
className="delta-graph-axis-label"
|
|
||||||
>
|
|
||||||
{lap}
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
|
|
||||||
{drivers.map((driver) => {
|
|
||||||
const segments = deltaPolylineSegments(driver.deltas, (lapIndex, delta) =>
|
|
||||||
`${toX(lapIndex).toFixed(1)},${toY(delta).toFixed(1)}`,
|
|
||||||
)
|
|
||||||
return (
|
|
||||||
<g key={driver.label} data-testid={`delta-line-${driver.label}`}>
|
|
||||||
{segments.map((points, i) => (
|
|
||||||
<polyline
|
|
||||||
key={`${driver.label}-${i}`}
|
|
||||||
points={points}
|
|
||||||
className="delta-graph-driver-line"
|
|
||||||
stroke={driver.color}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</g>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
|
|
||||||
{hoverX !== null && (
|
|
||||||
<>
|
|
||||||
<line
|
|
||||||
x1={hoverX}
|
|
||||||
x2={hoverX}
|
|
||||||
y1={PT}
|
|
||||||
y2={H - PB}
|
|
||||||
className="delta-graph-crosshair"
|
|
||||||
data-testid="delta-crosshair"
|
|
||||||
/>
|
|
||||||
{tooltipRows.length > 0 && (
|
|
||||||
<g className="delta-graph-tooltip" data-testid="delta-tooltip">
|
|
||||||
<rect
|
|
||||||
x={tooltipX}
|
|
||||||
y={tooltipY}
|
|
||||||
width={tooltipW}
|
|
||||||
height={tooltipH}
|
|
||||||
rx={4}
|
|
||||||
className="delta-graph-tooltip-bg"
|
|
||||||
/>
|
|
||||||
<text
|
|
||||||
x={tooltipX + 8}
|
|
||||||
y={tooltipY + 14}
|
|
||||||
className="delta-graph-tooltip-title"
|
|
||||||
>
|
|
||||||
Lap {hoverLap! + 1}
|
|
||||||
</text>
|
|
||||||
{tooltipRows.map((row, i) => (
|
|
||||||
<text
|
|
||||||
key={row.label}
|
|
||||||
x={tooltipX + 8}
|
|
||||||
y={tooltipY + 28 + i * 14}
|
|
||||||
className="delta-graph-tooltip-row"
|
|
||||||
fill={row.color}
|
|
||||||
>
|
|
||||||
{row.label} {formatDeltaSeconds(row.delta)}
|
|
||||||
</text>
|
|
||||||
))}
|
|
||||||
</g>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<rect
|
|
||||||
x={PL}
|
|
||||||
y={PT}
|
|
||||||
width={plotW}
|
|
||||||
height={plotH}
|
|
||||||
fill="transparent"
|
|
||||||
className="delta-graph-hover-layer"
|
|
||||||
onPointerMove={handlePointerMove}
|
|
||||||
onMouseMove={handlePointerMove}
|
|
||||||
onPointerLeave={handlePointerLeave}
|
|
||||||
onMouseLeave={handlePointerLeave}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
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<TelemetryTraceChannel, string> = {
|
|
||||||
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<SVGSVGElement | null>(null)
|
|
||||||
const [hoverIndex, setHoverIndex] = useState<number | null>(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 <div className="telemetry-trace-empty">No telemetry data</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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<SVGSVGElement>) => {
|
|
||||||
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 (
|
|
||||||
<div className="telemetry-trace" data-testid="telemetry-trace">
|
|
||||||
<div className="telemetry-trace-legend">
|
|
||||||
{series.map((s) => (
|
|
||||||
<span key={s.label} className="telemetry-trace-legend-item">
|
|
||||||
<span className="telemetry-trace-swatch" style={{ background: s.color }} aria-hidden="true" />
|
|
||||||
{s.label}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<svg
|
|
||||||
ref={svgRef}
|
|
||||||
className="telemetry-trace-svg"
|
|
||||||
viewBox={`0 0 ${VIEW_WIDTH} ${totalHeight}`}
|
|
||||||
role="img"
|
|
||||||
aria-label="Telemetry trace chart"
|
|
||||||
onMouseMove={handleMouseMove}
|
|
||||||
onMouseLeave={() => setHoverIndex(null)}
|
|
||||||
>
|
|
||||||
{channels.map((channel, panelIdx) => {
|
|
||||||
const panelTop = panelIdx * (panelHeight + PANEL_GAP)
|
|
||||||
return (
|
|
||||||
<g key={channel} className="telemetry-trace-panel" data-channel={channel}>
|
|
||||||
<rect
|
|
||||||
className="telemetry-trace-panel-bg"
|
|
||||||
x={0}
|
|
||||||
y={panelTop}
|
|
||||||
width={VIEW_WIDTH}
|
|
||||||
height={panelHeight}
|
|
||||||
/>
|
|
||||||
<text className="telemetry-trace-panel-title" x={6} y={panelTop + 13}>
|
|
||||||
{CHANNEL_LABELS[channel]}
|
|
||||||
</text>
|
|
||||||
<text className="telemetry-trace-axis-max" x={VIEW_WIDTH - 6} y={panelTop + 13} textAnchor="end">
|
|
||||||
{channel === 'speed' ? `${Math.round(speedMax)} km/h` : '100%'}
|
|
||||||
</text>
|
|
||||||
{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 (
|
|
||||||
<polyline
|
|
||||||
key={s.label}
|
|
||||||
className="telemetry-trace-line"
|
|
||||||
data-channel={channel}
|
|
||||||
data-series={s.label}
|
|
||||||
points={points}
|
|
||||||
fill="none"
|
|
||||||
stroke={s.color}
|
|
||||||
strokeWidth={1.6}
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</g>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
{hover !== null && (
|
|
||||||
<line
|
|
||||||
className="telemetry-trace-crosshair"
|
|
||||||
data-testid="telemetry-trace-crosshair"
|
|
||||||
x1={xAt(hover)}
|
|
||||||
y1={0}
|
|
||||||
x2={xAt(hover)}
|
|
||||||
y2={totalHeight}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
{hover !== null && (
|
|
||||||
<div className="telemetry-trace-readout" data-testid="telemetry-trace-readout">
|
|
||||||
<span className="telemetry-trace-readout-index">Sample {hover}</span>
|
|
||||||
{series.map((s) => (
|
|
||||||
<span key={s.label} className="telemetry-trace-readout-driver">
|
|
||||||
<span className="telemetry-trace-swatch" style={{ background: s.color }} aria-hidden="true" />
|
|
||||||
<span className="telemetry-trace-readout-label">{s.label}</span>
|
|
||||||
{channels.map((channel) => (
|
|
||||||
<span key={channel} className="telemetry-trace-readout-value">
|
|
||||||
{formatValue(channelValue(s.samples[hover], channel), channel)}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,182 +0,0 @@
|
|||||||
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<string>()
|
|
||||||
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 (
|
|
||||||
<div className="stint-timeline" data-testid="stint-timeline-empty">
|
|
||||||
<div className="stint-timeline__empty">No stint data to display.</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="stint-timeline" data-testid="stint-timeline">
|
|
||||||
<div className="stint-timeline__scroll">
|
|
||||||
<svg
|
|
||||||
viewBox={`0 0 ${SVG_W} ${svgH}`}
|
|
||||||
className="stint-timeline__svg"
|
|
||||||
role="img"
|
|
||||||
aria-label="Tyre stint timeline"
|
|
||||||
>
|
|
||||||
{rows.map((row, i) => {
|
|
||||||
const rowY = i * ROW_H
|
|
||||||
return (
|
|
||||||
<g key={`${row.label}-${i}`} transform={`translate(0,${rowY})`}>
|
|
||||||
<text
|
|
||||||
x={LEFT - 5}
|
|
||||||
y={BAR_Y + BAR_H / 2 + 4}
|
|
||||||
textAnchor="end"
|
|
||||||
fill={row.color}
|
|
||||||
className="stint-timeline__label"
|
|
||||||
>
|
|
||||||
{row.label}
|
|
||||||
</text>
|
|
||||||
|
|
||||||
{row.stints.map((stint, si) => (
|
|
||||||
<rect
|
|
||||||
key={si}
|
|
||||||
x={stintBarX(stint, safeTotal)}
|
|
||||||
y={BAR_Y}
|
|
||||||
width={stintBarW(stint, safeTotal)}
|
|
||||||
height={BAR_H}
|
|
||||||
rx={3}
|
|
||||||
className={`stint-timeline__bar ${compoundClass(stint.compound)}${stint.isNew ? ' stint-timeline__bar--new' : ''}`}
|
|
||||||
>
|
|
||||||
<title>{stintTitle(stint)}</title>
|
|
||||||
</rect>
|
|
||||||
))}
|
|
||||||
</g>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
|
|
||||||
<g transform={`translate(0,${chartH})`}>
|
|
||||||
<line
|
|
||||||
x1={LEFT}
|
|
||||||
x2={LEFT + BAR_W}
|
|
||||||
y1={0}
|
|
||||||
y2={0}
|
|
||||||
className="stint-timeline__axis-line"
|
|
||||||
/>
|
|
||||||
{ticks.map((lap) => (
|
|
||||||
<g key={lap}>
|
|
||||||
<line
|
|
||||||
x1={lapX(lap, safeTotal)}
|
|
||||||
x2={lapX(lap, safeTotal)}
|
|
||||||
y1={0}
|
|
||||||
y2={4}
|
|
||||||
className="stint-timeline__axis-line"
|
|
||||||
/>
|
|
||||||
<text
|
|
||||||
x={lapX(lap, safeTotal)}
|
|
||||||
y={14}
|
|
||||||
textAnchor="middle"
|
|
||||||
className="stint-timeline__axis-tick"
|
|
||||||
>
|
|
||||||
{lap}
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
))}
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="stint-timeline__legend">
|
|
||||||
{usedCompounds.map((compound) => (
|
|
||||||
<span key={compound} className="stint-timeline__legend-item">
|
|
||||||
<span
|
|
||||||
className={`stint-timeline__legend-swatch ${compoundClass(compound)}`}
|
|
||||||
data-testid={`legend-${compound.toLowerCase()}`}
|
|
||||||
/>
|
|
||||||
{compoundLabel(compound)}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
<span className="stint-timeline__meta">{safeTotal} laps</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
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<string, LiveDriverInfo>
|
|
||||||
}
|
|
||||||
|
|
||||||
const KIND_ICONS: Record<LiveEventKind, LucideIcon> = {
|
|
||||||
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<HTMLDivElement>()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="event-rail panel-glass" data-testid="event-rail">
|
|
||||||
<div className="sec-header sticky-header">
|
|
||||||
<span className="sec-title">What Just Happened</span>
|
|
||||||
{events.length > 0 && <span className="sec-meta">{events.length} events</span>}
|
|
||||||
</div>
|
|
||||||
{events.length === 0 ? (
|
|
||||||
<div className="missing-notice">Events will appear here as the session unfolds.</div>
|
|
||||||
) : (
|
|
||||||
<div className="event-rail-list" ref={listRef}>
|
|
||||||
{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 (
|
|
||||||
<div className={`event-rail-row event-kind-${event.kind}`} key={event.id} style={{ borderLeftColor: accent }}>
|
|
||||||
<span className="event-rail-icon" aria-hidden="true">
|
|
||||||
<Icon size={14} />
|
|
||||||
</span>
|
|
||||||
<div className="event-rail-body">
|
|
||||||
<span className="event-rail-headline">{event.headline}</span>
|
|
||||||
{event.detail && <span className="event-rail-detail">{event.detail}</span>}
|
|
||||||
</div>
|
|
||||||
{event.lap > 0 && <span className="event-rail-lap">L{event.lap}</span>}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
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<string, LiveDriverInfo>
|
|
||||||
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<HTMLAudioElement | null>(null)
|
|
||||||
const [playingKey, setPlayingKey] = useState<string | null>(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 (
|
|
||||||
<section className="team-radio panel-glass" data-testid="team-radio-ticker">
|
|
||||||
<div className="sec-header sticky-header">
|
|
||||||
<span className="sec-title">Team Radio</span>
|
|
||||||
{captures.length > 0 && <span className="sec-meta">{captures.length} clips</span>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<audio
|
|
||||||
ref={audioRef}
|
|
||||||
className="team-radio-audio"
|
|
||||||
onEnded={() => setPlayingKey(null)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{newestFirst.length === 0 ? (
|
|
||||||
<div className="missing-notice">No team radio clips in the current live snapshot.</div>
|
|
||||||
) : (
|
|
||||||
<div className="team-radio-list">
|
|
||||||
{newestFirst.map((capture) => {
|
|
||||||
const key = radioCaptureKey(capture)
|
|
||||||
const info = driverInfo[capture.RacingNumber]
|
|
||||||
const label = driverLabel(info, capture.RacingNumber)
|
|
||||||
const isPlaying = playingKey === key
|
|
||||||
const url = radioClipUrl(session, capture)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="team-radio-row" key={key}>
|
|
||||||
<button
|
|
||||||
className="team-radio-play"
|
|
||||||
type="button"
|
|
||||||
aria-label={`${isPlaying ? 'Pause' : 'Play'} ${label} radio`}
|
|
||||||
disabled={!url}
|
|
||||||
onClick={() => toggleCapture(capture)}
|
|
||||||
>
|
|
||||||
{isPlaying ? <Pause size={14} /> : <Play size={14} />}
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
className="team-radio-driver"
|
|
||||||
style={{ borderColor: teamColor(info?.TeamColour) }}
|
|
||||||
title={info?.TeamName || undefined}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
<span className="team-radio-time">{relativeTime(capture.Utc)}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,130 +0,0 @@
|
|||||||
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 '../../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 <span className="tyredeg-spark-empty">·</span>
|
|
||||||
const points = sparklinePoints(seconds, SPARK_WIDTH, SPARK_HEIGHT)
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
className="tyredeg-spark"
|
|
||||||
width={SPARK_WIDTH}
|
|
||||||
height={SPARK_HEIGHT}
|
|
||||||
viewBox={`0 0 ${SPARK_WIDTH} ${SPARK_HEIGHT}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<polyline
|
|
||||||
points={points}
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.2"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TyreDegPanel({ rows, sessionType, pinned }: Props) {
|
|
||||||
const [collapsed, setCollapsed] = useState(false)
|
|
||||||
const [stints, setStints] = useState<StintHistoryMap>({})
|
|
||||||
|
|
||||||
// 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 (
|
|
||||||
<section className="live-tyredeg-panel" data-testid="tyredeg-panel">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="sec-header tyredeg-toggle"
|
|
||||||
onClick={() => setCollapsed((prev) => !prev)}
|
|
||||||
aria-expanded={!collapsed}
|
|
||||||
>
|
|
||||||
<span className="sec-title">Tyre Deg & Pit Window</span>
|
|
||||||
{isRace && <span className="sec-meta">rejoin assumes ~{PIT_LOSS_SECONDS}s pit loss</span>}
|
|
||||||
<span className="tyredeg-chevron" aria-hidden="true">{collapsed ? '▸' : '▾'}</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{!collapsed && (
|
|
||||||
<div className="tyredeg-rows">
|
|
||||||
{visible.map((row) => {
|
|
||||||
const model = degradationModel(stints[row.RacingNumber]?.samples ?? [])
|
|
||||||
const rejoin = isRace ? estimatePitRejoin(rows, row.RacingNumber) : null
|
|
||||||
return (
|
|
||||||
<div className="tyredeg-row" key={row.RacingNumber} data-testid="tyredeg-row">
|
|
||||||
<span className="tyredeg-pos mono">P{row.Position}</span>
|
|
||||||
<span className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
|
|
||||||
<span className="drv-code">{driverCode(row)}</span>
|
|
||||||
<span className={`tyre-badge ${compoundClass(row.Tyre?.Compound)}`}>{tyreLabel(row.Tyre)}</span>
|
|
||||||
{model ? (
|
|
||||||
<>
|
|
||||||
<span className={`tyredeg-trend tyredeg-trend-${model.trend}`}>
|
|
||||||
<StintSparkline seconds={model.samples.map((sample) => sample.seconds)} />
|
|
||||||
</span>
|
|
||||||
<span className={`tyredeg-slope mono tyredeg-trend-${model.trend}`}>
|
|
||||||
{formatSlope(model.slope)}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="tyredeg-warmup">warming up</span>
|
|
||||||
)}
|
|
||||||
{rejoin && (
|
|
||||||
<span className="tyredeg-rejoin mono" title={`Pits now: rejoins ~P${rejoin.rejoinPosition}`}>
|
|
||||||
→ ~P{rejoin.rejoinPosition}
|
|
||||||
{rejoin.aheadCode && rejoin.behindCode && (
|
|
||||||
<span className="tyredeg-rejoin-between">
|
|
||||||
{rejoin.aheadCode} · {rejoin.behindCode}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,202 +0,0 @@
|
|||||||
// 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<string, number[]>,
|
|
||||||
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,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
// Cumulative lap-time delta math for driver comparison charts.
|
|
||||||
// Pure functions only — no React — so everything is unit-testable.
|
|
||||||
|
|
||||||
export interface DeltaSeries {
|
|
||||||
label: string
|
|
||||||
color: string
|
|
||||||
/** Lap duration in seconds; null = no time (pit/out lap). */
|
|
||||||
lapTimes: (number | null)[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DriverDeltaResult {
|
|
||||||
label: string
|
|
||||||
color: string
|
|
||||||
/** Cumulative delta vs reference (seconds); null when that lap has no time. */
|
|
||||||
deltas: (number | null)[]
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Format a delta value for axis labels and tooltips (e.g. "+2.5s", "-1.2s"). */
|
|
||||||
export function formatDeltaSeconds(delta: number): string {
|
|
||||||
const sign = delta >= 0 ? '+' : ''
|
|
||||||
return `${sign}${delta.toFixed(1)}s`
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildCumulative(lapTimes: ReadonlyArray<number | null>): number[] {
|
|
||||||
const cumulative: number[] = []
|
|
||||||
let running = 0
|
|
||||||
for (const lap of lapTimes) {
|
|
||||||
if (lap !== null) {
|
|
||||||
running += lap
|
|
||||||
}
|
|
||||||
cumulative.push(running)
|
|
||||||
}
|
|
||||||
return cumulative
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveReference(
|
|
||||||
series: ReadonlyArray<DeltaSeries>,
|
|
||||||
referenceLabel?: string,
|
|
||||||
): DeltaSeries | null {
|
|
||||||
if (series.length === 0) return null
|
|
||||||
if (referenceLabel) {
|
|
||||||
return series.find((s) => s.label === referenceLabel) ?? series[0]
|
|
||||||
}
|
|
||||||
return series[0]
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Compute per-lap cumulative time delta for each non-reference driver.
|
|
||||||
* Positive = behind reference; negative = ahead.
|
|
||||||
* Null laps carry cumulative forward but emit null in deltas (skip when plotting).
|
|
||||||
*/
|
|
||||||
export function computeCumulativeDeltas(
|
|
||||||
series: ReadonlyArray<DeltaSeries>,
|
|
||||||
referenceLabel?: string,
|
|
||||||
): DriverDeltaResult[] {
|
|
||||||
const reference = resolveReference(series, referenceLabel)
|
|
||||||
if (!reference) return []
|
|
||||||
|
|
||||||
const refCumulative = buildCumulative(reference.lapTimes)
|
|
||||||
|
|
||||||
return series
|
|
||||||
.filter((s) => s.label !== reference.label)
|
|
||||||
.map((driver) => {
|
|
||||||
const driverCumulative = buildCumulative(driver.lapTimes)
|
|
||||||
const lapCount = Math.max(driver.lapTimes.length, refCumulative.length)
|
|
||||||
const deltas: (number | null)[] = []
|
|
||||||
|
|
||||||
for (let i = 0; i < lapCount; i++) {
|
|
||||||
if (driver.lapTimes[i] === null) {
|
|
||||||
deltas.push(null)
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
const refValue = refCumulative[i] ?? refCumulative[refCumulative.length - 1] ?? 0
|
|
||||||
const driverValue =
|
|
||||||
driverCumulative[i] ?? driverCumulative[driverCumulative.length - 1] ?? 0
|
|
||||||
deltas.push(driverValue - refValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
label: driver.label,
|
|
||||||
color: driver.color,
|
|
||||||
deltas,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Split delta samples into contiguous SVG polyline point strings (gaps at null laps). */
|
|
||||||
export function deltaPolylineSegments(
|
|
||||||
deltas: ReadonlyArray<number | null>,
|
|
||||||
toPoint: (lapIndex: number, delta: number) => string,
|
|
||||||
): string[] {
|
|
||||||
const segments: string[] = []
|
|
||||||
let current: string[] = []
|
|
||||||
|
|
||||||
for (let i = 0; i < deltas.length; i++) {
|
|
||||||
const value = deltas[i]
|
|
||||||
if (value === null) {
|
|
||||||
if (current.length > 0) {
|
|
||||||
segments.push(current.join(' '))
|
|
||||||
current = []
|
|
||||||
}
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
current.push(toPoint(i, value))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (current.length > 0) {
|
|
||||||
segments.push(current.join(' '))
|
|
||||||
}
|
|
||||||
|
|
||||||
return segments
|
|
||||||
}
|
|
||||||
@@ -1,318 +0,0 @@
|
|||||||
// "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<LiveEvent>,
|
|
||||||
incoming: ReadonlyArray<LiveEvent>,
|
|
||||||
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<string, string> = {
|
|
||||||
'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<string>()
|
|
||||||
|
|
||||||
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`
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import type { Session } from '../types'
|
|
||||||
import { sessionEndTime, sessionStartTime, type FocusMeetingKind } from './schedule'
|
|
||||||
|
|
||||||
export type HeroStateKind = 'live' | 'upcoming' | 'between'
|
|
||||||
|
|
||||||
export interface HeroStateInputs {
|
|
||||||
now: Date
|
|
||||||
liveActive: boolean
|
|
||||||
currentSession: Session | null
|
|
||||||
focusKind: FocusMeetingKind | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
|
|
||||||
const start = sessionStartTime(session)
|
|
||||||
const end = sessionEndTime(session)
|
|
||||||
if (start && end && now >= start && now < end) return 'live'
|
|
||||||
if (start && now >= start) return 'done'
|
|
||||||
return 'upcoming'
|
|
||||||
}
|
|
||||||
|
|
||||||
export function heroState(inputs: HeroStateInputs): HeroStateKind {
|
|
||||||
const { liveActive, currentSession, focusKind } = inputs
|
|
||||||
|
|
||||||
if (liveActive || currentSession) return 'live'
|
|
||||||
if (focusKind === 'current') return 'upcoming'
|
|
||||||
return 'between'
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import type { LiveRadioCapture, LiveSessionMeta } from '../types'
|
|
||||||
|
|
||||||
export const LIVE_TIMING_STATIC_BASE = 'https://livetiming.formula1.com/static/'
|
|
||||||
|
|
||||||
export function radioClipUrl(
|
|
||||||
session: Pick<LiveSessionMeta, 'Path'> | null | undefined,
|
|
||||||
capture: Pick<LiveRadioCapture, 'Path'> | 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}`
|
|
||||||
}
|
|
||||||
@@ -1,271 +0,0 @@
|
|||||||
// 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<string, DriverStintHistory>
|
|
||||||
|
|
||||||
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<StintLapInput>,
|
|
||||||
): 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<StintSample>,
|
|
||||||
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<StintSample>): 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<LiveTimingRow>,
|
|
||||||
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,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,38 +1,38 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { useQueries, useQuery } from '@tanstack/react-query'
|
import { useQueries, useQuery } from '@tanstack/react-query'
|
||||||
import { Link } from '@tanstack/react-router'
|
import { Link } from '@tanstack/react-router'
|
||||||
import {
|
import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend, fetchChampionshipHub } from '../api'
|
||||||
fetchChampionshipHub,
|
|
||||||
fetchLiveState,
|
|
||||||
fetchLocalMeetings,
|
|
||||||
fetchRaceHub,
|
|
||||||
fetchSeasonMeetings,
|
|
||||||
fetchSeasons,
|
|
||||||
fetchSessions,
|
|
||||||
fetchWeekend,
|
|
||||||
} from '../api'
|
|
||||||
import { CommandCenterHero } from '../components/CommandCenterHero'
|
|
||||||
import { PaddockBriefing } from '../components/PaddockBriefing'
|
|
||||||
import { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
|
import { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
|
||||||
import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
|
||||||
import { classifySessionStatus, heroState } from '../lib/hero'
|
|
||||||
import {
|
import {
|
||||||
currentAndNextSession,
|
currentAndNextSession,
|
||||||
focusMeetingKind,
|
focusMeetingKind,
|
||||||
|
formatCountdown,
|
||||||
formatSessionScheduleTime,
|
formatSessionScheduleTime,
|
||||||
meetingHasStarted,
|
meetingHasStarted,
|
||||||
mostRecentPastMeeting,
|
|
||||||
nextUpcomingMeeting,
|
|
||||||
pickFocusMeeting,
|
pickFocusMeeting,
|
||||||
|
sessionEndTime,
|
||||||
|
sessionStartTime,
|
||||||
sortSessionsByStart,
|
sortSessionsByStart,
|
||||||
} from '../lib/schedule'
|
} from '../lib/schedule'
|
||||||
|
import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
||||||
import type { Meeting, Session, Weekend, WeekendSession } from '../types'
|
import type { Meeting, Session, Weekend, WeekendSession } from '../types'
|
||||||
import { Trophy } from 'lucide-react'
|
import { PaddockBriefing } from '../components/PaddockBriefing'
|
||||||
|
import { Play, Activity, Calendar, Trophy } from 'lucide-react'
|
||||||
|
|
||||||
|
type WeekendStatusKind = 'live' | 'current' | 'next' | 'recent' | 'fallback'
|
||||||
|
|
||||||
const missingDatasets = Object.fromEntries(
|
const missingDatasets = Object.fromEntries(
|
||||||
RACE_HUB_DATASETS.map((dataset) => [dataset, { status: 'missing', source: 'none', count: 0 }]),
|
RACE_HUB_DATASETS.map((dataset) => [dataset, { status: 'missing', source: 'none', count: 0 }]),
|
||||||
) as WeekendSession['datasets']
|
) as WeekendSession['datasets']
|
||||||
|
|
||||||
|
function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
|
||||||
|
const start = sessionStartTime(session)
|
||||||
|
const end = sessionEndTime(session)
|
||||||
|
if (start && end && now >= start && now < end) return 'live'
|
||||||
|
if (start && now >= start) return 'done'
|
||||||
|
return 'upcoming'
|
||||||
|
}
|
||||||
|
|
||||||
function meetingStatus(meeting: Meeting, focusKey: number | undefined, now: Date) {
|
function meetingStatus(meeting: Meeting, focusKey: number | undefined, now: Date) {
|
||||||
if (meeting.meeting_key === focusKey) return 'focus'
|
if (meeting.meeting_key === focusKey) return 'focus'
|
||||||
if (meetingHasStarted(meeting, now)) return 'past'
|
if (meetingHasStarted(meeting, now)) return 'past'
|
||||||
@@ -148,36 +148,7 @@ export function CommandCenterPage() {
|
|||||||
focusWeekendSessions[0]?.session
|
focusWeekendSessions[0]?.session
|
||||||
const analysisSessionKey = actionSession?.session_key
|
const analysisSessionKey = actionSession?.session_key
|
||||||
|
|
||||||
const liveActive = liveQuery.data?.is_live === true
|
const weekendsLoading = weekendQueries.some((q) => q.isLoading)
|
||||||
const heroStateKind = heroState({
|
|
||||||
now: nowDate,
|
|
||||||
liveActive,
|
|
||||||
currentSession,
|
|
||||||
focusKind,
|
|
||||||
})
|
|
||||||
|
|
||||||
const lastPastMeeting = useMemo(
|
|
||||||
() => mostRecentPastMeeting(focusMeetings, nowDate),
|
|
||||||
[focusMeetings, nowDate],
|
|
||||||
)
|
|
||||||
const lastPastWeekend = lastPastMeeting ? weekendsByKey.get(lastPastMeeting.meeting_key) : undefined
|
|
||||||
const lastRaceAnalysis = pickAnalysisSession(lastPastWeekend)
|
|
||||||
const lastRaceSessionKey = lastRaceAnalysis?.session.session_key
|
|
||||||
|
|
||||||
const lastRaceHubQuery = useQuery({
|
|
||||||
queryKey: ['race-hub', lastRaceSessionKey, 'hero-podium'],
|
|
||||||
queryFn: () => fetchRaceHub(lastRaceSessionKey!),
|
|
||||||
enabled: lastRaceSessionKey != null && heroStateKind === 'between',
|
|
||||||
staleTime: 60_000,
|
|
||||||
})
|
|
||||||
|
|
||||||
const nextMeetingForHero = useMemo(() => {
|
|
||||||
if (heroStateKind !== 'between') return null
|
|
||||||
return nextUpcomingMeeting(focusMeetings, nowDate)
|
|
||||||
}, [heroStateKind, focusMeetings, nowDate])
|
|
||||||
|
|
||||||
const lastRacePodium = lastRaceHubQuery.data?.results ?? []
|
|
||||||
const lastRaceName = champHub?.last_race ?? lastPastMeeting?.meeting_name ?? ''
|
|
||||||
|
|
||||||
if (seasonsQuery.isLoading) {
|
if (seasonsQuery.isLoading) {
|
||||||
return <div className="page loading-state">loading command center…</div>
|
return <div className="page loading-state">loading command center…</div>
|
||||||
@@ -218,7 +189,19 @@ export function CommandCenterPage() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const liveActive = liveQuery.data?.is_live === true
|
||||||
|
const statusKind: WeekendStatusKind = liveActive
|
||||||
|
? 'live'
|
||||||
|
: focusKind === 'current'
|
||||||
|
? 'current'
|
||||||
|
: focusKind === 'next'
|
||||||
|
? 'next'
|
||||||
|
: focusKind === 'recent'
|
||||||
|
? 'recent'
|
||||||
|
: 'fallback'
|
||||||
|
|
||||||
const accent = countryAccent(focusMeeting ?? null)
|
const accent = countryAccent(focusMeeting ?? null)
|
||||||
|
const decal = countryDecal(focusMeeting ?? null)
|
||||||
const accentStyle = { '--gp-accent': accent } as React.CSSProperties
|
const accentStyle = { '--gp-accent': accent } as React.CSSProperties
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -241,25 +224,76 @@ export function CommandCenterPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{focusMeeting && focusKind && (
|
{focusMeeting && (
|
||||||
<CommandCenterHero
|
<div className="cc-hero">
|
||||||
state={heroStateKind}
|
<section className="cc-weekend-band ui-card glass-panel" data-testid="cc-focus">
|
||||||
now={nowDate}
|
<div className="cc-band-accent" aria-hidden="true" />
|
||||||
accent={accent}
|
<div className="cc-band-body">
|
||||||
liveActive={liveActive}
|
<div className="cc-band-row">
|
||||||
liveData={liveQuery.data?.data}
|
<span className="cc-band-decal mono">{decal}</span>
|
||||||
focusMeeting={focusMeeting}
|
<div className="cc-band-titles">
|
||||||
focusKind={focusKind}
|
<div className="cc-band-eyebrow mono">
|
||||||
sessions={focusWeekendSessions}
|
<WeekendKindLabel kind={statusKind} />
|
||||||
currentSession={currentSession}
|
</div>
|
||||||
nextSession={nextSession}
|
<h1 className="cc-band-name">{focusMeeting.meeting_name}</h1>
|
||||||
analysisSessionKey={analysisSessionKey}
|
<div className="cc-band-sub mono">
|
||||||
analysisSessionName={actionSession?.session_name}
|
{[focusMeeting.location, focusMeeting.circuit_short_name]
|
||||||
lastRaceName={lastRaceName}
|
.filter(Boolean)
|
||||||
lastRacePodium={lastRacePodium}
|
.join(' · ')}
|
||||||
lastRaceSessionKey={lastRaceSessionKey}
|
</div>
|
||||||
nextMeeting={nextMeetingForHero}
|
<div className="cc-band-sub mono cc-band-dates">{formatGpDateRange(focusMeeting)}</div>
|
||||||
/>
|
</div>
|
||||||
|
<CountdownBlock
|
||||||
|
liveActive={liveActive}
|
||||||
|
currentSession={currentSession}
|
||||||
|
nextSession={nextSession}
|
||||||
|
meeting={focusMeeting}
|
||||||
|
now={nowDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="cc-actions-row" data-testid="cc-actions">
|
||||||
|
<Link
|
||||||
|
to="/live"
|
||||||
|
className={`cc-pri-action ui-card interactive ${liveActive ? 'is-live ui-cta-primary' : ''}`}
|
||||||
|
data-testid="cc-action-live"
|
||||||
|
>
|
||||||
|
<span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Play size={16} /> Watch Live</span>
|
||||||
|
<span className="cc-pri-meta mono">{liveActive ? 'Feed active' : 'Standby'}</span>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/race-hub"
|
||||||
|
search={analysisSessionKey ? { session_key: analysisSessionKey } : {}}
|
||||||
|
className="cc-pri-action ui-card interactive"
|
||||||
|
data-testid="cc-action-race-hub"
|
||||||
|
>
|
||||||
|
<span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Activity size={16} /> Open Analysis</span>
|
||||||
|
<span className="cc-pri-meta mono">
|
||||||
|
{actionSession
|
||||||
|
? `${actionSession.session_name} · session ${actionSession.session_key}`
|
||||||
|
: 'Pick a session'}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
{nextSession && sessionStartTime(nextSession) && (
|
||||||
|
<a
|
||||||
|
href="#cc-schedule"
|
||||||
|
className="cc-pri-action ui-card interactive"
|
||||||
|
data-testid="cc-action-schedule"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
document.getElementById('cc-schedule')?.scrollIntoView({ behavior: 'smooth' })
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Calendar size={16} /> Schedule</span>
|
||||||
|
<span className="cc-pri-meta mono">
|
||||||
|
next: {nextSession.session_name}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="cc-dashboard-grid">
|
<div className="cc-dashboard-grid">
|
||||||
@@ -449,3 +483,65 @@ function FormSparkline({ form, color }: { form: number[], color: string }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function WeekendKindLabel({ kind }: { kind: WeekendStatusKind }) {
|
||||||
|
switch (kind) {
|
||||||
|
case 'live':
|
||||||
|
return <span className="cc-kind cc-kind-live">● Live now</span>
|
||||||
|
case 'current':
|
||||||
|
return <span className="cc-kind cc-kind-current">Current weekend</span>
|
||||||
|
case 'next':
|
||||||
|
return <span className="cc-kind cc-kind-next">Next weekend</span>
|
||||||
|
case 'recent':
|
||||||
|
return <span className="cc-kind cc-kind-recent">Recent weekend</span>
|
||||||
|
default:
|
||||||
|
return <span className="cc-kind">Weekend</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CountdownBlockProps {
|
||||||
|
liveActive: boolean
|
||||||
|
currentSession: Session | null
|
||||||
|
nextSession: Session | null
|
||||||
|
meeting: Meeting
|
||||||
|
now: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
function CountdownBlock({ liveActive, currentSession, nextSession, meeting, now }: CountdownBlockProps) {
|
||||||
|
if (liveActive) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">SignalR</div>
|
||||||
|
<div className="cc-cd-value cc-cd-live">LIVE</div>
|
||||||
|
<div className="cc-cd-sub mono">{currentSession?.session_name ?? 'Feed connected'}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (currentSession) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">On Track</div>
|
||||||
|
<div className="cc-cd-value cc-cd-current">{currentSession.session_name}</div>
|
||||||
|
<div className="cc-cd-sub mono">In session</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (nextSession && sessionStartTime(nextSession)) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">Next · {nextSession.session_name}</div>
|
||||||
|
<div className="cc-cd-value mono">{formatCountdown(sessionStartTime(nextSession)!, now)}</div>
|
||||||
|
<div className="cc-cd-sub mono">{formatSessionScheduleTime(nextSession.date_start)}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (meetingHasStarted(meeting, now)) {
|
||||||
|
return (
|
||||||
|
<div className="cc-countdown-block">
|
||||||
|
<div className="cc-cd-label mono">Status</div>
|
||||||
|
<div className="cc-cd-value cc-cd-done">Complete</div>
|
||||||
|
<div className="cc-cd-sub mono">Weekend finished</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { useQuery } from '@tanstack/react-query'
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import { fetchLiveState, fetchLiveTrackOutline } from '../api'
|
import { fetchLiveState, fetchLiveTrackOutline } from '../api'
|
||||||
import type { LivePosition, LiveStreamData } from '../types'
|
import type { LivePosition, LiveStreamData } from '../types'
|
||||||
@@ -15,18 +15,13 @@ import type { VisibleSectorState } from '../lib/live'
|
|||||||
import type { GapHistoryMap } from '../lib/gapHistory'
|
import type { GapHistoryMap } from '../lib/gapHistory'
|
||||||
import { recordGapSamples } from '../lib/gapHistory'
|
import { recordGapSamples } from '../lib/gapHistory'
|
||||||
import { battleNumbers, detectBattles } from '../lib/battles'
|
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 { SessionBanner } from '../components/live/SessionBanner'
|
||||||
import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
|
import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
|
||||||
import { TimingTower } from '../components/live/TimingTower'
|
import { TimingTower } from '../components/live/TimingTower'
|
||||||
import { BattleChips } from '../components/live/BattleChips'
|
import { BattleChips } from '../components/live/BattleChips'
|
||||||
import { PinnedDrivers } from '../components/live/PinnedDrivers'
|
import { PinnedDrivers } from '../components/live/PinnedDrivers'
|
||||||
import { RaceControlFeed } from '../components/live/RaceControlFeed'
|
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 { TrackMap } from '../components/live/TrackMap'
|
||||||
import { TyreDegPanel } from '../components/live/TyreDegPanel'
|
|
||||||
import { Radio } from 'lucide-react'
|
import { Radio } from 'lucide-react'
|
||||||
|
|
||||||
type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
|
type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
|
||||||
@@ -40,9 +35,6 @@ export function LiveTimingPage() {
|
|||||||
const [pinned, setPinned] = useState<string[]>(() => loadPinnedDrivers())
|
const [pinned, setPinned] = useState<string[]>(() => loadPinnedDrivers())
|
||||||
const [visibleSectors, setVisibleSectors] = useState<VisibleSectorState>({})
|
const [visibleSectors, setVisibleSectors] = useState<VisibleSectorState>({})
|
||||||
const [positions, setPositions] = useState<Record<string, LivePosition>>({})
|
const [positions, setPositions] = useState<Record<string, LivePosition>>({})
|
||||||
const [events, setEvents] = useState<LiveEvent[]>([])
|
|
||||||
const prevSnapshotRef = useRef<LiveStreamData | null>(null)
|
|
||||||
const sessionSigRef = useRef('')
|
|
||||||
|
|
||||||
const { data, isLoading, isError, error } = useQuery({
|
const { data, isLoading, isError, error } = useQuery({
|
||||||
queryKey: ['live-state'],
|
queryKey: ['live-state'],
|
||||||
@@ -120,23 +112,6 @@ 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])
|
const rawRows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -218,7 +193,6 @@ export function LiveTimingPage() {
|
|||||||
driverInfo={snapshot.DriverInfo}
|
driverInfo={snapshot.DriverInfo}
|
||||||
loading={trackOutlineQuery.isLoading}
|
loading={trackOutlineQuery.isLoading}
|
||||||
/>
|
/>
|
||||||
<TyreDegPanel rows={rows} sessionType={snapshot.Session?.SessionType} pinned={pinned} />
|
|
||||||
<div className="live-columns">
|
<div className="live-columns">
|
||||||
<div className="live-tower-col">
|
<div className="live-tower-col">
|
||||||
<div className="sec-header">
|
<div className="sec-header">
|
||||||
@@ -237,13 +211,7 @@ export function LiveTimingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="live-rc-col">
|
<div className="live-rc-col">
|
||||||
<TeamRadioTicker
|
|
||||||
captures={snapshot.TeamRadio ?? []}
|
|
||||||
driverInfo={snapshot.DriverInfo}
|
|
||||||
session={snapshot.Session}
|
|
||||||
/>
|
|
||||||
<RaceControlFeed messages={snapshot.RCMessages ?? []} driverInfo={snapshot.DriverInfo} />
|
<RaceControlFeed messages={snapshot.RCMessages ?? []} driverInfo={snapshot.DriverInfo} />
|
||||||
<EventRail events={events} driverInfo={snapshot.DriverInfo} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ import { TabBar, type Tab } from '../components/TabBar'
|
|||||||
import { DatasetStatusView } from '../components/DatasetStatusView'
|
import { DatasetStatusView } from '../components/DatasetStatusView'
|
||||||
import { StrategyView } from '../components/StrategyView'
|
import { StrategyView } from '../components/StrategyView'
|
||||||
import { LapsView } from '../components/LapsView'
|
import { LapsView } from '../components/LapsView'
|
||||||
import { CompareView } from '../components/CompareView'
|
|
||||||
import { RaceControlView } from '../components/RaceControlView'
|
import { RaceControlView } from '../components/RaceControlView'
|
||||||
import { WeatherView } from '../components/WeatherView'
|
import { WeatherView } from '../components/WeatherView'
|
||||||
import { OverviewView } from '../components/OverviewView'
|
import { OverviewView } from '../components/OverviewView'
|
||||||
@@ -308,19 +307,6 @@ export function RaceHubPage({ sessionKey }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'compare' && (
|
|
||||||
<div className="data-section">
|
|
||||||
<div className="sec-header">
|
|
||||||
<span className="sec-title">Driver Compare</span>
|
|
||||||
</div>
|
|
||||||
<CompareView
|
|
||||||
sessionKey={sessionKey}
|
|
||||||
results={data.results}
|
|
||||||
drivers={data.drivers}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === 'lap_data' && (
|
{activeTab === 'lap_data' && (
|
||||||
<div className="data-section">
|
<div className="data-section">
|
||||||
<div className="sec-header">
|
<div className="sec-header">
|
||||||
|
|||||||
@@ -1,78 +0,0 @@
|
|||||||
.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);
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
.delta-graph {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 280px;
|
|
||||||
max-width: 640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-svg {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-empty {
|
|
||||||
padding: 1.5rem 1rem;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-3);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-zero-line {
|
|
||||||
stroke: var(--text-3);
|
|
||||||
stroke-width: 1;
|
|
||||||
stroke-dasharray: 4 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-grid-line {
|
|
||||||
stroke: var(--border);
|
|
||||||
stroke-width: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-axis-label {
|
|
||||||
fill: var(--text-3);
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-driver-line {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: 2;
|
|
||||||
stroke-linejoin: round;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-crosshair {
|
|
||||||
stroke: var(--text-2);
|
|
||||||
stroke-width: 1;
|
|
||||||
stroke-dasharray: 3 3;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-hover-layer {
|
|
||||||
cursor: crosshair;
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-tooltip {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-tooltip-bg {
|
|
||||||
fill: var(--bg-elevated, var(--bg));
|
|
||||||
stroke: var(--border);
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-tooltip-title {
|
|
||||||
fill: var(--text-1);
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta-graph-tooltip-row {
|
|
||||||
fill: var(--text-2);
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
/* ── "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;
|
|
||||||
}
|
|
||||||
@@ -1,373 +0,0 @@
|
|||||||
.hero-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-card {
|
|
||||||
display: flex;
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 124px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-accent {
|
|
||||||
width: 4px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
box-shadow: 0 0 12px var(--hero-accent, var(--gp-accent));
|
|
||||||
background: var(--hero-accent, var(--gp-accent));
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-accent--live {
|
|
||||||
animation: hero-pulse 1.4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes hero-pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.55; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-body {
|
|
||||||
flex: 1;
|
|
||||||
padding: var(--s5);
|
|
||||||
min-width: 0;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background:
|
|
||||||
radial-gradient(ellipse at top right, color-mix(in srgb, var(--gp-accent) 15%, transparent), transparent 60%),
|
|
||||||
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
||||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
||||||
var(--surface);
|
|
||||||
background-size: 100% 100%, 20px 20px, 20px 20px, 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-body::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-inner {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: var(--s6);
|
|
||||||
min-width: 0;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-identity {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-decal {
|
|
||||||
font-size: 56px;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 0.85;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
color: color-mix(in srgb, var(--gp-accent) 35%, var(--text-3));
|
|
||||||
opacity: 0.9;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-eyebrow {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--text-3);
|
|
||||||
margin-bottom: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-eyebrow--live {
|
|
||||||
color: var(--red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-sub {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-2);
|
|
||||||
margin-top: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-countdown {
|
|
||||||
text-align: right;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-label {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.12em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--text-3);
|
|
||||||
margin-bottom: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-value {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-value--live {
|
|
||||||
color: var(--red);
|
|
||||||
font-size: 28px;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cd-sub {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-3);
|
|
||||||
margin-top: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-track-status {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.12em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: var(--s2) var(--s3);
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-top: var(--s3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-track-status--green { color: #3dd68c; background: rgba(61, 214, 140, 0.1); }
|
|
||||||
.hero-track-status--yellow { color: #f5c842; background: rgba(245, 200, 66, 0.1); }
|
|
||||||
.hero-track-status--sc,
|
|
||||||
.hero-track-status--vsc { color: #f5a623; background: rgba(245, 166, 35, 0.12); }
|
|
||||||
.hero-track-status--red { color: var(--red); background: rgba(225, 6, 0, 0.12); }
|
|
||||||
.hero-track-status--unknown { color: var(--text-3); background: rgba(255, 255, 255, 0.05); }
|
|
||||||
|
|
||||||
.hero-timing {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s2);
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 28px 1fr auto;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
padding: var(--s2) var(--s3);
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-pos {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-3);
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-pos--p1 { color: #ffd700; }
|
|
||||||
.hero-timing-pos--p2 { color: #c0c0c0; }
|
|
||||||
.hero-timing-pos--p3 { color: #cd7f32; }
|
|
||||||
|
|
||||||
.hero-timing-bar {
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
border-radius: 2px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-driver {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-timing-gap {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-3);
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cta {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--red);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: opacity 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cta:hover {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-cta--primary {
|
|
||||||
padding: var(--s3) var(--s5);
|
|
||||||
background: rgba(225, 6, 0, 0.12);
|
|
||||||
border: 1px solid rgba(225, 6, 0, 0.35);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: var(--s3);
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-secondary-link {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-2);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-secondary-link:hover {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-strip {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--s3);
|
|
||||||
overflow-x: auto;
|
|
||||||
padding-bottom: var(--s2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
min-width: 120px;
|
|
||||||
padding: var(--s3) var(--s4);
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
transition: background 0.1s, border-color 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card.is-next {
|
|
||||||
border-color: color-mix(in srgb, var(--gp-accent) 50%, transparent);
|
|
||||||
background: color-mix(in srgb, var(--gp-accent) 8%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card.is-done {
|
|
||||||
opacity: 0.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-card.is-live {
|
|
||||||
border-color: rgba(225, 6, 0, 0.4);
|
|
||||||
background: rgba(225, 6, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-abbrev {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-name {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: var(--s2) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-time {
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-marker {
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-top: var(--s2);
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-schedule-marker--next { color: var(--gp-accent); }
|
|
||||||
.hero-schedule-marker--live { color: var(--red); }
|
|
||||||
|
|
||||||
.hero-podium {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--s2);
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-podium-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 32px 1fr;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
padding: var(--s2) var(--s3);
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-podium-pos {
|
|
||||||
font-weight: 700;
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
color: var(--text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-podium-pos--p1 { color: #ffd700; }
|
|
||||||
.hero-podium-pos--p2 { color: #c0c0c0; }
|
|
||||||
.hero-podium-pos--p3 { color: #cd7f32; }
|
|
||||||
|
|
||||||
.hero-podium-driver {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s3);
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: var(--f-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-between-next {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--s4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-flag {
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 700px) {
|
|
||||||
.hero-row {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
.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);
|
|
||||||
}
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
/* 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; }
|
|
||||||
}
|
|
||||||
@@ -12,20 +12,9 @@ vi.mock('../api', () => ({
|
|||||||
fetchSessions: vi.fn(),
|
fetchSessions: vi.fn(),
|
||||||
fetchWeekend: vi.fn(),
|
fetchWeekend: vi.fn(),
|
||||||
fetchLiveState: vi.fn(),
|
fetchLiveState: vi.fn(),
|
||||||
fetchChampionshipHub: vi.fn(),
|
|
||||||
fetchRaceHub: vi.fn(),
|
|
||||||
}))
|
}))
|
||||||
|
|
||||||
import {
|
import { fetchSeasons, fetchLocalMeetings, fetchSeasonMeetings, fetchSessions, fetchWeekend, fetchLiveState } from '../api'
|
||||||
fetchSeasons,
|
|
||||||
fetchLocalMeetings,
|
|
||||||
fetchSeasonMeetings,
|
|
||||||
fetchSessions,
|
|
||||||
fetchWeekend,
|
|
||||||
fetchLiveState,
|
|
||||||
fetchChampionshipHub,
|
|
||||||
fetchRaceHub,
|
|
||||||
} from '../api'
|
|
||||||
|
|
||||||
const mockFetchSeasons = vi.mocked(fetchSeasons)
|
const mockFetchSeasons = vi.mocked(fetchSeasons)
|
||||||
const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
|
const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
|
||||||
@@ -33,8 +22,6 @@ const mockFetchSeasonMeetings = vi.mocked(fetchSeasonMeetings)
|
|||||||
const mockFetchSessions = vi.mocked(fetchSessions)
|
const mockFetchSessions = vi.mocked(fetchSessions)
|
||||||
const mockFetchWeekend = vi.mocked(fetchWeekend)
|
const mockFetchWeekend = vi.mocked(fetchWeekend)
|
||||||
const mockFetchLiveState = vi.mocked(fetchLiveState)
|
const mockFetchLiveState = vi.mocked(fetchLiveState)
|
||||||
const mockFetchChampionshipHub = vi.mocked(fetchChampionshipHub)
|
|
||||||
const mockFetchRaceHub = vi.mocked(fetchRaceHub)
|
|
||||||
|
|
||||||
const meeting: Meeting = {
|
const meeting: Meeting = {
|
||||||
meeting_key: 1229,
|
meeting_key: 1229,
|
||||||
@@ -115,48 +102,6 @@ describe('CommandCenterPage', () => {
|
|||||||
vi.clearAllMocks()
|
vi.clearAllMocks()
|
||||||
mockFetchLiveState.mockResolvedValue({ is_live: false, data: null })
|
mockFetchLiveState.mockResolvedValue({ is_live: false, data: null })
|
||||||
mockFetchSessions.mockResolvedValue([])
|
mockFetchSessions.mockResolvedValue([])
|
||||||
mockFetchChampionshipHub.mockResolvedValue({
|
|
||||||
season: 2025,
|
|
||||||
round: 1,
|
|
||||||
total_rounds: 1,
|
|
||||||
rounds_left: 0,
|
|
||||||
last_race: 'Monaco',
|
|
||||||
round_labels: ['R1'],
|
|
||||||
drivers: [],
|
|
||||||
teams: [],
|
|
||||||
})
|
|
||||||
mockFetchRaceHub.mockResolvedValue({
|
|
||||||
source: 'local',
|
|
||||||
session_key: 9472,
|
|
||||||
datasets: fullDatasets,
|
|
||||||
results: [
|
|
||||||
{
|
|
||||||
driver_number: 1,
|
|
||||||
position: 1,
|
|
||||||
name_acronym: 'VER',
|
|
||||||
full_name: 'Max Verstappen',
|
|
||||||
team_name: 'Red Bull Racing',
|
|
||||||
team_colour: '3671c6',
|
|
||||||
dnf: false,
|
|
||||||
dns: false,
|
|
||||||
dsq: false,
|
|
||||||
duration: 7200,
|
|
||||||
gap_to_leader: null,
|
|
||||||
number_of_laps: 78,
|
|
||||||
points: 25,
|
|
||||||
session_key: 9472,
|
|
||||||
meeting_key: 1229,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
starting_grid: [],
|
|
||||||
drivers: [],
|
|
||||||
stints: [],
|
|
||||||
pit_stops: [],
|
|
||||||
positions: [],
|
|
||||||
race_control: [],
|
|
||||||
weather: [],
|
|
||||||
laps: [],
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('shows empty state when no seasons are ingested', async () => {
|
it('shows empty state when no seasons are ingested', async () => {
|
||||||
@@ -186,10 +131,11 @@ describe('CommandCenterPage', () => {
|
|||||||
expect(screen.getByTestId('cc-session-9472')).toBeInTheDocument()
|
expect(screen.getByTestId('cc-session-9472')).toBeInTheDocument()
|
||||||
})
|
})
|
||||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
||||||
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('MON')
|
||||||
expect(screen.getByTestId('cc-season-calendar')).toHaveTextContent('Season Calendar')
|
expect(screen.getByTestId('cc-season-calendar')).toHaveTextContent('Season Calendar')
|
||||||
expect(screen.getByTestId('cc-calendar-1229')).toHaveTextContent('R01')
|
expect(screen.getByTestId('cc-calendar-1229')).toHaveTextContent('R01')
|
||||||
expect(screen.getByText('No live session')).toBeInTheDocument()
|
expect(screen.getByText('No live session')).toBeInTheDocument()
|
||||||
expect(screen.getByTestId('hero-last-race-link')).toHaveTextContent('Monaco')
|
expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Race')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('uses OpenF1 calendar metadata to focus the current weekend when local ingest is behind', async () => {
|
it('uses OpenF1 calendar metadata to focus the current weekend when local ingest is behind', async () => {
|
||||||
@@ -235,9 +181,9 @@ describe('CommandCenterPage', () => {
|
|||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
|
||||||
})
|
})
|
||||||
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Live now')
|
expect(screen.getByTestId('cc-focus')).toHaveTextContent('Current weekend')
|
||||||
expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track')
|
expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track')
|
||||||
expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live')
|
expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Qualifying')
|
||||||
|
|
||||||
vi.useRealTimers()
|
vi.useRealTimers()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -201,7 +201,6 @@ describe('TimingTower', () => {
|
|||||||
CircuitName: 'Silverstone',
|
CircuitName: 'Silverstone',
|
||||||
SessionType: 'Sprint Qualifying',
|
SessionType: 'Sprint Qualifying',
|
||||||
SessionName: 'Sprint Qualifying',
|
SessionName: 'Sprint Qualifying',
|
||||||
Path: '',
|
|
||||||
}}
|
}}
|
||||||
/>,
|
/>,
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ describe('TabBar', () => {
|
|||||||
expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument()
|
expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument()
|
||||||
expect(screen.getByRole('tab', { name: 'Race Story' })).toBeInTheDocument()
|
expect(screen.getByRole('tab', { name: 'Race Story' })).toBeInTheDocument()
|
||||||
expect(screen.getByRole('tab', { name: 'Strategy' })).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: 'Lap Data' })).toBeInTheDocument()
|
||||||
expect(screen.getByRole('tab', { name: 'Conditions' })).toBeInTheDocument()
|
expect(screen.getByRole('tab', { name: 'Conditions' })).toBeInTheDocument()
|
||||||
expect(screen.getByRole('tab', { name: 'Race Control' })).toBeInTheDocument()
|
expect(screen.getByRole('tab', { name: 'Race Control' })).toBeInTheDocument()
|
||||||
|
|||||||
@@ -1,87 +0,0 @@
|
|||||||
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<string, LiveDriverInfo> = {
|
|
||||||
'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(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
|
|
||||||
|
|
||||||
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(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
|
|
||||||
|
|
||||||
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()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
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<LiveDriverData> = {},
|
|
||||||
tyre: Partial<LiveTyreData> = {},
|
|
||||||
): 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(<TyreDegPanel rows={snapshotRows(3, '1:30.000')} sessionType="Race" pinned={[]} />)
|
|
||||||
const panel = screen.getByTestId('tyredeg-panel')
|
|
||||||
expect(panel).toHaveTextContent('VER')
|
|
||||||
expect(panel).toHaveTextContent('M +5')
|
|
||||||
expect(panel).toHaveTextContent('warming up')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders slope and rejoin estimate once laps accumulate across snapshots', () => {
|
|
||||||
const { rerender } = render(
|
|
||||||
<TyreDegPanel rows={snapshotRows(1, '1:30.000')} sessionType="Race" pinned={[]} />,
|
|
||||||
)
|
|
||||||
// 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(<TyreDegPanel rows={snapshotRows(lap, time)} sessionType="Race" pinned={[]} />)
|
|
||||||
}
|
|
||||||
|
|
||||||
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(<TyreDegPanel rows={snapshotRows(3, '1:30.000')} sessionType="Qualifying" pinned={[]} />)
|
|
||||||
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(<TyreDegPanel rows={rows} sessionType="Race" pinned={['14']} />)
|
|
||||||
expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(11)
|
|
||||||
expect(screen.getByText('D14')).toBeInTheDocument()
|
|
||||||
expect(screen.queryByText('D12')).not.toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders nothing without rows', () => {
|
|
||||||
render(<TyreDegPanel rows={[]} sessionType="Race" pinned={[]} />)
|
|
||||||
expect(screen.queryByTestId('tyredeg-panel')).not.toBeInTheDocument()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,341 +0,0 @@
|
|||||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
|
||||||
import { render, screen, waitFor } from '@testing-library/react'
|
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
||||||
import { 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,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderCompareView() {
|
|
||||||
const client = new QueryClient({
|
|
||||||
defaultOptions: { queries: { retry: false } },
|
|
||||||
})
|
|
||||||
return render(
|
|
||||||
<QueryClientProvider client={client}>
|
|
||||||
<CompareView sessionKey={9472} results={results} drivers={drivers} />
|
|
||||||
</QueryClientProvider>,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
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('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(
|
|
||||||
<QueryClientProvider client={client}>
|
|
||||||
<CompareView sessionKey={9472} results={[]} drivers={[drivers[0]]} />
|
|
||||||
</QueryClientProvider>,
|
|
||||||
)
|
|
||||||
expect(screen.getByTestId('compare-view-empty')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
import { describe, expect, it, vi } from 'vitest'
|
|
||||||
import { render, screen, fireEvent } from '@testing-library/react'
|
|
||||||
import { DeltaTimeGraph } from '../components/charts/DeltaTimeGraph'
|
|
||||||
import {
|
|
||||||
computeCumulativeDeltas,
|
|
||||||
deltaPolylineSegments,
|
|
||||||
formatDeltaSeconds,
|
|
||||||
type DeltaSeries,
|
|
||||||
} from '../lib/delta'
|
|
||||||
|
|
||||||
const reference: DeltaSeries = {
|
|
||||||
label: 'VER',
|
|
||||||
color: '#3671C6',
|
|
||||||
lapTimes: [90, 91, 92],
|
|
||||||
}
|
|
||||||
|
|
||||||
const challenger: DeltaSeries = {
|
|
||||||
label: 'HAM',
|
|
||||||
color: '#E8002D',
|
|
||||||
lapTimes: [89, 92, 90],
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('formatDeltaSeconds', () => {
|
|
||||||
it('formats signed deltas with one decimal and s suffix', () => {
|
|
||||||
expect(formatDeltaSeconds(2.5)).toBe('+2.5s')
|
|
||||||
expect(formatDeltaSeconds(-1.2)).toBe('-1.2s')
|
|
||||||
expect(formatDeltaSeconds(0)).toBe('+0.0s')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('computeCumulativeDeltas', () => {
|
|
||||||
it('computes cumulative delta vs the first series by default', () => {
|
|
||||||
const result = computeCumulativeDeltas([reference, challenger])
|
|
||||||
expect(result).toHaveLength(1)
|
|
||||||
expect(result[0].label).toBe('HAM')
|
|
||||||
// Lap 1: 89-90=-1, Lap 2: (89+92)-(90+91)=0, Lap 3: (89+92+90)-(90+91+92)=-2
|
|
||||||
expect(result[0].deltas[0]).toBeCloseTo(-1)
|
|
||||||
expect(result[0].deltas[1]).toBeCloseTo(0)
|
|
||||||
expect(result[0].deltas[2]).toBeCloseTo(-2)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('respects an explicit reference label', () => {
|
|
||||||
const result = computeCumulativeDeltas([reference, challenger], 'HAM')
|
|
||||||
expect(result).toHaveLength(1)
|
|
||||||
expect(result[0].label).toBe('VER')
|
|
||||||
expect(result[0].deltas[0]).toBeCloseTo(1)
|
|
||||||
expect(result[0].deltas[2]).toBeCloseTo(2)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('emits null for missing lap times while carrying cumulative forward', () => {
|
|
||||||
const withNull: DeltaSeries = {
|
|
||||||
label: 'NOR',
|
|
||||||
color: '#FF8000',
|
|
||||||
lapTimes: [88, null, 93],
|
|
||||||
}
|
|
||||||
const result = computeCumulativeDeltas([reference, withNull])
|
|
||||||
expect(result[0].deltas[0]).toBeCloseTo(-2)
|
|
||||||
expect(result[0].deltas[1]).toBeNull()
|
|
||||||
// After null: NOR cum=181, VER cum=273 → delta -92
|
|
||||||
expect(result[0].deltas[2]).toBeCloseTo(-92)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns an empty array when only one series is provided', () => {
|
|
||||||
expect(computeCumulativeDeltas([reference])).toEqual([])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('deltaPolylineSegments', () => {
|
|
||||||
it('splits polylines at null laps', () => {
|
|
||||||
const segments = deltaPolylineSegments(
|
|
||||||
[1, null, 2],
|
|
||||||
(lap, delta) => `${lap},${delta}`,
|
|
||||||
)
|
|
||||||
expect(segments).toEqual(['0,1', '2,2'])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('DeltaTimeGraph', () => {
|
|
||||||
it('renders an empty state with no series', () => {
|
|
||||||
render(<DeltaTimeGraph series={[]} />)
|
|
||||||
expect(screen.getByTestId('delta-time-graph-empty')).toBeInTheDocument()
|
|
||||||
expect(screen.getByText(/No lap data/i)).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders an empty state with only the reference driver', () => {
|
|
||||||
render(<DeltaTimeGraph series={[reference]} />)
|
|
||||||
expect(screen.getByTestId('delta-time-graph-empty')).toBeInTheDocument()
|
|
||||||
expect(screen.getByText(/at least two drivers/i)).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders a zero line and one polyline per non-reference driver', () => {
|
|
||||||
const { container } = render(<DeltaTimeGraph series={[reference, challenger]} />)
|
|
||||||
expect(screen.getByTestId('delta-time-graph')).toBeInTheDocument()
|
|
||||||
expect(container.querySelector('[data-testid="delta-zero-line"]')).toBeInTheDocument()
|
|
||||||
expect(screen.getByTestId('delta-line-HAM')).toBeInTheDocument()
|
|
||||||
expect(container.querySelectorAll('.delta-graph-driver-line')).toHaveLength(1)
|
|
||||||
expect(screen.queryByTestId('delta-line-VER')).not.toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('shows a crosshair tooltip on hover', () => {
|
|
||||||
vi.spyOn(SVGSVGElement.prototype, 'getBoundingClientRect').mockReturnValue({
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
width: 640,
|
|
||||||
height: 220,
|
|
||||||
right: 640,
|
|
||||||
bottom: 220,
|
|
||||||
toJSON: () => ({}),
|
|
||||||
})
|
|
||||||
const { container } = render(<DeltaTimeGraph series={[reference, challenger]} />)
|
|
||||||
const hoverLayer = container.querySelector('.delta-graph-hover-layer')
|
|
||||||
expect(hoverLayer).toBeTruthy()
|
|
||||||
fireEvent.mouseMove(hoverLayer!, { clientX: 44, clientY: 100 })
|
|
||||||
expect(screen.getByTestId('delta-crosshair')).toBeInTheDocument()
|
|
||||||
expect(screen.getByTestId('delta-tooltip')).toBeInTheDocument()
|
|
||||||
expect(screen.getByText(/Lap 1/)).toBeInTheDocument()
|
|
||||||
vi.restoreAllMocks()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,268 +0,0 @@
|
|||||||
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> = {}): 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<string, LiveDriverData>,
|
|
||||||
overrides: Partial<LiveStreamData> = {},
|
|
||||||
): 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> = {}): 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('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest'
|
|
||||||
import { heroState, classifySessionStatus } from '../lib/hero'
|
|
||||||
import { currentAndNextSession } from '../lib/schedule'
|
|
||||||
import type { Session } from '../types'
|
|
||||||
|
|
||||||
const session = (overrides: Partial<Session> = {}): Session => ({
|
|
||||||
session_key: 9472,
|
|
||||||
session_name: 'Race',
|
|
||||||
session_type: 'Race',
|
|
||||||
meeting_key: 1,
|
|
||||||
date_start: '2025-05-25T13:00:00+00:00',
|
|
||||||
date_end: '2025-05-25T15:00:00+00:00',
|
|
||||||
gmt_offset: '02:00:00',
|
|
||||||
...overrides,
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('heroState', () => {
|
|
||||||
it('returns live when the live snapshot is active', () => {
|
|
||||||
const now = new Date('2025-05-24T12:00:00Z')
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: true,
|
|
||||||
currentSession: null,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('live')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns live when a session is in progress', () => {
|
|
||||||
const now = new Date('2025-05-25T14:00:00Z')
|
|
||||||
const sessions = [session()]
|
|
||||||
const { current } = currentAndNextSession(sessions, now)
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: current,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('live')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns upcoming during a focus weekend gap before the next session', () => {
|
|
||||||
const now = new Date('2025-05-24T12:00:00Z')
|
|
||||||
const sessions = [
|
|
||||||
session({
|
|
||||||
session_key: 1,
|
|
||||||
session_name: 'FP1',
|
|
||||||
date_start: '2025-05-23T10:00:00+00:00',
|
|
||||||
date_end: '2025-05-23T11:00:00+00:00',
|
|
||||||
}),
|
|
||||||
session({
|
|
||||||
session_key: 2,
|
|
||||||
session_name: 'Race',
|
|
||||||
date_start: '2025-05-25T13:00:00+00:00',
|
|
||||||
date_end: '2025-05-25T15:00:00+00:00',
|
|
||||||
}),
|
|
||||||
]
|
|
||||||
const { current, next } = currentAndNextSession(sessions, now)
|
|
||||||
expect(current).toBeNull()
|
|
||||||
expect(next?.session_key).toBe(2)
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: current,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('upcoming')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns upcoming when the weekend just ended but is still the focus weekend', () => {
|
|
||||||
const now = new Date('2025-05-25T16:00:00Z')
|
|
||||||
const sessions = [session()]
|
|
||||||
const { current } = currentAndNextSession(sessions, now)
|
|
||||||
expect(current).toBeNull()
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: current,
|
|
||||||
focusKind: 'current',
|
|
||||||
}),
|
|
||||||
).toBe('upcoming')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns between before the next grand prix weekend', () => {
|
|
||||||
const now = new Date('2025-06-01T12:00:00Z')
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: null,
|
|
||||||
focusKind: 'next',
|
|
||||||
}),
|
|
||||||
).toBe('between')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('returns between after the season when only a recent meeting remains', () => {
|
|
||||||
const now = new Date('2026-01-01T00:00:00Z')
|
|
||||||
expect(
|
|
||||||
heroState({
|
|
||||||
now,
|
|
||||||
liveActive: false,
|
|
||||||
currentSession: null,
|
|
||||||
focusKind: 'recent',
|
|
||||||
}),
|
|
||||||
).toBe('between')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('classifySessionStatus', () => {
|
|
||||||
it('marks a session as done immediately after it ends', () => {
|
|
||||||
const now = new Date('2025-05-25T15:00:00Z')
|
|
||||||
expect(classifySessionStatus(session(), now)).toBe('done')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('marks a session as live during its window', () => {
|
|
||||||
const now = new Date('2025-05-25T14:00:00Z')
|
|
||||||
expect(classifySessionStatus(session(), now)).toBe('live')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,257 +0,0 @@
|
|||||||
import { describe, it, expect, vi } from 'vitest'
|
|
||||||
import type { ComponentProps, ReactNode } from 'react'
|
|
||||||
import { render, screen } from '@testing-library/react'
|
|
||||||
import type { EnrichedResult, LiveStreamData, Meeting, WeekendSession } from '../types'
|
|
||||||
|
|
||||||
vi.mock('@tanstack/react-router', () => ({
|
|
||||||
Link: ({
|
|
||||||
to,
|
|
||||||
children,
|
|
||||||
...rest
|
|
||||||
}: {
|
|
||||||
to: string
|
|
||||||
children: ReactNode
|
|
||||||
className?: string
|
|
||||||
'data-testid'?: string
|
|
||||||
}) => (
|
|
||||||
<a href={to} {...rest}>
|
|
||||||
{children}
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
}))
|
|
||||||
|
|
||||||
import { CommandCenterHero } from '../components/CommandCenterHero'
|
|
||||||
|
|
||||||
const focusMeeting: Meeting = {
|
|
||||||
meeting_key: 1229,
|
|
||||||
meeting_name: 'Monaco',
|
|
||||||
meeting_official_name: 'FORMULA 1 GRAND PRIX DE MONACO 2025',
|
|
||||||
location: 'Monaco',
|
|
||||||
country_name: 'Monaco',
|
|
||||||
country_code: 'MON',
|
|
||||||
country_flag: '',
|
|
||||||
circuit_short_name: 'Monaco',
|
|
||||||
date_start: '2025-05-23T00:00:00+00:00',
|
|
||||||
date_end: '2025-05-25T00:00:00+00:00',
|
|
||||||
year: 2025,
|
|
||||||
}
|
|
||||||
|
|
||||||
const weekendSessions: WeekendSession[] = [
|
|
||||||
{
|
|
||||||
session: {
|
|
||||||
session_key: 9472,
|
|
||||||
session_name: 'Race',
|
|
||||||
session_type: 'Race',
|
|
||||||
meeting_key: 1229,
|
|
||||||
date_start: '2025-05-25T13:00:00+00:00',
|
|
||||||
date_end: '2025-05-25T15:00:00+00:00',
|
|
||||||
gmt_offset: '02:00:00',
|
|
||||||
},
|
|
||||||
source: 'local',
|
|
||||||
datasets: {} as WeekendSession['datasets'],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const liveData: LiveStreamData = {
|
|
||||||
Drivers: {
|
|
||||||
'1': {
|
|
||||||
RacingNumber: '1',
|
|
||||||
Position: 1,
|
|
||||||
PrevPosition: 1,
|
|
||||||
GapToLeader: '',
|
|
||||||
Interval: '',
|
|
||||||
LastLapTime: '1:14.000',
|
|
||||||
LastLapPB: false,
|
|
||||||
LastLapOB: false,
|
|
||||||
BestLapTime: '1:13.500',
|
|
||||||
BestLapPB: false,
|
|
||||||
BestLapOB: false,
|
|
||||||
BestLapNum: 10,
|
|
||||||
InPit: false,
|
|
||||||
PitOut: false,
|
|
||||||
Retired: false,
|
|
||||||
KnockedOut: false,
|
|
||||||
Cutoff: false,
|
|
||||||
OnFlyingLap: false,
|
|
||||||
NumberOfLaps: 10,
|
|
||||||
SpeedTrap: '',
|
|
||||||
Sectors: [],
|
|
||||||
},
|
|
||||||
'44': {
|
|
||||||
RacingNumber: '44',
|
|
||||||
Position: 2,
|
|
||||||
PrevPosition: 2,
|
|
||||||
GapToLeader: '+1.2',
|
|
||||||
Interval: '+1.2',
|
|
||||||
LastLapTime: '1:14.200',
|
|
||||||
LastLapPB: false,
|
|
||||||
LastLapOB: false,
|
|
||||||
BestLapTime: '1:13.700',
|
|
||||||
BestLapPB: false,
|
|
||||||
BestLapOB: false,
|
|
||||||
BestLapNum: 10,
|
|
||||||
InPit: false,
|
|
||||||
PitOut: false,
|
|
||||||
Retired: false,
|
|
||||||
KnockedOut: false,
|
|
||||||
Cutoff: false,
|
|
||||||
OnFlyingLap: false,
|
|
||||||
NumberOfLaps: 10,
|
|
||||||
SpeedTrap: '',
|
|
||||||
Sectors: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
DriverInfo: {
|
|
||||||
'1': {
|
|
||||||
RacingNumber: '1',
|
|
||||||
BroadcastName: 'M VERSTAPPEN',
|
|
||||||
Tla: 'VER',
|
|
||||||
TeamName: 'Red Bull Racing',
|
|
||||||
TeamColour: '3671c6',
|
|
||||||
FirstName: 'Max',
|
|
||||||
LastName: 'Verstappen',
|
|
||||||
},
|
|
||||||
'44': {
|
|
||||||
RacingNumber: '44',
|
|
||||||
BroadcastName: 'L HAMILTON',
|
|
||||||
Tla: 'HAM',
|
|
||||||
TeamName: 'Ferrari',
|
|
||||||
TeamColour: 'e8002d',
|
|
||||||
FirstName: 'Lewis',
|
|
||||||
LastName: 'Hamilton',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
Tyres: {},
|
|
||||||
RCMessages: [],
|
|
||||||
Weather: {
|
|
||||||
AirTemp: 20,
|
|
||||||
TrackTemp: 30,
|
|
||||||
Humidity: 50,
|
|
||||||
WindSpeed: 1,
|
|
||||||
WindDir: 0,
|
|
||||||
Rainfall: false,
|
|
||||||
},
|
|
||||||
Session: {
|
|
||||||
MeetingName: 'Monaco',
|
|
||||||
CircuitName: 'Monaco',
|
|
||||||
SessionType: 'Race',
|
|
||||||
SessionName: 'Race',
|
|
||||||
},
|
|
||||||
TrackStatus: '1',
|
|
||||||
CurrentLap: 10,
|
|
||||||
TotalLaps: 78,
|
|
||||||
Clock: '',
|
|
||||||
ClockRefTime: '',
|
|
||||||
ClockExtrapolating: false,
|
|
||||||
Stints: {},
|
|
||||||
}
|
|
||||||
|
|
||||||
const podium: EnrichedResult[] = [
|
|
||||||
{
|
|
||||||
driver_number: 1,
|
|
||||||
position: 1,
|
|
||||||
name_acronym: 'VER',
|
|
||||||
full_name: 'Max Verstappen',
|
|
||||||
team_name: 'Red Bull Racing',
|
|
||||||
team_colour: '3671c6',
|
|
||||||
dnf: false,
|
|
||||||
dns: false,
|
|
||||||
dsq: false,
|
|
||||||
duration: 7200,
|
|
||||||
gap_to_leader: null,
|
|
||||||
number_of_laps: 78,
|
|
||||||
points: 25,
|
|
||||||
session_key: 9472,
|
|
||||||
meeting_key: 1229,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
driver_number: 44,
|
|
||||||
position: 2,
|
|
||||||
name_acronym: 'HAM',
|
|
||||||
full_name: 'Lewis Hamilton',
|
|
||||||
team_name: 'Ferrari',
|
|
||||||
team_colour: 'e8002d',
|
|
||||||
dnf: false,
|
|
||||||
dns: false,
|
|
||||||
dsq: false,
|
|
||||||
duration: 7205,
|
|
||||||
gap_to_leader: 3.2,
|
|
||||||
number_of_laps: 78,
|
|
||||||
points: 18,
|
|
||||||
session_key: 9472,
|
|
||||||
meeting_key: 1229,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
function renderHero(overrides: Partial<ComponentProps<typeof CommandCenterHero>> = {}) {
|
|
||||||
const props: ComponentProps<typeof CommandCenterHero> = {
|
|
||||||
state: 'upcoming',
|
|
||||||
now: new Date('2025-05-24T12:00:00Z'),
|
|
||||||
accent: '#d61a3e',
|
|
||||||
liveActive: false,
|
|
||||||
liveData: null,
|
|
||||||
focusMeeting,
|
|
||||||
focusKind: 'current',
|
|
||||||
sessions: weekendSessions,
|
|
||||||
currentSession: null,
|
|
||||||
nextSession: weekendSessions[0].session,
|
|
||||||
lastRaceName: '',
|
|
||||||
lastRacePodium: [],
|
|
||||||
nextMeeting: null,
|
|
||||||
...overrides,
|
|
||||||
}
|
|
||||||
|
|
||||||
return render(<CommandCenterHero {...props} />)
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('CommandCenterHero', () => {
|
|
||||||
it('renders live timing link and top three in live state', () => {
|
|
||||||
renderHero({
|
|
||||||
state: 'live',
|
|
||||||
liveActive: true,
|
|
||||||
liveData,
|
|
||||||
currentSession: weekendSessions[0].session,
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live')
|
|
||||||
expect(screen.getByTestId('hero-live-timing')).toHaveTextContent('VER')
|
|
||||||
expect(screen.getByTestId('hero-live-timing')).toHaveTextContent('HAM')
|
|
||||||
expect(screen.getByText('TRACK CLEAR')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders countdown and schedule strip in upcoming state', () => {
|
|
||||||
renderHero({
|
|
||||||
state: 'upcoming',
|
|
||||||
nextSession: weekendSessions[0].session,
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(screen.getByTestId('hero-countdown')).toHaveTextContent('1d 01h 00m 00s')
|
|
||||||
expect(screen.getByTestId('hero-schedule-strip')).toHaveTextContent('Race')
|
|
||||||
expect(screen.getByTestId('hero-schedule-strip')).toHaveTextContent('Next')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders last race podium and next GP countdown in between state', () => {
|
|
||||||
const nextMeeting: Meeting = {
|
|
||||||
...focusMeeting,
|
|
||||||
meeting_key: 1301,
|
|
||||||
meeting_name: 'Canada',
|
|
||||||
country_code: 'CAN',
|
|
||||||
date_start: '2025-06-06T00:00:00+00:00',
|
|
||||||
date_end: '2025-06-08T00:00:00+00:00',
|
|
||||||
}
|
|
||||||
|
|
||||||
renderHero({
|
|
||||||
state: 'between',
|
|
||||||
lastRaceName: 'Monaco',
|
|
||||||
lastRacePodium: podium,
|
|
||||||
nextMeeting,
|
|
||||||
now: new Date('2025-06-01T12:00:00Z'),
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(screen.getByTestId('hero-last-race')).toHaveTextContent('After Monaco')
|
|
||||||
expect(screen.getByTestId('hero-podium')).toHaveTextContent('VER')
|
|
||||||
expect(screen.getByTestId('hero-podium')).toHaveTextContent('HAM')
|
|
||||||
expect(screen.getByTestId('hero-next-gp-countdown')).toHaveTextContent('Canada')
|
|
||||||
expect(screen.getByTestId('hero-next-gp-countdown')).toHaveTextContent('4d')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -100,8 +100,7 @@ const snapshot: LiveStreamData = {
|
|||||||
{ Time: '14:08', Category: 'Drs', Flag: '', Message: 'DRS ENABLED', Lap: 3 },
|
{ Time: '14:08', Category: 'Drs', Flag: '', Message: 'DRS ENABLED', Lap: 3 },
|
||||||
],
|
],
|
||||||
Weather: { AirTemp: 20, TrackTemp: 31, Humidity: 55, WindSpeed: 2, WindDir: 180, Rainfall: false },
|
Weather: { AirTemp: 20, TrackTemp: 31, Humidity: 55, WindSpeed: 2, WindDir: 180, Rainfall: false },
|
||||||
Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '2026/Monaco/Race' },
|
Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' },
|
||||||
TeamRadio: [],
|
|
||||||
TrackStatus: '1',
|
TrackStatus: '1',
|
||||||
CurrentLap: 21,
|
CurrentLap: 21,
|
||||||
TotalLaps: 78,
|
TotalLaps: 78,
|
||||||
@@ -221,7 +220,7 @@ describe('track status mapping', () => {
|
|||||||
describe('live qualifying display', () => {
|
describe('live qualifying display', () => {
|
||||||
it('puts the SQ1 cutoff after P17 for a 22-car sprint qualifying session', () => {
|
it('puts the SQ1 cutoff after P17 for a 22-car sprint qualifying session', () => {
|
||||||
const display = liveSessionDisplay(
|
const display = liveSessionDisplay(
|
||||||
{ MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying', Path: '' },
|
{ MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying' },
|
||||||
rows(22),
|
rows(22),
|
||||||
)
|
)
|
||||||
expect(display.phaseLabel).toBe('SQ1')
|
expect(display.phaseLabel).toBe('SQ1')
|
||||||
@@ -233,7 +232,7 @@ describe('live qualifying display', () => {
|
|||||||
|
|
||||||
it('keeps the normal Q1 cutoff after P15 for a 20-car qualifying session', () => {
|
it('keeps the normal Q1 cutoff after P15 for a 20-car qualifying session', () => {
|
||||||
const display = liveSessionDisplay(
|
const display = liveSessionDisplay(
|
||||||
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
|
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' },
|
||||||
rows(20),
|
rows(20),
|
||||||
)
|
)
|
||||||
expect(display.phaseLabel).toBe('Q1')
|
expect(display.phaseLabel).toBe('Q1')
|
||||||
@@ -242,7 +241,7 @@ describe('live qualifying display', () => {
|
|||||||
|
|
||||||
it('moves phase 2 cutoff after P10 once five cars are knocked out', () => {
|
it('moves phase 2 cutoff after P10 once five cars are knocked out', () => {
|
||||||
const display = liveSessionDisplay(
|
const display = liveSessionDisplay(
|
||||||
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
|
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' },
|
||||||
rows(20, 5),
|
rows(20, 5),
|
||||||
)
|
)
|
||||||
expect(display.phaseLabel).toBe('Q2')
|
expect(display.phaseLabel).toBe('Q2')
|
||||||
@@ -252,13 +251,13 @@ describe('live qualifying display', () => {
|
|||||||
it('shows no cutoff for race sessions or Q3', () => {
|
it('shows no cutoff for race sessions or Q3', () => {
|
||||||
expect(
|
expect(
|
||||||
liveSessionDisplay(
|
liveSessionDisplay(
|
||||||
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '' },
|
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' },
|
||||||
rows(20),
|
rows(20),
|
||||||
).cutoffPosition,
|
).cutoffPosition,
|
||||||
).toBeNull()
|
).toBeNull()
|
||||||
expect(
|
expect(
|
||||||
liveSessionDisplay(
|
liveSessionDisplay(
|
||||||
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3', Path: '' },
|
{ MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3' },
|
||||||
rows(10),
|
rows(10),
|
||||||
).cutoffPosition,
|
).cutoffPosition,
|
||||||
).toBeNull()
|
).toBeNull()
|
||||||
|
|||||||
@@ -1,118 +0,0 @@
|
|||||||
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(<TelemetryTraceChart series={[VER, LEC]} />)
|
|
||||||
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(<TelemetryTraceChart series={[VER]} channels={['speed']} />)
|
|
||||||
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(<TelemetryTraceChart series={[]} />)
|
|
||||||
expect(screen.getByText('No telemetry data')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('renders an empty state when a series has no samples', () => {
|
|
||||||
render(<TelemetryTraceChart series={[makeSeries('VER', '#2563eb', [])]} />)
|
|
||||||
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(<TelemetryTraceChart series={[short, long]} />)
|
|
||||||
// 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(
|
|
||||||
<TelemetryTraceChart series={[wild]} channels={['throttle']} height={110} />,
|
|
||||||
)
|
|
||||||
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(<TelemetryTraceChart series={[VER]} channels={['speed']} />)
|
|
||||||
expect(screen.getByText('310 km/h')).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('lists every series in the legend with a color swatch', () => {
|
|
||||||
const { container } = render(<TelemetryTraceChart series={[VER, LEC]} />)
|
|
||||||
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(<TelemetryTraceChart series={[VER, LEC]} />)
|
|
||||||
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()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
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(
|
|
||||||
<TyreStintTimeline rows={sampleRows} totalLaps={78} />,
|
|
||||||
)
|
|
||||||
expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(3)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('maps compounds to color classes', () => {
|
|
||||||
const { container } = render(
|
|
||||||
<TyreStintTimeline rows={sampleRows} totalLaps={78} />,
|
|
||||||
)
|
|
||||||
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(
|
|
||||||
<TyreStintTimeline rows={sampleRows} totalLaps={78} />,
|
|
||||||
)
|
|
||||||
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(<TyreStintTimeline rows={sampleRows} totalLaps={78} />)
|
|
||||||
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(<TyreStintTimeline rows={sampleRows} totalLaps={78} />)
|
|
||||||
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(<TyreStintTimeline rows={[]} totalLaps={50} />)
|
|
||||||
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(
|
|
||||||
<StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />,
|
|
||||||
)
|
|
||||||
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)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,281 +0,0 @@
|
|||||||
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> = {}): 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<Partial<StintLapInput>>): 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<LiveDriverData> = {},
|
|
||||||
): 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,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -158,37 +158,6 @@ export interface Lap {
|
|||||||
is_pit_out_lap: boolean
|
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<string, number[]>
|
|
||||||
drivers: ComparisonDriver[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface WeekendSession {
|
export interface WeekendSession {
|
||||||
session: Session
|
session: Session
|
||||||
source: 'local' | 'partial' | 'none' | 'cancelled'
|
source: 'local' | 'partial' | 'none' | 'cancelled'
|
||||||
@@ -292,7 +261,6 @@ export interface LiveSessionMeta {
|
|||||||
CircuitName: string
|
CircuitName: string
|
||||||
SessionType: string
|
SessionType: string
|
||||||
SessionName: string
|
SessionName: string
|
||||||
Path: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LiveStintData {
|
export interface LiveStintData {
|
||||||
@@ -301,12 +269,6 @@ export interface LiveStintData {
|
|||||||
Laps: number
|
Laps: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LiveRadioCapture {
|
|
||||||
Utc: string
|
|
||||||
RacingNumber: string
|
|
||||||
Path: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LiveStreamData {
|
export interface LiveStreamData {
|
||||||
Drivers: Record<string, LiveDriverData>
|
Drivers: Record<string, LiveDriverData>
|
||||||
DriverInfo: Record<string, LiveDriverInfo>
|
DriverInfo: Record<string, LiveDriverInfo>
|
||||||
@@ -315,7 +277,6 @@ export interface LiveStreamData {
|
|||||||
RCMessages: LiveRCMessage[]
|
RCMessages: LiveRCMessage[]
|
||||||
Weather: LiveWeatherData
|
Weather: LiveWeatherData
|
||||||
Session: LiveSessionMeta
|
Session: LiveSessionMeta
|
||||||
TeamRadio: LiveRadioCapture[]
|
|
||||||
TrackStatus: string
|
TrackStatus: string
|
||||||
CurrentLap: number
|
CurrentLap: number
|
||||||
TotalLaps: number
|
TotalLaps: number
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import (
|
|||||||
"compress/flate"
|
"compress/flate"
|
||||||
"encoding/base64"
|
"encoding/base64"
|
||||||
"encoding/json"
|
"encoding/json"
|
||||||
"fmt"
|
|
||||||
"testing"
|
"testing"
|
||||||
"time"
|
"time"
|
||||||
|
|
||||||
@@ -212,16 +211,12 @@ func TestProcessTopicSessionInfoCircuitName(t *testing.T) {
|
|||||||
state.ProcessTopic("SessionInfo", json.RawMessage(`{
|
state.ProcessTopic("SessionInfo", json.RawMessage(`{
|
||||||
"Meeting": {"Name": "British Grand Prix", "Circuit": {"ShortName": "Silverstone"}},
|
"Meeting": {"Name": "British Grand Prix", "Circuit": {"ShortName": "Silverstone"}},
|
||||||
"Name": "Race",
|
"Name": "Race",
|
||||||
"Type": "Race",
|
"Type": "Race"
|
||||||
"Path": "2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/"
|
|
||||||
}`))
|
}`))
|
||||||
s := state.Snapshot().Session
|
s := state.Snapshot().Session
|
||||||
if s.MeetingName != "British Grand Prix" || s.CircuitName != "Silverstone" {
|
if s.MeetingName != "British Grand Prix" || s.CircuitName != "Silverstone" {
|
||||||
t.Fatalf("session = %+v", s)
|
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) {
|
func TestProcessTopicDriverList(t *testing.T) {
|
||||||
@@ -290,68 +285,6 @@ 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) {
|
func TestProcessTopicWeatherData(t *testing.T) {
|
||||||
state := live.NewState()
|
state := live.NewState()
|
||||||
state.ProcessTopic("WeatherData", json.RawMessage(`{
|
state.ProcessTopic("WeatherData", json.RawMessage(`{
|
||||||
|
|||||||
@@ -105,7 +105,6 @@ func connectToF1SignalRCore(dataChan chan LiveStreamData) error {
|
|||||||
"RaceControlMessages",
|
"RaceControlMessages",
|
||||||
"WeatherData",
|
"WeatherData",
|
||||||
"SessionInfo",
|
"SessionInfo",
|
||||||
"TeamRadio",
|
|
||||||
"CurrentTyres",
|
"CurrentTyres",
|
||||||
"TimingAppData",
|
"TimingAppData",
|
||||||
"TimingStats",
|
"TimingStats",
|
||||||
@@ -197,7 +196,7 @@ func connectToF1LegacySignalR(dataChan chan LiveStreamData) error {
|
|||||||
return err
|
return err
|
||||||
}
|
}
|
||||||
|
|
||||||
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}`)
|
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}`)
|
||||||
err = c.WriteMessage(websocket.TextMessage, subscribeMsg)
|
err = c.WriteMessage(websocket.TextMessage, subscribeMsg)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
return err
|
return err
|
||||||
|
|||||||
@@ -8,8 +8,6 @@ import (
|
|||||||
"encoding/json"
|
"encoding/json"
|
||||||
"fmt"
|
"fmt"
|
||||||
"io"
|
"io"
|
||||||
"log"
|
|
||||||
"sort"
|
|
||||||
"strings"
|
"strings"
|
||||||
"time"
|
"time"
|
||||||
)
|
)
|
||||||
@@ -25,7 +23,6 @@ type State struct {
|
|||||||
RCMessages []LiveRCMessage
|
RCMessages []LiveRCMessage
|
||||||
Weather LiveWeatherData
|
Weather LiveWeatherData
|
||||||
Session LiveSessionMeta
|
Session LiveSessionMeta
|
||||||
TeamRadio []LiveRadioCapture
|
|
||||||
TrackStatus string
|
TrackStatus string
|
||||||
CurrentLap int
|
CurrentLap int
|
||||||
TotalLaps int
|
TotalLaps int
|
||||||
@@ -37,7 +34,6 @@ type State struct {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const signalRRecordSeparator = byte(0x1e)
|
const signalRRecordSeparator = byte(0x1e)
|
||||||
const maxTeamRadioCaptures = 20
|
|
||||||
|
|
||||||
// NewState returns an empty live timing accumulator.
|
// NewState returns an empty live timing accumulator.
|
||||||
func NewState() *State {
|
func NewState() *State {
|
||||||
@@ -75,8 +71,6 @@ func (s *State) Snapshot() LiveStreamData {
|
|||||||
}
|
}
|
||||||
cpyRC := make([]LiveRCMessage, len(s.RCMessages))
|
cpyRC := make([]LiveRCMessage, len(s.RCMessages))
|
||||||
copy(cpyRC, s.RCMessages)
|
copy(cpyRC, s.RCMessages)
|
||||||
cpyRadio := make([]LiveRadioCapture, len(s.TeamRadio))
|
|
||||||
copy(cpyRadio, s.TeamRadio)
|
|
||||||
cpyStints := make(map[string][]LiveStintData, len(s.Stints))
|
cpyStints := make(map[string][]LiveStintData, len(s.Stints))
|
||||||
for k, v := range s.Stints {
|
for k, v := range s.Stints {
|
||||||
st := make([]LiveStintData, len(v))
|
st := make([]LiveStintData, len(v))
|
||||||
@@ -92,7 +86,6 @@ func (s *State) Snapshot() LiveStreamData {
|
|||||||
RCMessages: cpyRC,
|
RCMessages: cpyRC,
|
||||||
Weather: s.Weather,
|
Weather: s.Weather,
|
||||||
Session: s.Session,
|
Session: s.Session,
|
||||||
TeamRadio: cpyRadio,
|
|
||||||
TrackStatus: s.TrackStatus,
|
TrackStatus: s.TrackStatus,
|
||||||
CurrentLap: s.CurrentLap,
|
CurrentLap: s.CurrentLap,
|
||||||
TotalLaps: s.TotalLaps,
|
TotalLaps: s.TotalLaps,
|
||||||
@@ -342,7 +335,6 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
|
|||||||
} `json:"Meeting"`
|
} `json:"Meeting"`
|
||||||
Name string `json:"Name"`
|
Name string `json:"Name"`
|
||||||
Type string `json:"Type"`
|
Type string `json:"Type"`
|
||||||
Path string `json:"Path"`
|
|
||||||
}
|
}
|
||||||
if json.Unmarshal(data, &si) == nil {
|
if json.Unmarshal(data, &si) == nil {
|
||||||
if si.Meeting.Name != "" {
|
if si.Meeting.Name != "" {
|
||||||
@@ -357,13 +349,8 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
|
|||||||
if si.Type != "" {
|
if si.Type != "" {
|
||||||
s.Session.SessionType = si.Type
|
s.Session.SessionType = si.Type
|
||||||
}
|
}
|
||||||
if si.Path != "" {
|
|
||||||
s.Session.Path = si.Path
|
|
||||||
}
|
|
||||||
updated = true
|
updated = true
|
||||||
}
|
}
|
||||||
case "TeamRadio":
|
|
||||||
updated = s.updateTeamRadio(data)
|
|
||||||
case "CurrentTyres":
|
case "CurrentTyres":
|
||||||
var ct map[string]json.RawMessage
|
var ct map[string]json.RawMessage
|
||||||
if json.Unmarshal(data, &ct) == nil {
|
if json.Unmarshal(data, &ct) == nil {
|
||||||
@@ -496,62 +483,6 @@ func readCompressed(r io.ReadCloser, err error) ([]byte, bool) {
|
|||||||
return out, err == nil
|
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 {
|
func (s *State) updatePositions(data json.RawMessage) bool {
|
||||||
var payload struct {
|
var payload struct {
|
||||||
Position json.RawMessage `json:"Position"`
|
Position json.RawMessage `json:"Position"`
|
||||||
@@ -868,9 +799,6 @@ func indexedRawValues(raw json.RawMessage) []indexedRaw {
|
|||||||
fmt.Sscanf(k, "%d", &i)
|
fmt.Sscanf(k, "%d", &i)
|
||||||
values = append(values, indexedRaw{Index: i, Raw: v})
|
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
|
return values
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -85,7 +85,6 @@ type LiveSessionMeta struct {
|
|||||||
CircuitName string
|
CircuitName string
|
||||||
SessionType string
|
SessionType string
|
||||||
SessionName string
|
SessionName string
|
||||||
Path string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// LivePositionData is the latest raw F1 GPS position for one driver.
|
// LivePositionData is the latest raw F1 GPS position for one driver.
|
||||||
@@ -145,13 +144,6 @@ type LiveStintData struct {
|
|||||||
Laps int
|
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.
|
// LiveStreamData is an immutable snapshot of all live timing state.
|
||||||
type LiveStreamData struct {
|
type LiveStreamData struct {
|
||||||
Drivers map[string]LiveDriverData
|
Drivers map[string]LiveDriverData
|
||||||
@@ -161,7 +153,6 @@ type LiveStreamData struct {
|
|||||||
RCMessages []LiveRCMessage
|
RCMessages []LiveRCMessage
|
||||||
Weather LiveWeatherData
|
Weather LiveWeatherData
|
||||||
Session LiveSessionMeta
|
Session LiveSessionMeta
|
||||||
TeamRadio []LiveRadioCapture
|
|
||||||
TrackStatus string // "1"=green "2"=yellow "4"=SC "5"=red "6"=VSC
|
TrackStatus string // "1"=green "2"=yellow "4"=SC "5"=red "6"=VSC
|
||||||
CurrentLap int
|
CurrentLap int
|
||||||
TotalLaps int
|
TotalLaps int
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ test.describe('Command Center', () => {
|
|||||||
await expect(page.getByTestId('command-center')).toBeVisible()
|
await expect(page.getByTestId('command-center')).toBeVisible()
|
||||||
await expect(page.getByTestId('cc-focus')).toBeVisible()
|
await expect(page.getByTestId('cc-focus')).toBeVisible()
|
||||||
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
|
await expect(page.getByTestId('cc-session-9472')).toBeVisible()
|
||||||
await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
|
await expect(page.getByTestId('cc-actions')).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('nav link reaches command center from race hub', async ({ page }) => {
|
test('nav link reaches command center from race hub', async ({ page }) => {
|
||||||
@@ -21,8 +21,8 @@ test.describe('Command Center', () => {
|
|||||||
|
|
||||||
test('open analysis action opens race hub for the focus session', async ({ page }) => {
|
test('open analysis action opens race hub for the focus session', async ({ page }) => {
|
||||||
await page.goto('/')
|
await page.goto('/')
|
||||||
await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
|
await expect(page.getByTestId('cc-action-race-hub')).toContainText(String(FULL_SESSION))
|
||||||
await page.getByTestId('hero-last-race-link').click()
|
await page.getByTestId('cc-action-race-hub').click()
|
||||||
await expect(page).toHaveURL(new RegExp(`/race-hub\\?session_key=${FULL_SESSION}`))
|
await expect(page).toHaveURL(new RegExp(`/race-hub\\?session_key=${FULL_SESSION}`))
|
||||||
await expect(page.getByTestId('rh-identity')).toBeVisible()
|
await expect(page.getByTestId('rh-identity')).toBeVisible()
|
||||||
await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()
|
await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()
|
||||||
|
|||||||
Reference in New Issue
Block a user