wip

apps/website/components/leagues/LeagueCard.tsx

@@ -2,13 +2,13 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import type { LeagueDTO } from '@gridpilot/racing/application/dto/LeagueDTO';
+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';
 
 interface LeagueCardProps {
-  league: LeagueDTO;
+  league: LeagueSummaryDTO;
   onClick?: () => void;
 }
 
@@ -57,6 +57,22 @@ export default function LeagueCard({ league, onClick }: LeagueCardProps) {
           <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">
@@ -70,19 +86,55 @@ export default function LeagueCard({ league, onClick }: LeagueCardProps) {
                 </Link>
               </span>
               <span className="mt-1 text-gray-400">
-                Slots:{' '}
+                Drivers:{' '}
                 <span className="text-white font-medium">
-                  {typeof league.usedSlots === 'number' ? league.usedSlots : '—'}
+                  {typeof league.usedDriverSlots === 'number'
+                    ? league.usedDriverSlots
+                    : '—'}
                 </span>
                 {' / '}
                 <span className="text-gray-300">
-                  {league.settings.maxDrivers ?? '—'}
-                </span>{' '}
-                used
+                  {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="text-xs text-primary-blue font-medium">
-              {league.settings.pointsSystem.toUpperCase()}
+            <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>
+              )}
             </div>
           </div>
         </div>