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-04 11:54:23 +01:00
parent c0fdae3d3c
commit 9d5caa87f3
83 changed files with 1579 additions and 2151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
apps/website/components/drivers/DriverProfile.tsx Normal file
View File

@@ -0,0 +1,171 @@
'use client';
import { DriverDTO } from '@gridpilot/racing/application/mappers/EntityMappers';
import Card from '../ui/Card';
import ProfileHeader from '../profile/ProfileHeader';
import ProfileStats from './ProfileStats';
import CareerHighlights from './CareerHighlights';
import DriverRankings from './DriverRankings';
import PerformanceMetrics from './PerformanceMetrics';
import { getDriverTeam } from '@gridpilot/racing/application';
import { getDriverStats, getLeagueRankings } from '@/lib/di-container';
interface DriverProfileProps {
driver: DriverDTO;
}
export default function DriverProfile({ driver }: DriverProfileProps) {
const driverStats = getDriverStats(driver.id);
const leagueRank = getLeagueRankings(driver.id, 'league-1');
const performanceStats = driverStats ? {
winRate: (driverStats.wins / driverStats.totalRaces) * 100,
podiumRate: (driverStats.podiums / driverStats.totalRaces) * 100,
dnfRate: (driverStats.dnfs / driverStats.totalRaces) * 100,
avgFinish: driverStats.avgFinish,
consistency: driverStats.consistency,
bestFinish: driverStats.bestFinish,
worstFinish: driverStats.worstFinish,
} : null;
const rankings = driverStats ? [
{
type: 'overall' as const,
name: 'Overall Ranking',
rank: driverStats.overallRank,
totalDrivers: 850,
percentile: driverStats.percentile,
rating: driverStats.rating,
},
{
type: 'league' as const,
name: 'European GT Championship',
rank: leagueRank.rank,
totalDrivers: leagueRank.totalDrivers,
percentile: leagueRank.percentile,
rating: driverStats.rating,
},
] : [];
return (
<div className="space-y-6">
<Card>
<ProfileHeader driver={driver} isOwnProfile={false} />
</Card>
{driver.bio && (
<Card>
<h3 className="text-lg font-semibold text-white mb-4">About</h3>
<p className="text-gray-300 leading-relaxed">{driver.bio}</p>
</Card>
)}
{driverStats && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-6">
<Card>
<h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
<div className="grid grid-cols-2 gap-4">
<StatCard label="Rating" value={driverStats.rating.toString()} color="text-primary-blue" />
<StatCard label="Total Races" value={driverStats.totalRaces.toString()} color="text-white" />
<StatCard label="Wins" value={driverStats.wins.toString()} color="text-green-400" />
<StatCard label="Podiums" value={driverStats.podiums.toString()} color="text-warning-amber" />
</div>
</Card>
{performanceStats && <PerformanceMetrics stats={performanceStats} />}
</div>
<DriverRankings rankings={rankings} />
</div>
)}
{!driverStats && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<Card className="lg:col-span-2">
<h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
<div className="grid grid-cols-2 gap-4">
<StatCard label="Rating" value="1450" color="text-primary-blue" />
<StatCard label="Total Races" value="147" color="text-white" />
<StatCard label="Wins" value="23" color="text-green-400" />
<StatCard label="Podiums" value="56" color="text-warning-amber" />
</div>
</Card>
<Card>
<h3 className="text-lg font-semibold text-white mb-4">Team</h3>
{(() => {
const teamData = getDriverTeam(driver.id);
if (teamData) {
const { team, membership } = teamData;
return (
<div className="flex items-center gap-4 p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
<div className="w-12 h-12 rounded-lg bg-primary-blue/20 flex items-center justify-center text-xl font-bold text-white">
{team.tag}
</div>
<div>
<div className="text-white font-medium">{team.name}</div>
<div className="text-sm text-gray-400">
{membership.role.charAt(0).toUpperCase() + membership.role.slice(1)} • Joined {new Date(membership.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
</div>
</div>
</div>
);
}
return (
<div className="text-center py-4 text-gray-400 text-sm">
Not on a team
</div>
);
})()}
</Card>
</div>
)}
<Card>
<h3 className="text-lg font-semibold text-white mb-4">Performance by Class</h3>
<ProfileStats stats={driverStats ? {
totalRaces: driverStats.totalRaces,
wins: driverStats.wins,
podiums: driverStats.podiums,
dnfs: driverStats.dnfs,
avgFinish: driverStats.avgFinish,
completionRate: ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) * 100
} : undefined} />
</Card>
<CareerHighlights />
<Card className="bg-charcoal-200/50 border-primary-blue/30">
<div className="flex items-center gap-3 mb-3">
<div className="text-2xl">🔒</div>
<h3 className="text-lg font-semibold text-white">Private Information</h3>
</div>
<p className="text-gray-400 text-sm">
Detailed race history, settings, and preferences are only visible to the driver.
</p>
</Card>
<Card className="bg-charcoal-200/50 border-primary-blue/30">
<div className="flex items-center gap-3 mb-3">
<div className="text-2xl">📊</div>
<h3 className="text-lg font-semibold text-white">Coming Soon</h3>
</div>
<p className="text-gray-400 text-sm">
Per-car statistics, per-track performance, and head-to-head comparisons will be available in production.
</p>
</Card>
</div>
);
}
function StatCard({ label, value, color }: { label: string; value: string; color: string }) {
return (
<div className="text-center p-4 rounded bg-deep-graphite border border-charcoal-outline">
<div className="text-sm text-gray-400 mb-1">{label}</div>
<div className={`text-2xl font-bold ${color}`}>{value}</div>
</div>
);
}