mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-08 04:06:18 -04:00
Upgrade live timing page for race weekends
- Track status flag banner (green/yellow/SC/VSC/red, defensive mapping) - Weather strip: air/track temp, humidity, wind with compass, rain badge - Gap trend sparklines from a per-driver interval ring buffer - Battle detection: consecutive cars within 1.0s chained and highlighted - Stint history column with compound sequence per driver - Pinnable drivers (max 3) with focus cards, persisted to localStorage Pure logic lives in lib/gapHistory.ts and lib/battles.ts with unit tests; 137 frontend tests passing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
29
frontend/src/components/live/StintHistory.tsx
Normal file
29
frontend/src/components/live/StintHistory.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import type { LiveStintData } from '../../types'
|
||||
import { compoundClass, compoundLetter } from '../../lib/live'
|
||||
|
||||
interface Props {
|
||||
stints: LiveStintData[] | undefined
|
||||
}
|
||||
|
||||
export function StintHistory({ stints }: Props) {
|
||||
if (!stints || stints.length === 0) {
|
||||
return <span className="stint-empty">-</span>
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="stint-seq" data-testid="stint-seq">
|
||||
{stints.map((stint, index) => (
|
||||
<span className="stint-item" key={index}>
|
||||
{index > 0 && <span className="stint-arrow">›</span>}
|
||||
<span
|
||||
className={`stint-dot ${compoundClass(stint.Compound)}`}
|
||||
title={`${stint.Compound || 'Unknown'}${stint.New ? ' (new)' : ''} · ${stint.Laps} laps`}
|
||||
>
|
||||
{compoundLetter(stint.Compound)}
|
||||
</span>
|
||||
{stint.Laps > 0 && <span className="stint-laps">{stint.Laps}</span>}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user