amantahiliani/box-box
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/box-box.git synced 2026-08-07 19:56:18 -04:00
Code Issues Packages Projects Releases Wiki Activity

Polish live timing UI

Browse Source
This commit is contained in:
Aman Tahiliani
2026-05-25 10:45:35 -04:00
parent e539abcc5f
commit 9532206522
9 changed files with 269 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/live/SessionBanner.tsx
View File

@@ -12,26 +12,39 @@ export function SessionBanner({ isLive, snapshot, connection, now }: Props) {
const session = snapshot.Session
const clock = extrapolateClock(snapshot.Clock, snapshot.ClockRefTime, snapshot.ClockExtrapolating, now)
const status = snapshot.TrackStatus ? trackStatusLabel(snapshot.TrackStatus) : ''
const weather = snapshot.Weather
const hasWeather = weather && (weather.AirTemp > 0 || weather.TrackTemp > 0)
return (
<section className="live-banner">
<div className="live-banner-main">
<span className={`live-conn live-conn-${connection}`}>{connection}</span>
<div>
<h1>{session?.MeetingName || 'Live Timing'}</h1>
<p>
{[session?.SessionName, session?.CircuitName].filter(Boolean).join(' · ') || 'F1 live feed'}
</p>
<div className="live-banner-row">
<div className="live-banner-main">
<span className={`live-conn live-conn-${connection}`}>{connection}</span>
<div>
<h1>{session?.MeetingName || 'Live Timing'}</h1>
<p>
{[session?.SessionName, session?.CircuitName].filter(Boolean).join(' · ') || 'F1 live feed'}
</p>
</div>
</div>
<div className="live-banner-meta">
{status && <span className={`track-status ${trackStatusClass(snapshot.TrackStatus)}`}>{status}</span>}
<span className="mono">
L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
</span>
{clock && <span className="mono">{clock}</span>}
<span className={isLive ? 'live-state live-state-on' : 'live-state'}>{isLive ? 'live' : 'stale'}</span>
</div>
</div>
<div className="live-banner-meta">
<span className="mono">
Lap <strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
</span>
{status && <span className={`track-status ${trackStatusClass(snapshot.TrackStatus)}`}>{status}</span>}
{clock && <span className="mono">{clock}</span>}
<span className={isLive ? 'live-state live-state-on' : 'live-state'}>{isLive ? 'live' : 'stale'}</span>
</div>
{hasWeather && (
<div className="live-weather-strip">
<span>{weather.AirTemp.toFixed(0)}° air</span>
<span>{weather.TrackTemp.toFixed(0)}° track</span>
{weather.Humidity > 0 && <span>{weather.Humidity.toFixed(0)}% humidity</span>}
{weather.WindSpeed > 0 && <span>{weather.WindSpeed.toFixed(1)} m/s</span>}
{weather.Rainfall && <span className="badge badge-wet">WET</span>}
</div>
)}
</section>
)
}