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-03 16:33:12 +01:00
parent a572e6edce
commit c0fdae3d3c
157 changed files with 7824 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
apps/website/components/alpha/DriverProfile.tsx
View File

@@ -1,87 +1,171 @@
'use client';
import { DriverDTO } from '@/application/mappers/EntityMappers';
import { DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
import Card from '../ui/Card';
import Button from '../ui/Button';
import ProfileHeader from './ProfileHeader';
import ProfileStats from './ProfileStats';
import CareerHighlights from './CareerHighlights';
import DriverRankings from './DriverRankings';
import PerformanceMetrics from './PerformanceMetrics';
import { getDriverTeam } from '@/lib/team-data';
import { getDriverStats, getLeagueRankings } from '@/lib/di-container';
interface DriverProfileProps {
driver: DriverDTO;
}
export default function DriverProfile({ driver }: DriverProfileProps) {
const formattedDate = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(new Date(driver.joinedAt));
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 (
<Card className="max-w-2xl mx-auto">
<div className="space-y-6">
<div className="flex items-start justify-between">
<div>
<h2 className="text-2xl font-bold text-white mb-2">{driver.name}</h2>
<p className="text-gray-400 text-sm">iRacing ID: {driver.iracingId}</p>
</div>
<div className="flex items-center gap-2">
<span className="text-3xl" aria-label={`Country: ${driver.country}`}>
{getCountryFlag(driver.country)}
</span>
</div>
</div>
<div className="space-y-6">
<Card>
<ProfileHeader driver={driver} isOwnProfile={false} />
</Card>
{driver.bio && (
<div className="border-t border-charcoal-outline pt-4">
<h3 className="text-sm font-semibold text-gray-400 mb-2">Bio</h3>
<p className="text-gray-300 leading-relaxed">{driver.bio}</p>
</div>
)}
{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>
)}
<div className="border-t border-charcoal-outline pt-4">
<div className="flex items-center gap-2 text-sm text-gray-400">
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span>Member since {formattedDate}</span>
</div>
</div>
{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>
<div className="pt-4">
<Button
variant="secondary"
className="w-full"
disabled
>
Edit Profile
</Button>
<p className="text-xs text-gray-500 text-center mt-2">
Profile editing coming soon
</p>
{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>
)}
<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 getCountryFlag(countryCode: string): string {
const code = countryCode.toUpperCase();
if (code.length === 2) {
const codePoints = [...code].map(char =>
127397 + char.charCodeAt(0)
);
return String.fromCodePoint(...codePoints);
}
return '🏁';
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>
);
}