256 lines
10 KiB
TypeScript
256 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Trophy, Medal, Search, ArrowLeft } from 'lucide-react';
|
|
import Button from '@/components/ui/Button';
|
|
import Heading from '@/components/ui/Heading';
|
|
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
|
|
import DriverRankingsFilter from '@/components/DriverRankingsFilter';
|
|
import DriverTopThreePodium from '@/components/DriverTopThreePodium';
|
|
import Image from 'next/image';
|
|
|
|
// ============================================================================
|
|
// TYPES
|
|
// ============================================================================
|
|
|
|
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
|
type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
|
|
|
|
interface DriverRankingsTemplateProps {
|
|
drivers: DriverLeaderboardItemViewModel[];
|
|
searchQuery: string;
|
|
selectedSkill: 'all' | SkillLevel;
|
|
sortBy: SortBy;
|
|
showFilters: boolean;
|
|
onSearchChange: (query: string) => void;
|
|
onSkillChange: (skill: 'all' | SkillLevel) => void;
|
|
onSortChange: (sort: SortBy) => void;
|
|
onToggleFilters: () => void;
|
|
onDriverClick: (id: string) => void;
|
|
onBackToLeaderboards: () => void;
|
|
}
|
|
|
|
// ============================================================================
|
|
// HELPER FUNCTIONS
|
|
// ============================================================================
|
|
|
|
const getMedalColor = (position: number) => {
|
|
switch (position) {
|
|
case 1: return 'text-yellow-400';
|
|
case 2: return 'text-gray-300';
|
|
case 3: return 'text-amber-600';
|
|
default: return 'text-gray-500';
|
|
}
|
|
};
|
|
|
|
const getMedalBg = (position: number) => {
|
|
switch (position) {
|
|
case 1: return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
|
|
case 2: return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
|
|
case 3: return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
|
|
default: return 'bg-iron-gray/50 border-charcoal-outline';
|
|
}
|
|
};
|
|
|
|
// ============================================================================
|
|
// MAIN TEMPLATE COMPONENT
|
|
// ============================================================================
|
|
|
|
export default function DriverRankingsTemplate({
|
|
drivers,
|
|
searchQuery,
|
|
selectedSkill,
|
|
sortBy,
|
|
showFilters,
|
|
onSearchChange,
|
|
onSkillChange,
|
|
onSortChange,
|
|
onToggleFilters,
|
|
onDriverClick,
|
|
onBackToLeaderboards,
|
|
}: DriverRankingsTemplateProps) {
|
|
// Filter drivers
|
|
const filteredDrivers = drivers.filter((driver) => {
|
|
const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
driver.nationality.toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchesSkill = selectedSkill === 'all' || driver.skillLevel === selectedSkill;
|
|
return matchesSearch && matchesSkill;
|
|
});
|
|
|
|
// Sort drivers
|
|
const sortedDrivers = [...filteredDrivers].sort((a, b) => {
|
|
const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
|
|
const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
|
|
|
|
switch (sortBy) {
|
|
case 'rank':
|
|
return rankA - rankB || b.rating - a.rating || a.name.localeCompare(b.name);
|
|
case 'rating':
|
|
return b.rating - a.rating;
|
|
case 'wins':
|
|
return b.wins - a.wins;
|
|
case 'podiums':
|
|
return b.podiums - a.podiums;
|
|
case 'winRate': {
|
|
const aRate = a.racesCompleted > 0 ? a.wins / a.racesCompleted : 0;
|
|
const bRate = b.racesCompleted > 0 ? b.wins / b.racesCompleted : 0;
|
|
return bRate - aRate;
|
|
}
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 pb-12">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onBackToLeaderboards}
|
|
className="flex items-center gap-2 mb-6"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Back to Leaderboards
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-4 mb-2">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
|
|
<Trophy className="w-7 h-7 text-primary-blue" />
|
|
</div>
|
|
<div>
|
|
<Heading level={1} className="text-3xl lg:text-4xl">
|
|
Driver Leaderboard
|
|
</Heading>
|
|
<p className="text-gray-400">Full rankings of all drivers by performance metrics</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top 3 Podium */}
|
|
{!searchQuery && sortBy === 'rank' && <DriverTopThreePodium drivers={sortedDrivers} onDriverClick={onDriverClick} />}
|
|
|
|
{/* Filters */}
|
|
<DriverRankingsFilter
|
|
searchQuery={searchQuery}
|
|
onSearchChange={onSearchChange}
|
|
selectedSkill={selectedSkill}
|
|
onSkillChange={onSkillChange}
|
|
sortBy={sortBy}
|
|
onSortChange={onSortChange}
|
|
showFilters={showFilters}
|
|
onToggleFilters={onToggleFilters}
|
|
/>
|
|
|
|
{/* Leaderboard Table */}
|
|
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
|
{/* Table Header */}
|
|
<div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div className="col-span-1 text-center">Rank</div>
|
|
<div className="col-span-5 lg:col-span-4">Driver</div>
|
|
<div className="col-span-2 text-center hidden md:block">Races</div>
|
|
<div className="col-span-2 lg:col-span-1 text-center">Rating</div>
|
|
<div className="col-span-2 lg:col-span-1 text-center">Wins</div>
|
|
<div className="col-span-1 text-center hidden lg:block">Podiums</div>
|
|
<div className="col-span-2 text-center">Win Rate</div>
|
|
</div>
|
|
|
|
{/* Table Body */}
|
|
<div className="divide-y divide-charcoal-outline/50">
|
|
{sortedDrivers.map((driver, index) => {
|
|
const winRate = driver.racesCompleted > 0 ? ((driver.wins / driver.racesCompleted) * 100).toFixed(1) : '0.0';
|
|
const position = index + 1;
|
|
|
|
return (
|
|
<button
|
|
key={driver.id}
|
|
type="button"
|
|
onClick={() => onDriverClick(driver.id)}
|
|
className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
|
>
|
|
{/* Position */}
|
|
<div className="col-span-1 flex items-center justify-center">
|
|
<div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
|
|
{position <= 3 ? <Medal className="w-4 h-4" /> : position}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Driver Info */}
|
|
<div className="col-span-5 lg:col-span-4 flex items-center gap-3">
|
|
<div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
|
|
<Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
|
|
{driver.name}
|
|
</p>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500">
|
|
<span className="flex items-center gap-1">
|
|
{driver.nationality}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
{driver.skillLevel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Races */}
|
|
<div className="col-span-2 items-center justify-center hidden md:flex">
|
|
<span className="text-gray-400">{driver.racesCompleted}</span>
|
|
</div>
|
|
|
|
{/* Rating */}
|
|
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
|
<span className={`font-mono font-semibold ${sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
|
|
{driver.rating.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Wins */}
|
|
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
|
<span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
|
|
{driver.wins}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Podiums */}
|
|
<div className="col-span-1 items-center justify-center hidden lg:flex">
|
|
<span className={`font-mono font-semibold ${sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
|
|
{driver.podiums}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Win Rate */}
|
|
<div className="col-span-2 flex items-center justify-center">
|
|
<span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
|
|
{winRate}%
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{sortedDrivers.length === 0 && (
|
|
<div className="py-16 text-center">
|
|
<Search className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
|
<p className="text-gray-400 mb-2">No drivers found</p>
|
|
<p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
onSearchChange('');
|
|
onSkillChange('all');
|
|
}}
|
|
className="mt-4"
|
|
>
|
|
Clear Filters
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |