272 lines
9.3 KiB
TypeScript
272 lines
9.3 KiB
TypeScript
|
||
|
||
import { Badge } from '@/ui/Badge';
|
||
import { Icon } from '@/ui/Icon';
|
||
import { Link } from '@/ui/Link';
|
||
import { Stack } from '@/ui/primitives/Stack';
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
||
import { Text } from '@/ui/Text';
|
||
import { AlertTriangle, ExternalLink } from 'lucide-react';
|
||
import { ReactNode } from '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 RaceResultsTableProps {
|
||
results: ResultDTO[];
|
||
drivers: DriverDTO[];
|
||
pointsSystem: Record<number, number>;
|
||
fastestLapTime?: number | undefined;
|
||
penalties?: PenaltyData[];
|
||
currentDriverId?: string | undefined;
|
||
isAdmin?: boolean;
|
||
onPenaltyClick?: (driver: DriverDTO) => void;
|
||
penaltyButtonRenderer?: (driver: DriverDTO) => ReactNode;
|
||
}
|
||
|
||
export function RaceResultsTable({
|
||
results,
|
||
drivers,
|
||
pointsSystem,
|
||
fastestLapTime,
|
||
penalties = [],
|
||
currentDriverId,
|
||
isAdmin = false,
|
||
penaltyButtonRenderer,
|
||
}: RaceResultsTableProps) {
|
||
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 (
|
||
<Stack textAlign="center" py={8} gap={0}>
|
||
<Text color="text-gray-400">No results available</Text>
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Stack overflow="auto" gap={0}>
|
||
<Table>
|
||
<TableHead>
|
||
<TableRow>
|
||
<TableHeader>Pos</TableHeader>
|
||
<TableHeader>Driver</TableHeader>
|
||
<TableHeader>Fastest Lap</TableHeader>
|
||
<TableHeader>Incidents</TableHeader>
|
||
<TableHeader>Points</TableHeader>
|
||
<TableHeader>+/-</TableHeader>
|
||
<TableHeader>Penalties</TableHeader>
|
||
{isAdmin && <TableHeader className="text-right">Actions</TableHeader>}
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{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 (
|
||
<TableRow
|
||
key={result.id}
|
||
variant={isCurrentUser ? 'highlight' : 'default'}
|
||
>
|
||
<TableCell>
|
||
<Stack
|
||
direction="row"
|
||
align="center"
|
||
justify="center"
|
||
w="8"
|
||
h="8"
|
||
rounded="lg"
|
||
bg={
|
||
result.position === 1
|
||
? 'bg-yellow-500/20'
|
||
: result.position === 2
|
||
? 'bg-gray-400/20'
|
||
: result.position === 3
|
||
? 'bg-amber-600/20'
|
||
: undefined
|
||
}
|
||
>
|
||
<Text
|
||
weight="bold"
|
||
size="sm"
|
||
color={
|
||
result.position === 1
|
||
? 'text-yellow-400'
|
||
: result.position === 2
|
||
? 'text-gray-300'
|
||
: result.position === 3
|
||
? 'text-amber-500'
|
||
: 'text-white'
|
||
}
|
||
>
|
||
{result.position}
|
||
</Text>
|
||
</Stack>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Stack direction="row" align="center" gap={3}>
|
||
{driver ? (
|
||
<>
|
||
<Stack
|
||
w="8"
|
||
h="8"
|
||
rounded="full"
|
||
align="center"
|
||
justify="center"
|
||
flexShrink={0}
|
||
bg={isCurrentUser ? 'bg-primary-blue/30' : 'bg-iron-gray'}
|
||
ring={isCurrentUser ? 'ring-2 ring-primary-blue/50' : undefined}
|
||
>
|
||
<Text
|
||
size="sm"
|
||
weight="bold"
|
||
color={isCurrentUser ? 'text-primary-blue' : 'text-gray-400'}
|
||
>
|
||
{driver.name.charAt(0)}
|
||
</Text>
|
||
</Stack>
|
||
<Link
|
||
href={`/drivers/${driver.id}`}
|
||
variant="ghost"
|
||
className={`group ${isCurrentUser ? 'text-primary-blue font-semibold' : 'text-white'}`}
|
||
>
|
||
<Text className="group-hover:underline">{driver.name}</Text>
|
||
{isCurrentUser && (
|
||
<Badge size="xs" variant="primary" bg="bg-primary-blue" color="text-white" rounded="full" style={{ marginLeft: '6px' }}>
|
||
You
|
||
</Badge>
|
||
)}
|
||
<Icon icon={ExternalLink} size={3} className="ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||
</Link>
|
||
</>
|
||
) : (
|
||
<Text color="text-white">{getDriverName(result.driverId)}</Text>
|
||
)}
|
||
</Stack>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Text color={isFastestLap ? 'text-performance-green' : 'text-white'} weight={isFastestLap ? 'medium' : 'normal'}>
|
||
{formatLapTime(result.fastestLap)}
|
||
</Text>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Text color={result.incidents > 0 ? 'text-warning-amber' : 'text-white'}>
|
||
{result.incidents}×
|
||
</Text>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Text color="text-white" weight="medium">
|
||
{getPoints(result.position)}
|
||
</Text>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Text weight="medium" className={getPositionChangeColor(positionChange)}>
|
||
{getPositionChangeText(positionChange)}
|
||
</Text>
|
||
</TableCell>
|
||
<TableCell>
|
||
{driverPenalties.length > 0 ? (
|
||
<Stack gap={1}>
|
||
{driverPenalties.map((penalty, idx) => (
|
||
<Stack key={idx} direction="row" align="center" gap={1.5}>
|
||
<Icon icon={AlertTriangle} size={3} color="var(--critical-red)" />
|
||
<Text size="xs" color="text-red-400">{getPenaltyDescription(penalty)}</Text>
|
||
</Stack>
|
||
))}
|
||
</Stack>
|
||
) : (
|
||
<Text color="text-gray-500">—</Text>
|
||
)}
|
||
</TableCell>
|
||
{isAdmin && (
|
||
<TableCell className="text-right">
|
||
{driver && penaltyButtonRenderer && penaltyButtonRenderer(driver)}
|
||
</TableCell>
|
||
)}
|
||
</TableRow>
|
||
);
|
||
})}
|
||
</TableBody>
|
||
</Table>
|
||
</Stack>
|
||
);
|
||
}
|