Feature: Live Map and Events Tab
This commit is contained in:
parent
4a8d6bc5d7
commit
8de538cc29
69
app/api/dashboard/route.ts
Normal file
69
app/api/dashboard/route.ts
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
// app/api/dashboard/route.ts
|
||||||
|
// API endpoint for dashboard data
|
||||||
|
|
||||||
|
import { query } from '@/lib/db';
|
||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
try {
|
||||||
|
const sql = `
|
||||||
|
SELECT
|
||||||
|
u.driver_guid,
|
||||||
|
u.driver_name,
|
||||||
|
u.driver_team,
|
||||||
|
u.car_model,
|
||||||
|
u.car_skin,
|
||||||
|
u.user_rank,
|
||||||
|
u.laps_completed,
|
||||||
|
s.server_id,
|
||||||
|
s.server_name,
|
||||||
|
s.server_track,
|
||||||
|
s.server_config,
|
||||||
|
s.session_type,
|
||||||
|
s.session_flag,
|
||||||
|
s.session_time,
|
||||||
|
s.session_laps,
|
||||||
|
s.session_elapsed_time,
|
||||||
|
s.session_ambient_temp,
|
||||||
|
s.session_road_temp,
|
||||||
|
s.connected_players
|
||||||
|
FROM users u
|
||||||
|
INNER JOIN servers s ON u.current_server = s.server_id
|
||||||
|
WHERE u.is_connect = true
|
||||||
|
ORDER BY s.server_id, u.user_rank ASC
|
||||||
|
`;
|
||||||
|
|
||||||
|
const rows = await query(sql);
|
||||||
|
|
||||||
|
const drivers = 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,
|
||||||
|
laps_completed: row.laps_completed,
|
||||||
|
user_rank: row.user_rank,
|
||||||
|
server: {
|
||||||
|
server_id: row.server_id,
|
||||||
|
server_name: row.server_name,
|
||||||
|
server_track: row.server_track,
|
||||||
|
server_config: row.server_config,
|
||||||
|
session_type: row.session_type,
|
||||||
|
session_flag: row.session_flag,
|
||||||
|
session_time: row.session_time,
|
||||||
|
session_laps: row.session_laps,
|
||||||
|
session_elapsed_time: row.session_elapsed_time,
|
||||||
|
session_ambient_temp: row.session_ambient_temp,
|
||||||
|
session_road_temp: row.session_road_temp,
|
||||||
|
connected_players: row.connected_players,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
return NextResponse.json({ drivers });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Dashboard API] Error:', error);
|
||||||
|
return NextResponse.json({ error: 'Failed to fetch dashboard data' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
45
app/api/events/[id]/results/route.ts
Normal file
45
app/api/events/[id]/results/route.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
// app/api/events/[id]/results/route.ts
|
||||||
|
import { query } from '@/lib/db';
|
||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
request: Request,
|
||||||
|
{ params }: { params: { id: string } }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const standingsSql = `
|
||||||
|
SELECT
|
||||||
|
tcs.team_id,
|
||||||
|
t.name as team_name,
|
||||||
|
tcs.total_points,
|
||||||
|
tcs.races_participated,
|
||||||
|
tcs.best_finish,
|
||||||
|
json_agg(
|
||||||
|
json_build_object(
|
||||||
|
'driver_guid', u.driver_guid,
|
||||||
|
'driver_name', u.driver_name,
|
||||||
|
'position', er.position,
|
||||||
|
'points_awarded', er.points_awarded,
|
||||||
|
'laps_completed', er.laps_completed,
|
||||||
|
'dnf', er.dnf
|
||||||
|
) ORDER BY er.position ASC
|
||||||
|
) as drivers
|
||||||
|
FROM team_championship_standings tcs
|
||||||
|
JOIN teams t ON tcs.team_id = t.id
|
||||||
|
LEFT JOIN event_results er ON tcs.event_id = er.event_id AND tcs.team_id = er.team_id
|
||||||
|
LEFT JOIN users u ON er.driver_guid = u.driver_guid
|
||||||
|
WHERE tcs.event_id = $1
|
||||||
|
GROUP BY tcs.team_id, t.name, tcs.total_points, tcs.races_participated, tcs.best_finish
|
||||||
|
ORDER BY tcs.total_points DESC, tcs.best_finish ASC
|
||||||
|
`;
|
||||||
|
|
||||||
|
const standings = await query(standingsSql, [params.id]);
|
||||||
|
|
||||||
|
return NextResponse.json({ standings });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Event Results API] Error:', error);
|
||||||
|
return NextResponse.json({ error: 'Failed to fetch results' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
142
app/api/live/telemetry/route.ts
Normal file
142
app/api/live/telemetry/route.ts
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
// app/api/live/telemetry/route.ts
|
||||||
|
// Server-Sent Events endpoint streaming from C++ Unix socket
|
||||||
|
|
||||||
|
import { getTelemetryBridge } from '@/lib/telemetryBridge';
|
||||||
|
import { query } from '@/lib/db';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
export const runtime = 'nodejs';
|
||||||
|
|
||||||
|
// Cache for driver ranks (refreshed periodically)
|
||||||
|
let rankCache: Map<string, { rank: number, rating: number }> = new Map();
|
||||||
|
let lastRankUpdate = 0;
|
||||||
|
const RANK_CACHE_TTL = 60000; // 1 minute
|
||||||
|
|
||||||
|
async function updateRankCache() {
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - lastRankUpdate < RANK_CACHE_TTL) {
|
||||||
|
return; // Cache still valid
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get all users sorted by rank (higher is better)
|
||||||
|
const users = await query(
|
||||||
|
`SELECT
|
||||||
|
driver_guid,
|
||||||
|
user_rank,
|
||||||
|
ROW_NUMBER() OVER (ORDER BY user_rank DESC) as rank_position
|
||||||
|
FROM users
|
||||||
|
WHERE user_rank IS NOT NULL
|
||||||
|
ORDER BY user_rank DESC`
|
||||||
|
);
|
||||||
|
|
||||||
|
rankCache.clear();
|
||||||
|
users.forEach((row: any) => {
|
||||||
|
rankCache.set(row.driver_guid.toString(), {
|
||||||
|
rank: row.rank_position,
|
||||||
|
rating: row.user_rank
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
lastRankUpdate = now;
|
||||||
|
console.log('[Rank Cache] Updated with', rankCache.size, 'drivers');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Rank Cache] Failed to update:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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({
|
||||||
|
async start(controller) {
|
||||||
|
console.log('[SSE] Client connected', filterServerId ? `(server ${filterServerId})` : '(all servers)');
|
||||||
|
|
||||||
|
// Update rank cache on new connection
|
||||||
|
await updateRankCache();
|
||||||
|
|
||||||
|
// Send initial connection message
|
||||||
|
controller.enqueue(encoder.encode(`data: ${JSON.stringify({
|
||||||
|
type: 'connected',
|
||||||
|
bridge_status: bridge.isConnected() ? 'connected' : 'connecting',
|
||||||
|
timestamp: Date.now()
|
||||||
|
})}\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) => {
|
||||||
|
const driverRank = rankCache.get(car.driver_guid);
|
||||||
|
return {
|
||||||
|
carID: car.carID,
|
||||||
|
driver_guid: car.driver_guid,
|
||||||
|
driver_name: car.driver_name,
|
||||||
|
car_model: car.car_model,
|
||||||
|
position: car.position_rank,
|
||||||
|
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,
|
||||||
|
world_position: car.position,
|
||||||
|
user_rank: driverRank ? driverRank.rank : null,
|
||||||
|
user_rating: driverRank ? driverRank.rating : 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 to keep connection alive
|
||||||
|
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);
|
||||||
|
try {
|
||||||
|
controller.close();
|
||||||
|
} catch (error) {
|
||||||
|
// Controller already closed
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return new Response(stream, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/event-stream',
|
||||||
|
'Cache-Control': 'no-cache, no-transform',
|
||||||
|
'Connection': 'keep-alive',
|
||||||
|
'X-Accel-Buffering': 'no', // Disable nginx buffering
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -1,89 +0,0 @@
|
|||||||
// 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
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,13 +1,12 @@
|
|||||||
// app/dashboard/page.tsx
|
// app/dashboard/page.tsx
|
||||||
// Dashboard - navbar/footer now in layout.tsx
|
// Dashboard - now with auto-refresh!
|
||||||
|
|
||||||
import { query } from '@/lib/db';
|
import { query } from '@/lib/db';
|
||||||
import { DriverWithServer } from '@/types/racing';
|
import { LiveDotIcon } from '@/components/ui/icons';
|
||||||
import { UsersIcon, ServerIcon, ActivityIcon, MapPinIcon, FlagIcon, LiveDotIcon } from '@/components/ui/icons';
|
import DashboardClient from '@/components/dashboard/DashboardClient';
|
||||||
import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
|
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
async function getConnectedDrivers(): Promise<DriverWithServer[]> {
|
async function getConnectedDrivers() {
|
||||||
const sql = `
|
const sql = `
|
||||||
SELECT
|
SELECT
|
||||||
u.driver_guid,
|
u.driver_guid,
|
||||||
@ -20,7 +19,14 @@ async function getConnectedDrivers(): Promise<DriverWithServer[]> {
|
|||||||
s.server_id,
|
s.server_id,
|
||||||
s.server_name,
|
s.server_name,
|
||||||
s.server_track,
|
s.server_track,
|
||||||
|
s.server_config,
|
||||||
|
s.session_type,
|
||||||
s.session_flag,
|
s.session_flag,
|
||||||
|
s.session_time,
|
||||||
|
s.session_laps,
|
||||||
|
s.session_elapsed_time,
|
||||||
|
s.session_ambient_temp,
|
||||||
|
s.session_road_temp,
|
||||||
s.connected_players
|
s.connected_players
|
||||||
FROM users u
|
FROM users u
|
||||||
INNER JOIN servers s ON u.current_server = s.server_id
|
INNER JOIN servers s ON u.current_server = s.server_id
|
||||||
@ -36,36 +42,27 @@ async function getConnectedDrivers(): Promise<DriverWithServer[]> {
|
|||||||
driver_team: row.driver_team,
|
driver_team: row.driver_team,
|
||||||
car_model: row.car_model,
|
car_model: row.car_model,
|
||||||
car_skin: row.car_skin,
|
car_skin: row.car_skin,
|
||||||
cuts_alltime: 0,
|
|
||||||
contacts_alltime: 0,
|
|
||||||
laps_completed: row.laps_completed,
|
laps_completed: row.laps_completed,
|
||||||
user_rank: row.user_rank,
|
user_rank: row.user_rank,
|
||||||
is_connect: true,
|
|
||||||
is_loading: false,
|
|
||||||
current_server: row.server_id,
|
|
||||||
created_at: new Date(),
|
|
||||||
server: {
|
server: {
|
||||||
server_id: row.server_id,
|
server_id: row.server_id,
|
||||||
server_name: row.server_name,
|
server_name: row.server_name,
|
||||||
server_track: row.server_track,
|
server_track: row.server_track,
|
||||||
session_type: 0,
|
server_config: row.server_config,
|
||||||
|
session_type: row.session_type,
|
||||||
session_flag: row.session_flag,
|
session_flag: row.session_flag,
|
||||||
|
session_time: row.session_time,
|
||||||
|
session_laps: row.session_laps,
|
||||||
|
session_elapsed_time: row.session_elapsed_time,
|
||||||
|
session_ambient_temp: row.session_ambient_temp,
|
||||||
|
session_road_temp: row.session_road_temp,
|
||||||
connected_players: row.connected_players,
|
connected_players: row.connected_players,
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function DashboardPage() {
|
export default async function DashboardPage() {
|
||||||
const drivers = await getConnectedDrivers();
|
const initialDrivers = await getConnectedDrivers();
|
||||||
|
|
||||||
const serverGroups = drivers.reduce((acc, driver) => {
|
|
||||||
const serverId = driver.server?.server_id ?? 0;
|
|
||||||
if (!acc[serverId]) {
|
|
||||||
acc[serverId] = [];
|
|
||||||
}
|
|
||||||
acc[serverId].push(driver);
|
|
||||||
return acc;
|
|
||||||
}, {} as Record<number, DriverWithServer[]>);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -85,153 +82,10 @@ export default async function DashboardPage() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats Grid */}
|
{/* Client component with auto-refresh */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12">
|
<DashboardClient initialDrivers={initialDrivers} />
|
||||||
<StatCard
|
|
||||||
title="DRIVERS ONLINE"
|
|
||||||
value={drivers.length}
|
|
||||||
icon={<UsersIcon className="w-8 h-8" />}
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
title="ACTIVE SERVERS"
|
|
||||||
value={Object.keys(serverGroups).length}
|
|
||||||
icon={<ServerIcon className="w-8 h-8" />}
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
title="TOTAL LAPS"
|
|
||||||
value={drivers.reduce((sum, d) => sum + d.laps_completed, 0)}
|
|
||||||
icon={<ActivityIcon className="w-8 h-8" />}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Server Listings */}
|
|
||||||
<div className="max-w-7xl mx-auto px-6 py-12 space-y-6">
|
|
||||||
{Object.keys(serverGroups).length === 0 ? (
|
|
||||||
<div className="border border-white/10 p-16 text-center bg-black">
|
|
||||||
<div className="w-16 h-16 border-2 border-white/20 mx-auto mb-6"></div>
|
|
||||||
<p className="text-white/40 text-base tracking-wider">NO ACTIVE SESSIONS</p>
|
|
||||||
<p className="text-white/20 text-sm mt-2">System idle — waiting for connections</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
Object.entries(serverGroups).map(([serverId, serverDrivers]) => {
|
|
||||||
const server = serverDrivers[0].server;
|
|
||||||
return (
|
|
||||||
<div key={serverId} className="border border-white/10 sharp-border bg-black">
|
|
||||||
{/* Server Header */}
|
|
||||||
<div className="border-b border-white/10 p-6 topo-lines-dense">
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex-1 space-y-3">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className="flex items-center space-x-2 px-2 py-1 border border-white/30 text-xs">
|
|
||||||
<LiveDotIcon className="w-2 h-2 animate-pulse" />
|
|
||||||
<span className="font-medium tracking-wider">LIVE</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-white/40 tracking-wider">
|
|
||||||
ID: {server?.server_id}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<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">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<MapPinIcon className="w-4 h-4 text-white/60" />
|
|
||||||
<span className="text-white/80 text-sm">{server?.server_track}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FlagIcon className="w-4 h-4 text-white/60" />
|
|
||||||
<span className="text-white/80 text-sm">{server?.session_flag}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<UsersIcon className="w-4 h-4 text-white/60" />
|
|
||||||
<span className="text-white/80 text-sm">{server?.connected_players} CONNECTED</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Driver Table */}
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="border-b border-white/10">
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">POS</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">DRIVER</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">TEAM</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">CAR</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">RANK</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">LAPS</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{serverDrivers.map((driver, index) => (
|
|
||||||
<tr
|
|
||||||
key={driver.driver_guid}
|
|
||||||
className="border-b border-white/5 hover:bg-white/5 transition-colors"
|
|
||||||
>
|
|
||||||
<td className="px-6 py-4">
|
|
||||||
<span className="text-base font-bold tracking-tight">
|
|
||||||
{String(index + 1).padStart(2, '0')}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4">
|
|
||||||
<span className="font-semibold tracking-tight text-base">{driver.driver_name}</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4">
|
|
||||||
<span className="text-white/50 text-sm">
|
|
||||||
{driver.driver_team || '—'}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4">
|
|
||||||
<span className="text-white/70 text-sm font-mono tracking-tight">
|
|
||||||
{driver.car_model}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4">
|
|
||||||
<span className="inline-block px-3 py-1 border border-white/20 text-sm font-mono">
|
|
||||||
{driver.user_rank}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4">
|
|
||||||
<span className="font-mono text-sm">{driver.laps_completed}</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function StatCard({
|
|
||||||
title,
|
|
||||||
value,
|
|
||||||
icon
|
|
||||||
}: {
|
|
||||||
title: string;
|
|
||||||
value: number;
|
|
||||||
icon: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className="border border-white/10 p-6 sharp-border">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<span className="text-xs font-bold tracking-wider text-white/60">{title}</span>
|
|
||||||
<div className="text-white/40">
|
|
||||||
{icon}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-5xl font-bold tracking-tight">
|
|
||||||
{value.toLocaleString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
223
app/events/[event_id]/results/page.tsx
Normal file
223
app/events/[event_id]/results/page.tsx
Normal file
@ -0,0 +1,223 @@
|
|||||||
|
// app/events/[id]/results/page.tsx
|
||||||
|
// Event championship results page with auto-refresh
|
||||||
|
|
||||||
|
import { query } from '@/lib/db';
|
||||||
|
import { TrophyIcon } from '@/components/ui/icons';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import EventResultsClient from '@/components/events/EventResultsClient';
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
interface TeamStanding {
|
||||||
|
team_id: number;
|
||||||
|
team_name: string;
|
||||||
|
total_points: number;
|
||||||
|
races_participated: number;
|
||||||
|
best_finish: number;
|
||||||
|
drivers: {
|
||||||
|
driver_guid: string;
|
||||||
|
driver_name: string;
|
||||||
|
position: number;
|
||||||
|
points_awarded: number;
|
||||||
|
}[];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getEventResults(eventId: string) {
|
||||||
|
// Get event info
|
||||||
|
const eventSql = `
|
||||||
|
SELECT
|
||||||
|
event_id,
|
||||||
|
event_name,
|
||||||
|
event_track,
|
||||||
|
event_date,
|
||||||
|
event_status
|
||||||
|
FROM events
|
||||||
|
WHERE event_id = $1
|
||||||
|
`;
|
||||||
|
const events = await query(eventSql, [eventId]);
|
||||||
|
const event = events[0];
|
||||||
|
|
||||||
|
// Get team standings with driver details
|
||||||
|
const standingsSql = `
|
||||||
|
SELECT
|
||||||
|
tcs.team_id,
|
||||||
|
t.name as team_name,
|
||||||
|
tcs.total_points,
|
||||||
|
tcs.races_participated,
|
||||||
|
tcs.best_finish,
|
||||||
|
json_agg(
|
||||||
|
json_build_object(
|
||||||
|
'driver_guid', u.driver_guid,
|
||||||
|
'driver_name', u.driver_name,
|
||||||
|
'position', er.position,
|
||||||
|
'points_awarded', er.points_awarded,
|
||||||
|
'laps_completed', er.laps_completed,
|
||||||
|
'dnf', er.dnf
|
||||||
|
) ORDER BY er.position ASC
|
||||||
|
) as drivers
|
||||||
|
FROM team_championship_standings tcs
|
||||||
|
JOIN teams t ON tcs.team_id = t.id
|
||||||
|
LEFT JOIN event_results er ON tcs.event_id = er.event_id AND tcs.team_id = er.team_id
|
||||||
|
LEFT JOIN users u ON er.driver_guid = u.driver_guid
|
||||||
|
WHERE tcs.event_id = $1
|
||||||
|
GROUP BY tcs.team_id, t.name, tcs.total_points, tcs.races_participated, tcs.best_finish
|
||||||
|
ORDER BY tcs.total_points DESC, tcs.best_finish ASC
|
||||||
|
`;
|
||||||
|
|
||||||
|
const standings = await query(standingsSql, [eventId]);
|
||||||
|
|
||||||
|
return { event, standings };
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPositionColor(position: number): string {
|
||||||
|
if (position === 1) return 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400';
|
||||||
|
if (position === 2) return 'bg-gray-400/20 border-gray-400/50 text-gray-300';
|
||||||
|
if (position === 3) return 'bg-orange-600/20 border-orange-600/50 text-orange-400';
|
||||||
|
return 'bg-white/5 border-white/10 text-white/60';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function EventResultsPage({ params }: { params: { id: string } }) {
|
||||||
|
const { event, standings } = await getEventResults(params.id);
|
||||||
|
|
||||||
|
if (!event) {
|
||||||
|
return (
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-16">
|
||||||
|
<div className="border border-white/10 p-16 text-center bg-black">
|
||||||
|
<p className="text-white/40">Event not found</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Hero */}
|
||||||
|
<div className="relative border-b border-white/10 grid-overlay">
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-16">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Link
|
||||||
|
href={`/events/${params.id}`}
|
||||||
|
className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors text-sm"
|
||||||
|
>
|
||||||
|
<span>←</span>
|
||||||
|
<span>Back to Event</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<TrophyIcon className="w-12 h-12 text-yellow-500" />
|
||||||
|
<div>
|
||||||
|
<h1 className="text-5xl font-bold tracking-tight">
|
||||||
|
CHAMPIONSHIP RESULTS
|
||||||
|
</h1>
|
||||||
|
<p className="text-white/60 text-lg mt-2">
|
||||||
|
{event.event_name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team Championship Standings */}
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-12">
|
||||||
|
{standings.length === 0 ? (
|
||||||
|
<div className="border border-white/10 p-16 text-center bg-black">
|
||||||
|
<TrophyIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
|
||||||
|
<p className="text-white/40 text-base tracking-wider">NO RESULTS YET</p>
|
||||||
|
<p className="text-white/20 text-sm mt-2">Results will appear after the event concludes</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{standings.map((team: TeamStanding, index: number) => (
|
||||||
|
<div
|
||||||
|
key={team.team_id}
|
||||||
|
className={`border p-6 transition-all ${getPositionColor(index + 1)}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
{/* Position Badge */}
|
||||||
|
<div className="w-16 h-16 border-2 flex items-center justify-center">
|
||||||
|
<span className="text-3xl font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team Info */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold tracking-tight">
|
||||||
|
{team.team_name}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center space-x-4 mt-2 text-sm text-white/60">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<UsersIcon className="w-4 h-4" />
|
||||||
|
<span>{team.drivers.length} {team.drivers.length === 1 ? 'Driver' : 'Drivers'}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<FlagIcon className="w-4 h-4" />
|
||||||
|
<span>Best Finish: P{team.best_finish}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Total Points */}
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-5xl font-bold tracking-tight">
|
||||||
|
{team.total_points}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-white/60 tracking-wider">POINTS</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Driver Results */}
|
||||||
|
<div className="border-t border-white/10 pt-4 mt-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{team.drivers.map((driver: any) => (
|
||||||
|
<div
|
||||||
|
key={driver.driver_guid}
|
||||||
|
className="flex items-center justify-between p-3 bg-black/30 border border-white/5"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className={`w-8 h-8 border flex items-center justify-center text-xs font-bold ${
|
||||||
|
driver.position <= 3 ? 'border-white/30' : 'border-white/10'
|
||||||
|
}`}>
|
||||||
|
P{driver.position}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm">{driver.driver_name}</div>
|
||||||
|
{driver.dnf && (
|
||||||
|
<div className="text-xs text-red-400">DNF</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-bold text-lg">{driver.points_awarded}</div>
|
||||||
|
<div className="text-xs text-white/40">pts</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Points System Info */}
|
||||||
|
<div className="mt-8 border border-white/10 p-6 bg-black">
|
||||||
|
<h3 className="text-sm font-bold tracking-wider text-white/60 mb-4">POINTS SYSTEM</h3>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm">
|
||||||
|
<div><span className="font-mono text-white/80">P1:</span> <span className="font-bold">25 pts</span></div>
|
||||||
|
<div><span className="font-mono text-white/80">P2:</span> <span className="font-bold">18 pts</span></div>
|
||||||
|
<div><span className="font-mono text-white/80">P3:</span> <span className="font-bold">15 pts</span></div>
|
||||||
|
<div><span className="font-mono text-white/80">P4:</span> <span className="font-bold">12 pts</span></div>
|
||||||
|
<div><span className="font-mono text-white/80">P5:</span> <span className="font-bold">10 pts</span></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-white/40 mt-4">
|
||||||
|
Team points are the sum of all driver points from that team in the event
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
265
components/dashboard/DashboardClient.tsx
Normal file
265
components/dashboard/DashboardClient.tsx
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
// components/dashboard/DashboardClient.tsx
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { UsersIcon, ServerIcon, ActivityIcon, MapPinIcon, FlagIcon, LiveDotIcon, ClockIcon } from '@/components/ui/icons';
|
||||||
|
import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
|
||||||
|
|
||||||
|
interface Driver {
|
||||||
|
driver_guid: string;
|
||||||
|
driver_name: string;
|
||||||
|
driver_team: string;
|
||||||
|
car_model: string;
|
||||||
|
car_skin: string;
|
||||||
|
laps_completed: number;
|
||||||
|
user_rank: number;
|
||||||
|
server: {
|
||||||
|
server_id: number;
|
||||||
|
server_name: string;
|
||||||
|
server_track: string;
|
||||||
|
server_config: string;
|
||||||
|
session_type: number;
|
||||||
|
session_flag: string;
|
||||||
|
session_time: number;
|
||||||
|
session_laps: number;
|
||||||
|
session_elapsed_time: number;
|
||||||
|
session_ambient_temp: number;
|
||||||
|
session_road_temp: number;
|
||||||
|
connected_players: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSessionTypeName(type: number): string {
|
||||||
|
switch (type) {
|
||||||
|
case 0: return 'PRACTICE';
|
||||||
|
case 1: return 'RACE';
|
||||||
|
case 2: return 'QUALIFYING';
|
||||||
|
default: return 'UNKNOWN';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSessionTypeColor(type: number): string {
|
||||||
|
switch (type) {
|
||||||
|
case 0: return 'border-blue-500/30 bg-blue-500/10 text-blue-400';
|
||||||
|
case 1: return 'border-red-500/30 bg-red-500/10 text-red-400';
|
||||||
|
case 2: return 'border-yellow-500/30 bg-yellow-500/10 text-yellow-400';
|
||||||
|
default: return 'border-white/20 bg-white/5 text-white/60';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatElapsedTime(ms: number): string {
|
||||||
|
const totalSeconds = Math.floor(ms / 1000);
|
||||||
|
const hours = Math.floor(totalSeconds / 3600);
|
||||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||||
|
const seconds = totalSeconds % 60;
|
||||||
|
|
||||||
|
if (hours > 0) {
|
||||||
|
return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
return `${minutes}:${String(seconds).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DashboardClient({ initialDrivers }: { initialDrivers: Driver[] }) {
|
||||||
|
const [drivers, setDrivers] = useState<Driver[]>(initialDrivers);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
// Auto-refresh every 3 seconds
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const response = await fetch('/api/dashboard');
|
||||||
|
const data = await response.json();
|
||||||
|
setDrivers(data.drivers);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Dashboard] Failed to fetch data:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const interval = setInterval(fetchData, 3000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Group drivers by server
|
||||||
|
const serverGroups = drivers.reduce((acc, driver) => {
|
||||||
|
const serverId = driver.server?.server_id ?? 0;
|
||||||
|
if (!acc[serverId]) {
|
||||||
|
acc[serverId] = [];
|
||||||
|
}
|
||||||
|
acc[serverId].push(driver);
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<number, Driver[]>);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12">
|
||||||
|
<StatCard
|
||||||
|
title="DRIVERS ONLINE"
|
||||||
|
value={drivers.length}
|
||||||
|
icon={<UsersIcon className="w-8 h-8" />}
|
||||||
|
pulse={isLoading}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="ACTIVE SERVERS"
|
||||||
|
value={Object.keys(serverGroups).length}
|
||||||
|
icon={<ServerIcon className="w-8 h-8" />}
|
||||||
|
pulse={isLoading}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="TOTAL LAPS"
|
||||||
|
value={drivers.reduce((sum, d) => sum + d.laps_completed, 0)}
|
||||||
|
icon={<ActivityIcon className="w-8 h-8" />}
|
||||||
|
pulse={isLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Server Listings */}
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-12 space-y-6">
|
||||||
|
{Object.keys(serverGroups).length === 0 ? (
|
||||||
|
<div className="border border-white/10 p-16 text-center bg-black">
|
||||||
|
<div className="w-16 h-16 border-2 border-white/20 mx-auto mb-6"></div>
|
||||||
|
<p className="text-white/40 text-base tracking-wider">NO ACTIVE SESSIONS</p>
|
||||||
|
<p className="text-white/20 text-sm mt-2">System idle — waiting for connections</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
Object.entries(serverGroups).map(([serverId, serverDrivers]) => {
|
||||||
|
const server = serverDrivers[0].server;
|
||||||
|
return (
|
||||||
|
<div key={serverId} className="border border-white/10 sharp-border bg-black">
|
||||||
|
{/* Server Header */}
|
||||||
|
<div className="border-b border-white/10 p-6 topo-lines-dense">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1 space-y-3">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="flex items-center space-x-2 px-2 py-1 border border-white/30 text-xs">
|
||||||
|
<LiveDotIcon className="w-2 h-2 animate-pulse" />
|
||||||
|
<span className="font-medium tracking-wider">LIVE</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-white/40 tracking-wider">
|
||||||
|
ID: {server?.server_id}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<MapPinIcon className="w-4 h-4 text-white/60" />
|
||||||
|
<span className="text-white/80 text-sm">
|
||||||
|
{cleanTrackName(server?.server_track || '')}
|
||||||
|
{server?.server_config && ` - ${cleanTrackConfig(server.server_config)}`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FlagIcon className="w-4 h-4 text-white/60" />
|
||||||
|
<span className="text-white/80 text-sm">{server?.session_flag}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<UsersIcon className="w-4 h-4 text-white/60" />
|
||||||
|
<span className="text-white/80 text-sm">{server?.connected_players} CONNECTED</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Session Info Badge */}
|
||||||
|
<div className="flex flex-col items-end space-y-2">
|
||||||
|
<div className={`px-3 py-2 border text-xs font-bold tracking-wider ${getSessionTypeColor(server?.session_type || 0)}`}>
|
||||||
|
{getSessionTypeName(server?.session_type || 0)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 px-3 py-2 border border-white/20 bg-black text-xs">
|
||||||
|
<ClockIcon className="w-3 h-3 text-white/60" />
|
||||||
|
<span className="font-mono text-white/80">
|
||||||
|
{formatElapsedTime(server?.session_elapsed_time || 0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Driver Table */}
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-white/10">
|
||||||
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">POS</th>
|
||||||
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">DRIVER</th>
|
||||||
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">TEAM</th>
|
||||||
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">CAR</th>
|
||||||
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">RANK</th>
|
||||||
|
<th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">LAPS</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{serverDrivers.map((driver, index) => (
|
||||||
|
<tr
|
||||||
|
key={driver.driver_guid}
|
||||||
|
className="border-b border-white/5 hover:bg-white/5 transition-colors"
|
||||||
|
>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="text-base font-bold tracking-tight">
|
||||||
|
{String(index + 1).padStart(2, '0')}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="font-semibold tracking-tight text-base">{driver.driver_name}</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="text-white/50 text-sm">
|
||||||
|
{driver.driver_team || '—'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="text-white/70 text-sm font-mono tracking-tight">
|
||||||
|
{driver.car_model}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="inline-block px-3 py-1 border border-white/20 text-sm font-mono">
|
||||||
|
{driver.user_rank}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className="font-mono text-sm">{driver.laps_completed}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({
|
||||||
|
title,
|
||||||
|
value,
|
||||||
|
icon,
|
||||||
|
pulse
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
value: number;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
pulse?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={`border border-white/10 p-6 sharp-border transition-opacity ${pulse ? 'opacity-70' : 'opacity-100'}`}>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<span className="text-xs font-bold tracking-wider text-white/60">{title}</span>
|
||||||
|
<div className="text-white/40">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-5xl font-bold tracking-tight">
|
||||||
|
{value.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
144
components/events/EventResultsClient.tsx
Normal file
144
components/events/EventResultsClient.tsx
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
// components/events/EventResultsClient.tsx
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { TrophyIcon, UsersIcon, FlagIcon } from '@/components/ui/icons';
|
||||||
|
|
||||||
|
interface TeamStanding {
|
||||||
|
team_id: number;
|
||||||
|
team_name: string;
|
||||||
|
total_points: number;
|
||||||
|
races_participated: number;
|
||||||
|
best_finish: number;
|
||||||
|
drivers: {
|
||||||
|
driver_guid: string;
|
||||||
|
driver_name: string;
|
||||||
|
position: number;
|
||||||
|
points_awarded: number;
|
||||||
|
dnf: boolean;
|
||||||
|
}[];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPositionColor(position: number): string {
|
||||||
|
if (position === 1) return 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400';
|
||||||
|
if (position === 2) return 'bg-gray-400/20 border-gray-400/50 text-gray-300';
|
||||||
|
if (position === 3) return 'bg-orange-600/20 border-orange-600/50 text-orange-400';
|
||||||
|
return 'bg-white/5 border-white/10 text-white/60';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function EventResultsClient({
|
||||||
|
eventId,
|
||||||
|
initialStandings
|
||||||
|
}: {
|
||||||
|
eventId: string;
|
||||||
|
initialStandings: TeamStanding[]
|
||||||
|
}) {
|
||||||
|
const [standings, setStandings] = useState<TeamStanding[]>(initialStandings);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
// Auto-refresh every 5 seconds
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchResults = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const response = await fetch(`/api/events/${eventId}/results`);
|
||||||
|
const data = await response.json();
|
||||||
|
setStandings(data.standings);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Results] Failed to fetch:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const interval = setInterval(fetchResults, 5000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [eventId]);
|
||||||
|
|
||||||
|
if (standings.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="border border-white/10 p-16 text-center bg-black">
|
||||||
|
<TrophyIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
|
||||||
|
<p className="text-white/40 text-base tracking-wider">NO RESULTS YET</p>
|
||||||
|
<p className="text-white/20 text-sm mt-2">Results will appear after the event concludes</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`space-y-4 transition-opacity ${isLoading ? 'opacity-70' : 'opacity-100'}`}>
|
||||||
|
{standings.map((team: TeamStanding, index: number) => (
|
||||||
|
<div
|
||||||
|
key={team.team_id}
|
||||||
|
className={`border p-6 transition-all ${getPositionColor(index + 1)}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
{/* Position Badge */}
|
||||||
|
<div className="w-16 h-16 border-2 flex items-center justify-center">
|
||||||
|
<span className="text-3xl font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team Info */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold tracking-tight">
|
||||||
|
{team.team_name}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center space-x-4 mt-2 text-sm text-white/60">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<UsersIcon className="w-4 h-4" />
|
||||||
|
<span>{team.drivers.length} {team.drivers.length === 1 ? 'Driver' : 'Drivers'}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<FlagIcon className="w-4 h-4" />
|
||||||
|
<span>Best Finish: P{team.best_finish}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Total Points */}
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-5xl font-bold tracking-tight">
|
||||||
|
{team.total_points}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-white/60 tracking-wider">POINTS</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Driver Results */}
|
||||||
|
<div className="border-t border-white/10 pt-4 mt-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{team.drivers.map((driver: any) => (
|
||||||
|
<div
|
||||||
|
key={driver.driver_guid}
|
||||||
|
className="flex items-center justify-between p-3 bg-black/30 border border-white/5"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className={`w-8 h-8 border flex items-center justify-center text-xs font-bold ${
|
||||||
|
driver.position <= 3 ? 'border-white/30' : 'border-white/10'
|
||||||
|
}`}>
|
||||||
|
P{driver.position}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm">{driver.driver_name}</div>
|
||||||
|
{driver.dnf && (
|
||||||
|
<div className="text-xs text-red-400">DNF</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-bold text-lg">{driver.points_awarded}</div>
|
||||||
|
<div className="text-xs text-white/40">pts</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -8,10 +8,9 @@ export default function LiveRefreshWrapper({ children }: { children: React.React
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Refresh every 3 seconds for live updates
|
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
router.refresh();
|
router.refresh();
|
||||||
}, 3000);
|
}, 500);
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, [router]);
|
}, [router]);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
// components/live/LiveTiming.tsx
|
// components/live/LiveTiming.tsx
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { BoltIcon } from '@/components/ui/icons';
|
import { BoltIcon, TrophyIcon } from '@/components/ui/icons';
|
||||||
|
|
||||||
interface TimingEntry {
|
interface TimingEntry {
|
||||||
position: number;
|
position: number;
|
||||||
@ -13,6 +13,8 @@ interface TimingEntry {
|
|||||||
best_lap_time: number | null;
|
best_lap_time: number | null;
|
||||||
gap_to_leader: string;
|
gap_to_leader: string;
|
||||||
avg_lap_time: number | null;
|
avg_lap_time: number | null;
|
||||||
|
user_rank?: number | null; // Driver's position in rankings (1st, 2nd, etc.)
|
||||||
|
user_rating?: number | null; // Driver's rating score (ELO-style)
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LiveTimingProps {
|
interface LiveTimingProps {
|
||||||
@ -23,7 +25,7 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
|
|||||||
|
|
||||||
// Format lap time from milliseconds
|
// Format lap time from milliseconds
|
||||||
const formatLapTime = (ms: number | null) => {
|
const formatLapTime = (ms: number | null) => {
|
||||||
if (!ms || ms === 0) return '-:--.---';
|
if (!ms || ms === 0) return '--:--.---';
|
||||||
|
|
||||||
const minutes = Math.floor(ms / 60000);
|
const minutes = Math.floor(ms / 60000);
|
||||||
const seconds = Math.floor((ms % 60000) / 1000);
|
const seconds = Math.floor((ms % 60000) / 1000);
|
||||||
@ -32,14 +34,36 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
|
|||||||
return `${minutes}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
|
return `${minutes}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Format position with fallback
|
||||||
|
const formatPosition = (position: number | null | undefined) => {
|
||||||
|
if (!position || position === 0) return '--';
|
||||||
|
return String(position).padStart(2, '0');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Format lap count with fallback
|
||||||
|
const formatLapCount = (laps: number | null | undefined) => {
|
||||||
|
if (!laps || laps === 0) return '--';
|
||||||
|
return laps;
|
||||||
|
};
|
||||||
|
|
||||||
// Get position color
|
// Get position color
|
||||||
const getPositionColor = (position: number) => {
|
const getPositionColor = (position: number) => {
|
||||||
|
if (!position || position === 0) return 'text-white/40 border-white/10';
|
||||||
if (position === 1) return 'text-white border-white';
|
if (position === 1) return 'text-white border-white';
|
||||||
if (position === 2) return 'text-white/90 border-white/70';
|
if (position === 2) return 'text-white/90 border-white/70';
|
||||||
if (position === 3) return 'text-white/80 border-white/50';
|
if (position === 3) return 'text-white/80 border-white/50';
|
||||||
return 'text-white/60 border-white/20';
|
return 'text-white/60 border-white/20';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Get rank badge color
|
||||||
|
const getRankColor = (rank: number | null | undefined) => {
|
||||||
|
if (!rank) return 'bg-white/10 text-white/40';
|
||||||
|
if (rank <= 10) return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
|
||||||
|
if (rank <= 50) return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
|
||||||
|
if (rank <= 100) return 'bg-green-500/20 text-green-400 border-green-500/30';
|
||||||
|
return 'bg-white/10 text-white/60 border-white/20';
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@ -56,7 +80,8 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
|
|||||||
{entries.map((entry) => {
|
{entries.map((entry) => {
|
||||||
const isLeader = entry.position === 1;
|
const isLeader = entry.position === 1;
|
||||||
const isFastestLap = entries.length > 0 &&
|
const isFastestLap = entries.length > 0 &&
|
||||||
entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time).map(e => e.best_lap_time!));
|
entry.best_lap_time && entry.best_lap_time > 0 &&
|
||||||
|
entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time && e.best_lap_time > 0).map(e => e.best_lap_time!));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -71,19 +96,35 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
|
|||||||
{/* Position */}
|
{/* Position */}
|
||||||
<div className="col-span-1 flex items-center">
|
<div className="col-span-1 flex items-center">
|
||||||
<span className="text-lg font-bold">
|
<span className="text-lg font-bold">
|
||||||
{String(entry.position).padStart(2, '0')}
|
{formatPosition(entry.position)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Driver Info */}
|
{/* Driver Info */}
|
||||||
<div className="col-span-4 flex flex-col justify-center">
|
<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="flex items-center space-x-2">
|
||||||
|
<span className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>
|
||||||
|
{entry.driver_name}
|
||||||
|
</span>
|
||||||
|
{entry.user_rank && (
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<span className={`text-[10px] px-1.5 py-0.5 border rounded ${getRankColor(entry.user_rank)}`}>
|
||||||
|
#{entry.user_rank}
|
||||||
|
</span>
|
||||||
|
{entry.user_rating && (
|
||||||
|
<span className="text-[10px] text-white/40 font-mono">
|
||||||
|
{entry.user_rating}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<div className="text-xs text-white/40 font-mono truncate">{entry.car_model}</div>
|
<div className="text-xs text-white/40 font-mono truncate">{entry.car_model}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Current Lap */}
|
{/* Current Lap */}
|
||||||
<div className="col-span-2 flex items-center justify-end">
|
<div className="col-span-2 flex items-center justify-end">
|
||||||
<span className="font-mono text-sm">{entry.current_lap}</span>
|
<span className="font-mono text-sm">{formatLapCount(entry.current_lap)}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Last Lap Time */}
|
{/* Last Lap Time */}
|
||||||
@ -91,7 +132,7 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
|
|||||||
<div className="font-mono text-sm">
|
<div className="font-mono text-sm">
|
||||||
{formatLapTime(entry.last_lap_time)}
|
{formatLapTime(entry.last_lap_time)}
|
||||||
</div>
|
</div>
|
||||||
{entry.avg_lap_time && (
|
{entry.avg_lap_time && entry.avg_lap_time > 0 && (
|
||||||
<div className="text-xs text-white/40 font-mono">
|
<div className="text-xs text-white/40 font-mono">
|
||||||
Avg: {formatLapTime(entry.avg_lap_time)}
|
Avg: {formatLapTime(entry.avg_lap_time)}
|
||||||
</div>
|
</div>
|
||||||
@ -118,7 +159,14 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
|
|||||||
<BoltIcon className="w-3 h-3" />
|
<BoltIcon className="w-3 h-3" />
|
||||||
<span>Fastest lap overall</span>
|
<span>Fastest lap overall</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-[10px] px-1.5 py-0.5 border rounded bg-yellow-500/20 text-yellow-400 border-yellow-500/30">
|
||||||
|
#1-10
|
||||||
|
</span>
|
||||||
|
<span>Top 10 ranked driver</span>
|
||||||
|
</div>
|
||||||
<div>Times updated in real-time from server telemetry</div>
|
<div>Times updated in real-time from server telemetry</div>
|
||||||
|
<div className="text-white/30 text-[11px]">-- indicates driver has not started or is in pits</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { getTrackMapUrl, cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
|
import { getTrackMapUrl, cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
|
||||||
|
import { getTrackMapConfig, worldToMapCoords, type TrackMapConfig } from '@/lib/trackMapConfig';
|
||||||
|
|
||||||
interface Car {
|
interface Car {
|
||||||
carID: number;
|
carID: number;
|
||||||
@ -12,6 +13,7 @@ interface Car {
|
|||||||
position: number;
|
position: number;
|
||||||
lap_time?: number;
|
lap_time?: number;
|
||||||
best_lap_time?: number;
|
best_lap_time?: number;
|
||||||
|
world_position?: { x: number; y: number; z: number };
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LiveTrackMapProps {
|
interface LiveTrackMapProps {
|
||||||
@ -22,31 +24,79 @@ interface LiveTrackMapProps {
|
|||||||
|
|
||||||
export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapProps) {
|
export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapProps) {
|
||||||
const [imageError, setImageError] = useState(false);
|
const [imageError, setImageError] = useState(false);
|
||||||
|
const [mapConfig, setMapConfig] = useState<TrackMapConfig | null>(null);
|
||||||
|
|
||||||
// Get cleaned track map URL
|
// Static track bounds - set once and never change
|
||||||
|
const [trackBounds, setTrackBounds] = useState<{
|
||||||
|
minX: number;
|
||||||
|
maxX: number;
|
||||||
|
minZ: number;
|
||||||
|
maxZ: number;
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
// Add mouse position state
|
||||||
|
const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null);
|
||||||
|
|
||||||
|
// Define event handlers
|
||||||
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect();
|
||||||
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||||
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||||
|
setMousePos({ x, y });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
setMousePos(null);
|
||||||
|
};
|
||||||
|
|
||||||
const trackMapUrl = getTrackMapUrl(track, trackConfig);
|
const trackMapUrl = getTrackMapUrl(track, trackConfig);
|
||||||
const displayTrackName = cleanTrackName(track);
|
const displayTrackName = cleanTrackName(track);
|
||||||
const displayTrackConfig = cleanTrackConfig(trackConfig);
|
const displayTrackConfig = cleanTrackConfig(trackConfig);
|
||||||
|
|
||||||
// Calculate position on track (circular approximation)
|
useEffect(() => {
|
||||||
const getCarPosition = (normalizedPos: number) => {
|
getTrackMapConfig(track, trackConfig).then(config => {
|
||||||
// normalizedPos is 0.0 to 1.0 around the track
|
setMapConfig(config);
|
||||||
// We'll place cars in a circular path for now
|
if (config) {
|
||||||
const angle = normalizedPos * Math.PI * 2 - Math.PI / 2; // Start at top
|
const halfWidth = config.width / 2;
|
||||||
|
const halfHeight = config.height / 2;
|
||||||
// Position relative to center (percentage)
|
setTrackBounds({
|
||||||
const centerX = 50;
|
minX: config.xOffset - halfWidth,
|
||||||
const centerY = 50;
|
maxX: config.xOffset + halfWidth,
|
||||||
const radius = 40; // 40% from center
|
minZ: config.zOffset - halfHeight,
|
||||||
|
maxZ: config.zOffset + halfHeight,
|
||||||
const x = centerX + Math.cos(angle) * radius;
|
});
|
||||||
const y = centerY + Math.sin(angle) * radius;
|
}
|
||||||
|
});
|
||||||
return { x, y };
|
}, [track, trackConfig]);
|
||||||
|
|
||||||
|
// Convert world position to screen position
|
||||||
|
const getCarPosition = (car: Car) => {
|
||||||
|
// Use AC's formula with map.ini config
|
||||||
|
if (car.world_position && car.world_position.x !== undefined && mapConfig) {
|
||||||
|
const pos = worldToMapCoords(
|
||||||
|
car.world_position.x,
|
||||||
|
car.world_position.y,
|
||||||
|
car.world_position.z,
|
||||||
|
mapConfig
|
||||||
|
);
|
||||||
|
|
||||||
|
// Debug first car only
|
||||||
|
if (cars.indexOf(car) === 0) {
|
||||||
|
console.log(`[Map] World: (${car.world_position.x.toFixed(1)}, ${car.world_position.z.toFixed(1)}) -> Screen: (${pos.x.toFixed(1)}%, ${pos.y.toFixed(1)}%)`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback: distribute along diagonal based on normalizedSplinePos
|
||||||
|
const fallbackX = car.normalizedSplinePos * 100;
|
||||||
|
const fallbackY = car.normalizedSplinePos * 100;
|
||||||
|
return { x: fallbackX, y: fallbackY };
|
||||||
};
|
};
|
||||||
|
|
||||||
// Get color based on position
|
// Get color based on position
|
||||||
const getPositionColor = (position: number) => {
|
const getPositionColor = (position: number) => {
|
||||||
|
if (!position || position === 0) return '#6b7280'; // Gray for no position
|
||||||
if (position === 1) return '#ffffff'; // P1 - White
|
if (position === 1) return '#ffffff'; // P1 - White
|
||||||
if (position === 2) return '#d1d5db'; // P2 - Light gray
|
if (position === 2) return '#d1d5db'; // P2 - Light gray
|
||||||
if (position === 3) return '#9ca3af'; // P3 - Gray
|
if (position === 3) return '#9ca3af'; // P3 - Gray
|
||||||
@ -54,7 +104,11 @@ export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapP
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full aspect-square bg-black border border-white/10 overflow-hidden">
|
<div
|
||||||
|
className="relative w-full aspect-square bg-black border border-white/10 overflow-hidden"
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
>
|
||||||
{/* Track Map Background */}
|
{/* Track Map Background */}
|
||||||
{!imageError ? (
|
{!imageError ? (
|
||||||
<img
|
<img
|
||||||
@ -84,9 +138,9 @@ export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapP
|
|||||||
{/* Car Positions */}
|
{/* Car Positions */}
|
||||||
<div className="absolute inset-0">
|
<div className="absolute inset-0">
|
||||||
{cars.map((car) => {
|
{cars.map((car) => {
|
||||||
const pos = getCarPosition(car.normalizedSplinePos);
|
const pos = getCarPosition(car);
|
||||||
const color = getPositionColor(car.position);
|
const color = getPositionColor(car.position);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={car.carID}
|
key={car.carID}
|
||||||
@ -106,14 +160,16 @@ export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapP
|
|||||||
boxShadow: `0 0 10px ${color}`,
|
boxShadow: `0 0 10px ${color}`,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Position number */}
|
{/* Position number */}
|
||||||
<div
|
{car.position > 0 && (
|
||||||
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"
|
<div
|
||||||
style={{ borderColor: color, color: color }}
|
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>
|
P{car.position}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Driver name on hover */}
|
{/* 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="absolute top-6 left-1/2 transform -translate-x-1/2 opacity-0 hover:opacity-100 transition-opacity whitespace-nowrap">
|
||||||
|
|||||||
@ -1,15 +1,22 @@
|
|||||||
// lib/telemetryBridge.ts
|
// lib/telemetryBridge.ts
|
||||||
// Bridge between C++ Unix socket and Next.js SSE
|
// Bridge between C++ Unix socket telemetry server and Next.js SSE clients
|
||||||
|
|
||||||
import { Socket } from 'net';
|
import net from 'net';
|
||||||
|
|
||||||
const TELEMETRY_SOCKET_PATH = '/tmp/ACtelemetry_socket';
|
const TELEMETRY_SOCKET_PATH = '/tmp/ACtelemetry_socket';
|
||||||
|
|
||||||
|
interface Position {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
z: number;
|
||||||
|
}
|
||||||
|
|
||||||
interface CarTelemetry {
|
interface CarTelemetry {
|
||||||
carID: number;
|
carID: number;
|
||||||
driver_name: string;
|
driver_name: string;
|
||||||
driver_guid: string;
|
driver_guid: string;
|
||||||
car_model: string;
|
car_model: string;
|
||||||
|
position: Position;
|
||||||
normalizedSplinePos: number;
|
normalizedSplinePos: number;
|
||||||
speed_kmh: number;
|
speed_kmh: number;
|
||||||
gear: number;
|
gear: number;
|
||||||
@ -17,7 +24,7 @@ interface CarTelemetry {
|
|||||||
last_lap_time: number;
|
last_lap_time: number;
|
||||||
best_lap_time: number;
|
best_lap_time: number;
|
||||||
current_lap: number;
|
current_lap: number;
|
||||||
position: number;
|
position_rank: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TelemetryPacket {
|
interface TelemetryPacket {
|
||||||
@ -26,13 +33,13 @@ interface TelemetryPacket {
|
|||||||
cars: CarTelemetry[];
|
cars: CarTelemetry[];
|
||||||
}
|
}
|
||||||
|
|
||||||
type TelemetryCallback = (data: TelemetryPacket) => void;
|
type TelemetryCallback = (packet: TelemetryPacket) => void;
|
||||||
|
|
||||||
class TelemetryBridge {
|
class TelemetryBridge {
|
||||||
private socket: Socket | null = null;
|
private socket: net.Socket | null = null;
|
||||||
|
private subscribers: Set<TelemetryCallback> = new Set();
|
||||||
|
private reconnectTimer: NodeJS.Timeout | null = null;
|
||||||
private connected: boolean = false;
|
private connected: boolean = false;
|
||||||
private callbacks: Set<TelemetryCallback> = new Set();
|
|
||||||
private reconnectTimeout: NodeJS.Timeout | null = null;
|
|
||||||
private buffer: Buffer = Buffer.alloc(0);
|
private buffer: Buffer = Buffer.alloc(0);
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -40,111 +47,146 @@ class TelemetryBridge {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private connect() {
|
private connect() {
|
||||||
console.log('[Telemetry] Connecting to', TELEMETRY_SOCKET_PATH);
|
if (this.socket) {
|
||||||
|
this.socket.destroy();
|
||||||
this.socket = new Socket();
|
}
|
||||||
|
|
||||||
this.socket.connect(TELEMETRY_SOCKET_PATH, () => {
|
console.log('[Bridge] Connecting to telemetry socket...');
|
||||||
console.log('[Telemetry] Connected to C++ socket');
|
this.socket = net.createConnection(TELEMETRY_SOCKET_PATH);
|
||||||
|
|
||||||
|
this.socket.on('connect', () => {
|
||||||
|
console.log('[Bridge] Connected to telemetry server');
|
||||||
this.connected = true;
|
this.connected = true;
|
||||||
this.buffer = Buffer.alloc(0); // Reset buffer on new connection
|
this.buffer = Buffer.alloc(0);
|
||||||
|
|
||||||
|
if (this.reconnectTimer) {
|
||||||
|
clearTimeout(this.reconnectTimer);
|
||||||
|
this.reconnectTimer = null;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.socket.on('data', (data: Buffer) => {
|
this.socket.on('data', (data: Buffer) => {
|
||||||
// Append new data to buffer
|
// Append new data to buffer
|
||||||
this.buffer = Buffer.concat([this.buffer, data]);
|
this.buffer = Buffer.concat([this.buffer, data]);
|
||||||
|
|
||||||
// Parse complete packets from buffer
|
// Calculate expected packet size
|
||||||
this.parsePackets();
|
// server_id (1) + car_count (1) + cars (car_count * car_size)
|
||||||
|
const HEADER_SIZE = 2; // server_id + car_count
|
||||||
|
const CAR_SIZE = 1 + 64 + 64 + 64 + 4 + 4 + 1 + 2 + 4 + 4 + 2 + 1; // 211 bytes per car
|
||||||
|
|
||||||
|
while (this.buffer.length >= HEADER_SIZE) {
|
||||||
|
const server_id = this.buffer.readUInt8(0);
|
||||||
|
const car_count = this.buffer.readUInt8(1);
|
||||||
|
|
||||||
|
// Updated CAR_SIZE: 1 + 64 + 64 + 64 + 12 + 4 + 4 + 1 + 2 + 4 + 4 + 2 + 1 = 227 bytes
|
||||||
|
const CAR_SIZE = 227;
|
||||||
|
const expected_size = HEADER_SIZE + (car_count * CAR_SIZE);
|
||||||
|
|
||||||
|
if (this.buffer.length >= expected_size) {
|
||||||
|
// We have a complete packet
|
||||||
|
const packet_data = this.buffer.slice(0, expected_size);
|
||||||
|
this.buffer = this.buffer.slice(expected_size);
|
||||||
|
|
||||||
|
// Parse packet
|
||||||
|
const packet = this.parsePacket(packet_data);
|
||||||
|
if (packet) {
|
||||||
|
// Broadcast to all subscribers
|
||||||
|
this.subscribers.forEach(callback => {
|
||||||
|
try {
|
||||||
|
callback(packet);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Bridge] Error in subscriber callback:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Wait for more data
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.socket.on('error', (err) => {
|
this.socket.on('error', (err) => {
|
||||||
console.error('[Telemetry] Socket error:', err.message);
|
console.error('[Bridge] Socket error:', err.message);
|
||||||
this.connected = false;
|
this.connected = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.socket.on('close', () => {
|
this.socket.on('close', () => {
|
||||||
console.log('[Telemetry] Connection closed, reconnecting in 2s...');
|
console.log('[Bridge] Connection closed, reconnecting in 5s...');
|
||||||
this.connected = false;
|
this.connected = false;
|
||||||
this.socket = null;
|
|
||||||
|
|
||||||
// Reconnect after 2 seconds
|
if (this.reconnectTimer) {
|
||||||
if (this.reconnectTimeout) clearTimeout(this.reconnectTimeout);
|
clearTimeout(this.reconnectTimer);
|
||||||
this.reconnectTimeout = setTimeout(() => this.connect(), 2000);
|
}
|
||||||
|
|
||||||
|
this.reconnectTimer = setTimeout(() => {
|
||||||
|
this.connect();
|
||||||
|
}, 5000);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private parsePackets() {
|
private parsePacket(data: Buffer): TelemetryPacket | null {
|
||||||
// Telemetry packet structure from C++:
|
try {
|
||||||
// uint8_t server_id (1 byte)
|
let offset = 0;
|
||||||
// uint8_t car_count (1 byte)
|
|
||||||
// car_telemetry cars[64] (each car = 158 bytes)
|
const server_id = data.readUInt8(offset);
|
||||||
|
offset += 1;
|
||||||
const HEADER_SIZE = 2;
|
|
||||||
const CAR_SIZE = 158; // Size of car_telemetry struct
|
const car_count = data.readUInt8(offset);
|
||||||
|
offset += 1;
|
||||||
while (this.buffer.length >= HEADER_SIZE) {
|
|
||||||
const server_id = this.buffer.readUInt8(0);
|
const cars: CarTelemetry[] = [];
|
||||||
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++) {
|
for (let i = 0; i < car_count; i++) {
|
||||||
const carID = this.buffer.readUInt8(offset);
|
const carID = data.readUInt8(offset);
|
||||||
offset += 1;
|
offset += 1;
|
||||||
|
|
||||||
const driver_name = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
|
const driver_name = this.readString(data, offset, 64);
|
||||||
offset += 64;
|
offset += 64;
|
||||||
|
|
||||||
const driver_guid = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
|
const driver_guid = this.readString(data, offset, 64);
|
||||||
offset += 64;
|
offset += 64;
|
||||||
|
|
||||||
const car_model = this.buffer.toString('utf8', offset, offset + 64).replace(/\0.*$/g, '');
|
const car_model = this.readString(data, offset, 64);
|
||||||
offset += 64;
|
offset += 64;
|
||||||
|
|
||||||
const normalizedSplinePos = this.buffer.readFloatLE(offset);
|
const position: Position = {
|
||||||
|
x: data.readFloatLE(offset),
|
||||||
|
y: data.readFloatLE(offset + 4),
|
||||||
|
z: data.readFloatLE(offset + 8),
|
||||||
|
};
|
||||||
|
offset += 12;
|
||||||
|
|
||||||
|
const normalizedSplinePos = data.readFloatLE(offset);
|
||||||
offset += 4;
|
offset += 4;
|
||||||
|
|
||||||
const speed_kmh = this.buffer.readFloatLE(offset);
|
const speed_kmh = data.readFloatLE(offset);
|
||||||
offset += 4;
|
offset += 4;
|
||||||
|
|
||||||
const gear = this.buffer.readUInt8(offset);
|
const gear = data.readUInt8(offset);
|
||||||
offset += 1;
|
offset += 1;
|
||||||
|
|
||||||
const rpm = this.buffer.readUInt16LE(offset);
|
const rpm = data.readUInt16LE(offset);
|
||||||
offset += 2;
|
offset += 2;
|
||||||
|
|
||||||
const last_lap_time = this.buffer.readUInt32LE(offset);
|
const last_lap_time = data.readUInt32LE(offset);
|
||||||
offset += 4;
|
offset += 4;
|
||||||
|
|
||||||
const best_lap_time = this.buffer.readUInt32LE(offset);
|
const best_lap_time = data.readUInt32LE(offset);
|
||||||
offset += 4;
|
offset += 4;
|
||||||
|
|
||||||
const current_lap = this.buffer.readUInt16LE(offset);
|
const current_lap = data.readUInt16LE(offset);
|
||||||
offset += 2;
|
offset += 2;
|
||||||
|
|
||||||
const position = this.buffer.readUInt8(offset);
|
const position_rank = data.readUInt8(offset);
|
||||||
offset += 1;
|
offset += 1;
|
||||||
|
|
||||||
packet.cars.push({
|
cars.push({
|
||||||
carID,
|
carID,
|
||||||
driver_name,
|
driver_name,
|
||||||
driver_guid,
|
driver_guid,
|
||||||
car_model,
|
car_model,
|
||||||
|
position,
|
||||||
normalizedSplinePos,
|
normalizedSplinePos,
|
||||||
speed_kmh,
|
speed_kmh,
|
||||||
gear,
|
gear,
|
||||||
@ -152,51 +194,82 @@ class TelemetryBridge {
|
|||||||
last_lap_time,
|
last_lap_time,
|
||||||
best_lap_time,
|
best_lap_time,
|
||||||
current_lap,
|
current_lap,
|
||||||
position,
|
position_rank,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Emit packet to all callbacks
|
return {
|
||||||
this.callbacks.forEach(cb => cb(packet));
|
server_id,
|
||||||
|
car_count,
|
||||||
// Remove processed packet from buffer
|
cars,
|
||||||
this.buffer = this.buffer.subarray(expected_size);
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[Bridge] Error parsing packet:', error);
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private readString(buffer: Buffer, offset: number, length: number): string {
|
||||||
|
const end = buffer.indexOf(0, offset);
|
||||||
|
const strEnd = end === -1 || end >= offset + length ? offset + length : end;
|
||||||
|
return buffer.toString('utf8', offset, strEnd).trim();
|
||||||
|
}
|
||||||
|
|
||||||
public subscribe(callback: TelemetryCallback): () => void {
|
public subscribe(callback: TelemetryCallback): () => void {
|
||||||
this.callbacks.add(callback);
|
this.subscribers.add(callback);
|
||||||
console.log('[Telemetry] Subscriber added, total:', this.callbacks.size);
|
console.log('[Bridge] Subscriber added (total:', this.subscribers.size, ')');
|
||||||
|
|
||||||
// Return unsubscribe function
|
// Return unsubscribe function
|
||||||
return () => {
|
return () => {
|
||||||
this.callbacks.delete(callback);
|
this.subscribers.delete(callback);
|
||||||
console.log('[Telemetry] Subscriber removed, total:', this.callbacks.size);
|
console.log('[Bridge] Subscriber removed (total:', this.subscribers.size, ')');
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getSubscriberCount(): number {
|
||||||
|
return this.subscribers.size;
|
||||||
|
}
|
||||||
|
|
||||||
public isConnected(): boolean {
|
public isConnected(): boolean {
|
||||||
return this.connected;
|
return this.connected;
|
||||||
}
|
}
|
||||||
|
|
||||||
public disconnect() {
|
public destroy() {
|
||||||
if (this.reconnectTimeout) {
|
if (this.reconnectTimer) {
|
||||||
clearTimeout(this.reconnectTimeout);
|
clearTimeout(this.reconnectTimer);
|
||||||
|
this.reconnectTimer = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.socket) {
|
if (this.socket) {
|
||||||
this.socket.destroy();
|
this.socket.destroy();
|
||||||
this.socket = null;
|
this.socket = null;
|
||||||
}
|
}
|
||||||
this.connected = false;
|
|
||||||
|
this.subscribers.clear();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Singleton instance
|
// Singleton instance
|
||||||
let bridge: TelemetryBridge | null = null;
|
let bridgeInstance: TelemetryBridge | null = null;
|
||||||
|
|
||||||
export function getTelemetryBridge(): TelemetryBridge {
|
export function getTelemetryBridge(): TelemetryBridge {
|
||||||
if (!bridge) {
|
if (!bridgeInstance) {
|
||||||
bridge = new TelemetryBridge();
|
bridgeInstance = new TelemetryBridge();
|
||||||
}
|
}
|
||||||
return bridge;
|
return bridgeInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup on process exit
|
||||||
|
if (typeof process !== 'undefined') {
|
||||||
|
process.on('SIGTERM', () => {
|
||||||
|
if (bridgeInstance) {
|
||||||
|
bridgeInstance.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
process.on('SIGINT', () => {
|
||||||
|
if (bridgeInstance) {
|
||||||
|
bridgeInstance.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
174
lib/trackMapConfig.ts
Normal file
174
lib/trackMapConfig.ts
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
// lib/trackMapConfig.ts
|
||||||
|
// Parse and use AC track map.ini configuration files
|
||||||
|
|
||||||
|
export interface TrackMapConfig {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
margin: number;
|
||||||
|
scaleFactor: number;
|
||||||
|
xOffset: number;
|
||||||
|
zOffset: number;
|
||||||
|
drawingSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache for parsed configs
|
||||||
|
const configCache = new Map<string, TrackMapConfig | null>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clean track name from database format (removes CSP prefix)
|
||||||
|
* Example: "csp/2100/../spa" -> "spa"
|
||||||
|
*/
|
||||||
|
export function cleanTrackPath(track: string): string {
|
||||||
|
// Remove CSP prefix pattern: csp/XXXX/../
|
||||||
|
const cleaned = track.replace(/^csp\/\d+\/\.\.\//, '');
|
||||||
|
return cleaned;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch and parse a track's map.ini file
|
||||||
|
*/
|
||||||
|
export async function getTrackMapConfig(
|
||||||
|
track: string,
|
||||||
|
trackConfig: string = ''
|
||||||
|
): Promise<TrackMapConfig | null> {
|
||||||
|
// Clean track name first
|
||||||
|
const cleanTrack = cleanTrackPath(track);
|
||||||
|
const cleanConfig = trackConfig || '';
|
||||||
|
|
||||||
|
const cacheKey = `${cleanTrack}|${cleanConfig}`;
|
||||||
|
|
||||||
|
// Check cache first
|
||||||
|
if (configCache.has(cacheKey)) {
|
||||||
|
return configCache.get(cacheKey)!;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Try to fetch from openwheels.racing first
|
||||||
|
let configUrl = cleanConfig && cleanConfig !== 'default'
|
||||||
|
? `https://openwheels.racing/files/img/tracks/${cleanTrack}/${cleanConfig}/map.ini`
|
||||||
|
: `https://openwheels.racing/files/img/tracks/${cleanTrack}/map.ini`;
|
||||||
|
|
||||||
|
let response = await fetch(configUrl);
|
||||||
|
|
||||||
|
// Fallback to local public directory
|
||||||
|
if (!response.ok) {
|
||||||
|
const localPath = cleanConfig && cleanConfig !== 'default'
|
||||||
|
? `/tracks/${cleanTrack}/${cleanConfig}/map.ini`
|
||||||
|
: `/tracks/${cleanTrack}/map.ini`;
|
||||||
|
|
||||||
|
response = await fetch(localPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
console.log(`[TrackMap] No map.ini found for ${cleanTrack}/${cleanConfig}`);
|
||||||
|
configCache.set(cacheKey, null);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const iniText = await response.text();
|
||||||
|
const config = parseMapIni(iniText);
|
||||||
|
|
||||||
|
console.log(`[TrackMap] Loaded config for ${cleanTrack}/${cleanConfig}:`, config);
|
||||||
|
configCache.set(cacheKey, config);
|
||||||
|
return config;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`[TrackMap] Failed to load map.ini for ${cleanTrack}:`, error);
|
||||||
|
configCache.set(cacheKey, null);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse map.ini text format
|
||||||
|
*/
|
||||||
|
function parseMapIni(iniText: string): TrackMapConfig {
|
||||||
|
const lines = iniText.split('\n');
|
||||||
|
const config: Partial<TrackMapConfig> = {};
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
|
const trimmed = line.trim();
|
||||||
|
|
||||||
|
// Skip comments and empty lines
|
||||||
|
if (!trimmed || trimmed.startsWith(';') || trimmed.startsWith('[')) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse KEY=VALUE
|
||||||
|
const [key, value] = trimmed.split('=').map(s => s.trim());
|
||||||
|
if (!key || !value) continue;
|
||||||
|
|
||||||
|
const numValue = parseFloat(value);
|
||||||
|
|
||||||
|
switch (key.toUpperCase()) {
|
||||||
|
case 'WIDTH':
|
||||||
|
config.width = numValue;
|
||||||
|
break;
|
||||||
|
case 'HEIGHT':
|
||||||
|
config.height = numValue;
|
||||||
|
break;
|
||||||
|
case 'MARGIN':
|
||||||
|
config.margin = numValue;
|
||||||
|
break;
|
||||||
|
case 'SCALE_FACTOR':
|
||||||
|
config.scaleFactor = numValue;
|
||||||
|
break;
|
||||||
|
case 'X_OFFSET':
|
||||||
|
config.xOffset = numValue;
|
||||||
|
break;
|
||||||
|
case 'Z_OFFSET':
|
||||||
|
config.zOffset = numValue;
|
||||||
|
break;
|
||||||
|
case 'DRAWING_SIZE':
|
||||||
|
config.drawingSize = numValue;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return with defaults if any values are missing
|
||||||
|
return {
|
||||||
|
width: config.width || 1000,
|
||||||
|
height: config.height || 1000,
|
||||||
|
margin: config.margin || 20,
|
||||||
|
scaleFactor: config.scaleFactor || 1.0,
|
||||||
|
xOffset: config.xOffset || 0,
|
||||||
|
zOffset: config.zOffset || 0,
|
||||||
|
drawingSize: config.drawingSize || 10,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert world coordinates to map pixel coordinates using AC's formula
|
||||||
|
* Trying with coordinate rotation
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* Convert world coordinates to map pixel coordinates
|
||||||
|
* Based on working formula with potential rotation fix
|
||||||
|
*/
|
||||||
|
export function worldToMapCoords(
|
||||||
|
worldX: number,
|
||||||
|
worldY: number,
|
||||||
|
worldZ: number,
|
||||||
|
config: TrackMapConfig
|
||||||
|
): { x: number; y: number } {
|
||||||
|
var aspectRatio = config.width / config.height;
|
||||||
|
|
||||||
|
// Add offsets to player position
|
||||||
|
|
||||||
|
if (aspectRatio < 1) {
|
||||||
|
worldX = worldX * aspectRatio;
|
||||||
|
} else {
|
||||||
|
worldZ = worldZ / aspectRatio;
|
||||||
|
}
|
||||||
|
|
||||||
|
var x = (worldX) + config.xOffset;
|
||||||
|
var y = (worldZ) + config.zOffset;
|
||||||
|
|
||||||
|
y /= config.scaleFactor;
|
||||||
|
x /= config.scaleFactor;
|
||||||
|
|
||||||
|
// Percentages
|
||||||
|
x = (x * 100) / (config.width);
|
||||||
|
y = (y * 100) / (config.height);
|
||||||
|
|
||||||
|
return { x, y };
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user