mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-08 04:06:18 -04:00
Merge remote-tracking branch 'origin/phase-1' into feat/issue-13-live-tyre-degradation-pit-window-panel
This commit is contained in:
415
frontend/src/components/CommandCenterHero.tsx
Normal file
415
frontend/src/components/CommandCenterHero.tsx
Normal file
@@ -0,0 +1,415 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { Activity, ArrowRight, Play } from 'lucide-react'
|
||||
import { sessionTypeAbbrev } from '../lib/coverage'
|
||||
import { countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
||||
import { classifySessionStatus, type HeroStateKind } from '../lib/hero'
|
||||
import { sortLiveTimingRows, trackStatusInfo } from '../lib/live'
|
||||
import {
|
||||
formatCountdown,
|
||||
formatSessionScheduleTime,
|
||||
meetingStartTime,
|
||||
sessionStartTime,
|
||||
type FocusMeetingKind,
|
||||
} from '../lib/schedule'
|
||||
import type { EnrichedResult, LiveStreamData, Meeting, Session, WeekendSession } from '../types'
|
||||
import '../styles/hero.css'
|
||||
|
||||
export interface CommandCenterHeroProps {
|
||||
state: HeroStateKind
|
||||
now: Date
|
||||
accent: string
|
||||
liveActive: boolean
|
||||
liveData: LiveStreamData | null | undefined
|
||||
focusMeeting: Meeting
|
||||
focusKind: FocusMeetingKind
|
||||
sessions: WeekendSession[]
|
||||
currentSession: Session | null
|
||||
nextSession: Session | null
|
||||
analysisSessionKey?: number
|
||||
analysisSessionName?: string
|
||||
lastRaceName: string
|
||||
lastRacePodium: EnrichedResult[]
|
||||
lastRaceSessionKey?: number
|
||||
nextMeeting: Meeting | null
|
||||
}
|
||||
|
||||
export function CommandCenterHero({
|
||||
state,
|
||||
now,
|
||||
accent,
|
||||
liveActive,
|
||||
liveData,
|
||||
focusMeeting,
|
||||
focusKind,
|
||||
sessions,
|
||||
currentSession,
|
||||
nextSession,
|
||||
analysisSessionKey,
|
||||
analysisSessionName,
|
||||
lastRaceName,
|
||||
lastRacePodium,
|
||||
lastRaceSessionKey,
|
||||
nextMeeting,
|
||||
}: CommandCenterHeroProps) {
|
||||
const accentStyle = {
|
||||
'--gp-accent': accent,
|
||||
'--hero-accent': accent,
|
||||
} as React.CSSProperties
|
||||
|
||||
return (
|
||||
<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,28 +1,9 @@
|
||||
import type { EnrichedResult, Stint, PitStop } from '../types'
|
||||
import { compareFinishPosition } from '../utils'
|
||||
|
||||
const COMPOUND_COLORS: Record<string, string> = {
|
||||
SOFT: '#e8002d',
|
||||
MEDIUM: '#ffd600',
|
||||
HARD: '#e8e8e4',
|
||||
INTERMEDIATE: '#39b54a',
|
||||
WET: '#0067ff',
|
||||
}
|
||||
|
||||
function compoundColor(c: string): string {
|
||||
return COMPOUND_COLORS[c.toUpperCase()] ?? '#666'
|
||||
}
|
||||
|
||||
function compoundInitial(c: string): string {
|
||||
const abbr: Record<string, string> = {
|
||||
SOFT: 'S',
|
||||
MEDIUM: 'M',
|
||||
HARD: 'H',
|
||||
INTERMEDIATE: 'I',
|
||||
WET: 'W',
|
||||
}
|
||||
return abbr[c.toUpperCase()] ?? c[0] ?? '?'
|
||||
}
|
||||
import {
|
||||
TyreStintTimeline,
|
||||
type StintTimelineRow,
|
||||
} from './charts/TyreStintTimeline'
|
||||
|
||||
interface Props {
|
||||
results: EnrichedResult[]
|
||||
@@ -31,7 +12,7 @@ interface Props {
|
||||
hasStints: boolean
|
||||
}
|
||||
|
||||
export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
|
||||
export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints }: Props) {
|
||||
if (!hasStints) {
|
||||
return (
|
||||
<div>
|
||||
@@ -89,147 +70,29 @@ export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
|
||||
const cmp = compareFinishPosition(a.position, b.position)
|
||||
return cmp !== 0 ? cmp : a.driver_number - b.driver_number
|
||||
})
|
||||
|
||||
const totalLaps = Math.max(
|
||||
...stints.map((s) => s.lap_end),
|
||||
...results.map((r) => r.number_of_laps),
|
||||
1
|
||||
1,
|
||||
)
|
||||
|
||||
const SVG_W = 640
|
||||
const LEFT = 48
|
||||
const RIGHT = 12
|
||||
const ROW_H = 28
|
||||
const BAR_H = 14
|
||||
const BAR_Y = 7
|
||||
const BAR_W = SVG_W - LEFT - RIGHT
|
||||
const SVG_H = sortedDrivers.length * ROW_H + 8
|
||||
|
||||
const lapX = (lap: number) => LEFT + ((lap - 1) / totalLaps) * BAR_W
|
||||
const stintW = (s: Stint) =>
|
||||
Math.max(2, ((s.lap_end - s.lap_start + 1) / totalLaps) * BAR_W)
|
||||
|
||||
const usedCompounds = [...new Set(stints.map((s) => s.compound.toUpperCase()))].filter(
|
||||
(c) => c in COMPOUND_COLORS
|
||||
)
|
||||
const timelineRows: StintTimelineRow[] = sortedDrivers.map((driver) => ({
|
||||
label: driver.name_acronym || String(driver.driver_number),
|
||||
color: driver.team_colour ? `#${driver.team_colour}` : '#888',
|
||||
stints: stints
|
||||
.filter((s) => s.driver_number === driver.driver_number)
|
||||
.map((s) => ({
|
||||
compound: s.compound,
|
||||
lapStart: s.lap_start,
|
||||
lapEnd: s.lap_end,
|
||||
isNew: s.tyre_age_at_start === 0,
|
||||
})),
|
||||
}))
|
||||
|
||||
return (
|
||||
<div data-testid="strategy-chart">
|
||||
<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>
|
||||
<TyreStintTimeline rows={timelineRows} totalLaps={totalLaps} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
282
frontend/src/components/charts/DeltaTimeGraph.tsx
Normal file
282
frontend/src/components/charts/DeltaTimeGraph.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import { useCallback, useMemo, useRef, useState } from 'react'
|
||||
import {
|
||||
computeCumulativeDeltas,
|
||||
deltaPolylineSegments,
|
||||
formatDeltaSeconds,
|
||||
type DeltaSeries,
|
||||
type DriverDeltaResult,
|
||||
} from '../../lib/delta'
|
||||
import '../../styles/delta-graph.css'
|
||||
|
||||
export type { DeltaSeries }
|
||||
|
||||
export interface DeltaTimeGraphProps {
|
||||
series: DeltaSeries[]
|
||||
referenceLabel?: string
|
||||
}
|
||||
|
||||
const W = 640
|
||||
const H = 220
|
||||
const PL = 44
|
||||
const PR = 16
|
||||
const PT = 12
|
||||
const PB = 28
|
||||
|
||||
function lapCount(series: ReadonlyArray<DeltaSeries>): number {
|
||||
return series.reduce((max, s) => Math.max(max, s.lapTimes.length), 0)
|
||||
}
|
||||
|
||||
function yExtent(drivers: ReadonlyArray<DriverDeltaResult>): { min: number; max: number } {
|
||||
let min = 0
|
||||
let max = 0
|
||||
for (const driver of drivers) {
|
||||
for (const delta of driver.deltas) {
|
||||
if (delta === null) continue
|
||||
min = Math.min(min, delta)
|
||||
max = Math.max(max, delta)
|
||||
}
|
||||
}
|
||||
if (min === max) {
|
||||
const pad = 1
|
||||
return { min: min - pad, max: max + pad }
|
||||
}
|
||||
const span = max - min
|
||||
const pad = span * 0.08
|
||||
return { min: min - pad, max: max + pad }
|
||||
}
|
||||
|
||||
function niceYTicks(min: number, max: number): number[] {
|
||||
const span = max - min
|
||||
if (span <= 0) return [0]
|
||||
const rough = span / 4
|
||||
const magnitude = Math.pow(10, Math.floor(Math.log10(rough)))
|
||||
const step = Math.ceil(rough / magnitude) * magnitude
|
||||
const ticks: number[] = []
|
||||
const start = Math.ceil(min / step) * step
|
||||
for (let v = start; v <= max + step * 0.01; v += step) {
|
||||
ticks.push(Number(v.toFixed(6)))
|
||||
}
|
||||
if (!ticks.some((t) => Math.abs(t) < step * 0.01)) {
|
||||
ticks.push(0)
|
||||
ticks.sort((a, b) => a - b)
|
||||
}
|
||||
return ticks
|
||||
}
|
||||
|
||||
export function DeltaTimeGraph({ series, referenceLabel }: DeltaTimeGraphProps) {
|
||||
const svgRef = useRef<SVGSVGElement>(null)
|
||||
const [hoverLap, setHoverLap] = useState<number | null>(null)
|
||||
|
||||
const drivers = useMemo(
|
||||
() => computeCumulativeDeltas(series, referenceLabel),
|
||||
[series, referenceLabel],
|
||||
)
|
||||
|
||||
const laps = useMemo(() => lapCount(series), [series])
|
||||
const plotW = W - PL - PR
|
||||
const plotH = H - PT - PB
|
||||
const { min: yMin, max: yMax } = useMemo(() => yExtent(drivers), [drivers])
|
||||
const yTicks = useMemo(() => niceYTicks(yMin, yMax), [yMin, yMax])
|
||||
|
||||
const toX = useCallback(
|
||||
(lapIndex: number) => {
|
||||
if (laps <= 1) return PL + plotW / 2
|
||||
return PL + (lapIndex / (laps - 1)) * plotW
|
||||
},
|
||||
[laps, plotW],
|
||||
)
|
||||
|
||||
const toY = useCallback(
|
||||
(delta: number) => {
|
||||
const span = yMax - yMin || 1
|
||||
return PT + ((delta - yMin) / span) * plotH
|
||||
},
|
||||
[yMin, yMax, plotH],
|
||||
)
|
||||
|
||||
const lapTickNumbers = useMemo(() => {
|
||||
const ticks: number[] = []
|
||||
for (let lap = 5; lap <= laps; lap += 5) {
|
||||
ticks.push(lap)
|
||||
}
|
||||
return ticks
|
||||
}, [laps])
|
||||
|
||||
const handlePointerMove = useCallback(
|
||||
(e: React.PointerEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>) => {
|
||||
if (!svgRef.current || laps === 0) return
|
||||
const rect = svgRef.current.getBoundingClientRect()
|
||||
if (rect.width <= 0) return
|
||||
const x = ((e.clientX - rect.left) / rect.width) * W
|
||||
const frac = Math.max(0, Math.min(1, (x - PL) / plotW))
|
||||
const lapIndex = laps <= 1 ? 0 : Math.round(frac * (laps - 1))
|
||||
if (!Number.isFinite(lapIndex)) return
|
||||
setHoverLap(Math.max(0, Math.min(laps - 1, lapIndex)))
|
||||
},
|
||||
[laps, plotW],
|
||||
)
|
||||
|
||||
const handlePointerLeave = useCallback(() => setHoverLap(null), [])
|
||||
|
||||
if (series.length === 0 || laps === 0) {
|
||||
return (
|
||||
<div className="delta-graph" data-testid="delta-time-graph-empty">
|
||||
<p className="delta-graph-empty">No lap data to compare.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (drivers.length === 0) {
|
||||
return (
|
||||
<div className="delta-graph" data-testid="delta-time-graph-empty">
|
||||
<p className="delta-graph-empty">Select at least two drivers to compare.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const hoverX = hoverLap !== null ? toX(hoverLap) : null
|
||||
const tooltipRows = hoverLap !== null
|
||||
? drivers
|
||||
.map((d) => {
|
||||
const delta = d.deltas[hoverLap]
|
||||
if (delta == null) return null
|
||||
return { label: d.label, color: d.color, delta }
|
||||
})
|
||||
.filter((row): row is { label: string; color: string; delta: number } => row !== null)
|
||||
: []
|
||||
|
||||
const tooltipH = 18 + tooltipRows.length * 14
|
||||
const tooltipW = 120
|
||||
const tooltipX = hoverX !== null ? Math.min(Math.max(hoverX + 8, PL), W - PR - tooltipW) : 0
|
||||
const tooltipY = PT
|
||||
|
||||
return (
|
||||
<div className="delta-graph" data-testid="delta-time-graph">
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className="delta-graph-svg"
|
||||
viewBox={`0 0 ${W} ${H}`}
|
||||
role="img"
|
||||
aria-label="Cumulative delta time chart"
|
||||
>
|
||||
{yTicks.map((tick) => (
|
||||
<g key={`y-${tick}`}>
|
||||
<line
|
||||
x1={PL}
|
||||
x2={W - PR}
|
||||
y1={toY(tick)}
|
||||
y2={toY(tick)}
|
||||
className={Math.abs(tick) < 1e-9 ? 'delta-graph-zero-line' : 'delta-graph-grid-line'}
|
||||
data-testid={Math.abs(tick) < 1e-9 ? 'delta-zero-line' : undefined}
|
||||
/>
|
||||
<text
|
||||
x={PL - 6}
|
||||
y={toY(tick) + 3}
|
||||
textAnchor="end"
|
||||
className="delta-graph-axis-label"
|
||||
>
|
||||
{formatDeltaSeconds(tick)}
|
||||
</text>
|
||||
</g>
|
||||
))}
|
||||
|
||||
{lapTickNumbers.map((lap) => {
|
||||
const x = toX(lap - 1)
|
||||
return (
|
||||
<g key={`lap-${lap}`}>
|
||||
<line
|
||||
x1={x}
|
||||
x2={x}
|
||||
y1={H - PB}
|
||||
y2={H - PB + 4}
|
||||
className="delta-graph-grid-line"
|
||||
/>
|
||||
<text
|
||||
x={x}
|
||||
y={H - PB + 16}
|
||||
textAnchor="middle"
|
||||
className="delta-graph-axis-label"
|
||||
>
|
||||
{lap}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
|
||||
{drivers.map((driver) => {
|
||||
const segments = deltaPolylineSegments(driver.deltas, (lapIndex, delta) =>
|
||||
`${toX(lapIndex).toFixed(1)},${toY(delta).toFixed(1)}`,
|
||||
)
|
||||
return (
|
||||
<g key={driver.label} data-testid={`delta-line-${driver.label}`}>
|
||||
{segments.map((points, i) => (
|
||||
<polyline
|
||||
key={`${driver.label}-${i}`}
|
||||
points={points}
|
||||
className="delta-graph-driver-line"
|
||||
stroke={driver.color}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
|
||||
{hoverX !== null && (
|
||||
<>
|
||||
<line
|
||||
x1={hoverX}
|
||||
x2={hoverX}
|
||||
y1={PT}
|
||||
y2={H - PB}
|
||||
className="delta-graph-crosshair"
|
||||
data-testid="delta-crosshair"
|
||||
/>
|
||||
{tooltipRows.length > 0 && (
|
||||
<g className="delta-graph-tooltip" data-testid="delta-tooltip">
|
||||
<rect
|
||||
x={tooltipX}
|
||||
y={tooltipY}
|
||||
width={tooltipW}
|
||||
height={tooltipH}
|
||||
rx={4}
|
||||
className="delta-graph-tooltip-bg"
|
||||
/>
|
||||
<text
|
||||
x={tooltipX + 8}
|
||||
y={tooltipY + 14}
|
||||
className="delta-graph-tooltip-title"
|
||||
>
|
||||
Lap {hoverLap! + 1}
|
||||
</text>
|
||||
{tooltipRows.map((row, i) => (
|
||||
<text
|
||||
key={row.label}
|
||||
x={tooltipX + 8}
|
||||
y={tooltipY + 28 + i * 14}
|
||||
className="delta-graph-tooltip-row"
|
||||
fill={row.color}
|
||||
>
|
||||
{row.label} {formatDeltaSeconds(row.delta)}
|
||||
</text>
|
||||
))}
|
||||
</g>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<rect
|
||||
x={PL}
|
||||
y={PT}
|
||||
width={plotW}
|
||||
height={plotH}
|
||||
fill="transparent"
|
||||
className="delta-graph-hover-layer"
|
||||
onPointerMove={handlePointerMove}
|
||||
onMouseMove={handlePointerMove}
|
||||
onPointerLeave={handlePointerLeave}
|
||||
onMouseLeave={handlePointerLeave}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
194
frontend/src/components/charts/TelemetryTraceChart.tsx
Normal file
194
frontend/src/components/charts/TelemetryTraceChart.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
import '../../styles/telemetry-trace.css'
|
||||
|
||||
export interface TelemetryTraceSample {
|
||||
speed: number
|
||||
throttle: number
|
||||
brake: number
|
||||
}
|
||||
|
||||
export interface TelemetryTraceSeries {
|
||||
label: string
|
||||
color: string
|
||||
samples: TelemetryTraceSample[]
|
||||
}
|
||||
|
||||
export type TelemetryTraceChannel = 'speed' | 'throttle' | 'brake'
|
||||
|
||||
export interface TelemetryTraceChartProps {
|
||||
series: TelemetryTraceSeries[]
|
||||
channels?: TelemetryTraceChannel[]
|
||||
/** Height of each channel panel in SVG units (viewBox space). */
|
||||
height?: number
|
||||
}
|
||||
|
||||
const VIEW_WIDTH = 800
|
||||
const PANEL_GAP = 18
|
||||
const PAD_TOP = 6
|
||||
const PAD_BOTTOM = 6
|
||||
|
||||
const CHANNEL_LABELS: Record<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>
|
||||
)
|
||||
}
|
||||
182
frontend/src/components/charts/TyreStintTimeline.tsx
Normal file
182
frontend/src/components/charts/TyreStintTimeline.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { compoundClass } from '../../lib/live'
|
||||
import '../../styles/stint-timeline.css'
|
||||
|
||||
export interface StintTimelineStint {
|
||||
compound: string
|
||||
lapStart: number
|
||||
lapEnd: number
|
||||
isNew?: boolean
|
||||
}
|
||||
|
||||
export interface StintTimelineRow {
|
||||
label: string
|
||||
color: string
|
||||
stints: StintTimelineStint[]
|
||||
}
|
||||
|
||||
interface TyreStintTimelineProps {
|
||||
rows: StintTimelineRow[]
|
||||
totalLaps: number
|
||||
}
|
||||
|
||||
const SVG_W = 640
|
||||
const LEFT = 48
|
||||
const RIGHT = 12
|
||||
const ROW_H = 28
|
||||
const BAR_H = 14
|
||||
const BAR_Y = 7
|
||||
const AXIS_H = 20
|
||||
const BAR_W = SVG_W - LEFT - RIGHT
|
||||
|
||||
const COMPOUND_ORDER = ['SOFT', 'MEDIUM', 'HARD', 'INTERMEDIATE', 'WET'] as const
|
||||
|
||||
function compoundLabel(compound: string): string {
|
||||
const upper = compound.toUpperCase()
|
||||
if (upper === 'INTERMEDIATE') return 'Intermediate'
|
||||
return upper.charAt(0) + upper.slice(1).toLowerCase()
|
||||
}
|
||||
|
||||
function stintLength(stint: StintTimelineStint): number {
|
||||
return stint.lapEnd - stint.lapStart + 1
|
||||
}
|
||||
|
||||
function stintTitle(stint: StintTimelineStint): string {
|
||||
const length = stintLength(stint)
|
||||
return `${compoundLabel(stint.compound)} · L${stint.lapStart}–${stint.lapEnd} · ${length} lap${length === 1 ? '' : 's'}`
|
||||
}
|
||||
|
||||
function lapX(lap: number, totalLaps: number): number {
|
||||
return LEFT + (lap / totalLaps) * BAR_W
|
||||
}
|
||||
|
||||
function stintBarX(stint: StintTimelineStint, totalLaps: number): number {
|
||||
return LEFT + ((stint.lapStart - 1) / totalLaps) * BAR_W
|
||||
}
|
||||
|
||||
function stintBarW(stint: StintTimelineStint, totalLaps: number): number {
|
||||
return Math.max(2, (stintLength(stint) / totalLaps) * BAR_W)
|
||||
}
|
||||
|
||||
function axisTicks(totalLaps: number): number[] {
|
||||
const ticks: number[] = []
|
||||
for (let lap = 0; lap <= totalLaps; lap += 10) {
|
||||
ticks.push(lap)
|
||||
}
|
||||
return ticks
|
||||
}
|
||||
|
||||
function collectUsedCompounds(rows: StintTimelineRow[]): string[] {
|
||||
const seen = new Set<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>
|
||||
)
|
||||
}
|
||||
108
frontend/src/components/live/TeamRadioTicker.tsx
Normal file
108
frontend/src/components/live/TeamRadioTicker.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
import { Pause, Play } from 'lucide-react'
|
||||
import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../../types'
|
||||
import { radioCaptureKey, radioClipUrl } from '../../lib/radio'
|
||||
import { teamColor } from '../../utils'
|
||||
import '../../styles/team-radio.css'
|
||||
|
||||
interface Props {
|
||||
captures?: LiveRadioCapture[]
|
||||
driverInfo?: Record<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user