126 lines
4.4 KiB
TypeScript
126 lines
4.4 KiB
TypeScript
// components/live/LiveTiming.tsx
|
|
'use client';
|
|
|
|
import { BoltIcon } from '@/components/ui/icons';
|
|
|
|
interface TimingEntry {
|
|
position: number;
|
|
carID: number;
|
|
driver_name: string;
|
|
car_model: string;
|
|
current_lap: number;
|
|
last_lap_time: number | null;
|
|
best_lap_time: number | null;
|
|
gap_to_leader: string;
|
|
avg_lap_time: number | null;
|
|
}
|
|
|
|
interface LiveTimingProps {
|
|
entries: TimingEntry[];
|
|
}
|
|
|
|
export default function LiveTiming({ entries }: LiveTimingProps) {
|
|
|
|
// Format lap time from milliseconds
|
|
const formatLapTime = (ms: number | null) => {
|
|
if (!ms || ms === 0) return '-:--.---';
|
|
|
|
const minutes = Math.floor(ms / 60000);
|
|
const seconds = Math.floor((ms % 60000) / 1000);
|
|
const milliseconds = ms % 1000;
|
|
|
|
return `${minutes}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
|
|
};
|
|
|
|
// Get position color
|
|
const getPositionColor = (position: number) => {
|
|
if (position === 1) return 'text-white border-white';
|
|
if (position === 2) return 'text-white/90 border-white/70';
|
|
if (position === 3) return 'text-white/80 border-white/50';
|
|
return 'text-white/60 border-white/20';
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{/* Header */}
|
|
<div className="grid grid-cols-12 gap-2 px-3 py-2 border-b border-white/10 text-xs font-bold tracking-wider text-white/40">
|
|
<div className="col-span-1">POS</div>
|
|
<div className="col-span-4">DRIVER</div>
|
|
<div className="col-span-2 text-right">LAP</div>
|
|
<div className="col-span-3 text-right">LAST LAP</div>
|
|
<div className="col-span-2 text-right">BEST</div>
|
|
</div>
|
|
|
|
{/* Timing Entries */}
|
|
<div className="space-y-1">
|
|
{entries.map((entry) => {
|
|
const isLeader = entry.position === 1;
|
|
const isFastestLap = entries.length > 0 &&
|
|
entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time).map(e => e.best_lap_time!));
|
|
|
|
return (
|
|
<div
|
|
key={entry.carID}
|
|
className={`
|
|
grid grid-cols-12 gap-2 px-3 py-3 border transition-all
|
|
${getPositionColor(entry.position)}
|
|
hover:bg-white/5
|
|
${isLeader ? 'bg-white/[0.02]' : ''}
|
|
`}
|
|
>
|
|
{/* Position */}
|
|
<div className="col-span-1 flex items-center">
|
|
<span className="text-lg font-bold">
|
|
{String(entry.position).padStart(2, '0')}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Driver Info */}
|
|
<div className="col-span-4 flex flex-col justify-center">
|
|
<div className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>{entry.driver_name}</div>
|
|
<div className="text-xs text-white/40 font-mono truncate">{entry.car_model}</div>
|
|
</div>
|
|
|
|
{/* Current Lap */}
|
|
<div className="col-span-2 flex items-center justify-end">
|
|
<span className="font-mono text-sm">{entry.current_lap}</span>
|
|
</div>
|
|
|
|
{/* Last Lap Time */}
|
|
<div className="col-span-3 flex flex-col items-end justify-center">
|
|
<div className="font-mono text-sm">
|
|
{formatLapTime(entry.last_lap_time)}
|
|
</div>
|
|
{entry.avg_lap_time && (
|
|
<div className="text-xs text-white/40 font-mono">
|
|
Avg: {formatLapTime(entry.avg_lap_time)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Best Lap Time */}
|
|
<div className="col-span-2 flex items-center justify-end">
|
|
<div className={`font-mono text-sm flex items-center space-x-1 ${isFastestLap ? 'text-purple-400' : ''}`}>
|
|
<span>{formatLapTime(entry.best_lap_time)}</span>
|
|
{isFastestLap && (
|
|
<BoltIcon className="w-3 h-3" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="border-t border-white/10 pt-3 px-3 text-xs text-white/40 space-y-1">
|
|
<div className="flex items-center space-x-2">
|
|
<BoltIcon className="w-3 h-3" />
|
|
<span>Fastest lap overall</span>
|
|
</div>
|
|
<div>Times updated in real-time from server telemetry</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|