246 lines
9.0 KiB
TypeScript
246 lines
9.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { getDriverRepository } from '@/lib/di-container';
|
|
import { Driver } from '@gridpilot/racing/domain/entities/Driver';
|
|
import { EntityMappers, DriverDTO } from '@gridpilot/racing/application/mappers/EntityMappers';
|
|
import CreateDriverForm from '@/components/drivers/CreateDriverForm';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import ProfileHeader from '@/components/profile/ProfileHeader';
|
|
import ProfileStats from '@/components/drivers/ProfileStats';
|
|
import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
|
|
import ProfileSettings from '@/components/drivers/ProfileSettings';
|
|
import CareerHighlights from '@/components/drivers/CareerHighlights';
|
|
import RatingBreakdown from '@/components/drivers/RatingBreakdown';
|
|
import { getDriverTeam, getCurrentDriverId } from '@gridpilot/racing/application';
|
|
|
|
type Tab = 'overview' | 'statistics' | 'history' | 'settings';
|
|
|
|
export default function ProfilePage() {
|
|
const router = useRouter();
|
|
const [driver, setDriver] = useState<DriverDTO | null>(null);
|
|
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadDriver = async () => {
|
|
const driverRepo = getDriverRepository();
|
|
const drivers = await driverRepo.findAll();
|
|
const driverData = EntityMappers.toDriverDTO(drivers[0] || null);
|
|
setDriver(driverData);
|
|
setLoading(false);
|
|
};
|
|
loadDriver();
|
|
}, []);
|
|
|
|
const handleSaveSettings = async (updates: Partial<DriverDTO>) => {
|
|
if (!driver) return;
|
|
|
|
const driverRepo = getDriverRepository();
|
|
const drivers = await driverRepo.findAll();
|
|
const currentDriver = drivers[0];
|
|
|
|
if (currentDriver) {
|
|
const updatedDriver: Driver = currentDriver.update({
|
|
bio: updates.bio ?? currentDriver.bio,
|
|
country: updates.country ?? currentDriver.country,
|
|
});
|
|
const persistedDriver = await driverRepo.update(updatedDriver);
|
|
|
|
const updatedDto = EntityMappers.toDriverDTO(persistedDriver);
|
|
setDriver(updatedDto);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center text-gray-400">Loading profile...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!driver) {
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-white mb-2">Driver Profile</h1>
|
|
<p className="text-gray-400">
|
|
Create your GridPilot profile to get started
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="max-w-2xl mx-auto">
|
|
<div className="mb-6">
|
|
<h2 className="text-xl font-semibold text-white mb-2">Create Your Profile</h2>
|
|
<p className="text-gray-400 text-sm">
|
|
Create your driver profile. Alpha data resets on reload, so test freely.
|
|
</p>
|
|
</div>
|
|
<CreateDriverForm />
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tabs: { id: Tab; label: string }[] = [
|
|
{ id: 'overview', label: 'Overview' },
|
|
{ id: 'statistics', label: 'Statistics' },
|
|
{ id: 'history', label: 'Race History' },
|
|
{ id: 'settings', label: 'Settings' }
|
|
];
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<Card className="mb-6">
|
|
<ProfileHeader
|
|
driver={driver}
|
|
isOwnProfile
|
|
onEditClick={() => setActiveTab('settings')}
|
|
/>
|
|
</Card>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 border-b border-charcoal-outline">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`
|
|
px-4 py-3 font-medium transition-all relative
|
|
${activeTab === tab.id
|
|
? 'text-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}
|
|
`}
|
|
>
|
|
{tab.label}
|
|
{activeTab === tab.id && (
|
|
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-6">
|
|
<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">About</h3>
|
|
{driver.bio ? (
|
|
<p className="text-gray-300 leading-relaxed">{driver.bio}</p>
|
|
) : (
|
|
<p className="text-gray-500 italic">No bio yet. Add one in settings!</p>
|
|
)}
|
|
</Card>
|
|
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Quick Stats</h3>
|
|
<div className="space-y-3">
|
|
<StatItem label="Rating" value="1450" color="text-primary-blue" />
|
|
<StatItem label="Safety" value="92%" color="text-green-400" />
|
|
<StatItem label="Sportsmanship" value="4.8/5" color="text-warning-amber" />
|
|
<StatItem label="Total Races" value="147" color="text-white" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Preferences</h3>
|
|
<div className="space-y-3">
|
|
<PreferenceItem icon="🏎️" label="Favorite Car" value="Porsche 911 GT3 R" />
|
|
<PreferenceItem icon="🏁" label="Favorite Series" value="Endurance" />
|
|
<PreferenceItem icon="⚔️" label="Competitive Level" value="Competitive" />
|
|
<PreferenceItem icon="🌍" label="Regions" value="EU, NA" />
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-white mb-4">Team</h3>
|
|
{(() => {
|
|
const currentDriverId = getCurrentDriverId();
|
|
const teamData = getDriverTeam(currentDriverId);
|
|
|
|
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 hover:border-charcoal-outline/60 transition-colors cursor-pointer"
|
|
onClick={() => router.push(`/teams/${team.id}`)}
|
|
>
|
|
<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 className="flex-1">
|
|
<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-8">
|
|
<p className="text-gray-400 mb-4">You're not on a team yet</p>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => router.push('/teams')}
|
|
>
|
|
Browse Teams
|
|
</Button>
|
|
</div>
|
|
);
|
|
})()}
|
|
</Card>
|
|
</div>
|
|
|
|
<CareerHighlights />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'statistics' && (
|
|
<div className="space-y-6">
|
|
<ProfileStats driverId={driver.id} />
|
|
<RatingBreakdown />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'history' && (
|
|
<ProfileRaceHistory />
|
|
)}
|
|
|
|
{activeTab === 'settings' && (
|
|
<ProfileSettings driver={driver} onSave={handleSaveSettings} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatItem({ label, value, color }: { label: string; value: string; color: string }) {
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-400 text-sm">{label}</span>
|
|
<span className={`font-semibold ${color}`}>{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PreferenceItem({ icon, label, value }: { icon: string; label: string; value: string }) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">{icon}</span>
|
|
<div className="flex-1">
|
|
<div className="text-xs text-gray-500">{label}</div>
|
|
<div className="text-white text-sm">{value}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |