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,132 @@
+// app/live/page.tsx
+// Live race view with track map and timing
+
+import { query } from '@/lib/db';
+import { ActivityIcon } from '@/components/ui/icons';
+import LiveSessionClient from '@/components/live/LiveSessionClient';
+export const dynamic = "force-dynamic";
+
+interface LiveData {
+  server_id: number;
+  server_name: string;
+  server_track: string;
+  server_config: string;
+  connected_players: number;
+  cars: any[];
+}
+
+async function getLiveData(): Promise<LiveData[]> {
+  const sql = `
+    SELECT 
+      s.server_id,
+      s.server_name,
+      s.server_track,
+      s.server_config,
+      s.connected_players
+    FROM servers s
+    WHERE s.connected_players > 0
+    ORDER BY s.connected_players DESC
+  `;
+
+  const servers = await query(sql);
+  
+  // For each server, get connected cars with their positions
+  const liveData = await Promise.all(
+    servers.map(async (server: any) => {
+      const carsSql = `
+        SELECT 
+          u.driver_guid,
+          u.driver_name,
+          u.car_model,
+          u.laps_completed
+        FROM users u
+        WHERE u.current_server = $1 AND u.is_connect = true
+        ORDER BY u.user_rank ASC
+      `;
+      
+      const cars = await query(carsSql, [server.server_id]);
+      
+      // Add mock data for positions (real data will come from telemetry stream)
+      const carsWithPositions = cars.map((car: any, index: number) => ({
+        ...car,
+        carID: index,
+        position: index + 1,
+        current_lap: car.laps_completed || 0,
+        normalizedSplinePos: Math.random(),
+        speed: 0,
+        gear: 0,
+        rpm: 0,
+        last_lap_time: null,
+        best_lap_time: null,
+      }));
+      
+      return {
+        ...server,
+        cars: carsWithPositions,
+      };
+    })
+  );
+
+  return liveData;
+}
+
+export default async function LivePage() {
+  const liveData = await getLiveData();
+
+  return (
+    <>
+      {/* Hero */}
+      <div className="relative border-b border-white/10 grid-overlay">
+        <div className="max-w-[1920px] mx-auto px-6 py-12">
+          <div className="space-y-4">
+            <div className="inline-flex items-center space-x-2 px-3 py-1 border border-white/20 bg-black">
+              <ActivityIcon className="w-4 h-4" />
+              <span className="text-xs font-medium tracking-wider">LIVE TIMING</span>
+            </div>
+            <h1 className="text-6xl font-bold tracking-tight">
+              LIVE VIEW
+            </h1>
+            <p className="text-white/60 text-lg max-w-3xl">
+              Real-time race positions and telemetry from active servers
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Live Sessions */}
+      <div className="max-w-[1920px] mx-auto px-6 py-12 space-y-12">
+        {liveData.length === 0 ? (
+          <div className="border border-white/10 p-16 text-center bg-black">
+            <ActivityIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
+            <p className="text-white/40 text-base tracking-wider">NO ACTIVE SESSIONS</p>
+            <p className="text-white/20 text-sm mt-2">Join a server to see live timing</p>
+          </div>
+        ) : (
+          liveData.map((session) => (
+            <LiveSessionClient
+              key={session.server_id}
+              serverId={session.server_id}
+              serverName={session.server_name}
+              serverTrack={session.server_track}
+              serverConfig={session.server_config}
+              connectedPlayers={session.connected_players}
+              initialCars={session.cars}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Info Box */}
+      <div className="max-w-[1920px] mx-auto px-6 pb-12">
+        <div className="border border-white/10 p-6 topo-lines-dense bg-black">
+          <h3 className="text-sm font-bold tracking-wider text-white/60 mb-4">ABOUT LIVE VIEW</h3>
+          <div className="space-y-2 text-sm text-white/60">
+            <p>• Data updates in real-time from UDP telemetry stream</p>
+            <p>• Track positions calculated from normalized spline position (0.0 - 1.0)</p>
+            <p>• Lap times and gaps updated every sector</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}