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 21:06:25 +01:00
parent c49ea2598d
commit ec3ddc3a5c
227 changed files with 3496 additions and 2083 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/website/components/drivers/ProfileStats.tsx
View File

@@ -5,6 +5,7 @@ import RankBadge from './RankBadge';
import { getLeagueRankings, getGetProfileOverviewUseCase } from '@/lib/di-container';
import { useState, useEffect } from 'react';
import { getPrimaryLeagueIdForDriver } from '@/lib/leagueMembership';
import type { ProfileOverviewViewModel } from '@gridpilot/racing/application/presenters/IProfileOverviewPresenter';
interface ProfileStatsProps {
driverId?: string;
@@ -18,15 +19,16 @@ interface ProfileStatsProps {
};
}
type DriverProfileOverviewViewModel = ProfileOverviewViewModel | null;
export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
const [profileData, setProfileData] = useState<any>(null);
const [profileData, setProfileData] = useState<DriverProfileOverviewViewModel>(null);
useEffect(() => {
if (driverId) {
const load = async () => {
const profileUseCase = getGetProfileOverviewUseCase();
await profileUseCase.execute({ driverId });
const vm = profileUseCase.presenter.getViewModel();
const vm = await profileUseCase.execute({ driverId });
setProfileData(vm);
};
void load();
@@ -34,23 +36,26 @@ export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
}, [driverId]);
const driverStats = profileData?.stats || null;
const totalDrivers = profileData?.currentDriver?.totalDrivers || 0;
const totalDrivers = profileData?.currentDriver?.totalDrivers ?? 0;
const primaryLeagueId = driverId ? getPrimaryLeagueIdForDriver(driverId) : null;
const leagueRank =
driverId && primaryLeagueId ? getLeagueRankings(driverId, primaryLeagueId) : null;
const defaultStats = 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,
}
: null);
const defaultStats =
stats ||
(driverStats
? {
totalRaces: driverStats.totalRaces,
wins: driverStats.wins,
podiums: driverStats.podiums,
dnfs: driverStats.dnfs,
avgFinish: driverStats.avgFinish ?? 0,
completionRate:
driverStats.totalRaces > 0
? ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) * 100
: 0,
}
: null);
const winRate =
defaultStats && defaultStats.totalRaces > 0
@@ -91,17 +96,19 @@ export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
<div className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<RankBadge rank={driverStats.overallRank} size="lg" />
<RankBadge rank={driverStats.overallRank ?? 0} size="lg" />
<div>
<div className="text-white font-medium text-lg">Overall Ranking</div>
<div className="text-sm text-gray-400">
{driverStats.overallRank} of {totalDrivers} drivers
{driverStats.overallRank ?? 0} of {totalDrivers} drivers
</div>
</div>
</div>
<div className="text-right">
<div className={`text-sm font-medium ${getPercentileColor(driverStats.percentile)}`}>
{getPercentileLabel(driverStats.percentile)}
<div
className={`text-sm font-medium ${getPercentileColor(driverStats.percentile ?? 0)}`}
>
{getPercentileLabel(driverStats.percentile ?? 0)}
</div>
<div className="text-xs text-gray-500">Global Percentile</div>
</div>
@@ -109,7 +116,9 @@ export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
<div className="grid grid-cols-3 gap-4 pt-3 border-t border-charcoal-outline">
<div className="text-center">
<div className="text-2xl font-bold text-primary-blue">{driverStats.rating}</div>
<div className="text-2xl font-bold text-primary-blue">
{driverStats.rating ?? 0}
</div>
<div className="text-xs text-gray-400">Rating</div>
</div>
<div className="text-center">