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-09 10:32:59 +01:00
parent 35f988f885
commit a780139692
26 changed files with 2224 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/app/leagues/[id]/page.tsx
View File

@@ -334,7 +334,7 @@ export default function LeagueDetailPage() {
</h4>
<p className="text-gray-200 flex items-center gap-1.5">
<Trophy className="w-4 h-4 text-gray-500" />
{league.settings.pointsSystem.toUpperCase()}
{scoringConfig?.scoringPresetName ?? scoringConfig?.scoringPresetId ?? 'Standard'}
</p>
</div>
<div>

34
apps/website/app/profile/page.tsx
View File

@@ -3,6 +3,7 @@
import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import {
User,
Trophy,
@@ -352,10 +353,14 @@ function FinishDistributionChart({ wins, podiums, topTen, total }: FinishDistrib
// ============================================================================
export default function ProfilePage() {
const router = useRouter();
const searchParams = useSearchParams();
const tabParam = searchParams.get('tab') as ProfileTab | null;
const [driver, setDriver] = useState<DriverDTO | null>(null);
const [loading, setLoading] = useState(true);
const [editMode, setEditMode] = useState(false);
const [activeTab, setActiveTab] = useState<ProfileTab>('overview');
const [activeTab, setActiveTab] = useState<ProfileTab>(tabParam || 'overview');
const [teamData, setTeamData] = useState<GetDriverTeamQueryResultDTO | null>(null);
const [allTeamMemberships, setAllTeamMemberships] = useState<TeamMembershipInfo[]>([]);
const [friends, setFriends] = useState<Driver[]>([]);
@@ -413,6 +418,27 @@ export default function ProfilePage() {
void loadData();
}, [effectiveDriverId]);
// Update URL when tab changes
useEffect(() => {
if (tabParam !== activeTab) {
const params = new URLSearchParams(searchParams.toString());
if (activeTab === 'overview') {
params.delete('tab');
} else {
params.set('tab', activeTab);
}
const query = params.toString();
router.replace(`/profile${query ? `?${query}` : ''}`, { scroll: false });
}
}, [activeTab, tabParam, searchParams, router]);
// Sync tab from URL on mount and param change
useEffect(() => {
if (tabParam && tabParam !== activeTab) {
setActiveTab(tabParam);
}
}, [tabParam]);
const handleSaveSettings = async (updates: Partial<DriverDTO>) => {
if (!driver) return;
@@ -497,7 +523,7 @@ export default function ProfilePage() {
}
return (
<div className="max-w-6xl mx-auto px-4 pb-12 space-y-6">
<div className="max-w-7xl mx-auto px-4 pb-12 space-y-6">
{/* Hero Header Section */}
<div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-iron-gray/80 via-iron-gray/60 to-deep-graphite border border-charcoal-outline">
{/* Background Pattern */}
@@ -1000,13 +1026,13 @@ export default function ProfilePage() {
</>
)}
{activeTab === 'history' && (
{activeTab === 'history' && driver && (
<Card>
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
<History className="w-5 h-5 text-red-400" />
Race History
</h2>
<ProfileRaceHistory />
<ProfileRaceHistory driverId={driver.id} />
</Card>
)}

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

@@ -7,9 +7,11 @@ import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import Heading from '@/components/ui/Heading';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import FileProtestModal from '@/components/races/FileProtestModal';
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,
@@ -18,12 +20,13 @@ import {
getIsDriverRegisteredForRaceQuery,
getRegisterForRaceUseCase,
getWithdrawFromRaceUseCase,
getTrackRepository,
getCarRepository,
getGetRaceWithSOFQuery,
getResultRepository,
getImageService,
} from '@/lib/di-container';
import { getMembership } from '@/lib/leagueMembership';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { getDriverStats } from '@/lib/di-container';
import {
Calendar,
Clock,
@@ -45,8 +48,9 @@ import {
ArrowLeft,
ExternalLink,
Award,
Scale,
} from 'lucide-react';
import { getDriverStats, getAllDriverRankings } from '@/lib/di-container';
import { getAllDriverRankings } from '@/lib/di-container';
export default function RaceDetailPage() {
const router = useRouter();
@@ -63,6 +67,10 @@ export default function RaceDetailPage() {
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);
const currentDriverId = useEffectiveDriverId();
@@ -94,6 +102,26 @@ export default function RaceDetailPage() {
// 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);
}
}
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load race');
} finally {
@@ -134,6 +162,31 @@ export default function RaceDetailPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [raceId]);
// Animate rating change when it changes
useEffect(() => {
if (ratingChange !== null) {
let start = 0;
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 () => {
if (!race || race.status !== 'scheduled') return;
@@ -329,6 +382,15 @@ export default function RaceDetailPage() {
{ label: race.track },
];
// Country code to flag emoji converter
const getCountryFlag = (countryCode: string): string => {
const codePoints = countryCode
.toUpperCase()
.split('')
.map(char => 127397 + char.charCodeAt(0));
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);
@@ -348,7 +410,7 @@ export default function RaceDetailPage() {
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 space-y-6">
<div className="max-w-7xl 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" />
@@ -362,6 +424,141 @@ export default function RaceDetailPage() {
</Button>
</div>
{/* User Result - Premium Achievement Card */}
{userResult && (
<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()
? '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'}
`}>
<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">
<div className="absolute top-4 left-[10%] w-2 h-2 bg-yellow-400 rounded-full animate-pulse" />
<div className="absolute top-8 left-[25%] w-1.5 h-1.5 bg-yellow-300 rounded-full animate-pulse delay-100" />
<div className="absolute top-6 right-[20%] w-2 h-2 bg-yellow-500 rounded-full animate-pulse delay-200" />
<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={`
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
? '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'}
`}>
{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>
<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' : ''}>
{userResult.incidents}x incidents
{userResult.isClean() && ' ✨'}
</span>
</div>
</div>
</div>
{/* Right: Stats cards */}
<div className="flex flex-wrap gap-3">
{/* Position change */}
{userResult.getPositionChange() !== 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={`
flex items-center gap-1 font-black text-2xl
${userResult.getPositionChange() > 0 ? 'text-performance-green' : 'text-red-400'}
`}>
{userResult.getPositionChange() > 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" />
</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" />
</svg>
)}
{Math.abs(userResult.getPositionChange())}
</div>
<div className="text-xs text-gray-400 mt-0.5">
{userResult.getPositionChange() > 0 ? 'Gained' : 'Lost'}
</div>
</div>
)}
{/* Rating change */}
{ratingChange !== null && (
<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={`
font-mono font-black text-2xl
${ratingChange > 0 ? 'text-warning-amber' : 'text-red-400'}
`}>
{animatedRatingChange > 0 ? '+' : ''}{animatedRatingChange}
</div>
<div className="text-xs text-gray-400 mt-0.5">iRating</div>
</div>
)}
{/* Clean race bonus */}
{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>
)}
</div>
</div>
</div>
</div>
</div>
)}
{/* Hero Header */}
<div className={`relative overflow-hidden rounded-2xl ${config.bg} border ${config.border} p-6 sm:p-8`}>
{/* Live indicator */}
@@ -407,43 +604,38 @@ export default function RaceDetailPage() {
<Car className="w-4 h-4" />
{race.car}
</span>
{raceSOF && (
<span className="flex items-center gap-2 text-warning-amber">
<Zap className="w-4 h-4" />
SOF {raceSOF}
</span>
)}
</div>
</div>
</div>
{/* League Banner */}
{league && (
<Link
href={`/leagues/${league.id}`}
className="block group"
>
<div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-primary-blue/10 via-primary-blue/5 to-transparent border border-primary-blue/20 p-4 transition-all hover:border-primary-blue/40">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="p-3 bg-primary-blue/20 rounded-xl">
<Trophy className="w-6 h-6 text-primary-blue" />
{/* Prominent SOF Badge - Electric Design */}
{raceSOF && (
<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>
<p className="text-xs text-gray-400 uppercase tracking-wide">Part of</p>
<p className="text-lg font-semibold text-white group-hover:text-primary-blue transition-colors">
{league.name}
</p>
<div className="text-[10px] text-warning-amber/90 uppercase tracking-widest font-bold mb-0.5">
Strength of Field
</div>
<div className="flex items-baseline gap-1">
<span className="text-3xl font-black text-warning-amber font-mono tracking-tight drop-shadow-lg">
{raceSOF}
</span>
<span className="text-sm text-warning-amber/70 font-medium">SOF</span>
</div>
</div>
</div>
<div className="flex items-center gap-2 text-primary-blue">
<span className="text-sm hidden sm:block">View League</span>
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</div>
</div>
</div>
</Link>
)}
)}
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main Content */}
@@ -503,53 +695,139 @@ export default function RaceDetailPage() {
</span>
</div>
{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" />
{(() => {
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>
</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>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
) : (
<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-2 p-2 bg-deep-graphite rounded-lg hover:bg-charcoal-outline/50 cursor-pointer transition-colors"
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'}
`}
>
<span className="w-6 text-xs text-gray-500 font-mono">#{index + 1}</span>
<div className="w-7 h-7 bg-iron-gray rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-sm font-bold text-gray-400">
{driver.name.charAt(0)}
</span>
{/* 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">
<p className="text-white text-sm font-medium truncate">{driver.name}</p>
<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 && (
<span className="text-xs text-warning-amber font-medium">
{driverRankInfo.rating}
</span>
)}
{driver.id === currentDriverId && (
<span className="px-1.5 py-0.5 text-xs font-medium bg-primary-blue/20 text-primary-blue rounded">
You
</span>
<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>
)}
</div>
);
})}
</div>
)}
);
})()}
</Card>
</div>
{/* Sidebar - Actions */}
{/* Sidebar */}
<div className="space-y-6">
{/* League Card - Premium Design */}
{league && (
<Card className="overflow-hidden">
<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)}
alt={league.name}
className="w-full h-full object-cover"
/>
</div>
<div className="flex-1 min-w-0">
<p className="text-xs text-gray-500 uppercase tracking-wide mb-0.5">League</p>
<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>
<p className="text-white font-medium">{league.settings.maxDrivers ?? 32}</p>
</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>
</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"
>
View League
<ArrowRight className="w-4 h-4" />
</Link>
</Card>
)}
{/* Quick Actions Card */}
<Card>
<h2 className="text-lg font-semibold text-white mb-4">Actions</h2>
@@ -587,14 +865,26 @@ export default function RaceDetailPage() {
)}
{race.status === 'completed' && (
<Button
variant="primary"
className="w-full flex items-center justify-center gap-2"
onClick={() => router.push(`/races/${race.id}/results`)}
>
<Trophy className="w-4 h-4" />
View Results
</Button>
<>
<Button
variant="primary"
className="w-full flex items-center justify-center gap-2"
onClick={() => router.push(`/races/${race.id}/results`)}
>
<Trophy className="w-4 h-4" />
View Results
</Button>
{userResult && (
<Button
variant="secondary"
className="w-full flex items-center justify-center gap-2"
onClick={() => setShowProtestModal(true)}
>
<Scale className="w-4 h-4" />
File Protest
</Button>
)}
</>
)}
{race.status === 'scheduled' && (
@@ -658,6 +948,16 @@ export default function RaceDetailPage() {
</div>
</div>
</div>
{/* Protest Filing Modal */}
<FileProtestModal
isOpen={showProtestModal}
onClose={() => setShowProtestModal(false)}
raceId={race.id}
leagueId={league?.id}
protestingDriverId={currentDriverId}
participants={entryList}
/>
</div>
);
}

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

@@ -11,6 +11,7 @@ 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,
@@ -18,7 +19,14 @@ import {
getStandingRepository,
getDriverRepository,
getGetRaceWithSOFQuery,
getGetRacePenaltiesQuery,
} from '@/lib/di-container';
interface PenaltyData {
driverId: string;
type: PenaltyType;
value?: number;
}
import { ArrowLeft, Zap, Trophy, Users, Clock, Calendar } from 'lucide-react';
export default function RaceResultsPage() {
@@ -30,7 +38,9 @@ export default function RaceResultsPage() {
const [league, setLeague] = useState<League | null>(null);
const [results, setResults] = useState<Result[]>([]);
const [drivers, setDrivers] = useState<Driver[]>([]);
const [currentDriverId, setCurrentDriverId] = useState<string | undefined>(undefined);
const [raceSOF, setRaceSOF] = useState<number | null>(null);
const [penalties, setPenalties] = useState<PenaltyData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [importing, setImporting] = useState(false);
@@ -71,6 +81,26 @@ export default function RaceResultsPage() {
// 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 penaltiesQuery = getGetRacePenaltiesQuery();
const penaltiesData = await penaltiesQuery.execute(raceId);
// Map the DTO to the PenaltyData interface expected by ResultsTable
setPenalties(penaltiesData.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
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load race data');
} finally {
@@ -268,6 +298,8 @@ export default function RaceResultsPage() {
drivers={drivers}
pointsSystem={getPointsSystem()}
fastestLapTime={getFastestLapTime()}
penalties={penalties}
currentDriverId={currentDriverId}
/>
) : (
<>