diff --git a/frontend/src/components/LapsView.tsx b/frontend/src/components/LapsView.tsx index d8c9d60..aef3297 100644 --- a/frontend/src/components/LapsView.tsx +++ b/frontend/src/components/LapsView.tsx @@ -1,8 +1,9 @@ -import type { Lap } from '../types' -import { formatLapTime } from '../utils' +import type { Driver, Lap } from '../types' +import { formatGap, formatLapTime, teamColor } from '../utils' interface Props { laps: Lap[] + drivers?: Driver[] } interface DriverLapSummary { @@ -13,7 +14,7 @@ interface DriverLapSummary { pitOuts: number } -export function LapsView({ laps }: Props) { +export function LapsView({ laps, drivers = [] }: Props) { if (laps.length === 0) { return (
| Driver | Best Lap | Best Time | +Gap | Laps | Pit Outs |
|---|---|---|---|---|---|
| - #{row.driver_number} + | |||||
| + + + {driverName} + {row.driver_number} + | - {row.best ? ( - <> - {row.best.lap_number} - {isFastest && ( - FASTEST - )} - > - ) : ( - '—' - )} + {row.best ? row.best.lap_number : '—'} | {formatLapTime(row.best?.lap_duration)} | +{isFastest ? '—' : formatGap(gap)} | {row.lastLap || row.total} | {row.pitOuts || '—'} diff --git a/frontend/src/components/RaceControlView.tsx b/frontend/src/components/RaceControlView.tsx index c894bec..bd2b1a1 100644 --- a/frontend/src/components/RaceControlView.tsx +++ b/frontend/src/components/RaceControlView.tsx @@ -1,4 +1,5 @@ import type { RaceControlMessage } from '../types' +import { rcFlagClass } from '../lib/live' interface Props { messages: RaceControlMessage[] @@ -19,6 +20,24 @@ function eventLabel(message: RaceControlMessage): string { return message.flag || message.category || 'Message' } +function eventClass(message: RaceControlMessage): string { + const flagClass = rcFlagClass(message.flag ?? '') + if (flagClass) return flagClass + + const category = (message.category ?? '').toLowerCase() + const text = `${message.message ?? ''} ${message.category ?? ''}`.toLowerCase() + + if (category.includes('safety') || text.includes('safety car')) return 'rc-flag-sc' + if (category === 'drs' || text.includes('drs')) return 'rc-flag-drs' + if (text.includes('virtual safety car')) return 'rc-flag-vsc' + if (text.includes('red flag')) return 'rc-flag-red' + if (text.includes('yellow')) return 'rc-flag-yellow' + if (text.includes('green light') || text.includes('green flag')) return 'rc-flag-green' + if (text.includes('chequered') || text.includes('checkered')) return 'rc-flag-chequered' + + return 'rc-flag-other' +} + export function RaceControlView({ messages }: Props) { if (messages.length === 0) { return ( @@ -44,24 +63,27 @@ export function RaceControlView({ messages }: Props) { |
| - {formatEventTime(message.date)} - | -{message.lap_number ?? '—'} | -- {eventLabel(message)} - {message.scope && ( - - {message.scope.toLowerCase()} - - )} - | -{message.driver_number ?? '—'} | -{message.message || '—'} | -|
| + {formatEventTime(message.date)} + | +{message.lap_number ?? '—'} | ++ {eventLabel(message)} + {message.scope && ( + + {message.scope.toLowerCase()} + + )} + | +{message.driver_number ?? '—'} | +{message.message || '—'} | +