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

13
frontend/src/components/live/RaceControlFeed.tsx
View File

@@ -1,5 +1,5 @@
import type { LiveRCMessage } from '../../types'
import { latestRaceControl } from '../../lib/live'
import { latestRaceControl, rcFlagClass } from '../../lib/live'
interface Props {
messages: LiveRCMessage[]
@@ -17,13 +17,18 @@ export function RaceControlFeed({ messages }: Props) {
{latest.length === 0 ? (
<div className="missing-notice">No race control messages in the current live snapshot.</div>
) : (
<div className="live-rc-list">
<div className="live-rc-list live-rc-scroll">
{latest.map((message, index) => (
<div className="live-rc-row" key={`${message.Time}-${message.Message}-${index}`}>
<span className="rc-time">{message.Time || '--:--'}</span>
{message.Flag && <span className="rc-flag">{message.Flag}</span>}
{message.Lap > 0 && <span className="rc-lap">L{message.Lap}</span>}
<span>{message.Message}</span>
{message.Flag
? <span className={`rc-flag ${rcFlagClass(message.Flag)}`}>{message.Flag}</span>
: message.Category && message.Category !== 'Other'
? <span className="rc-category">{message.Category}</span>
: null
}
<span className="rc-message">{message.Message}</span>
</div>
))}
</div>

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>
)
}

38
frontend/src/components/live/TimingTower.tsx
View File

@@ -1,11 +1,25 @@
import { teamColor } from '../../utils'
import type { LiveStreamData } from '../../types'
import { driverCode, positionDelta, sortLiveTimingRows, tyreClass, tyreLabel } from '../../lib/live'
import {
driverCode,
positionDelta,
positionDeltaClass,
sortLiveTimingRows,
tyreClass,
tyreLabel,
} from '../../lib/live'
interface Props {
snapshot: LiveStreamData
}
function posClass(pos: number): string {
if (pos === 1) return 'pos-p1'
if (pos === 2) return 'pos-p2'
if (pos === 3) return 'pos-p3'
return 'pos-n'
}
export function TimingTower({ snapshot }: Props) {
const rows = sortLiveTimingRows(snapshot)
@@ -19,7 +33,7 @@ export function TimingTower({ snapshot }: Props) {
return (
<div className="scroll-x">
<table className="data-table live-tower" style={{ minWidth: 520 }}>
<table className="data-table live-tower" style={{ minWidth: 480 }}>
<thead>
<tr>
<th>Pos</th>
@@ -28,12 +42,15 @@ export function TimingTower({ snapshot }: Props) {
<th>Tyre</th>
<th>Last Lap</th>
<th>Gap</th>
<th>Best</th>
<th className="hide-mobile">Best</th>
<th className="hide-mobile r">Laps</th>
</tr>
</thead>
<tbody>
{rows.map((row) => {
const driver = row.Driver
const delta = positionDelta(driver)
const deltaClass = positionDeltaClass(driver)
return (
<tr
key={row.RacingNumber}
@@ -43,15 +60,19 @@ export function TimingTower({ snapshot }: Props) {
driver.Retired ? 'retired' : '',
].filter(Boolean).join(' ')}
>
<td className="mono pos-n">{row.Position}</td>
<td className="pos-delta">{positionDelta(driver)}</td>
<td className={`mono ${posClass(row.Position)}`}>{row.Position}</td>
<td className={`pos-delta${deltaClass ? ` ${deltaClass}` : ''}`}>{delta}</td>
<td>
<div className="drv-cell">
<div className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
<span className="drv-code">{driverCode(row)}</span>
<span className="drv-num">{row.RacingNumber}</span>
{driver.InPit && <span className="badge badge-pit">PIT</span>}
{driver.Retired && <span className="badge badge-out">OUT</span>}
{driver.PitOut && !driver.InPit && <span className="badge badge-pit">OUT</span>}
{driver.Retired && <span className="badge badge-out">RET</span>}
{driver.KnockedOut && <span className="badge badge-knocked">KO</span>}
{driver.Cutoff && !driver.KnockedOut && <span className="badge badge-cutoff">CUT</span>}
{driver.OnFlyingLap && <span className="badge badge-flying">FL</span>}
</div>
</td>
<td>
@@ -61,7 +82,10 @@ export function TimingTower({ snapshot }: Props) {
{driver.LastLapTime || '-'}
</td>
<td className="mono">{driver.GapToLeader || driver.Interval || '-'}</td>
<td className={driver.BestLapOB ? 'mono lap-ob' : 'mono'}>{driver.BestLapTime || '-'}</td>
<td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
{driver.BestLapTime || '-'}
</td>
<td className="hide-mobile mono r">{driver.NumberOfLaps || '-'}</td>
</tr>
)
})}