mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-11 00:57:32 +01:00
parent 1303a14493
commit 6a427eab57
112 changed files with 6148 additions and 2272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

579
apps/website/app/races/[id]/page.tsx
View File

@@ -9,29 +9,16 @@ import Heading from '@/components/ui/Heading';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import FileProtestModal from '@/components/races/FileProtestModal';
import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
import type { Race } from '@gridpilot/racing/domain/entities/Race';
import type { League } from '@gridpilot/racing/domain/entities/League';
import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
import type { Result } from '@gridpilot/racing/domain/entities/Result';
import {
getRaceRepository,
getLeagueRepository,
getDriverRepository,
getGetRaceRegistrationsUseCase,
getIsDriverRegisteredForRaceUseCase,
getRegisterForRaceUseCase,
getWithdrawFromRaceUseCase,
getGetRaceWithSOFUseCase,
getResultRepository,
getImageService,
} from '@/lib/di-container';
import { getMembership } from '@/lib/leagueMembership';
import { getGetRaceDetailUseCase, getRegisterForRaceUseCase, getWithdrawFromRaceUseCase, getCancelRaceUseCase } from '@/lib/di-container';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { getDriverStats } from '@/lib/di-container';
import type {
RaceDetailViewModel,
RaceDetailEntryViewModel,
RaceDetailUserResultViewModel,
} from '@gridpilot/racing/application/presenters/IRaceDetailPresenter';
import {
Calendar,
Clock,
MapPin,
Car,
Trophy,
Users,
@@ -39,36 +26,25 @@ import {
PlayCircle,
CheckCircle2,
XCircle,
ChevronRight,
Flag,
Timer,
UserPlus,
UserMinus,
AlertTriangle,
ArrowRight,
ArrowLeft,
ExternalLink,
Award,
Scale,
} from 'lucide-react';
import { getAllDriverRankings } from '@/lib/di-container';
export default function RaceDetailPage() {
const router = useRouter();
const params = useParams();
const raceId = params.id as string;
const [race, setRace] = useState<Race | null>(null);
const [league, setLeague] = useState<League | null>(null);
const [viewModel, setViewModel] = useState<RaceDetailViewModel | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [cancelling, setCancelling] = useState(false);
const [registering, setRegistering] = useState(false);
const [entryList, setEntryList] = useState<Driver[]>([]);
const [isUserRegistered, setIsUserRegistered] = useState(false);
const [canRegister, setCanRegister] = useState(false);
const [raceSOF, setRaceSOF] = useState<number | null>(null);
const [userResult, setUserResult] = useState<Result | null>(null);
const [ratingChange, setRatingChange] = useState<number | null>(null);
const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
const [showProtestModal, setShowProtestModal] = useState(false);
@@ -77,92 +53,29 @@ export default function RaceDetailPage() {
const isSponsorMode = useSponsorMode();
const loadRaceData = async () => {
setLoading(true);
setError(null);
try {
const raceRepo = getRaceRepository();
const leagueRepo = getLeagueRepository();
const raceWithSOFUseCase = getGetRaceWithSOFUseCase();
const raceData = await raceRepo.findById(raceId);
if (!raceData) {
setError('Race not found');
setLoading(false);
return;
const useCase = getGetRaceDetailUseCase();
await useCase.execute({ raceId, driverId: currentDriverId });
const vm = useCase.presenter.getViewModel();
if (!vm) {
throw new Error('Race detail not available');
}
setRace(raceData);
// Load race with SOF from application use case
await raceWithSOFUseCase.execute({ raceId });
const raceViewModel = raceWithSOFUseCase.presenter.getViewModel();
if (raceViewModel) {
setRaceSOF(raceViewModel.strengthOfField);
}
// Load league data
const leagueData = await leagueRepo.findById(raceData.leagueId);
setLeague(leagueData);
// Load entry list
await loadEntryList(raceData.id, raceData.leagueId);
// Load user's result if race is completed
if (raceData.status === 'completed') {
const resultRepo = getResultRepository();
const results = await resultRepo.findByRaceId(raceData.id);
const result = results.find(r => r.driverId === currentDriverId);
setUserResult(result || null);
// Get rating change from driver stats (mock based on position)
if (result) {
const stats = getDriverStats(currentDriverId);
if (stats) {
// Calculate rating change based on position - simplified domain logic
const baseChange = result.position <= 3 ? 25 : result.position <= 10 ? 10 : -5;
const positionBonus = Math.max(0, (20 - result.position) * 2);
const change = baseChange + positionBonus;
setRatingChange(change);
}
}
setViewModel(vm);
const userResultRatingChange = vm.userResult?.ratingChange ?? null;
setRatingChange(userResultRatingChange);
if (userResultRatingChange === null) {
setAnimatedRatingChange(0);
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load race');
setViewModel(null);
} finally {
setLoading(false);
}
};
const loadEntryList = async (raceId: string, leagueId: string) => {
try {
const driverRepo = getDriverRepository();
const raceRegistrationsUseCase = getGetRaceRegistrationsUseCase();
await raceRegistrationsUseCase.execute({ raceId });
const registrationsViewModel = raceRegistrationsUseCase.presenter.getViewModel();
const registeredDriverIds = registrationsViewModel.registeredDriverIds;
const drivers = await Promise.all(
registeredDriverIds.map((id: string) => driverRepo.findById(id)),
);
const validDrivers = drivers.filter((d: Driver | null): d is Driver => d !== null);
setEntryList(validDrivers);
const isRegisteredUseCase = getIsDriverRegisteredForRaceUseCase();
await isRegisteredUseCase.execute({
raceId,
driverId: currentDriverId,
});
const registrationViewModel = isRegisteredUseCase.presenter.getViewModel();
setIsUserRegistered(registrationViewModel.isRegistered);
const membership = getMembership(leagueId, currentDriverId);
const isUpcoming = race?.status === 'scheduled';
setCanRegister(!!membership && membership.status === 'active' && !!isUpcoming);
} catch (err) {
console.error('Failed to load entry list:', err);
}
};
useEffect(() => {
loadRaceData();
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -175,39 +88,38 @@ export default function RaceDetailPage() {
const end = ratingChange;
const duration = 1000;
const startTime = performance.now();
const animate = (currentTime: number) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// Ease out cubic
const eased = 1 - Math.pow(1 - progress, 3);
const current = Math.round(start + (end - start) * eased);
setAnimatedRatingChange(current);
if (progress < 1) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
}
}, [ratingChange]);
const handleCancelRace = async () => {
const race = viewModel?.race;
if (!race || race.status !== 'scheduled') return;
const confirmed = window.confirm(
'Are you sure you want to cancel this race? This action cannot be undone.'
'Are you sure you want to cancel this race? This action cannot be undone.',
);
if (!confirmed) return;
setCancelling(true);
try {
const raceRepo = getRaceRepository();
const cancelledRace = race.cancel();
await raceRepo.update(cancelledRace);
setRace(cancelledRace);
const useCase = getCancelRaceUseCase();
await useCase.execute({ raceId: race.id });
await loadRaceData();
} catch (err) {
alert(err instanceof Error ? err.message : 'Failed to cancel race');
} finally {
@@ -216,10 +128,12 @@ export default function RaceDetailPage() {
};
const handleRegister = async () => {
const race = viewModel?.race;
const league = viewModel?.league;
if (!race || !league) return;
const confirmed = window.confirm(
`Register for ${race.track}?\n\nYou'll be added to the entry list for this race.`
`Register for ${race.track}?\n\nYou'll be added to the entry list for this race.`,
);
if (!confirmed) return;
@@ -232,7 +146,7 @@ export default function RaceDetailPage() {
leagueId: league.id,
driverId: currentDriverId,
});
await loadEntryList(race.id, league.id);
await loadRaceData();
} catch (err) {
alert(err instanceof Error ? err.message : 'Failed to register for race');
} finally {
@@ -241,10 +155,12 @@ export default function RaceDetailPage() {
};
const handleWithdraw = async () => {
const race = viewModel?.race;
const league = viewModel?.league;
if (!race || !league) return;
const confirmed = window.confirm(
'Withdraw from this race?\n\nYou can register again later if you change your mind.'
'Withdraw from this race?\n\nYou can register again later if you change your mind.',
);
if (!confirmed) return;
@@ -256,7 +172,7 @@ export default function RaceDetailPage() {
raceId: race.id,
driverId: currentDriverId,
});
await loadEntryList(race.id, league.id);
await loadRaceData();
} catch (err) {
alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
} finally {
@@ -285,13 +201,13 @@ export default function RaceDetailPage() {
const now = new Date();
const target = new Date(date);
const diffMs = target.getTime() - now.getTime();
if (diffMs < 0) return null;
const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
if (days > 0) return `${days}d ${hours}h`;
if (hours > 0) return `${hours}h ${minutes}m`;
return `${minutes}m`;
@@ -330,7 +246,7 @@ export default function RaceDetailPage() {
label: 'Cancelled',
description: 'This race has been cancelled',
},
};
} as const;
if (loading) {
return (
@@ -349,12 +265,12 @@ export default function RaceDetailPage() {
);
}
if (error || !race) {
if (error || !viewModel || !viewModel.race) {
return (
<div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<Breadcrumbs items={[{ label: 'Races', href: '/races' }, { label: 'Error' }]} />
<Card className="text-center py-12 mt-6">
<div className="flex flex-col items-center gap-4">
<div className="p-4 bg-warning-amber/10 rounded-full">
@@ -362,7 +278,9 @@ export default function RaceDetailPage() {
</div>
<div>
<p className="text-white font-medium mb-1">{error || 'Race not found'}</p>
<p className="text-sm text-gray-500">The race you're looking for doesn't exist or has been removed.</p>
<p className="text-sm text-gray-500">
The race you're looking for doesn't exist or has been removed.
</p>
</div>
<Button
variant="secondary"
@@ -378,9 +296,16 @@ export default function RaceDetailPage() {
);
}
const race = viewModel.race;
const league = viewModel.league;
const entryList: RaceDetailEntryViewModel[] = viewModel.entryList;
const registration = viewModel.registration;
const userResult: RaceDetailUserResultViewModel | null = viewModel.userResult;
const raceSOF = race.strengthOfField;
const config = statusConfig[race.status];
const StatusIcon = config.icon;
const timeUntil = race.status === 'scheduled' ? getTimeUntil(race.scheduledAt) : null;
const timeUntil = race.status === 'scheduled' ? getTimeUntil(new Date(race.scheduledAt)) : null;
const breadcrumbItems = [
{ label: 'Races', href: '/races' },
@@ -388,7 +313,6 @@ export default function RaceDetailPage() {
{ label: race.track },
];
// Country code to flag emoji converter
const getCountryFlag = (countryCode: string): string => {
const codePoints = countryCode
.toUpperCase()
@@ -397,24 +321,6 @@ export default function RaceDetailPage() {
return String.fromCodePoint(...codePoints);
};
// Build driver rankings for entry list display
const getDriverRank = (driverId: string): { rating: number | null; rank: number | null } => {
const stats = getDriverStats(driverId);
if (!stats) return { rating: null, rank: null };
const allRankings = getAllDriverRankings();
let rank = stats.overallRank;
if (!rank || rank <= 0) {
const indexInGlobal = allRankings.findIndex(s => s.driverId === driverId);
if (indexInGlobal !== -1) {
rank = indexInGlobal + 1;
}
}
return { rating: stats.rating, rank };
};
// Build sponsor insights for race
const sponsorInsights = {
tier: 'gold' as const,
trustScore: 92,
@@ -425,7 +331,7 @@ export default function RaceDetailPage() {
const raceMetrics = [
MetricBuilders.views(entryList.length * 12),
MetricBuilders.engagement(78),
{ label: 'SOF', value: raceSOF?.toString() ?? '—', icon: Zap, color: 'text-warning-amber' as const },
{ label: 'SOF', value: raceSOF != null ? raceSOF.toString() : '—', icon: Zap, color: 'text-warning-amber' as const },
MetricBuilders.reach(entryList.length * 45),
];
@@ -461,19 +367,23 @@ export default function RaceDetailPage() {
{/* User Result - Premium Achievement Card */}
{userResult && (
<div className={`
<div
className={`
relative overflow-hidden rounded-2xl p-1
${userResult.position === 1
? 'bg-gradient-to-r from-yellow-500 via-yellow-400 to-yellow-600'
: userResult.isPodium()
${
userResult.position === 1
? 'bg-gradient-to-r from-yellow-500 via-yellow-400 to-yellow-600'
: userResult.isPodium
? 'bg-gradient-to-r from-gray-400 via-gray-300 to-gray-500'
: 'bg-gradient-to-r from-primary-blue via-primary-blue/80 to-primary-blue'}
`}>
: 'bg-gradient-to-r from-primary-blue via-primary-blue/80 to-primary-blue'
}
`}
>
<div className="relative bg-deep-graphite rounded-xl p-6 sm:p-8">
{/* Decorative elements */}
<div className="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-white/10 to-transparent rounded-full blur-2xl" />
<div className="absolute bottom-0 right-0 w-48 h-48 bg-gradient-to-tl from-white/5 to-transparent rounded-full blur-3xl" />
{/* Victory confetti effect for P1 */}
{userResult.position === 1 && (
<div className="absolute inset-0 overflow-hidden pointer-events-none">
@@ -483,108 +393,151 @@ export default function RaceDetailPage() {
<div className="absolute top-10 right-[35%] w-1 h-1 bg-yellow-400 rounded-full animate-pulse delay-300" />
</div>
)}
<div className="relative z-10">
{/* Main content grid */}
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
{/* Left: Position and achievement */}
<div className="flex items-center gap-5">
{/* Giant position badge */}
<div className={`
<div
className={`
relative flex items-center justify-center w-24 h-24 sm:w-28 sm:h-28 rounded-3xl font-black text-4xl sm:text-5xl
${userResult.position === 1
? 'bg-gradient-to-br from-yellow-400 to-yellow-600 text-deep-graphite shadow-2xl shadow-yellow-500/30'
: userResult.position === 2
${
userResult.position === 1
? 'bg-gradient-to-br from-yellow-400 to-yellow-600 text-deep-graphite shadow-2xl shadow-yellow-500/30'
: userResult.position === 2
? 'bg-gradient-to-br from-gray-300 to-gray-500 text-deep-graphite shadow-xl shadow-gray-400/20'
: userResult.position === 3
? 'bg-gradient-to-br from-amber-600 to-amber-800 text-white shadow-xl shadow-amber-600/20'
: 'bg-gradient-to-br from-primary-blue to-primary-blue/70 text-white shadow-xl shadow-primary-blue/20'}
`}>
? 'bg-gradient-to-br from-amber-600 to-amber-800 text-white shadow-xl shadow-amber-600/20'
: 'bg-gradient-to-br from-primary-blue to-primary-blue/70 text-white shadow-xl shadow-primary-blue/20'
}
`}
>
{userResult.position === 1 && (
<Trophy className="absolute -top-3 -right-2 w-8 h-8 text-yellow-300 drop-shadow-lg" />
)}
<span>P{userResult.position}</span>
</div>
{/* Achievement text */}
<div>
<p className={`
text-2xl sm:text-3xl font-bold mb-1
${userResult.position === 1 ? 'text-yellow-400' :
userResult.isPodium() ? 'text-gray-300' : 'text-white'}
`}>
{userResult.position === 1 ? '🏆 VICTORY!' :
userResult.position === 2 ? '🥈 Second Place' :
userResult.position === 3 ? '🥉 Podium Finish' :
userResult.position <= 5 ? '⭐ Top 5 Finish' :
userResult.position <= 10 ? 'Points Finish' :
`P${userResult.position} Finish`}
<p
className={`
text-2xl sm:text-3xl font-bold mb-1
${
userResult.position === 1
? 'text-yellow-400'
: userResult.isPodium
? 'text-gray-300'
: 'text-white'
}
`}
>
{userResult.position === 1
? '🏆 VICTORY!'
: userResult.position === 2
? '🥈 Second Place'
: userResult.position === 3
? '🥉 Podium Finish'
: userResult.position <= 5
? '⭐ Top 5 Finish'
: userResult.position <= 10
? 'Points Finish'
: `P${userResult.position} Finish`}
</p>
<div className="flex items-center gap-3 text-sm text-gray-400">
<span>Started P{userResult.startPosition}</span>
<span className="w-1 h-1 rounded-full bg-gray-600" />
<span className={userResult.isClean() ? 'text-performance-green' : ''}>
<span className={userResult.isClean ? 'text-performance-green' : ''}>
{userResult.incidents}x incidents
{userResult.isClean() && ' ✨'}
{userResult.isClean && ' ✨'}
</span>
</div>
</div>
</div>
{/* Right: Stats cards */}
<div className="flex flex-wrap gap-3">
{/* Position change */}
{userResult.getPositionChange() !== 0 && (
<div className={`
{userResult.positionChange !== 0 && (
<div
className={`
flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
${userResult.getPositionChange() > 0
? 'bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40'
: 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'}
`}>
<div className={`
${
userResult.positionChange > 0
? 'bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40'
: 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'
}
`}
>
<div
className={`
flex items-center gap-1 font-black text-2xl
${userResult.getPositionChange() > 0 ? 'text-performance-green' : 'text-red-400'}
`}>
{userResult.getPositionChange() > 0 ? (
${
userResult.positionChange > 0
? 'text-performance-green'
: 'text-red-400'
}
`}
>
{userResult.positionChange > 0 ? (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clipRule="evenodd" />
<path
fillRule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clipRule="evenodd"
/>
</svg>
) : (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clipRule="evenodd" />
<path
fillRule="evenodd"
d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
clipRule="evenodd"
/>
</svg>
)}
{Math.abs(userResult.getPositionChange())}
{Math.abs(userResult.positionChange)}
</div>
<div className="text-xs text-gray-400 mt-0.5">
{userResult.getPositionChange() > 0 ? 'Gained' : 'Lost'}
{userResult.positionChange > 0 ? 'Gained' : 'Lost'}
</div>
</div>
)}
{/* Rating change */}
{ratingChange !== null && (
<div className={`
<div
className={`
flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px]
${ratingChange > 0
? 'bg-gradient-to-br from-warning-amber/30 to-warning-amber/10 border border-warning-amber/40'
: 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'}
`}>
<div className={`
${
ratingChange > 0
? 'bg-gradient-to-br from-warning-amber/30 to-warning-amber/10 border border-warning-amber/40'
: 'bg-gradient-to-br from-red-500/30 to-red-500/10 border border-red-500/40'
}
`}
>
<div
className={`
font-mono font-black text-2xl
${ratingChange > 0 ? 'text-warning-amber' : 'text-red-400'}
`}>
{animatedRatingChange > 0 ? '+' : ''}{animatedRatingChange}
`}
>
{animatedRatingChange > 0 ? '+' : ''}
{animatedRatingChange}
</div>
<div className="text-xs text-gray-400 mt-0.5">iRating</div>
</div>
)}
{/* Clean race bonus */}
{userResult.isClean() && (
{userResult.isClean && (
<div className="flex flex-col items-center px-5 py-3 rounded-2xl min-w-[100px] bg-gradient-to-br from-performance-green/30 to-performance-green/10 border border-performance-green/40">
<div className="text-2xl">✨</div>
<div className="text-xs text-performance-green mt-0.5 font-medium">Clean Race</div>
<div className="text-xs text-performance-green mt-0.5 font-medium">
Clean Race
</div>
</div>
)}
</div>
@@ -600,9 +553,9 @@ export default function RaceDetailPage() {
{race.status === 'running' && (
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
)}
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
<div className="relative z-10">
{/* Status Badge */}
<div className="flex items-center gap-3 mb-4">
@@ -624,16 +577,16 @@ export default function RaceDetailPage() {
<Heading level={1} className="text-2xl sm:text-3xl font-bold text-white mb-2">
{race.track}
</Heading>
{/* Meta */}
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
<span className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
{formatDate(race.scheduledAt)}
{formatDate(new Date(race.scheduledAt))}
</span>
<span className="flex items-center gap-2">
<Clock className="w-4 h-4" />
{formatTime(race.scheduledAt)}
{formatTime(new Date(race.scheduledAt))}
</span>
<span className="flex items-center gap-2">
<Car className="w-4 h-4" />
@@ -642,19 +595,19 @@ export default function RaceDetailPage() {
</div>
</div>
{/* Prominent SOF Badge - Electric Design */}
{raceSOF && (
{raceSOF != null && (
<div className="absolute top-6 right-6 sm:top-8 sm:right-8">
<div className="relative group">
{/* Glow effect */}
<div className="absolute inset-0 bg-warning-amber/40 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300" />
<div className="relative flex items-center gap-4 px-6 py-4 rounded-2xl bg-gradient-to-br from-warning-amber/30 via-warning-amber/20 to-orange-500/20 border border-warning-amber/50 shadow-2xl backdrop-blur-sm">
{/* Electric bolt with animation */}
<div className="relative">
<Zap className="w-8 h-8 text-warning-amber drop-shadow-lg" />
<Zap className="absolute inset-0 w-8 h-8 text-warning-amber animate-pulse opacity-50" />
</div>
<div>
<div className="text-[10px] text-warning-amber/90 uppercase tracking-widest font-bold mb-0.5">
Strength of Field
@@ -681,7 +634,7 @@ export default function RaceDetailPage() {
<Flag className="w-5 h-5 text-primary-blue" />
Race Details
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="p-4 bg-deep-graphite rounded-lg">
<p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Track</p>
@@ -730,92 +683,100 @@ export default function RaceDetailPage() {
</span>
</div>
{(() => {
const imageService = getImageService();
return entryList.length === 0 ? (
<div className="text-center py-8">
<div className="p-4 bg-iron-gray rounded-full inline-block mb-3">
<Users className="w-6 h-6 text-gray-500" />
</div>
<p className="text-gray-400">No drivers registered yet</p>
<p className="text-sm text-gray-500">Be the first to sign up!</p>
{entryList.length === 0 ? (
<div className="text-center py-8">
<div className="p-4 bg-iron-gray rounded-full inline-block mb-3">
<Users className="w-6 h-6 text-gray-500" />
</div>
) : (
<div className="space-y-1">
{entryList.map((driver, index) => {
const driverRankInfo = getDriverRank(driver.id);
const isCurrentUser = driver.id === currentDriverId;
const avatarUrl = imageService.getDriverAvatar(driver.id);
const countryFlag = getCountryFlag(driver.country);
return (
<div
key={driver.id}
onClick={() => router.push(`/drivers/${driver.id}`)}
className={`
flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-200
${isCurrentUser
<p className="text-gray-400">No drivers registered yet</p>
<p className="text-sm text-gray-500">Be the first to sign up!</p>
</div>
) : (
<div className="space-y-1">
{entryList.map((driver, index) => {
const isCurrentUser = driver.isCurrentUser;
const countryFlag = getCountryFlag(driver.country);
return (
<div
key={driver.id}
onClick={() => router.push(`/drivers/${driver.id}`)}
className={`
flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-200
${
isCurrentUser
? 'bg-gradient-to-r from-primary-blue/20 via-primary-blue/10 to-transparent border border-primary-blue/40 shadow-lg shadow-primary-blue/10'
: 'bg-deep-graphite hover:bg-charcoal-outline/50 border border-transparent'}
: 'bg-deep-graphite hover:bg-charcoal-outline/50 border border-transparent'
}
`}
>
{/* Position number */}
<div
className={`
flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
${
index === 0
? 'bg-yellow-500/20 text-yellow-400'
: index === 1
? 'bg-gray-400/20 text-gray-300'
: index === 2
? 'bg-amber-600/20 text-amber-500'
: 'bg-iron-gray text-gray-500'
}
`}
>
{/* Position number */}
<div className={`
flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm
${index === 0 ? 'bg-yellow-500/20 text-yellow-400' :
index === 1 ? 'bg-gray-400/20 text-gray-300' :
index === 2 ? 'bg-amber-600/20 text-amber-500' :
'bg-iron-gray text-gray-500'}
`}>
{index + 1}
</div>
{/* Avatar with nation flag */}
<div className="relative flex-shrink-0">
<img
src={avatarUrl}
alt={driver.name}
className={`
w-10 h-10 rounded-full object-cover
${isCurrentUser ? 'ring-2 ring-primary-blue/50' : ''}
`}
/>
{/* Nation flag */}
<div className="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-deep-graphite border-2 border-deep-graphite flex items-center justify-center text-xs shadow-sm">
{countryFlag}
</div>
</div>
{/* Driver info */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<p className={`text-sm font-semibold truncate ${isCurrentUser ? 'text-primary-blue' : 'text-white'}`}>
{driver.name}
</p>
{isCurrentUser && (
<span className="px-2 py-0.5 text-[10px] font-bold bg-primary-blue text-white rounded-full uppercase tracking-wide">
You
</span>
)}
</div>
<p className="text-xs text-gray-500">{driver.country}</p>
</div>
{/* Rating badge */}
{driverRankInfo.rating && (
<div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-warning-amber/10 border border-warning-amber/20">
<Zap className="w-3 h-3 text-warning-amber" />
<span className="text-xs font-bold text-warning-amber font-mono">
{driverRankInfo.rating}
</span>
</div>
)}
{index + 1}
</div>
);
})}
</div>
);
})()}
{/* Avatar with nation flag */}
<div className="relative flex-shrink-0">
<img
src={driver.avatarUrl}
alt={driver.name}
className={`
w-10 h-10 rounded-full object-cover
${isCurrentUser ? 'ring-2 ring-primary-blue/50' : ''}
`}
/>
{/* Nation flag */}
<div className="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-deep-graphite border-2 border-deep-graphite flex items-center justify-center text-xs shadow-sm">
{countryFlag}
</div>
</div>
{/* Driver info */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<p
className={`text-sm font-semibold truncate ${
isCurrentUser ? 'text-primary-blue' : 'text-white'
}`}
>
{driver.name}
</p>
{isCurrentUser && (
<span className="px-2 py-0.5 text-[10px] font-bold bg-primary-blue text-white rounded-full uppercase tracking-wide">
You
</span>
)}
</div>
<p className="text-xs text-gray-500">{driver.country}</p>
</div>
{/* Rating badge */}
{driver.rating != null && (
<div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-warning-amber/10 border border-warning-amber/20">
<Zap className="w-3 h-3 text-warning-amber" />
<span className="text-xs font-bold text-warning-amber font-mono">
{driver.rating}
</span>
</div>
)}
</div>
);
})}
</div>
)}
</Card>
</div>
@@ -827,7 +788,7 @@ export default function RaceDetailPage() {
<div className="flex items-center gap-4 mb-4">
<div className="w-14 h-14 rounded-xl overflow-hidden bg-iron-gray flex-shrink-0">
<img
src={getImageService().getLeagueLogo(league.id)}
src={`league-logo-${league.id}`}
alt={league.name}
className="w-full h-full object-cover"
/>
@@ -837,11 +798,11 @@ export default function RaceDetailPage() {
<h3 className="text-white font-semibold truncate">{league.name}</h3>
</div>
</div>
{league.description && (
<p className="text-sm text-gray-400 mb-4 line-clamp-2">{league.description}</p>
)}
<div className="grid grid-cols-2 gap-3 mb-4">
<div className="p-3 rounded-lg bg-deep-graphite">
<p className="text-xs text-gray-500 mb-1">Max Drivers</p>
@@ -849,10 +810,12 @@ export default function RaceDetailPage() {
</div>
<div className="p-3 rounded-lg bg-deep-graphite">
<p className="text-xs text-gray-500 mb-1">Format</p>
<p className="text-white font-medium capitalize">{league.settings.qualifyingFormat ?? 'Open'}</p>
<p className="text-white font-medium capitalize">
{league.settings.qualifyingFormat ?? 'Open'}
</p>
</div>
</div>
<Link
href={`/leagues/${league.id}`}
className="flex items-center justify-center gap-2 w-full py-2.5 rounded-lg bg-primary-blue/10 border border-primary-blue/30 text-primary-blue text-sm font-medium hover:bg-primary-blue/20 transition-colors"
@@ -866,10 +829,10 @@ export default function RaceDetailPage() {
{/* Quick Actions Card */}
<Card>
<h2 className="text-lg font-semibold text-white mb-4">Actions</h2>
<div className="space-y-3">
{/* Registration Actions */}
{race.status === 'scheduled' && canRegister && !isUserRegistered && (
{race.status === 'scheduled' && registration.canRegister && !registration.isUserRegistered && (
<Button
variant="primary"
className="w-full flex items-center justify-center gap-2"
@@ -881,7 +844,7 @@ export default function RaceDetailPage() {
</Button>
)}
{race.status === 'scheduled' && isUserRegistered && (
{race.status === 'scheduled' && registration.isUserRegistered && (
<>
<div className="flex items-center gap-2 px-4 py-3 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
<CheckCircle2 className="w-5 h-5" />
@@ -940,11 +903,11 @@ export default function RaceDetailPage() {
<XCircle className="w-4 h-4" />
{cancelling ? 'Cancelling...' : 'Cancel Race'}
</Button>
)}
</div>
</Card>
{/* Status Info */}
)}
</div>
</Card>
{/* Status Info */}
<Card className={`${config.bg} border ${config.border}`}>
<div className="flex items-start gap-3">
<div className={`p-2 rounded-lg ${config.bg}`}>
@@ -967,7 +930,7 @@ export default function RaceDetailPage() {
raceId={race.id}
leagueId={league?.id}
protestingDriverId={currentDriverId}
participants={entryList}
participants={entryList.map(d => ({ id: d.id, name: d.name }))}
/>
</div>
);

234
apps/website/app/races/[id]/results/page.tsx
View File

@@ -2,45 +2,77 @@
import { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { ArrowLeft, Zap, Trophy, Users, Clock, Calendar } from 'lucide-react';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import ResultsTable from '@/components/races/ResultsTable';
import ImportResultsForm from '@/components/races/ImportResultsForm';
import { Race } from '@gridpilot/racing/domain/entities/Race';
import { League } from '@gridpilot/racing/domain/entities/League';
import { Result } from '@gridpilot/racing/domain/entities/Result';
import { Driver } from '@gridpilot/racing/domain/entities/Driver';
import type { PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
import {
getRaceRepository,
getLeagueRepository,
getResultRepository,
getStandingRepository,
getDriverRepository,
getGetRaceWithSOFUseCase,
getGetRacePenaltiesUseCase,
getGetRaceResultsDetailUseCase,
getImportRaceResultsUseCase,
} from '@/lib/di-container';
import type {
RaceResultsHeaderViewModel,
RaceResultsLeagueViewModel,
} from '@gridpilot/racing/application/presenters/IRaceResultsDetailPresenter';
type PenaltyTypeDTO =
| 'time_penalty'
| 'grid_penalty'
| 'points_deduction'
| 'disqualification'
| 'warning'
| 'license_points'
| string;
interface PenaltyData {
driverId: string;
type: PenaltyType;
type: PenaltyTypeDTO;
value?: number;
}
import { ArrowLeft, Zap, Trophy, Users, Clock, Calendar } from 'lucide-react';
interface RaceResultRowDTO {
id: string;
raceId: string;
driverId: string;
position: number;
fastestLap: number;
incidents: number;
startPosition: number;
getPositionChange(): number;
}
interface DriverRowDTO {
id: string;
name: string;
}
interface ImportResultRowDTO {
id: string;
raceId: string;
driverId: string;
position: number;
fastestLap: number;
incidents: number;
startPosition: number;
}
export default function RaceResultsPage() {
const router = useRouter();
const params = useParams();
const raceId = params.id as string;
const [race, setRace] = useState<Race | null>(null);
const [league, setLeague] = useState<League | null>(null);
const [results, setResults] = useState<Result[]>([]);
const [drivers, setDrivers] = useState<Driver[]>([]);
const [race, setRace] = useState<RaceResultsHeaderViewModel | null>(null);
const [league, setLeague] = useState<RaceResultsLeagueViewModel | null>(null);
const [results, setResults] = useState<RaceResultRowDTO[]>([]);
const [drivers, setDrivers] = useState<DriverRowDTO[]>([]);
const [currentDriverId, setCurrentDriverId] = useState<string | undefined>(undefined);
const [raceSOF, setRaceSOF] = useState<number | null>(null);
const [penalties, setPenalties] = useState<PenaltyData[]>([]);
const [pointsSystem, setPointsSystem] = useState<Record<number, number>>({});
const [fastestLapTime, setFastestLapTime] = useState<number | undefined>(undefined);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [importing, setImporting] = useState(false);
@@ -48,60 +80,59 @@ export default function RaceResultsPage() {
const loadData = async () => {
try {
const raceRepo = getRaceRepository();
const leagueRepo = getLeagueRepository();
const resultRepo = getResultRepository();
const driverRepo = getDriverRepository();
const raceWithSOFUseCase = getGetRaceWithSOFUseCase();
const raceResultsUseCase = getGetRaceResultsDetailUseCase();
await raceResultsUseCase.execute({ raceId });
const raceData = await raceRepo.findById(raceId);
if (!raceData) {
setError('Race not found');
const viewModel = raceResultsUseCase.presenter.getViewModel();
if (!viewModel) {
setError('Failed to load race data');
setLoading(false);
return;
}
setRace(raceData);
// Load race with SOF from application use case
await raceWithSOFUseCase.execute({ raceId });
const raceViewModel = raceWithSOFUseCase.presenter.getViewModel();
if (raceViewModel) {
setRaceSOF(raceViewModel.strengthOfField);
if (viewModel.error && !viewModel.race) {
setError(viewModel.error);
setRace(null);
setLeague(null);
setResults([]);
setDrivers([]);
setPenalties([]);
setPointsSystem({});
setFastestLapTime(undefined);
setCurrentDriverId(undefined);
} else {
setError(null);
setRace(viewModel.race);
setLeague(viewModel.league);
setResults(viewModel.results as unknown as RaceResultRowDTO[]);
setDrivers(
viewModel.drivers.map((d) => ({
id: d.id,
name: d.name,
})),
);
setPointsSystem(viewModel.pointsSystem);
setFastestLapTime(viewModel.fastestLapTime);
setCurrentDriverId(viewModel.currentDriverId);
setPenalties(
viewModel.penalties.map((p) => ({
driverId: p.driverId,
type: p.type as PenaltyTypeDTO,
value: p.value,
})),
);
}
// Load league data
const leagueData = await leagueRepo.findById(raceData.leagueId);
setLeague(leagueData);
// Load results
const resultsData = await resultRepo.findByRaceId(raceId);
setResults(resultsData);
// Load drivers
const driversData = await driverRepo.findAll();
setDrivers(driversData);
// Get current driver (first driver in demo mode)
if (driversData.length > 0) {
setCurrentDriverId(driversData[0].id);
}
// Load penalties for this race
try {
const penaltiesUseCase = getGetRacePenaltiesUseCase();
await penaltiesUseCase.execute(raceId);
const penaltiesViewModel = penaltiesUseCase.presenter.getViewModel();
// Map the DTO to the PenaltyData interface expected by ResultsTable
setPenalties(penaltiesViewModel.map(p => ({
driverId: p.driverId,
type: p.type,
value: p.value,
})));
} catch (penaltyErr) {
console.error('Failed to load penalties:', penaltyErr);
// Don't fail the whole page if penalties fail to load
const raceWithSOFUseCase = getGetRaceWithSOFUseCase();
await raceWithSOFUseCase.execute({ raceId });
const raceViewModel = raceWithSOFUseCase.presenter.getViewModel();
if (raceViewModel) {
setRaceSOF(raceViewModel.strengthOfField);
}
} catch (sofErr) {
console.error('Failed to load SOF:', sofErr);
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load race data');
@@ -115,32 +146,19 @@ export default function RaceResultsPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [raceId]);
const handleImportSuccess = async (importedResults: Result[]) => {
const handleImportSuccess = async (importedResults: ImportResultRowDTO[]) => {
setImporting(true);
setError(null);
try {
const resultRepo = getResultRepository();
const standingRepo = getStandingRepository();
const importUseCase = getImportRaceResultsUseCase();
await importUseCase.execute({
raceId,
results: importedResults,
});
// Check if results already exist
const existingResults = await resultRepo.existsByRaceId(raceId);
if (existingResults) {
throw new Error('Results already exist for this race');
}
// Create all results
await resultRepo.createMany(importedResults);
// Recalculate standings for the league
if (league) {
await standingRepo.recalculate(league.id);
}
// Reload results
const resultsData = await resultRepo.findByRaceId(raceId);
setResults(resultsData);
setImportSuccess(true);
await loadData();
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to import results');
} finally {
@@ -152,31 +170,6 @@ export default function RaceResultsPage() {
setError(errorMessage);
};
const getPointsSystem = (): Record<number, number> => {
if (!league) return {};
const pointsSystems: Record<string, Record<number, number>> = {
'f1-2024': {
1: 25, 2: 18, 3: 15, 4: 12, 5: 10,
6: 8, 7: 6, 8: 4, 9: 2, 10: 1
},
'indycar': {
1: 50, 2: 40, 3: 35, 4: 32, 5: 30,
6: 28, 7: 26, 8: 24, 9: 22, 10: 20,
11: 19, 12: 18, 13: 17, 14: 16, 15: 15
}
};
return league.settings.customPoints ||
pointsSystems[league.settings.pointsSystem] ||
pointsSystems['f1-2024'];
};
const getFastestLapTime = (): number | undefined => {
if (results.length === 0) return undefined;
return Math.min(...results.map(r => r.fastestLap));
};
if (loading) {
return (
<div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
@@ -212,14 +205,13 @@ export default function RaceResultsPage() {
const breadcrumbItems = [
{ label: 'Races', href: '/races' },
...(league ? [{ label: league.name, href: `/leagues/${league.id}` }] : []),
...(race ? [{ label: race.track, href: `/races/${raceId}` }] : []),
...(race ? [{ label: race.track, href: `/races/${race.id}` }] : []),
{ label: 'Results' },
];
return (
<div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
<div className="max-w-6xl mx-auto space-y-6">
{/* Navigation Row: Breadcrumbs left, Back button right */}
<div className="flex items-center justify-between">
<Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
<Button
@@ -232,15 +224,16 @@ export default function RaceResultsPage() {
</Button>
</div>
{/* Hero Header */}
<div className="relative overflow-hidden rounded-2xl bg-gray-500/10 border border-gray-500/30 p-6 sm:p-8">
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-4">
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30">
<Trophy className="w-4 h-4 text-performance-green" />
<span className="text-sm font-semibold text-performance-green">Final Results</span>
<span className="text-sm font-semibold text-performance-green">
Final Results
</span>
</div>
{raceSOF && (
<span className="flex items-center gap-1.5 text-warning-amber text-sm">
@@ -249,11 +242,11 @@ export default function RaceResultsPage() {
</span>
)}
</div>
<h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">
{race?.track ?? 'Race'} Results
</h1>
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
{race && (
<>
@@ -271,35 +264,30 @@ export default function RaceResultsPage() {
</span>
</>
)}
{league && (
<span className="text-primary-blue">{league.name}</span>
)}
{league && <span className="text-primary-blue">{league.name}</span>}
</div>
</div>
</div>
{/* Success Message */}
{importSuccess && (
<div className="p-4 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
<strong>Success!</strong> Results imported and standings updated.
</div>
)}
{/* Error Message */}
{error && (
<div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded-lg text-warning-amber">
<strong>Error:</strong> {error}
</div>
)}
{/* Content */}
<Card>
{hasResults ? (
<ResultsTable
results={results}
drivers={drivers}
pointsSystem={getPointsSystem()}
fastestLapTime={getFastestLapTime()}
pointsSystem={pointsSystem}
fastestLapTime={fastestLapTime}
penalties={penalties}
currentDriverId={currentDriverId}
/>

104
apps/website/app/races/[id]/stewarding/page.tsx
View File

@@ -3,27 +3,6 @@
import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import {
getRaceRepository,
getLeagueRepository,
getProtestRepository,
getDriverRepository,
getPenaltyRepository,
getLeagueMembershipRepository,
getReviewProtestUseCase,
getApplyPenaltyUseCase,
} from '@/lib/di-container';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
import type { Race } from '@gridpilot/racing/domain/entities/Race';
import type { League } from '@gridpilot/racing/domain/entities/League';
import type { Protest } from '@gridpilot/racing/domain/entities/Protest';
import type { Penalty, PenaltyType } from '@gridpilot/racing/domain/entities/Penalty';
import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
import {
AlertTriangle,
Clock,
@@ -40,6 +19,22 @@ import {
Users,
Trophy,
} from 'lucide-react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import {
getGetRaceProtestsUseCase,
getGetRacePenaltiesUseCase,
getRaceRepository,
getLeagueRepository,
getLeagueMembershipRepository,
} from '@/lib/di-container';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
import type { RaceProtestViewModel } from '@gridpilot/racing/application/presenters/IRaceProtestsPresenter';
import type { RacePenaltyViewModel } from '@gridpilot/racing/application/presenters/IRacePenaltiesPresenter';
import type { League } from '@gridpilot/racing/domain/entities/League';
import type { Race } from '@gridpilot/racing/domain/entities/Race';
export default function RaceStewardingPage() {
const params = useParams();
@@ -49,9 +44,8 @@ export default function RaceStewardingPage() {
const [race, setRace] = useState<Race | null>(null);
const [league, setLeague] = useState<League | null>(null);
const [protests, setProtests] = useState<Protest[]>([]);
const [penalties, setPenalties] = useState<Penalty[]>([]);
const [driversById, setDriversById] = useState<Record<string, DriverDTO>>({});
const [protests, setProtests] = useState<RaceProtestViewModel[]>([]);
const [penalties, setPenalties] = useState<RacePenaltyViewModel[]>([]);
const [loading, setLoading] = useState(true);
const [isAdmin, setIsAdmin] = useState(false);
const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
@@ -62,12 +56,10 @@ export default function RaceStewardingPage() {
try {
const raceRepo = getRaceRepository();
const leagueRepo = getLeagueRepository();
const protestRepo = getProtestRepository();
const penaltyRepo = getPenaltyRepository();
const driverRepo = getDriverRepository();
const membershipRepo = getLeagueMembershipRepository();
const protestsUseCase = getGetRaceProtestsUseCase();
const penaltiesUseCase = getGetRacePenaltiesUseCase();
// Get race
const raceData = await raceRepo.findById(raceId);
if (!raceData) {
setLoading(false);
@@ -75,48 +67,24 @@ export default function RaceStewardingPage() {
}
setRace(raceData);
// Get league
const leagueData = await leagueRepo.findById(raceData.leagueId);
setLeague(leagueData);
// Check admin status
if (leagueData) {
const membership = await membershipRepo.getMembership(leagueData.id, currentDriverId);
const membership = await membershipRepo.getMembership(
leagueData.id,
currentDriverId,
);
setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
}
// Get protests for this race
const raceProtests = await protestRepo.findByRaceId(raceId);
setProtests(raceProtests);
await protestsUseCase.execute(raceId);
const protestsViewModel = protestsUseCase.presenter.getViewModel();
setProtests(protestsViewModel.protests);
// Get penalties for this race
const racePenalties = await penaltyRepo.findByRaceId(raceId);
setPenalties(racePenalties);
// Collect driver IDs
const driverIds = new Set<string>();
raceProtests.forEach((p) => {
driverIds.add(p.protestingDriverId);
driverIds.add(p.accusedDriverId);
});
racePenalties.forEach((p) => {
driverIds.add(p.driverId);
});
// Load driver info
const driverEntities = await Promise.all(
Array.from(driverIds).map((id) => driverRepo.findById(id))
);
const byId: Record<string, DriverDTO> = {};
driverEntities.forEach((driver) => {
if (driver) {
const dto = EntityMappers.toDriverDTO(driver);
if (dto) {
byId[dto.id] = dto;
}
}
});
setDriversById(byId);
await penaltiesUseCase.execute(raceId);
const penaltiesViewModel = penaltiesUseCase.presenter.getViewModel();
setPenalties(penaltiesViewModel.penalties);
} catch (err) {
console.error('Failed to load data:', err);
} finally {
@@ -128,10 +96,13 @@ export default function RaceStewardingPage() {
}, [raceId, currentDriverId]);
const pendingProtests = protests.filter(
(p) => p.status === 'pending' || p.status === 'under_review'
(p) => p.status === 'pending' || p.status === 'under_review',
);
const resolvedProtests = protests.filter(
(p) => p.status === 'upheld' || p.status === 'dismissed' || p.status === 'withdrawn'
(p) =>
p.status === 'upheld' ||
p.status === 'dismissed' ||
p.status === 'withdrawn',
);
const getStatusBadge = (status: string) => {
@@ -166,8 +137,9 @@ export default function RaceStewardingPage() {
}
};
const formatDate = (date: Date) => {
return new Date(date).toLocaleDateString('en-US', {
const formatDate = (date: Date | string) => {
const d = typeof date === 'string' ? new Date(date) : date;
return d.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',

74
apps/website/app/races/all/page.tsx
View File

@@ -7,9 +7,11 @@ import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { Race, RaceStatus } from '@gridpilot/racing/domain/entities/Race';
import { League } from '@gridpilot/racing/domain/entities/League';
import { getRaceRepository, getLeagueRepository } from '@/lib/di-container';
import { getGetAllRacesPageDataUseCase } from '@/lib/di-container';
import type {
AllRacesPageViewModel,
AllRacesListItemViewModel,
} from '@gridpilot/racing/application/presenters/IAllRacesPagePresenter';
import {
Calendar,
Clock,
@@ -30,38 +32,30 @@ import {
const ITEMS_PER_PAGE = 10;
type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
export default function AllRacesPage() {
const router = useRouter();
const searchParams = useSearchParams();
const [races, setRaces] = useState<Race[]>([]);
const [leagues, setLeagues] = useState<Map<string, League>>(new Map());
const [pageData, setPageData] = useState<AllRacesPageViewModel | null>(null);
const [loading, setLoading] = useState(true);
// Pagination
const [currentPage, setCurrentPage] = useState(1);
// Filters
const [statusFilter, setStatusFilter] = useState<RaceStatus | 'all'>('all');
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
const [leagueFilter, setLeagueFilter] = useState<string>('all');
const [searchQuery, setSearchQuery] = useState('');
const [showFilters, setShowFilters] = useState(false);
const loadRaces = async () => {
try {
const raceRepo = getRaceRepository();
const leagueRepo = getLeagueRepository();
const [allRaces, allLeagues] = await Promise.all([
raceRepo.findAll(),
leagueRepo.findAll()
]);
setRaces(allRaces.sort((a, b) => b.scheduledAt.getTime() - a.scheduledAt.getTime()));
const leagueMap = new Map<string, League>();
allLeagues.forEach(league => leagueMap.set(league.id, league));
setLeagues(leagueMap);
const useCase = getGetAllRacesPageDataUseCase();
await useCase.execute();
const viewModel = useCase.presenter.getViewModel();
setPageData(viewModel);
} catch (err) {
console.error('Failed to load races:', err);
} finally {
@@ -70,29 +64,26 @@ export default function AllRacesPage() {
};
useEffect(() => {
loadRaces();
void loadRaces();
}, []);
// Filter races
const races: AllRacesListItemViewModel[] = pageData?.races ?? [];
const filteredRaces = useMemo(() => {
return races.filter(race => {
// Status filter
if (statusFilter !== 'all' && race.status !== statusFilter) {
return false;
}
// League filter
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
return false;
}
// Search filter
if (searchQuery) {
const query = searchQuery.toLowerCase();
const league = leagues.get(race.leagueId);
const matchesTrack = race.track.toLowerCase().includes(query);
const matchesCar = race.car.toLowerCase().includes(query);
const matchesLeague = league?.name.toLowerCase().includes(query);
const matchesLeague = race.leagueName.toLowerCase().includes(query);
if (!matchesTrack && !matchesCar && !matchesLeague) {
return false;
}
@@ -100,7 +91,7 @@ export default function AllRacesPage() {
return true;
});
}, [races, statusFilter, leagueFilter, searchQuery, leagues]);
}, [races, statusFilter, leagueFilter, searchQuery]);
// Paginate
const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
@@ -232,7 +223,7 @@ export default function AllRacesPage() {
{/* Status Filter */}
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value as RaceStatus | 'all')}
onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
>
<option value="all">All Statuses</option>
@@ -249,7 +240,7 @@ export default function AllRacesPage() {
className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
>
<option value="all">All Leagues</option>
{Array.from(leagues.values()).map(league => (
{pageData?.filters.leagues.map((league) => (
<option key={league.id} value={league.id}>
{league.name}
</option>
@@ -295,7 +286,6 @@ export default function AllRacesPage() {
{paginatedRaces.map(race => {
const config = statusConfig[race.status];
const StatusIcon = config.icon;
const league = leagues.get(race.leagueId);
return (
<div
@@ -347,16 +337,14 @@ export default function AllRacesPage() {
{formatDate(race.scheduledAt)}
</span>
</div>
{league && (
<Link
href={`/leagues/${league.id}`}
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-1.5 mt-2 text-sm text-primary-blue hover:underline"
>
<Trophy className="w-3.5 h-3.5" />
{league.name}
</Link>
)}
<Link
href={`/leagues/${race.leagueId}`}
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-1.5 mt-2 text-sm text-primary-blue hover:underline"
>
<Trophy className="w-3.5 h-3.5" />
{race.leagueName}
</Link>
</div>
{/* Status Badge */}

302
apps/website/app/races/page.tsx
View File

@@ -6,8 +6,11 @@ import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import { Race, RaceStatus } from '@gridpilot/racing/domain/entities/Race';
import { getGetRacesPageDataUseCase } from '@/lib/di-container';
import type {
RacesPageViewModel,
RaceListItemViewModel,
} from '@gridpilot/racing/application/presenters/IRacesPagePresenter';
import {
Calendar,
Clock,
@@ -27,21 +30,16 @@ import {
} from 'lucide-react';
type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
type RaceStatusFilter = RaceListItemViewModel['status'];
export default function RacesPage() {
const router = useRouter();
const [pageData, setPageData] = useState<{
races: Array<{ race: Race; leagueName: string }>;
stats: { total: number; scheduled: number; running: number; completed: number };
liveRaces: Array<{ race: Race; leagueName: string }>;
upcomingRaces: Array<{ race: Race; leagueName: string }>;
recentResults: Array<{ race: Race; leagueName: string }>;
} | null>(null);
const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
const [loading, setLoading] = useState(true);
// Filters
const [statusFilter, setStatusFilter] = useState<RaceStatus | 'all'>('all');
const [statusFilter, setStatusFilter] = useState<RaceStatusFilter | 'all'>('all');
const [leagueFilter, setLeagueFilter] = useState<string>('all');
const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
@@ -50,71 +48,7 @@ export default function RacesPage() {
const useCase = getGetRacesPageDataUseCase();
await useCase.execute();
const data = useCase.presenter.getViewModel();
// Transform ViewModel back to page format
setPageData({
races: data.races.map(r => ({
race: {
id: r.id,
track: r.track,
car: r.car,
scheduledAt: new Date(r.scheduledAt),
status: r.status,
leagueId: r.leagueId,
strengthOfField: r.strengthOfField,
isUpcoming: () => r.isUpcoming,
isLive: () => r.isLive,
isPast: () => r.isPast,
} as Race,
leagueName: r.leagueName,
})),
stats: data.stats,
liveRaces: data.liveRaces.map(r => ({
race: {
id: r.id,
track: r.track,
car: r.car,
scheduledAt: new Date(r.scheduledAt),
status: r.status,
leagueId: r.leagueId,
strengthOfField: r.strengthOfField,
isUpcoming: () => r.isUpcoming,
isLive: () => r.isLive,
isPast: () => r.isPast,
} as Race,
leagueName: r.leagueName,
})),
upcomingRaces: data.upcomingThisWeek.map(r => ({
race: {
id: r.id,
track: r.track,
car: r.car,
scheduledAt: new Date(r.scheduledAt),
status: r.status,
leagueId: r.leagueId,
strengthOfField: r.strengthOfField,
isUpcoming: () => r.isUpcoming,
isLive: () => r.isLive,
isPast: () => r.isPast,
} as Race,
leagueName: r.leagueName,
})),
recentResults: data.recentResults.map(r => ({
race: {
id: r.id,
track: r.track,
car: r.car,
scheduledAt: new Date(r.scheduledAt),
status: r.status,
leagueId: r.leagueId,
strengthOfField: r.strengthOfField,
isUpcoming: () => r.isUpcoming,
isLive: () => r.isLive,
isPast: () => r.isPast,
} as Race,
leagueName: r.leagueName,
})),
});
setPageData(data);
} catch (err) {
console.error('Failed to load races:', err);
} finally {
@@ -130,7 +64,7 @@ export default function RacesPage() {
const filteredRaces = useMemo(() => {
if (!pageData) return [];
return pageData.races.filter(({ race }) => {
return pageData.races.filter((race) => {
// Status filter
if (statusFilter !== 'all' && race.status !== statusFilter) {
return false;
@@ -142,13 +76,13 @@ export default function RacesPage() {
}
// Time filter
if (timeFilter === 'upcoming' && !race.isUpcoming()) {
if (timeFilter === 'upcoming' && !race.isUpcoming) {
return false;
}
if (timeFilter === 'live' && !race.isLive()) {
if (timeFilter === 'live' && !race.isLive) {
return false;
}
if (timeFilter === 'past' && !race.isPast()) {
if (timeFilter === 'past' && !race.isPast) {
return false;
}
@@ -158,18 +92,18 @@ export default function RacesPage() {
// Group races by date for calendar view
const racesByDate = useMemo(() => {
const grouped = new Map<string, Array<{ race: Race; leagueName: string }>>();
filteredRaces.forEach(item => {
const dateKey = item.race.scheduledAt.toISOString().split('T')[0];
const grouped = new Map<string, RaceListItemViewModel[]>();
filteredRaces.forEach(race => {
const dateKey = new Date(race.scheduledAt).toISOString().split('T')[0];
if (!grouped.has(dateKey)) {
grouped.set(dateKey, []);
}
grouped.get(dateKey)!.push(item);
grouped.get(dateKey)!.push(race);
});
return grouped;
}, [filteredRaces]);
const upcomingRaces = pageData?.upcomingRaces ?? [];
const upcomingRaces = pageData?.upcomingThisWeek ?? [];
const liveRaces = pageData?.liveRaces ?? [];
const recentResults = pageData?.recentResults ?? [];
const stats = pageData?.stats ?? { total: 0, scheduled: 0, running: 0, completed: 0 };
@@ -331,7 +265,7 @@ export default function RacesPage() {
</div>
<div className="space-y-3">
{liveRaces.map(({ race, leagueName }) => (
{liveRaces.map((race) => (
<div
key={race.id}
onClick={() => router.push(`/races/${race.id}`)}
@@ -343,7 +277,7 @@ export default function RacesPage() {
</div>
<div>
<h3 className="font-semibold text-white">{race.track}</h3>
<p className="text-sm text-gray-400">{leagueName}</p>
<p className="text-sm text-gray-400">{race.leagueName}</p>
</div>
</div>
<ChevronRight className="w-5 h-5 text-gray-400" />
@@ -385,8 +319,8 @@ export default function RacesPage() {
className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
>
<option value="all">All Leagues</option>
{pageData && [...new Set(pageData.races.map(r => r.race.leagueId))].map(leagueId => {
const item = pageData.races.find(r => r.race.leagueId === leagueId);
{pageData && [...new Set(pageData.races.map(r => r.leagueId))].map(leagueId => {
const item = pageData.races.find(r => r.leagueId === leagueId);
return item ? (
<option key={leagueId} value={leagueId}>
{item.leagueName}
@@ -415,106 +349,106 @@ export default function RacesPage() {
</div>
</Card>
) : (
<div className="space-y-4">
{Array.from(racesByDate.entries()).map(([dateKey, dayRaces]) => (
<div key={dateKey} className="space-y-3">
{/* Date Header */}
<div className="flex items-center gap-3 px-2">
<div className="p-2 bg-primary-blue/10 rounded-lg">
<Calendar className="w-4 h-4 text-primary-blue" />
</div>
<span className="text-sm font-semibold text-white">
{formatFullDate(new Date(dateKey))}
</span>
<span className="text-xs text-gray-500">
{dayRaces.length} race{dayRaces.length !== 1 ? 's' : ''}
</span>
</div>
<div className="space-y-4">
{Array.from(racesByDate.entries()).map(([dateKey, dayRaces]) => (
<div key={dateKey} className="space-y-3">
{/* Date Header */}
<div className="flex items-center gap-3 px-2">
<div className="p-2 bg-primary-blue/10 rounded-lg">
<Calendar className="w-4 h-4 text-primary-blue" />
</div>
<span className="text-sm font-semibold text-white">
{formatFullDate(new Date(dateKey))}
</span>
<span className="text-xs text-gray-500">
{dayRaces.length} race{dayRaces.length !== 1 ? 's' : ''}
</span>
</div>
{/* Races for this date */}
<div className="space-y-2">
{dayRaces.map(({ race, leagueName }) => {
const config = statusConfig[race.status];
const StatusIcon = config.icon;
{/* Races for this date */}
<div className="space-y-2">
{dayRaces.map((race) => {
const config = statusConfig[race.status];
const StatusIcon = config.icon;
return (
<div
key={race.id}
onClick={() => router.push(`/races/${race.id}`)}
className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
>
{/* Live indicator */}
{race.status === 'running' && (
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
)}
return (
<div
key={race.id}
onClick={() => router.push(`/races/${race.id}`)}
className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
>
{/* Live indicator */}
{race.status === 'running' && (
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
)}
<div className="flex items-start gap-4">
{/* Time Column */}
<div className="flex-shrink-0 text-center min-w-[60px]">
<p className="text-lg font-bold text-white">{formatTime(race.scheduledAt)}</p>
<p className={`text-xs ${config.color}`}>
{race.status === 'running' ? 'LIVE' : getRelativeTime(race.scheduledAt)}
</p>
</div>
<div className="flex items-start gap-4">
{/* Time Column */}
<div className="flex-shrink-0 text-center min-w-[60px]">
<p className="text-lg font-bold text-white">{formatTime(new Date(race.scheduledAt))}</p>
<p className={`text-xs ${config.color}`}>
{race.status === 'running' ? 'LIVE' : getRelativeTime(new Date(race.scheduledAt))}
</p>
</div>
{/* Divider */}
<div className={`w-px self-stretch ${config.bg}`} />
{/* Divider */}
<div className={`w-px self-stretch ${config.bg}`} />
{/* Main Content */}
<div className="flex-1 min-w-0">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
{race.track}
</h3>
<div className="flex items-center gap-3 mt-1">
<span className="flex items-center gap-1 text-sm text-gray-400">
<Car className="w-3.5 h-3.5" />
{race.car}
</span>
{race.strengthOfField && (
<span className="flex items-center gap-1 text-sm text-gray-400">
<Zap className="w-3.5 h-3.5 text-warning-amber" />
SOF {race.strengthOfField}
</span>
)}
</div>
</div>
{/* Main Content */}
<div className="flex-1 min-w-0">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
{race.track}
</h3>
<div className="flex items-center gap-3 mt-1">
<span className="flex items-center gap-1 text-sm text-gray-400">
<Car className="w-3.5 h-3.5" />
{race.car}
</span>
{race.strengthOfField && (
<span className="flex items-center gap-1 text-sm text-gray-400">
<Zap className="w-3.5 h-3.5 text-warning-amber" />
SOF {race.strengthOfField}
</span>
)}
</div>
</div>
{/* Status Badge */}
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
<StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
<span className={`text-xs font-medium ${config.color}`}>
{config.label}
</span>
</div>
</div>
{/* Status Badge */}
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
<StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
<span className={`text-xs font-medium ${config.color}`}>
{config.label}
</span>
</div>
</div>
{/* League Link */}
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
<Link
href={`/leagues/${race.leagueId}`}
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
>
<Trophy className="w-3.5 h-3.5" />
{leagueName}
<ArrowRight className="w-3 h-3" />
</Link>
</div>
</div>
{/* League Link */}
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
<Link
href={`/leagues/${race.leagueId}`}
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
>
<Trophy className="w-3.5 h-3.5" />
{race.leagueName}
<ArrowRight className="w-3 h-3" />
</Link>
</div>
</div>
{/* Arrow */}
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
</div>
</div>
);
})}
</div>
</div>
))}
</div>
)}
{/* Arrow */}
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
</div>
</div>
);
})}
</div>
</div>
))}
</div>
)}
{/* View All Link */}
{filteredRaces.length > 0 && (
@@ -548,7 +482,7 @@ export default function RacesPage() {
</p>
) : (
<div className="space-y-3">
{upcomingRaces.map(({ race }) => (
{upcomingRaces.map((race) => (
<div
key={race.id}
onClick={() => router.push(`/races/${race.id}`)}
@@ -561,7 +495,7 @@ export default function RacesPage() {
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-white truncate">{race.track}</p>
<p className="text-xs text-gray-500">{formatTime(race.scheduledAt)}</p>
<p className="text-xs text-gray-500">{formatTime(new Date(race.scheduledAt))}</p>
</div>
<ChevronRight className="w-4 h-4 text-gray-500" />
</div>
@@ -585,7 +519,7 @@ export default function RacesPage() {
</p>
) : (
<div className="space-y-3">
{recentResults.map(({ race }) => (
{recentResults.map((race) => (
<div
key={race.id}
onClick={() => router.push(`/races/${race.id}/results`)}
@@ -596,7 +530,7 @@ export default function RacesPage() {
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-white truncate">{race.track}</p>
<p className="text-xs text-gray-500">{formatDate(race.scheduledAt)}</p>
<p className="text-xs text-gray-500">{formatDate(new Date(race.scheduledAt))}</p>
</div>
<ChevronRight className="w-4 h-4 text-gray-500" />
</div>