142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { LeaderboardDriver, LeaderboardTrack, PointsEntry, ResultValue } from '@/lib/schemas/leaderboard';
|
|
|
|
interface ResultInputProps {
|
|
value: ResultValue;
|
|
pointsTable: PointsEntry[];
|
|
onChange: (value: ResultValue) => void;
|
|
}
|
|
|
|
function ResultInput({ value, pointsTable, onChange }: ResultInputProps) {
|
|
const knownPoints = Array.from(new Set(pointsTable.map((e) => e.points))).sort((a, b) => b - a);
|
|
|
|
const handleChange = (raw: string) => {
|
|
if (raw === 'DNF') return onChange('DNF');
|
|
if (raw === 'DNS') return onChange('DNS');
|
|
onChange(parseInt(raw) || 0);
|
|
};
|
|
|
|
return (
|
|
<select
|
|
value={String(value)}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
className="w-full rounded bg-gray-600 px-1 py-1 text-xs text-white"
|
|
>
|
|
{knownPoints.map((p) => (
|
|
<option key={p} value={String(p)}>
|
|
{p}
|
|
</option>
|
|
))}
|
|
<option value="DNF">DNF</option>
|
|
<option value="DNS">DNS</option>
|
|
</select>
|
|
);
|
|
}
|
|
|
|
interface TracksEditorProps {
|
|
tracks: LeaderboardTrack[];
|
|
drivers: LeaderboardDriver[];
|
|
pointsTable: PointsEntry[];
|
|
onChange: (tracks: LeaderboardTrack[]) => void;
|
|
}
|
|
|
|
export function TracksEditor({ tracks, drivers, pointsTable, onChange }: TracksEditorProps) {
|
|
const updateTrack = (index: number, patch: Partial<LeaderboardTrack>) => {
|
|
onChange(tracks.map((t, i) => (i === index ? { ...t, ...patch } : t)));
|
|
};
|
|
|
|
const updateResult = (trackIndex: number, driverIndex: number, value: ResultValue) => {
|
|
const newResults = [...tracks[trackIndex].results];
|
|
newResults[driverIndex] = value;
|
|
updateTrack(trackIndex, { results: newResults });
|
|
};
|
|
|
|
const removeTrack = (index: number) => {
|
|
onChange(tracks.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const addTrack = () => {
|
|
onChange([
|
|
...tracks,
|
|
{
|
|
name: `Race ${tracks.length + 1}`,
|
|
results: drivers.map(() => 'DNS' as const),
|
|
fastestLapInitials: ''
|
|
}
|
|
]);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{tracks.map((track, ti) => (
|
|
<div key={ti} className="rounded-lg bg-gray-700 p-4">
|
|
<div className="mb-3 flex items-center gap-3">
|
|
<input
|
|
type="text"
|
|
value={track.name}
|
|
onChange={(e) => updateTrack(ti, { name: e.target.value })}
|
|
className="flex-1 rounded bg-gray-600 px-2 py-1 text-sm font-semibold text-white"
|
|
placeholder="Track name"
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-gray-400">FL Driver:</label>
|
|
<select
|
|
value={track.fastestLapInitials}
|
|
onChange={(e) => updateTrack(ti, { fastestLapInitials: e.target.value })}
|
|
className="rounded bg-gray-600 px-2 py-1 text-sm text-white"
|
|
>
|
|
<option value="">—</option>
|
|
{drivers.map((d) => (
|
|
<option key={d.initials} value={d.initials}>
|
|
{d.initials} ({d.name})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button
|
|
onClick={() => removeTrack(ti)}
|
|
className="rounded px-2 py-1 text-sm text-red-400 hover:bg-red-900/30 hover:text-red-300"
|
|
title="Remove track"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{drivers.length === 0 ? (
|
|
<p className="text-xs text-gray-500">Add drivers first to enter results.</p>
|
|
) : (
|
|
<div className="space-y-1">
|
|
{drivers.map((driver, di) => (
|
|
<div key={di} className="flex items-center gap-3">
|
|
<div className="flex w-40 items-center gap-2">
|
|
<div
|
|
className="h-3 w-3 shrink-0 rounded-full"
|
|
style={{ backgroundColor: driver.color }}
|
|
/>
|
|
<span className="truncate text-sm text-gray-300">{driver.name}</span>
|
|
</div>
|
|
<div className="w-24">
|
|
<ResultInput
|
|
value={track.results[di] ?? 0}
|
|
pointsTable={pointsTable}
|
|
onChange={(v) => updateResult(ti, di, v)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<button
|
|
onClick={addTrack}
|
|
className="w-full rounded-lg border border-dashed border-gray-600 py-2 text-sm text-gray-400 hover:border-gray-400 hover:text-gray-300"
|
|
>
|
|
+ Add Track / Race
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|