133 lines
4.1 KiB
TypeScript
133 lines
4.1 KiB
TypeScript
// 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>
|
|
</>
|
|
);
|
|
}
|