Nice and stable before liveview
This commit is contained in:
parent
76586c0df2
commit
4a8d6bc5d7
@ -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
app/api/events/cars/route.ts
Normal file
22
app/api/events/cars/route.ts
Normal 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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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
app/api/telemetry/route.ts
Normal file
89
app/api/telemetry/route.ts
Normal 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
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
|
||||
@ -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
app/live/page.tsx
Normal file
132
app/live/page.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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(`
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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'}
|
||||
|
||||
20
components/live/LiveRefreshWrapper.tsx
Normal file
20
components/live/LiveRefreshWrapper.tsx
Normal file
@ -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}</>;
|
||||
}
|
||||
130
components/live/LiveSessionClient.tsx
Normal file
130
components/live/LiveSessionClient.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
125
components/live/LiveTiming.tsx
Normal file
125
components/live/LiveTiming.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
145
components/live/LiveTrackMap.tsx
Normal file
145
components/live/LiveTrackMap.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
74
hooks/useLiveTelemetry.ts
Normal file
74
hooks/useLiveTelemetry.ts
Normal file
@ -0,0 +1,74 @@
|
||||
// hooks/useLiveTelemetry.ts
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface TelemetryCar {
|
||||
carID: number;
|
||||
driver_guid: string;
|
||||
driver_name: string;
|
||||
car_model: string;
|
||||
position: number;
|
||||
current_lap: number;
|
||||
normalizedSplinePos: number;
|
||||
speed: number;
|
||||
gear: number;
|
||||
rpm: number;
|
||||
last_lap_time: number | null;
|
||||
best_lap_time: number | null;
|
||||
}
|
||||
|
||||
interface TelemetryData {
|
||||
type: string;
|
||||
timestamp: number;
|
||||
cars: TelemetryCar[];
|
||||
}
|
||||
|
||||
export function useLiveTelemetry(serverId?: number) {
|
||||
const [telemetry, setTelemetry] = useState<TelemetryCar[]>([]);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const url = serverId
|
||||
? `/api/live/telemetry?serverId=${serverId}`
|
||||
: '/api/live/telemetry';
|
||||
|
||||
const eventSource = new EventSource(url);
|
||||
|
||||
eventSource.onopen = () => {
|
||||
console.log('[Telemetry] Connected');
|
||||
setConnected(true);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data: TelemetryData = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'connected') {
|
||||
console.log('[Telemetry] Stream established');
|
||||
} else if (data.type === 'update') {
|
||||
setTelemetry(data.cars);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[Telemetry] Parse error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = (err) => {
|
||||
console.error('[Telemetry] Connection error:', err);
|
||||
setConnected(false);
|
||||
setError('Connection lost');
|
||||
eventSource.close();
|
||||
};
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
console.log('[Telemetry] Disconnecting');
|
||||
eventSource.close();
|
||||
};
|
||||
}, [serverId]);
|
||||
|
||||
return { telemetry, connected, error };
|
||||
}
|
||||
46
lib/serverConfig.ts
Normal file
46
lib/serverConfig.ts
Normal file
@ -0,0 +1,46 @@
|
||||
// lib/serverConfig.ts
|
||||
// Parse AC server config to get available cars
|
||||
|
||||
import { promises as fs } from 'fs';
|
||||
|
||||
const SERVER_CONFIG_PATH = '/mnt/combined/servers/acserver_EVENTS/utils/cfg/server_cfg.ini';
|
||||
|
||||
export async function getAvailableCars(): Promise<string[]> {
|
||||
try {
|
||||
const content = await fs.readFile(SERVER_CONFIG_PATH, 'utf-8');
|
||||
|
||||
// Find the CARS= line
|
||||
const carsLine = content
|
||||
.split('\n')
|
||||
.find(line => line.trim().startsWith('CARS='));
|
||||
|
||||
if (!carsLine) {
|
||||
console.error('CARS line not found in server config');
|
||||
return [];
|
||||
}
|
||||
|
||||
// Extract cars list after "CARS="
|
||||
const carsString = carsLine.split('CARS=')[1].trim();
|
||||
|
||||
// Split by semicolon and remove duplicates
|
||||
const cars = carsString
|
||||
.split(';')
|
||||
.map(car => car.trim())
|
||||
.filter(car => car.length > 0);
|
||||
|
||||
// Remove duplicates using Set
|
||||
const uniqueCars = Array.from(new Set(cars));
|
||||
|
||||
return uniqueCars.sort();
|
||||
} catch (error) {
|
||||
console.error('Error reading server config:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Format car name for display (optional - makes it prettier)
|
||||
export function formatCarName(carId: string): string {
|
||||
return carId
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, char => char.toUpperCase());
|
||||
}
|
||||
202
lib/telemetryBridge.ts
Normal file
202
lib/telemetryBridge.ts
Normal file
@ -0,0 +1,202 @@
|
||||
// lib/telemetryBridge.ts
|
||||
// Bridge between C++ Unix socket and Next.js SSE
|
||||
|
||||
import { Socket } from 'net';
|
||||
|
||||
const TELEMETRY_SOCKET_PATH = '/tmp/ACtelemetry_socket';
|
||||
|
||||
interface CarTelemetry {
|
||||
carID: number;
|
||||
driver_name: string;
|
||||
driver_guid: string;
|
||||
car_model: string;
|
||||
normalizedSplinePos: number;
|
||||
speed_kmh: number;
|
||||
gear: number;
|
||||
rpm: number;
|
||||
last_lap_time: number;
|
||||
best_lap_time: number;
|
||||
current_lap: number;
|
||||
position: number;
|
||||
}
|
||||
|
||||
interface TelemetryPacket {
|
||||
server_id: number;
|
||||
car_count: number;
|
||||
cars: CarTelemetry[];
|
||||
}
|
||||
|
||||
type TelemetryCallback = (data: TelemetryPacket) => void;
|
||||
|
||||
class TelemetryBridge {
|
||||
private socket: Socket | null = null;
|
||||
private connected: boolean = false;
|
||||
private callbacks: Set<TelemetryCallback> = new Set();
|
||||
private reconnectTimeout: NodeJS.Timeout | null = null;
|
||||
private buffer: Buffer = Buffer.alloc(0);
|
||||
|
||||
constructor() {
|
||||
this.connect();
|
||||
}
|
||||
|
||||
private connect() {
|
||||
console.log('[Telemetry] Connecting to', TELEMETRY_SOCKET_PATH);
|
||||
|
||||
this.socket = new Socket();
|
||||
|
||||
this.socket.connect(TELEMETRY_SOCKET_PATH, () => {
|
||||
console.log('[Telemetry] Connected to C++ socket');
|
||||
this.connected = true;
|
||||
this.buffer = Buffer.alloc(0); // Reset buffer on new connection
|
||||
});
|
||||
|
||||
this.socket.on('data', (data: Buffer) => {
|
||||
// Append new data to buffer
|
||||
this.buffer = Buffer.concat([this.buffer, data]);
|
||||
|
||||
// Parse complete packets from buffer
|
||||
this.parsePackets();
|
||||
});
|
||||
|
||||
this.socket.on('error', (err) => {
|
||||
console.error('[Telemetry] Socket error:', err.message);
|
||||
this.connected = false;
|
||||
});
|
||||
|
||||
this.socket.on('close', () => {
|
||||
console.log('[Telemetry] Connection closed, reconnecting in 2s...');
|
||||
this.connected = false;
|
||||
this.socket = null;
|
||||
|
||||
// Reconnect after 2 seconds
|
||||
if (this.reconnectTimeout) clearTimeout(this.reconnectTimeout);
|
||||
this.reconnectTimeout = setTimeout(() => this.connect(), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
private parsePackets() {
|
||||
// Telemetry packet structure from C++:
|
||||
// uint8_t server_id (1 byte)
|
||||
// uint8_t car_count (1 byte)
|
||||
// car_telemetry cars[64] (each car = 158 bytes)
|
||||
|
||||
const HEADER_SIZE = 2;
|
||||
const CAR_SIZE = 158; // Size of car_telemetry struct
|
||||
|
||||
while (this.buffer.length >= HEADER_SIZE) {
|
||||
const server_id = this.buffer.readUInt8(0);
|
||||
const car_count = this.buffer.readUInt8(1);
|
||||
|
||||
const expected_size = HEADER_SIZE + (car_count * CAR_SIZE);
|
||||
|
||||
if (this.buffer.length < expected_size) {
|
||||
// Not enough data yet, wait for more
|
||||
break;
|
||||
}
|
||||
|
||||
// Parse the packet
|
||||
const packet: TelemetryPacket = {
|
||||
server_id,
|
||||
car_count,
|
||||
cars: [],
|
||||
};
|
||||
|
||||
let offset = HEADER_SIZE;
|
||||
|
||||
for (let i = 0; i < car_count; i++) {
|
||||
const carID = this.buffer.readUInt8(offset);
|
||||
offset += 1;
|
||||
|
||||
const driver_name = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
|
||||
offset += 64;
|
||||
|
||||
const driver_guid = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
|
||||
offset += 64;
|
||||
|
||||
const car_model = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
|
||||
offset += 64;
|
||||
|
||||
const normalizedSplinePos = this.buffer.readFloatLE(offset);
|
||||
offset += 4;
|
||||
|
||||
const speed_kmh = this.buffer.readFloatLE(offset);
|
||||
offset += 4;
|
||||
|
||||
const gear = this.buffer.readUInt8(offset);
|
||||
offset += 1;
|
||||
|
||||
const rpm = this.buffer.readUInt16LE(offset);
|
||||
offset += 2;
|
||||
|
||||
const last_lap_time = this.buffer.readUInt32LE(offset);
|
||||
offset += 4;
|
||||
|
||||
const best_lap_time = this.buffer.readUInt32LE(offset);
|
||||
offset += 4;
|
||||
|
||||
const current_lap = this.buffer.readUInt16LE(offset);
|
||||
offset += 2;
|
||||
|
||||
const position = this.buffer.readUInt8(offset);
|
||||
offset += 1;
|
||||
|
||||
packet.cars.push({
|
||||
carID,
|
||||
driver_name,
|
||||
driver_guid,
|
||||
car_model,
|
||||
normalizedSplinePos,
|
||||
speed_kmh,
|
||||
gear,
|
||||
rpm,
|
||||
last_lap_time,
|
||||
best_lap_time,
|
||||
current_lap,
|
||||
position,
|
||||
});
|
||||
}
|
||||
|
||||
// Emit packet to all callbacks
|
||||
this.callbacks.forEach(cb => cb(packet));
|
||||
|
||||
// Remove processed packet from buffer
|
||||
this.buffer = this.buffer.subarray(expected_size);
|
||||
}
|
||||
}
|
||||
|
||||
public subscribe(callback: TelemetryCallback): () => void {
|
||||
this.callbacks.add(callback);
|
||||
console.log('[Telemetry] Subscriber added, total:', this.callbacks.size);
|
||||
|
||||
// Return unsubscribe function
|
||||
return () => {
|
||||
this.callbacks.delete(callback);
|
||||
console.log('[Telemetry] Subscriber removed, total:', this.callbacks.size);
|
||||
};
|
||||
}
|
||||
|
||||
public isConnected(): boolean {
|
||||
return this.connected;
|
||||
}
|
||||
|
||||
public disconnect() {
|
||||
if (this.reconnectTimeout) {
|
||||
clearTimeout(this.reconnectTimeout);
|
||||
}
|
||||
if (this.socket) {
|
||||
this.socket.destroy();
|
||||
this.socket = null;
|
||||
}
|
||||
this.connected = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Singleton instance
|
||||
let bridge: TelemetryBridge | null = null;
|
||||
|
||||
export function getTelemetryBridge(): TelemetryBridge {
|
||||
if (!bridge) {
|
||||
bridge = new TelemetryBridge();
|
||||
}
|
||||
return bridge;
|
||||
}
|
||||
57
lib/trackUtils.ts
Normal file
57
lib/trackUtils.ts
Normal file
@ -0,0 +1,57 @@
|
||||
// lib/trackUtils.ts
|
||||
// Utility functions for track name handling
|
||||
|
||||
/**
|
||||
* Clean track name from database format
|
||||
* Example: "csp/2000/../jr_road_atlanta_2022" -> "jr_road_atlanta_2022"
|
||||
*/
|
||||
export function cleanTrackName(trackName: string): string {
|
||||
if (!trackName) return '';
|
||||
|
||||
// Split by '/' and get the last segment
|
||||
const segments = trackName.split('/');
|
||||
const lastSegment = segments[segments.length - 1];
|
||||
|
||||
return lastSegment.trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean track config name
|
||||
* Example: "csp/2000/../full" -> "full"
|
||||
*/
|
||||
export function cleanTrackConfig(configName: string): string {
|
||||
if (!configName) return '';
|
||||
|
||||
// Split by '/' and get the last segment
|
||||
const segments = configName.split('/');
|
||||
const lastSegment = segments[segments.length - 1];
|
||||
|
||||
return lastSegment.trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* Format track name for display
|
||||
* Example: "jr_road_atlanta_2022" -> "JR Road Atlanta 2022"
|
||||
*/
|
||||
export function formatTrackName(trackName: string): string {
|
||||
return cleanTrackName(trackName)
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, char => char.toUpperCase());
|
||||
}
|
||||
|
||||
/**
|
||||
* Get track map URL
|
||||
* Handles the track name cleaning and URL construction
|
||||
*/
|
||||
export function getTrackMapUrl(trackName: string, trackConfig?: string): string {
|
||||
const baseUrl = 'https://openwheels.racing/files/img/tracks';
|
||||
const cleanedTrack = cleanTrackName(trackName);
|
||||
const cleanedConfig = trackConfig ? cleanTrackConfig(trackConfig) : '';
|
||||
|
||||
// Try with config first, fallback to map.png if no config or config is default
|
||||
if (cleanedConfig && cleanedConfig !== 'default' && cleanedConfig !== '') {
|
||||
return `${baseUrl}/${cleanedTrack}/${cleanedConfig}/map.png`;
|
||||
}
|
||||
|
||||
return `${baseUrl}/${cleanedTrack}/map.png`;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user