Nice and stable before liveview

2025-10-29 20:38:39 +00:00
parent 76586c0df2
commit 4a8d6bc5d7
21 changed files with 1135 additions and 270 deletions
@@ -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}</>;
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}