Nice and stable before liveview

components/events/EventRegistrationForm.tsx

@@ -1,7 +1,7 @@
 // components/events/EventRegistrationForm.tsx
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 
 export default function EventRegistrationForm({ eventId }: { eventId: number }) {
@@ -12,10 +12,35 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
     carSkin: '',
     teamName: '',
   });
+  const [availableCars, setAvailableCars] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
+  const [loadingCars, setLoadingCars] = useState(true);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
 
+  // Fetch available cars on mount
+  useEffect(() => {
+    const fetchCars = async () => {
+      try {
+        const response = await fetch('/api/events/cars');
+        const data = await response.json();
+        
+        if (data.success) {
+          setAvailableCars(data.data);
+        } else {
+          setError('Failed to load available cars');
+        }
+      } catch (err) {
+        console.error('Error fetching cars:', err);
+        setError('Failed to load available cars');
+      } finally {
+        setLoadingCars(false);
+      }
+    };
+
+    fetchCars();
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -49,6 +74,13 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
     }
   };
 
+  // Format car name for display
+  const formatCarName = (carId: string) => {
+    return carId
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, char => char.toUpperCase());
+  };
+
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* Steam ID */}
@@ -68,21 +100,32 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
         <p className="text-xs text-white/40 mt-1">Your Steam ID from the database</p>
       </div>
 
-      {/* Car Model */}
+      {/* Car Model Dropdown */}
       <div>
         <label htmlFor="carModel" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
           CAR MODEL *
         </label>
-        <input
-          type="text"
-          id="carModel"
-          required
-          value={formData.carModel}
-          onChange={(e) => setFormData({ ...formData, carModel: e.target.value })}
-          className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors font-mono"
-          placeholder="ks_ferrari_488_gt3"
-        />
-        <p className="text-xs text-white/40 mt-1">Assetto Corsa car folder name</p>
+        {loadingCars ? (
+          <div className="w-full px-4 py-3 bg-black border border-white/20 text-white/40">
+            Loading available cars...
+          </div>
+        ) : (
+          <select
+            id="carModel"
+            required
+            value={formData.carModel}
+            onChange={(e) => setFormData({ ...formData, carModel: e.target.value })}
+            className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors cursor-pointer"
+          >
+            <option value="">Select a car</option>
+            {availableCars.map((car) => (
+              <option key={car} value={car}>
+                {formatCarName(car)}
+              </option>
+            ))}
+          </select>
+        )}
+        <p className="text-xs text-white/40 mt-1">Choose from available cars for this event</p>
       </div>
 
       {/* Car Skin */}
@@ -132,7 +175,7 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
       {/* Submit Button */}
       <button
         type="submit"
-        disabled={loading || success}
+        disabled={loading || success || loadingCars}
         className="w-full px-6 py-4 border border-white hover:bg-white hover:text-black transition-all text-sm font-bold tracking-wider disabled:opacity-50 disabled:cursor-not-allowed"
       >
         {loading ? 'REGISTERING...' : success ? 'REGISTERED!' : 'REGISTER NOW'}

components/live/LiveRefreshWrapper.tsx

