Feature: Live Map and Events Tab

2025-11-02 20:59:28 +00:00
parent 4a8d6bc5d7
commit 8de538cc29
13 changed files with 1391 additions and 388 deletions
@@ -0,0 +1,144 @@
+// components/events/EventResultsClient.tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import { TrophyIcon, UsersIcon, FlagIcon } from '@/components/ui/icons';
+
+interface TeamStanding {
+  team_id: number;
+  team_name: string;
+  total_points: number;
+  races_participated: number;
+  best_finish: number;
+  drivers: {
+    driver_guid: string;
+    driver_name: string;
+    position: number;
+    points_awarded: number;
+    dnf: boolean;
+  }[];
+}
+
+function getPositionColor(position: number): string {
+  if (position === 1) return 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400';
+  if (position === 2) return 'bg-gray-400/20 border-gray-400/50 text-gray-300';
+  if (position === 3) return 'bg-orange-600/20 border-orange-600/50 text-orange-400';
+  return 'bg-white/5 border-white/10 text-white/60';
+}
+
+export default function EventResultsClient({ 
+  eventId, 
+  initialStandings 
+}: { 
+  eventId: string; 
+  initialStandings: TeamStanding[] 
+}) {
+  const [standings, setStandings] = useState<TeamStanding[]>(initialStandings);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Auto-refresh every 5 seconds
+  useEffect(() => {
+    const fetchResults = async () => {
+      try {
+        setIsLoading(true);
+        const response = await fetch(`/api/events/${eventId}/results`);
+        const data = await response.json();
+        setStandings(data.standings);
+      } catch (error) {
+        console.error('[Results] Failed to fetch:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const interval = setInterval(fetchResults, 5000);
+    return () => clearInterval(interval);
+  }, [eventId]);
+
+  if (standings.length === 0) {
+    return (
+      <div className="border border-white/10 p-16 text-center bg-black">
+        <TrophyIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
+        <p className="text-white/40 text-base tracking-wider">NO RESULTS YET</p>
+        <p className="text-white/20 text-sm mt-2">Results will appear after the event concludes</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`space-y-4 transition-opacity ${isLoading ? 'opacity-70' : 'opacity-100'}`}>
+      {standings.map((team: TeamStanding, index: number) => (
+        <div 
+          key={team.team_id}
+          className={`border p-6 transition-all ${getPositionColor(index + 1)}`}
+        >
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex items-center space-x-4">
+              {/* Position Badge */}
+              <div className="w-16 h-16 border-2 flex items-center justify-center">
+                <span className="text-3xl font-bold">
+                  {index + 1}
+                </span>
+              </div>
+              
+              {/* Team Info */}
+              <div>
+                <h2 className="text-2xl font-bold tracking-tight">
+                  {team.team_name}
+                </h2>
+                <div className="flex items-center space-x-4 mt-2 text-sm text-white/60">
+                  <div className="flex items-center space-x-1">
+                    <UsersIcon className="w-4 h-4" />
+                    <span>{team.drivers.length} {team.drivers.length === 1 ? 'Driver' : 'Drivers'}</span>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    <FlagIcon className="w-4 h-4" />
+                    <span>Best Finish: P{team.best_finish}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Total Points */}
+            <div className="text-right">
+              <div className="text-5xl font-bold tracking-tight">
+                {team.total_points}
+              </div>
+              <div className="text-sm text-white/60 tracking-wider">POINTS</div>
+            </div>
+          </div>
+
+          {/* Driver Results */}
+          <div className="border-t border-white/10 pt-4 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {team.drivers.map((driver: any) => (
+                <div 
+                  key={driver.driver_guid}
+                  className="flex items-center justify-between p-3 bg-black/30 border border-white/5"
+                >
+                  <div className="flex items-center space-x-3">
+                    <div className={`w-8 h-8 border flex items-center justify-center text-xs font-bold ${
+                      driver.position <= 3 ? 'border-white/30' : 'border-white/10'
+                    }`}>
+                      P{driver.position}
+                    </div>
+                    <div>
+                      <div className="font-semibold text-sm">{driver.driver_name}</div>
+                      {driver.dnf && (
+                        <div className="text-xs text-red-400">DNF</div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <div className="font-bold text-lg">{driver.points_awarded}</div>
+                    <div className="text-xs text-white/40">pts</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}