256 lines
8.9 KiB
TypeScript
256 lines
8.9 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { AlertTriangle, ExternalLink } from 'lucide-react';
|
||
|
||
type PenaltyTypeDTO =
|
||
| 'time_penalty'
|
||
| 'grid_penalty'
|
||
| 'points_deduction'
|
||
| 'disqualification'
|
||
| 'warning'
|
||
| 'license_points'
|
||
| string;
|
||
|
||
interface ResultDTO {
|
||
id: string;
|
||
raceId: string;
|
||
driverId: string;
|
||
position: number;
|
||
fastestLap: number;
|
||
incidents: number;
|
||
startPosition: number;
|
||
getPositionChange(): number;
|
||
}
|
||
|
||
interface DriverDTO {
|
||
id: string;
|
||
name: string;
|
||
}
|
||
|
||
interface PenaltyData {
|
||
driverId: string;
|
||
type: PenaltyTypeDTO;
|
||
value?: number;
|
||
}
|
||
|
||
interface ResultsTableProps {
|
||
results: ResultDTO[];
|
||
drivers: DriverDTO[];
|
||
pointsSystem: Record<number, number>;
|
||
fastestLapTime?: number | undefined;
|
||
penalties?: PenaltyData[];
|
||
currentDriverId?: string | undefined;
|
||
}
|
||
|
||
export default function ResultsTable({
|
||
results,
|
||
drivers,
|
||
pointsSystem,
|
||
fastestLapTime,
|
||
penalties = [],
|
||
currentDriverId,
|
||
}: ResultsTableProps) {
|
||
const getDriver = (driverId: string): DriverDTO | undefined => {
|
||
return drivers.find((d) => d.id === driverId);
|
||
};
|
||
|
||
const getDriverName = (driverId: string): string => {
|
||
const driver = getDriver(driverId);
|
||
return driver?.name || 'Unknown Driver';
|
||
};
|
||
|
||
const getDriverPenalties = (driverId: string): PenaltyData[] => {
|
||
return penalties.filter((p) => p.driverId === driverId);
|
||
};
|
||
|
||
const getPenaltyDescription = (penalty: PenaltyData): string => {
|
||
const descriptions: Record<string, string> = {
|
||
time_penalty: `+${penalty.value}s time penalty`,
|
||
grid_penalty: `${penalty.value} place grid penalty`,
|
||
points_deduction: `-${penalty.value} points`,
|
||
disqualification: 'Disqualified',
|
||
warning: 'Warning',
|
||
license_points: `${penalty.value} license points`,
|
||
};
|
||
return descriptions[penalty.type] || penalty.type;
|
||
};
|
||
|
||
const formatLapTime = (seconds: number): string => {
|
||
const minutes = Math.floor(seconds / 60);
|
||
const secs = (seconds % 60).toFixed(3);
|
||
return `${minutes}:${secs.padStart(6, '0')}`;
|
||
};
|
||
|
||
const getPoints = (position: number): number => {
|
||
return pointsSystem[position] || 0;
|
||
};
|
||
|
||
const getPositionChangeColor = (change: number): string => {
|
||
if (change > 0) return 'text-performance-green';
|
||
if (change < 0) return 'text-warning-amber';
|
||
return 'text-gray-500';
|
||
};
|
||
|
||
const getPositionChangeText = (change: number): string => {
|
||
if (change > 0) return `+${change}`;
|
||
if (change < 0) return `${change}`;
|
||
return '0';
|
||
};
|
||
|
||
if (results.length === 0) {
|
||
return (
|
||
<div className="text-center py-8 text-gray-400">
|
||
No results available
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
<thead>
|
||
<tr className="border-b border-charcoal-outline">
|
||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Pos</th>
|
||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
|
||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Fastest Lap</th>
|
||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Incidents</th>
|
||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
|
||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">+/-</th>
|
||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Penalties</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{results.map((result) => {
|
||
const positionChange = result.getPositionChange();
|
||
const isFastestLap =
|
||
typeof fastestLapTime === 'number' && result.fastestLap === fastestLapTime;
|
||
const driverPenalties = getDriverPenalties(result.driverId);
|
||
const driver = getDriver(result.driverId);
|
||
const isCurrentUser = currentDriverId === result.driverId;
|
||
|
||
return (
|
||
<tr
|
||
key={result.id}
|
||
className={`
|
||
border-b border-charcoal-outline/50 transition-colors
|
||
${
|
||
isCurrentUser
|
||
? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent hover:from-primary-blue/30'
|
||
: 'hover:bg-iron-gray/20'
|
||
}
|
||
`}
|
||
>
|
||
<td className="py-3 px-4">
|
||
<div
|
||
className={`
|
||
inline-flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
|
||
${
|
||
result.position === 1
|
||
? 'bg-yellow-500/20 text-yellow-400'
|
||
: result.position === 2
|
||
? 'bg-gray-400/20 text-gray-300'
|
||
: result.position === 3
|
||
? 'bg-amber-600/20 text-amber-500'
|
||
: 'text-white'
|
||
}
|
||
`}
|
||
>
|
||
{result.position}
|
||
</div>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
<div className="flex items-center gap-3">
|
||
{driver ? (
|
||
<>
|
||
<div
|
||
className={`
|
||
w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0
|
||
${
|
||
isCurrentUser
|
||
? 'bg-primary-blue/30 text-primary-blue ring-2 ring-primary-blue/50'
|
||
: 'bg-iron-gray text-gray-400'
|
||
}
|
||
`}
|
||
>
|
||
{driver.name.charAt(0)}
|
||
</div>
|
||
<Link
|
||
href={`/drivers/${driver.id}`}
|
||
className={`
|
||
flex items-center gap-1.5 group
|
||
${
|
||
isCurrentUser
|
||
? 'text-primary-blue font-semibold'
|
||
: 'text-white hover:text-primary-blue'
|
||
}
|
||
transition-colors
|
||
`}
|
||
>
|
||
<span className="group-hover:underline">{driver.name}</span>
|
||
{isCurrentUser && (
|
||
<span className="px-1.5 py-0.5 text-[10px] font-bold bg-primary-blue text-white rounded-full uppercase">
|
||
You
|
||
</span>
|
||
)}
|
||
<ExternalLink className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||
</Link>
|
||
</>
|
||
) : (
|
||
<span className="text-white">{getDriverName(result.driverId)}</span>
|
||
)}
|
||
</div>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
<span
|
||
className={
|
||
isFastestLap ? 'text-performance-green font-medium' : 'text-white'
|
||
}
|
||
>
|
||
{formatLapTime(result.fastestLap)}
|
||
</span>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
<span
|
||
className={result.incidents > 0 ? 'text-warning-amber' : 'text-white'}
|
||
>
|
||
{result.incidents}×
|
||
</span>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
<span className="text-white font-medium">
|
||
{getPoints(result.position)}
|
||
</span>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
<span
|
||
className={`font-medium ${getPositionChangeColor(positionChange)}`}
|
||
>
|
||
{getPositionChangeText(positionChange)}
|
||
</span>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
{driverPenalties.length > 0 ? (
|
||
<div className="flex flex-col gap-1">
|
||
{driverPenalties.map((penalty, idx) => (
|
||
<div
|
||
key={idx}
|
||
className="flex items-center gap-1.5 text-xs text-red-400"
|
||
>
|
||
<AlertTriangle className="w-3 h-3" />
|
||
<span>{getPenaltyDescription(penalty)}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<span className="text-gray-500">—</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
} |