wip

apps/website/components/leagues/LeagueCard.tsx

@@ -2,8 +2,17 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
+import {
+  Trophy,
+  Users,
+  Flag,
+  Award,
+  Gamepad2,
+  Calendar,
+  ChevronRight,
+  Sparkles,
+} from 'lucide-react';
 import type { LeagueSummaryDTO } from '@gridpilot/racing/application/dto/LeagueSummaryDTO';
-import Card from '../ui/Card';
 import { getLeagueCoverClasses } from '@/lib/leagueCovers';
 import { getImageService } from '@/lib/di-container';
 
@@ -12,133 +21,214 @@ interface LeagueCardProps {
   onClick?: () => void;
 }
 
+function getChampionshipIcon(type?: string) {
+  switch (type) {
+    case 'driver':
+      return Trophy;
+    case 'team':
+      return Users;
+    case 'nations':
+      return Flag;
+    case 'trophy':
+      return Award;
+    default:
+      return Trophy;
+  }
+}
+
+function getChampionshipLabel(type?: string) {
+  switch (type) {
+    case 'driver':
+      return 'Driver';
+    case 'team':
+      return 'Team';
+    case 'nations':
+      return 'Nations';
+    case 'trophy':
+      return 'Trophy';
+    default:
+      return 'Championship';
+  }
+}
+
+function getGameColor(gameId?: string): string {
+  switch (gameId) {
+    case 'iracing':
+      return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
+    case 'acc':
+      return 'bg-green-500/20 text-green-400 border-green-500/30';
+    case 'f1-23':
+    case 'f1-24':
+      return 'bg-red-500/20 text-red-400 border-red-500/30';
+    default:
+      return 'bg-primary-blue/20 text-primary-blue border-primary-blue/30';
+  }
+}
+
+function isNewLeague(createdAt: Date): boolean {
+  const oneWeekAgo = new Date();
+  oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+  return new Date(createdAt) > oneWeekAgo;
+}
+
 export default function LeagueCard({ league, onClick }: LeagueCardProps) {
   const imageService = getImageService();
   const coverUrl = imageService.getLeagueCover(league.id);
   const logoUrl = imageService.getLeagueLogo(league.id);
+  
+  const ChampionshipIcon = getChampionshipIcon(league.scoring?.primaryChampionshipType);
+  const championshipLabel = getChampionshipLabel(league.scoring?.primaryChampionshipType);
+  const gameColorClass = getGameColor(league.scoring?.gameId);
+  const isNew = isNewLeague(league.createdAt);
+  const isTeamLeague = league.maxTeams && league.maxTeams > 0;
+  
+  // Calculate fill percentage - use teams for team leagues, drivers otherwise
+  const usedSlots = isTeamLeague ? (league.usedTeamSlots ?? 0) : (league.usedDriverSlots ?? 0);
+  const maxSlots = isTeamLeague ? (league.maxTeams ?? 0) : (league.maxDrivers ?? 0);
+  const fillPercentage = maxSlots > 0 ? (usedSlots / maxSlots) * 100 : 0;
+  const hasOpenSlots = maxSlots > 0 && usedSlots < maxSlots;
+  
+  // Determine slot label based on championship type
+  const getSlotLabel = () => {
+    if (isTeamLeague) return 'Teams';
+    if (league.scoring?.primaryChampionshipType === 'nations') return 'Nations';
+    return 'Drivers';
+  };
+  const slotLabel = getSlotLabel();
 
   return (
     <div
-      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
+      className="group relative cursor-pointer h-full"
       onClick={onClick}
     >
-      <Card>
-        <div className="space-y-3">
-          <div className={getLeagueCoverClasses(league.id)} aria-hidden="true">
-            <div className="relative w-full h-full">
-              <Image
-                src={coverUrl}
-                alt={`${league.name} cover`}
-                fill
-                className="object-cover opacity-80"
-                sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
-              />
-              <div className="absolute left-4 bottom-4 flex items-center">
-                <div className="w-10 h-10 rounded-full overflow-hidden border border-charcoal-outline/80 bg-deep-graphite/80 shadow-[0_0_10px_rgba(0,0,0,0.6)]">
-                  <Image
-                    src={logoUrl}
-                    alt={`${league.name} logo`}
-                    width={40}
-                    height={40}
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              </div>
-            </div>
+      {/* Card Container */}
+      <div className="relative h-full rounded-xl bg-iron-gray border border-charcoal-outline overflow-hidden transition-all duration-200 hover:border-primary-blue/50 hover:shadow-[0_0_30px_rgba(25,140,255,0.15)] hover:bg-iron-gray/80">
+        {/* Cover Image */}
+        <div className="relative h-32 overflow-hidden">
+          <Image
+            src={coverUrl}
+            alt={`${league.name} cover`}
+            fill
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+            sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
+          />
+          {/* Gradient Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-iron-gray via-iron-gray/60 to-transparent" />
+          
+          {/* Badges - Top Left */}
+          <div className="absolute top-3 left-3 flex items-center gap-2">
+            {isNew && (
+              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-performance-green/20 text-performance-green border border-performance-green/30">
+                <Sparkles className="w-3 h-3" />
+                NEW
+              </span>
+            )}
+            {league.scoring?.gameName && (
+              <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold border ${gameColorClass}`}>
+                {league.scoring.gameName}
+              </span>
+            )}
           </div>
 
-          <div className="flex items-start justify-between">
-            <h3 className="text-xl font-semibold text-white">{league.name}</h3>
-            <span className="text-xs text-gray-500">
-              {new Date(league.createdAt).toLocaleDateString()}
+          {/* Championship Type Badge - Top Right */}
+          <div className="absolute top-3 right-3">
+            <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-deep-graphite/80 text-gray-300 border border-charcoal-outline">
+              <ChampionshipIcon className="w-3 h-3" />
+              {championshipLabel}
             </span>
           </div>
-          
-          <p className="text-gray-400 text-sm line-clamp-2">
-            {league.description}
-          </p>
 
-          {league.structureSummary && (
-            <p className="text-xs text-gray-400">
-              {league.structureSummary}
-            </p>
-          )}
-          {league.scoringPatternSummary && (
-            <p className="text-xs text-gray-400">
-              {league.scoringPatternSummary}
-            </p>
-          )}
-          {league.timingSummary && (
-            <p className="text-xs text-gray-400">
-              {league.timingSummary}
-            </p>
-          )}
-          
-          <div className="flex items-center justify-between pt-2 border-t border-charcoal-outline">
-            <div className="flex flex-col text-xs text-gray-500">
-              <span>
-                Owner:{' '}
-                <Link
-                  href={`/drivers/${league.ownerId}?from=league&leagueId=${league.id}`}
-                  className="text-primary-blue hover:underline"
-                >
-                  {league.ownerId.slice(0, 8)}...
-                </Link>
-              </span>
-              <span className="mt-1 text-gray-400">
-                Drivers:{' '}
-                <span className="text-white font-medium">
-                  {typeof league.usedDriverSlots === 'number'
-                    ? league.usedDriverSlots
-                    : '—'}
-                </span>
-                {' / '}
-                <span className="text-gray-300">
-                  {league.maxDrivers ?? '—'}
-                </span>
-              </span>
-              {typeof league.usedTeamSlots === 'number' ||
-              typeof league.maxTeams === 'number' ? (
-                <span className="mt-0.5 text-gray-400">
-                  Teams:{' '}
-                  <span className="text-white font-medium">
-                    {typeof league.usedTeamSlots === 'number'
-                      ? league.usedTeamSlots
-                      : '—'}
-                  </span>
-                  {' / '}
-                  <span className="text-gray-300">
-                    {league.maxTeams ?? '—'}
-                  </span>
-                </span>
-              ) : null}
-            </div>
-            <div className="flex flex-col items-end text-xs text-gray-400">
-              {league.scoring ? (
-                <>
-                  <span className="text-primary-blue font-semibold">
-                    {league.scoring.gameName}
-                  </span>
-                  <span className="mt-0.5">
-                    {league.scoring.primaryChampionshipType === 'driver'
-                      ? 'Driver championship'
-                      : league.scoring.primaryChampionshipType === 'team'
-                      ? 'Team championship'
-                      : league.scoring.primaryChampionshipType === 'nations'
-                      ? 'Nations championship'
-                      : 'Trophy championship'}
-                  </span>
-                  <span className="mt-0.5">
-                    {league.scoring.scoringPatternSummary}
-                  </span>
-                </>
-              ) : (
-                <span className="text-gray-500">Scoring: Not configured</span>
-              )}
+          {/* Logo */}
+          <div className="absolute left-4 -bottom-6 z-10">
+            <div className="w-12 h-12 rounded-lg overflow-hidden border-2 border-iron-gray bg-deep-graphite shadow-xl">
+              <Image
+                src={logoUrl}
+                alt={`${league.name} logo`}
+                width={48}
+                height={48}
+                className="w-full h-full object-cover"
+              />
             </div>
           </div>
         </div>
-      </Card>
+
+        {/* Content */}
+        <div className="pt-8 px-4 pb-4 flex flex-col flex-1">
+          {/* Title & Description */}
+          <h3 className="text-base font-semibold text-white mb-1 line-clamp-1 group-hover:text-primary-blue transition-colors">
+            {league.name}
+          </h3>
+          <p className="text-xs text-gray-500 line-clamp-2 mb-3 h-8">
+            {league.description || 'No description available'}
+          </p>
+
+          {/* Stats Row */}
+          <div className="flex items-center gap-3 mb-3">
+            {/* Primary Slots (Drivers/Teams/Nations) */}
+            <div className="flex-1">
+              <div className="flex items-center justify-between text-[10px] text-gray-500 mb-1">
+                <span>{slotLabel}</span>
+                <span className="text-gray-400">
+                  {usedSlots}/{maxSlots || '∞'}
+                </span>
+              </div>
+              <div className="h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all ${
+                    fillPercentage >= 90
+                      ? 'bg-warning-amber'
+                      : fillPercentage >= 70
+                      ? 'bg-primary-blue'
+                      : 'bg-performance-green'
+                  }`}
+                  style={{ width: `${Math.min(fillPercentage, 100)}%` }}
+                />
+              </div>
+            </div>
+
+            {/* Open Slots Badge */}
+            {hasOpenSlots && (
+              <div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-neon-aqua/10 border border-neon-aqua/20">
+                <span className="w-1.5 h-1.5 rounded-full bg-neon-aqua animate-pulse" />
+                <span className="text-[10px] text-neon-aqua font-medium">
+                  {maxSlots - usedSlots} open
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Driver count for team leagues */}
+          {isTeamLeague && (
+            <div className="flex items-center gap-2 mb-3 text-[10px] text-gray-500">
+              <Users className="w-3 h-3" />
+              <span>
+                {league.usedDriverSlots ?? 0}/{league.maxDrivers ?? '∞'} drivers
+              </span>
+            </div>
+          )}
+
+          {/* Spacer to push footer to bottom */}
+          <div className="flex-1" />
+
+          {/* Footer Info */}
+          <div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50 mt-auto">
+            <div className="flex items-center gap-3 text-[10px] text-gray-500">
+              {league.timingSummary && (
+                <span className="flex items-center gap-1">
+                  <Calendar className="w-3 h-3" />
+                  {league.timingSummary.split('•')[1]?.trim() || league.timingSummary}
+                </span>
+              )}
+            </div>
+            
+            {/* View Arrow */}
+            <div className="flex items-center gap-1 text-[10px] text-gray-500 group-hover:text-primary-blue transition-colors">
+              <span>View</span>
+              <ChevronRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }