Feature: Live Map and Events Tab
This commit is contained in:
@@ -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 });
|
||||
}
|
||||
}
|
||||
@@ -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 });
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
},
|
||||
});
|
||||
}
|
||||
+21
-167
@@ -1,13 +1,12 @@
|
||||
// app/dashboard/page.tsx
|
||||
// Dashboard - navbar/footer now in layout.tsx
|
||||
// Dashboard - now with auto-refresh!
|
||||
|
||||
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';
|
||||
import { LiveDotIcon } from '@/components/ui/icons';
|
||||
import DashboardClient from '@/components/dashboard/DashboardClient';
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
async function getConnectedDrivers(): Promise<DriverWithServer[]> {
|
||||
async function getConnectedDrivers() {
|
||||
const sql = `
|
||||
SELECT
|
||||
u.driver_guid,
|
||||
@@ -20,7 +19,14 @@ async function getConnectedDrivers(): Promise<DriverWithServer[]> {
|
||||
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
|
||||
@@ -36,36 +42,27 @@ async function getConnectedDrivers(): Promise<DriverWithServer[]> {
|
||||
driver_team: row.driver_team,
|
||||
car_model: row.car_model,
|
||||
car_skin: row.car_skin,
|
||||
cuts_alltime: 0,
|
||||
contacts_alltime: 0,
|
||||
laps_completed: row.laps_completed,
|
||||
user_rank: row.user_rank,
|
||||
is_connect: true,
|
||||
is_loading: false,
|
||||
current_server: row.server_id,
|
||||
created_at: new Date(),
|
||||
server: {
|
||||
server_id: row.server_id,
|
||||
server_name: row.server_name,
|
||||
server_track: row.server_track,
|
||||
session_type: 0,
|
||||
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,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const drivers = 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[]>);
|
||||
const initialDrivers = await getConnectedDrivers();
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -85,153 +82,10 @@ export default async function DashboardPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 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" />}
|
||||
/>
|
||||
<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>
|
||||
{/* Client component with auto-refresh */}
|
||||
<DashboardClient initialDrivers={initialDrivers} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user