Nice and stable before liveview

This commit is contained in:
2025-10-29 20:38:39 +00:00
parent 76586c0df2
commit 4a8d6bc5d7
21 changed files with 1135 additions and 270 deletions
-214
View File
@@ -86,220 +86,6 @@ export async function GET(request: Request) {
}
}
// POST endpoint for updating driver data (optional, for future use)
export async function POST(request: Request) {
try {
const body = await request.json();
// Add your update logic here
// Example: Update driver rank, stats, etc.
return NextResponse.json({
success: true,
message: 'Driver updated',
});
} catch (error) {
console.error('Error updating driver:', error);
return NextResponse.json(
{ success: false, error: 'Failed to update driver' },
{ status: 500 }
);
}
}// app/api/drivers/route.ts
// API Route: GET /api/drivers
// Returns all connected drivers with their server info
import { NextResponse } from 'next/server';
import { query } from '@/lib/db';
import { DriverWithServer } from '@/types/racing';
export async function GET(request: Request) {
try {
// Parse query params (e.g., ?connected=true)
const { searchParams } = new URL(request.url);
const connectedOnly = searchParams.get('connected') === 'true';
// SQL query - joins drivers with servers
const sql = `
SELECT
u.driver_guid,
u.driver_name,
u.driver_team,
u.car_model,
u.car_skin,
u.cuts_alltime,
u.contacts_alltime,
u.laps_completed,
u.user_rank,
u.is_connect,
u.is_loading,
u.current_server,
u.created_at,
s.server_id,
s.server_name,
s.server_track,
s.session_type,
s.session_flag,
s.connected_players
FROM users u
LEFT JOIN servers s ON u.current_server = s.server_id
${connectedOnly ? 'WHERE u.is_connect = true' : ''}
ORDER BY u.user_rank ASC
`;
const rows = await query(sql);
// Transform to proper structure
const drivers: DriverWithServer[] = rows.map((row: any) => ({
driver_guid: row.driver_guid,
driver_name: row.driver_name,
driver_team: row.driver_team,
car_model: row.car_model,
car_skin: row.car_skin,
cuts_alltime: row.cuts_alltime,
contacts_alltime: row.contacts_alltime,
laps_completed: row.laps_completed,
user_rank: row.user_rank,
is_connect: row.is_connect,
is_loading: row.is_loading,
current_server: row.current_server,
created_at: row.created_at,
// Include server info if they're connected
server: row.server_id ? {
server_id: row.server_id,
server_name: row.server_name,
server_track: row.server_track,
session_type: row.session_type,
session_flag: row.session_flag,
connected_players: row.connected_players,
} : undefined,
}));
return NextResponse.json({
success: true,
data: drivers,
count: drivers.length,
});
} catch (error) {
console.error('Error fetching drivers:', error);
return NextResponse.json(
{
success: false,
error: 'Failed to fetch drivers'
},
{ status: 500 }
);
}
}
// POST endpoint for updating driver data (optional, for future use)
export async function POST(request: Request) {
try {
const body = await request.json();
// Add your update logic here
// Example: Update driver rank, stats, etc.
return NextResponse.json({
success: true,
message: 'Driver updated',
});
} catch (error) {
console.error('Error updating driver:', error);
return NextResponse.json(
{ success: false, error: 'Failed to update driver' },
{ status: 500 }
);
}
}// app/api/drivers/route.ts
// API Route: GET /api/drivers
// Returns all connected drivers with their server info
import { NextResponse } from 'next/server';
import { query } from '@/lib/db';
import { DriverWithServer } from '@/types/racing';
export async function GET(request: Request) {
try {
// Parse query params (e.g., ?connected=true)
const { searchParams } = new URL(request.url);
const connectedOnly = searchParams.get('connected') === 'true';
// SQL query - joins drivers with servers
const sql = `
SELECT
u.driver_guid,
u.driver_name,
u.driver_team,
u.car_model,
u.car_skin,
u.cuts_alltime,
u.contacts_alltime,
u.laps_completed,
u.user_rank,
u.is_connect,
u.is_loading,
u.current_server,
u.created_at,
s.server_id,
s.server_name,
s.server_track,
s.session_type,
s.session_flag,
s.connected_players
FROM users u
LEFT JOIN servers s ON u.current_server = s.server_id
${connectedOnly ? 'WHERE u.is_connect = true' : ''}
ORDER BY u.user_rank ASC
`;
const rows = await query(sql);
// Transform to proper structure
const drivers: DriverWithServer[] = rows.map((row: any) => ({
driver_guid: row.driver_guid,
driver_name: row.driver_name,
driver_team: row.driver_team,
car_model: row.car_model,
car_skin: row.car_skin,
cuts_alltime: row.cuts_alltime,
contacts_alltime: row.contacts_alltime,
laps_completed: row.laps_completed,
user_rank: row.user_rank,
is_connect: row.is_connect,
is_loading: row.is_loading,
current_server: row.current_server,
created_at: row.created_at,
// Include server info if they're connected
server: row.server_id ? {
server_id: row.server_id,
server_name: row.server_name,
server_track: row.server_track,
session_type: row.session_type,
session_flag: row.session_flag,
connected_players: row.connected_players,
} : undefined,
}));
return NextResponse.json({
success: true,
data: drivers,
count: drivers.length,
});
} catch (error) {
console.error('Error fetching drivers:', error);
return NextResponse.json(
{
success: false,
error: 'Failed to fetch drivers'
},
{ status: 500 }
);
}
}
// POST endpoint for updating driver data (optional, for future use)
export async function POST(request: Request) {
try {
+22
View File
@@ -0,0 +1,22 @@
// app/api/events/cars/route.ts
// API endpoint to get available cars from server config
import { NextResponse } from 'next/server';
import { getAvailableCars } from '@/lib/serverConfig';
export async function GET() {
try {
const cars = await getAvailableCars();
return NextResponse.json({
success: true,
data: cars,
});
} catch (error) {
console.error('Error fetching cars:', error);
return NextResponse.json(
{ success: false, error: 'Failed to load available cars' },
{ status: 500 }
);
}
}
+2 -3
View File
@@ -20,16 +20,15 @@ export async function POST(request: Request) {
}
// Validate steamId format to prevent SQL injection
const steamId = inputSteamId.trim(); // just in case
const driverGuid = steamId.trim(); // just in case
if (!/^[0-9]{15,20}$/.test(steamId)) {
if (!/^[0-9]{15,20}$/.test(driverGuid)) {
return NextResponse.json(
{ success: false, error: "Invalid Steam ID format" },
{ status: 400 }
);
}
const driverGuid = steamId;
console.log('Parsed driver GUID:', driverGuid);
if (isNaN(driverGuid)) {
return NextResponse.json(
+89
View File
@@ -0,0 +1,89 @@
// app/api/live/telemetry/route.ts
// Server-Sent Events endpoint streaming from C++ Unix socket
import { getTelemetryBridge } from '@/lib/telemetryBridge';
export const dynamic = 'force-dynamic';
export const runtime = 'nodejs';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const serverId = searchParams.get('serverId');
const filterServerId = serverId ? parseInt(serverId) : null;
const encoder = new TextEncoder();
const bridge = getTelemetryBridge();
const stream = new ReadableStream({
start(controller) {
console.log('[SSE] Client connected', filterServerId ? `(server ${filterServerId})` : '(all servers)');
// Send initial connection message
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
type: 'connected',
bridge_status: bridge.isConnected() ? 'connected' : 'connecting'
})}\n\n`));
// Subscribe to telemetry updates
const unsubscribe = bridge.subscribe((packet) => {
// Filter by server if specified
if (filterServerId && packet.server_id !== filterServerId) {
return;
}
// Transform to client format
const telemetry = {
type: 'update',
timestamp: Date.now(),
server_id: packet.server_id,
cars: packet.cars.map((car, index) => ({
carID: car.carID,
driver_guid: car.driver_guid,
driver_name: car.driver_name,
car_model: car.car_model,
position: car.position || index + 1,
current_lap: car.current_lap,
normalizedSplinePos: car.normalizedSplinePos,
speed: Math.round(car.speed_kmh),
gear: car.gear,
rpm: car.rpm,
last_lap_time: car.last_lap_time || null,
best_lap_time: car.best_lap_time || null,
})),
};
try {
controller.enqueue(encoder.encode(`data: ${JSON.stringify(telemetry)}\n\n`));
} catch (error) {
console.error('[SSE] Error sending data:', error);
}
});
// Heartbeat every 30 seconds
const heartbeat = setInterval(() => {
try {
controller.enqueue(encoder.encode(`: heartbeat\n\n`));
} catch (error) {
clearInterval(heartbeat);
}
}, 30000);
// Cleanup on connection close
request.signal.addEventListener('abort', () => {
console.log('[SSE] Client disconnected');
unsubscribe();
clearInterval(heartbeat);
controller.close();
});
},
});
return new Response(stream, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'X-Accel-Buffering': 'no', // Disable nginx buffering
},
});
}
+3 -1
View File
@@ -4,6 +4,8 @@
import { query } from '@/lib/db';
import { DriverWithServer } from '@/types/racing';
import { UsersIcon, ServerIcon, ActivityIcon, MapPinIcon, FlagIcon, LiveDotIcon } from '@/components/ui/icons';
import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
export const dynamic = "force-dynamic";
async function getConnectedDrivers(): Promise<DriverWithServer[]> {
const sql = `
@@ -130,7 +132,7 @@ export default async function DashboardPage() {
ID: {server?.server_id}
</span>
</div>
<h2 className="text-2xl font-bold tracking-tight">
<h2 className="text-2xl font-light tracking-tight" style={{ letterSpacing: "0.1em" }}>
{server?.server_name}
</h2>
<div className="flex flex-wrap gap-x-6 gap-y-2">
+1 -1
View File
@@ -49,7 +49,7 @@ function formatDate(date: Date): string {
export default async function EventDetailPage({
params,
}: {
params: Promise<{ id: string }>;
params: Promise<{ event_id: string }>;
}) {
const { event_id } = await params;
+2 -1
View File
@@ -5,6 +5,7 @@ import { query } from '@/lib/db';
import { Event } from '@/types/racing';
import Link from 'next/link';
import { TrophyIcon, UsersIcon, MapPinIcon, ClockIcon, CalendarIcon } from '@/components/ui/icons';
export const dynamic = "force-dynamic";
async function getEvents(): Promise<Event[]> {
const sql = `
@@ -75,7 +76,7 @@ export default async function EventsPage() {
<div key={event.event_id} className="border border-white/10 sharp-border bg-black">
<img
src="https://openwheels.racing/files/img/EnduranceEvents1-1.png"
src="https://openwheels.racing/files/img/EnduranceEvents1-1.png?fckcache=999"
alt={event.event_name}
className="w-full h-48 object-cover object-[50%_0%] border-b border-white/10 grayscale hover:grayscale-0 transition duration-300"
/>
+2 -2
View File
@@ -10,10 +10,10 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: 'BBH Sans Bartle', sans-serif;
letter-spacing: -0.02em;
letter-spacing: +0.07em;
}
span p a{
span {
letter-spacing: +0.08em;
}
+132
View File
@@ -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>
</>
);
}
+1
View File
@@ -4,6 +4,7 @@
import Link from 'next/link';
import { query } from '@/lib/db';
import { TrophyIcon, ChartIcon, CircleIcon, UsersIcon, ServerIcon, ActivityIcon } from '@/components/ui/icons';
export const dynamic = "force-dynamic";
async function getStats() {
const driversOnline = await query(`
+2 -1
View File
@@ -4,6 +4,7 @@
import { query } from '@/lib/db';
import { TrophyIcon } from '@/components/ui/icons';
import Link from 'next/link';
export const dynamic = "force-dynamic";
interface RankingDriver {
driver_guid: string;
@@ -178,7 +179,7 @@ export default async function RankingsPage({
)}
</td>
<td className="px-6 py-4">
<span className="font-semibold tracking-tight text-base" style={{ letterSpacing: "0.1em" }}>
<span className="tracking-tight text-base" style={{ letterSpacing: "0.04em" }}>
{driver.driver_name}
</span>
</td>