@@ -0,0 +1,20 @@
+// components/live/LiveRefreshWrapper.tsx
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function LiveRefreshWrapper({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Refresh every 3 seconds for live updates
+    const interval = setInterval(() => {
+      router.refresh();
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [router]);
+
+  return <>{children}</>;
+}

components/live/LiveSessionClient.tsx

@@ -0,0 +1,130 @@
+// components/live/LiveSessionClient.tsx
+'use client';
+
+import { useLiveTelemetry } from '@/hooks/useLiveTelemetry';
+import LiveTrackMap from '@/components/live/LiveTrackMap';
+import LiveTiming from '@/components/live/LiveTiming';
+import { MapPinIcon, UsersIcon, SettingsIcon, LiveDotIcon } from '@/components/ui/icons';
+import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
+
+interface LiveSessionClientProps {
+  serverId: number;
+  serverName: string;
+  serverTrack: string;
+  serverConfig: string;
+  connectedPlayers: number;
+  initialCars: any[];
+}
+
+export default function LiveSessionClient({
+  serverId,
+  serverName,
+  serverTrack,
+  serverConfig,
+  connectedPlayers,
+  initialCars,
+}: LiveSessionClientProps) {
+  const { telemetry, connected, error } = useLiveTelemetry(serverId);
+
+  // Use live telemetry if available, otherwise use initial data
+  const cars = telemetry.length > 0 ? telemetry : initialCars;
+
+  return (
+    <div className="border border-white/10 bg-black">
+      {/* Server Header */}
+      <div className="border-b border-white/10 p-6 topo-lines-dense">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight mb-2">
+              {serverName}
+            </h2>
+            <div className="flex items-center space-x-4 text-sm text-white/60">
+              <div className="flex items-center space-x-1">
+                <MapPinIcon className="w-4 h-4" />
+                <span>{cleanTrackName(serverTrack)}</span>
+              </div>
+              {serverConfig && (
+                <div className="flex items-center space-x-1">
+                  <SettingsIcon className="w-4 h-4" />
+                  <span>{cleanTrackConfig(serverConfig)}</span>
+                </div>
+              )}
+              <div className="flex items-center space-x-1">
+                <UsersIcon className="w-4 h-4" />
+                <span>{connectedPlayers} drivers</span>
+              </div>
+            </div>
+          </div>
+          <div className={`flex items-center space-x-2 px-3 py-2 border ${
+            connected 
+              ? 'border-red-500/30 bg-red-500/10' 
+              : 'border-white/20 bg-white/5'
+          }`}>
+            <LiveDotIcon className={`w-2 h-2 ${connected ? 'text-red-500 animate-pulse' : 'text-white/40'}`} />
+            <span className={`text-xs font-bold tracking-wider ${
+              connected ? 'text-red-400' : 'text-white/40'
+            }`}>
+              {connected ? 'LIVE' : error ? 'OFFLINE' : 'CONNECTING'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 p-6">
+        {/* Left: Timing Board (3 columns) */}
+        <div className="lg:col-span-3">
+          <div className="border border-white/10 bg-black p-4">
+            <div className="flex items-center justify-between mb-4 border-b border-white/10 pb-3">
+              <h3 className="text-xl font-bold tracking-tight">LIVE TIMING</h3>
+              {connected && (
+                <div className="text-xs text-white/40">
+                  Updates: {telemetry.length} cars
+                </div>
+              )}
+            </div>
+            <LiveTiming entries={cars} />
+          </div>
+        </div>
+
+        {/* Right: Track Map (2 columns) */}
+        <div className="lg:col-span-2">
+          <div className="sticky top-20">
+            <LiveTrackMap
+              track={serverTrack}
+              trackConfig={serverConfig}
+              cars={cars}
+            />
+            
+            {/* Session Info */}
+            <div className="mt-4 border border-white/10 bg-black p-4">
+              <h4 className="text-sm font-bold tracking-wider text-white/60 mb-3">SESSION INFO</h4>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-white/60">Drivers:</span>
+                  <span className="font-mono">{connectedPlayers}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-white/60">Track:</span>
+                  <span className="font-mono">{cleanTrackName(serverTrack)}</span>
+                </div>
+                {serverConfig && (
+                  <div className="flex justify-between">
+                    <span className="text-white/60">Layout:</span>
+                    <span className="font-mono">{cleanTrackConfig(serverConfig)}</span>
+                  </div>
+                )}
+                <div className="flex justify-between">
+                  <span className="text-white/60">Stream:</span>
+                  <span className={`font-mono ${connected ? 'text-green-400' : 'text-red-400'}`}>
+                    {connected ? 'Connected' : 'Offline'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/live/LiveTiming.tsx

@@ -0,0 +1,125 @@
+// components/live/LiveTiming.tsx
+'use client';
+
+import { BoltIcon } from '@/components/ui/icons';
+
+interface TimingEntry {
+  position: number;
+  carID: number;
+  driver_name: string;
+  car_model: string;
+  current_lap: number;
+  last_lap_time: number | null;
+  best_lap_time: number | null;
+  gap_to_leader: string;
+  avg_lap_time: number | null;
+}
+
+interface LiveTimingProps {
+  entries: TimingEntry[];
+}
+
+export default function LiveTiming({ entries }: LiveTimingProps) {
+  
+  // Format lap time from milliseconds
+  const formatLapTime = (ms: number | null) => {
+    if (!ms || ms === 0) return '-:--.---';
+    
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    const milliseconds = ms % 1000;
+    
+    return `${minutes}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
+  };
+
+  // Get position color
+  const getPositionColor = (position: number) => {
+    if (position === 1) return 'text-white border-white';
+    if (position === 2) return 'text-white/90 border-white/70';
+    if (position === 3) return 'text-white/80 border-white/50';
+    return 'text-white/60 border-white/20';
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Header */}
+      <div className="grid grid-cols-12 gap-2 px-3 py-2 border-b border-white/10 text-xs font-bold tracking-wider text-white/40">
+        <div className="col-span-1">POS</div>
+        <div className="col-span-4">DRIVER</div>
+        <div className="col-span-2 text-right">LAP</div>
+        <div className="col-span-3 text-right">LAST LAP</div>
+        <div className="col-span-2 text-right">BEST</div>
+      </div>
+
+      {/* Timing Entries */}
+      <div className="space-y-1">
+        {entries.map((entry) => {
+          const isLeader = entry.position === 1;
+          const isFastestLap = entries.length > 0 && 
+            entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time).map(e => e.best_lap_time!));
+
+          return (
+            <div
+              key={entry.carID}
+              className={`
+                grid grid-cols-12 gap-2 px-3 py-3 border transition-all
+                ${getPositionColor(entry.position)}
+                hover:bg-white/5
+                ${isLeader ? 'bg-white/[0.02]' : ''}
+              `}
+            >
+              {/* Position */}
+              <div className="col-span-1 flex items-center">
+                <span className="text-lg font-bold">
+                  {String(entry.position).padStart(2, '0')}
+                </span>
+              </div>
+
+              {/* Driver Info */}
+              <div className="col-span-4 flex flex-col justify-center">
+                <div className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>{entry.driver_name}</div>
+                <div className="text-xs text-white/40 font-mono truncate">{entry.car_model}</div>
+              </div>
+
+              {/* Current Lap */}
+              <div className="col-span-2 flex items-center justify-end">
+                <span className="font-mono text-sm">{entry.current_lap}</span>
+              </div>
+
+              {/* Last Lap Time */}
+              <div className="col-span-3 flex flex-col items-end justify-center">
+                <div className="font-mono text-sm">
+                  {formatLapTime(entry.last_lap_time)}
+                </div>
+                {entry.avg_lap_time && (
+                  <div className="text-xs text-white/40 font-mono">
+                    Avg: {formatLapTime(entry.avg_lap_time)}
+                  </div>
+                )}
+              </div>
+
+              {/* Best Lap Time */}
+              <div className="col-span-2 flex items-center justify-end">
+                <div className={`font-mono text-sm flex items-center space-x-1 ${isFastestLap ? 'text-purple-400' : ''}`}>
+                  <span>{formatLapTime(entry.best_lap_time)}</span>
+                  {isFastestLap && (
+                    <BoltIcon className="w-3 h-3" />
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Legend */}
+      <div className="border-t border-white/10 pt-3 px-3 text-xs text-white/40 space-y-1">
+        <div className="flex items-center space-x-2">
+          <BoltIcon className="w-3 h-3" />
+          <span>Fastest lap overall</span>
+        </div>
+        <div>Times updated in real-time from server telemetry</div>
+      </div>
+    </div>
+  );
+}

components/live/LiveTrackMap.tsx

@@ -0,0 +1,145 @@
+// components/live/LiveTrackMap.tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getTrackMapUrl, cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
+
+interface Car {
+  carID: number;
+  driver_name: string;
+  car_model: string;
+  normalizedSplinePos: number;
+  position: number;
+  lap_time?: number;
+  best_lap_time?: number;
+}
+
+interface LiveTrackMapProps {
+  track: string;
+  trackConfig: string;
+  cars: Car[];
+}
+
+export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapProps) {
+  const [imageError, setImageError] = useState(false);
+  
+  // Get cleaned track map URL
+  const trackMapUrl = getTrackMapUrl(track, trackConfig);
+  const displayTrackName = cleanTrackName(track);
+  const displayTrackConfig = cleanTrackConfig(trackConfig);
+
+  // Calculate position on track (circular approximation)
+  const getCarPosition = (normalizedPos: number) => {
+    // normalizedPos is 0.0 to 1.0 around the track
+    // We'll place cars in a circular path for now
+    const angle = normalizedPos * Math.PI * 2 - Math.PI / 2; // Start at top
+    
+    // Position relative to center (percentage)
+    const centerX = 50;
+    const centerY = 50;
+    const radius = 40; // 40% from center
+    
+    const x = centerX + Math.cos(angle) * radius;
+    const y = centerY + Math.sin(angle) * radius;
+    
+    return { x, y };
+  };
+
+  // Get color based on position
+  const getPositionColor = (position: number) => {
+    if (position === 1) return '#ffffff'; // P1 - White
+    if (position === 2) return '#d1d5db'; // P2 - Light gray
+    if (position === 3) return '#9ca3af'; // P3 - Gray
+    return '#6b7280'; // Others - Dark gray
+  };
+
+  return (
+    <div className="relative w-full aspect-square bg-black border border-white/10 overflow-hidden">
+      {/* Track Map Background */}
+      {!imageError ? (
+        <img
+          src={trackMapUrl}
+          alt={`${track} track map`}
+          className="absolute inset-0 w-full h-full object-contain opacity-60"
+          onError={() => setImageError(true)}
+        />
+      ) : (
+        <div className="absolute inset-0 flex items-center justify-center text-white/40 text-sm">
+          Track map not available
+        </div>
+      )}
+
+      {/* Grid overlay for reference */}
+      <div className="absolute inset-0 opacity-10">
+        <svg width="100%" height="100%" className="text-white">
+          <defs>
+            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="0.5"/>
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#grid)" />
+        </svg>
+      </div>
+
+      {/* Car Positions */}
+      <div className="absolute inset-0">
+        {cars.map((car) => {
+          const pos = getCarPosition(car.normalizedSplinePos);
+          const color = getPositionColor(car.position);
+          
+          return (
+            <div
+              key={car.carID}
+              className="absolute transition-all duration-300 ease-linear"
+              style={{
+                left: `${pos.x}%`,
+                top: `${pos.y}%`,
+                transform: 'translate(-50%, -50%)',
+              }}
+            >
+              {/* Car dot */}
+              <div
+                className="w-4 h-4 rounded-full border-2 animate-pulse"
+                style={{
+                  backgroundColor: color,
+                  borderColor: color,
+                  boxShadow: `0 0 10px ${color}`,
+                }}
+              />
+              
+              {/* Position number */}
+              <div
+                className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs font-bold whitespace-nowrap px-2 py-1 bg-black/80 border"
+                style={{ borderColor: color, color: color }}
+              >
+                P{car.position}
+              </div>
+
+              {/* Driver name on hover */}
+              <div className="absolute top-6 left-1/2 transform -translate-x-1/2 opacity-0 hover:opacity-100 transition-opacity whitespace-nowrap">
+                <div className="px-2 py-1 bg-black/90 border border-white/20 text-xs">
+                  {car.driver_name}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Track info overlay */}
+      <div className="absolute top-4 left-4 bg-black/80 border border-white/20 px-3 py-2">
+        <div className="text-xs font-bold tracking-wider text-white/60">TRACK</div>
+        <div className="text-sm font-mono">{track}</div>
+        {trackConfig && trackConfig !== 'default' && (
+          <div className="text-xs text-white/60">{trackConfig}</div>
+        )}
+      </div>
+
+      {/* Live indicator */}
+      <div className="absolute top-4 right-4 flex items-center space-x-2 bg-black/80 border border-white/20 px-3 py-2">
+        <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
+        <span className="text-xs font-bold tracking-wider">LIVE</span>
+      </div>
+    </div>
+  );
+}

components/ui/icons.tsx

@@ -1,4 +1,4 @@
-// components/ui/icons.tsx
+// components/ui/Icons.tsx
 // Sharp, technical SVG icons for racing dashboard
 
 export function UsersIcon({ className = "w-6 h-6" }: { className?: string }) {
@@ -91,7 +91,7 @@ export function LiveDotIcon({ className = "w-3 h-3" }: { className?: string }) {
 export function CalendarIcon({ className = "w-6 h-6" }: { className?: string }) {
   return (
     <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <rect x="3" y="4" width="18" height="18" rx="2" strokeLinecap="square" strokeLinejoin="miter"/>
+      <rect x="3" y="4" width="18" height="18" rx="0" strokeLinecap="square" strokeLinejoin="miter"/>
       <line x1="16" y1="2" x2="16" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
       <line x1="8" y1="2" x2="8" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
       <line x1="3" y1="10" x2="21" y2="10" strokeLinecap="square" strokeLinejoin="miter"/>
@@ -99,38 +99,28 @@ export function CalendarIcon({ className = "w-6 h-6" }: { className?: string })
   );
 }
 
-export function ChevronRightIcon({ className = "w-6 h-6" }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <polyline points="9 18 15 12 9 6" strokeLinecap="square" strokeLinejoin="miter"/>
-    </svg>
-  );
-}
-
-export function ChevronLeftIcon({ className = "w-6 h-6" }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <polyline points="15 18 9 12 15 6" strokeLinecap="square" strokeLinejoin="miter"/>
-    </svg>
-  );
-}
-
-export function ExternalLinkIcon({ className = "w-6 h-6" }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" strokeLinecap="square" strokeLinejoin="miter"/>
-      <polyline points="15 3 21 3 21 9" strokeLinecap="square" strokeLinejoin="miter"/>
-      <line x1="10" y1="14" x2="21" y2="3" strokeLinecap="square" strokeLinejoin="miter"/>
-    </svg>
-  );
-}
-
 export function ClockIcon({ className = "w-6 h-6" }: { className?: string }) {
-    return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-            <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
-            <polyline points="12 6 12 12 16 14" strokeLinecap="square" strokeLinejoin="miter"/>
-        </svg>
-    );
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
+      <polyline points="12 6 12 12 16 14" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
 }
 
+export function SettingsIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <circle cx="12" cy="12" r="3" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function BoltIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}