Version 1.0 - Stable

app/api/events/[event_id]/results/route.ts

@@ -1,13 +1,16 @@
-// app/api/events/[id]/results/route.ts
+// app/api/events/[event_id]/results/route.ts
 import { query } from '@/lib/db';
-import { NextResponse } from 'next/server';
+import { NextResponse, NextRequest } from 'next/server';
 
 export const dynamic = 'force-dynamic';
 
 export async function GET(
-  request: Request,
+  request: NextRequest,
-  { params }: { params: { id: string } }
+  context: { params: Promise<{ event_id: string }> }
-) {
+) { 
+
+    const { event_id } = await context.params;
+
   try {
     const standingsSql = `
       SELECT 
@@ -35,7 +38,7 @@ export async function GET(
       ORDER BY tcs.total_points DESC, tcs.best_finish ASC
     `;
     
-    const standings = await query(standingsSql, [params.id]);
+    const standings = await query(standingsSql, [event_id]);
 
     return NextResponse.json({ standings });
   } catch (error) {

app/events/[event_id]/page.tsx

@@ -6,9 +6,64 @@ import { Event, EventRegistration } from '@/types/racing';
 import { notFound } from 'next/navigation';
 import { TrophyIcon, MapPinIcon, UsersIcon, ClockIcon, CalendarIcon } from '@/components/ui/icons';
 import EventRegistrationForm from '@/components/events/EventRegistrationForm';
+import EventResultClient from '@/components/events/EventResultsClient';
+
+export const dynamic = "force-dynamic";
+
+async function getEventResults(eventId: number) {
+
+  if (eventId == undefined) {
+    return { event: null, standings: [] };
+  }
+  // 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, [String(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 };
+}
+
 
 async function getEvent(eventId: number): Promise<Event | null> {
-  const sql = `
+    const sql = `
     SELECT e.*, COUNT(er.registration_id) as registrations_count
     FROM events e
     LEFT JOIN event_registrations er ON e.event_id = er.event_id AND er.status = 'REGISTERED'
@@ -49,19 +104,21 @@ function formatDate(date: Date): string {
 export default async function EventDetailPage({
   params,
 }: {
-  params: Promise<{ event_id: string }>;
+  params: Promise<{ event_id: number }>;
 }) {
   const { event_id } = await params;
-  
+  const event: any = await getEvent(event_id);
-  const eventId = parseInt(event_id, 10);
-  
-  const event: any = await getEvent(eventId);
   if (!event) {
     notFound();
   }
 
-  const registrations = await getEventRegistrations(eventId);
+  const registrations = await getEventRegistrations(event_id);
   
+  // Fetch initial event results/standings 
+
+  const { standings } = await getEventResults(event_id);
+
+
   const isOpen = event.event_status === 'OPEN';
   const isFull = event.registrations_count >= event.max_participants;
   const deadlinePassed = event.registration_deadline && new Date(event.registration_deadline) < new Date();
@@ -118,6 +175,12 @@ export default async function EventDetailPage({
                   {deadlinePassed && !isFull && 'Registration deadline has passed.'}
                   {event.event_status === 'CLOSED' && !isFull && !deadlinePassed && 'Registration is closed for this event.'}
                 </p>
+                <div className="mt-6">
+                    <EventResultClient 
+                        eventId={event_id} 
+                        initialStandings={standings}
+                    />
+                </div>
               </div>
             )}
 

app/events/[event_id]/results/page.tsx

@@ -1,4 +1,4 @@
-// app/events/[id]/results/page.tsx
+// app/events/[event_id]/results/page.tsx
 // Event championship results page with auto-refresh
 
 import { query } from '@/lib/db';
@@ -22,7 +22,11 @@ interface TeamStanding {
   }[];
 }
 
-async function getEventResults(eventId: string) {
+async function getEventResults(eventId: number) {
+
+  if (eventId == undefined) {
+    return { event: null, standings: [] };
+  }
   // Get event info
   const eventSql = `
     SELECT 
@@ -34,7 +38,7 @@ async function getEventResults(eventId: string) {
     FROM events
     WHERE event_id = $1
   `;
-  const events = await query(eventSql, [eventId]);
+  const events = await query(eventSql, [String(eventId)]);
   const event = events[0];
 
   // Get team standings with driver details
@@ -76,8 +80,18 @@ function getPositionColor(position: number): string {
   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);
+  
+export default async function EventResultsPage({
+  params,
+}: {
+  params: Promise<{ event_id: number }>;
+}) {
+
+  const { event_id } = await params;  
+
+  console.log('Fetching results for event ID:', event_id);
+  const { event, standings } = await getEventResults(event_id);
 
   if (!event) {
     return (
@@ -96,7 +110,7 @@ export default async function EventResultsPage({ params }: { params: { id: strin
         <div className="max-w-7xl mx-auto px-6 py-16">
           <div className="space-y-4">
             <Link 
-              href={`/events/${params.id}`}
+              href={`/events/${event_id}`}
               className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors text-sm"
             >
               <span>←</span>
@@ -104,7 +118,6 @@ export default async function EventResultsPage({ params }: { params: { id: strin
             </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
@@ -120,101 +133,22 @@ export default async function EventResultsPage({ params }: { params: { id: strin
 
       {/* Team Championship Standings */}
       <div className="max-w-7xl mx-auto px-6 py-12">
-        {standings.length === 0 ? (
+        <EventResultsClient 
-          <div className="border border-white/10 p-16 text-center bg-black">
+          eventId={event_id} 
-            <TrophyIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
+          initialStandings={standings}
-            <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 className="grid grid-cols-2 md:grid-cols-4 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">P1:</span> <span className="font-bold">5 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">P2:</span> <span className="font-bold">3 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">P3:</span> <span className="font-bold">2 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">P4...:</span> <span className="font-bold">1 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
+            Team points are the sum of all driver points from that team in the event • Updates every 5 seconds
           </p>
         </div>
       </div>

app/events/page.tsx

@@ -76,7 +76,7 @@ export default async function EventsPage() {
               <div key={event.event_id} className="border border-white/10 sharp-border bg-black">
                 
                 <img 
-                    src="https://openwheels.racing/files/img/EnduranceEvents1-1.png?fckcache=999"
+                    src={`https://openwheels.racing/files/img/EnduranceEvents1-${event.event_id}.png?fckcache=999`}
                     alt={event.event_name}
                     className="w-full h-48 object-cover object-[50%_0%] border-b border-white/10 grayscale hover:grayscale-0 transition duration-300"
                 />

components/events/EventResultsClient.tsx

@@ -30,7 +30,7 @@ export default function EventResultsClient({
   eventId, 
   initialStandings 
 }: { 
-  eventId: string; 
+  eventId: number; 
   initialStandings: TeamStanding[] 
 }) {
   const [standings, setStandings] = useState<TeamStanding[]>(initialStandings);

lib/trackMapConfig.ts

@@ -136,14 +136,7 @@ function parseMapIni(iniText: string): TrackMapConfig {
   };
 }
 
-/**
+
- * 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,
@@ -153,7 +146,8 @@ export function worldToMapCoords(
   var aspectRatio = config.width / config.height;
 
   // Add offsets to player position
-
+  console.log("config" , config);
+  console.log("aspectRatio:", aspectRatio);
   if (aspectRatio < 1) {
     worldX = worldX * aspectRatio;
   } else {
@@ -167,7 +161,7 @@ export function worldToMapCoords(
   x /= config.scaleFactor; 
 
   // Percentages 
-  x = (x * 100) / (config.width);
+  x = (x * 100) / (config.width);     
   y = (y * 100) / (config.height);
 
   return { x, y };

next.config.ts

@@ -1,24 +0,0 @@
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Use standalone output for server deployment
-  output: 'standalone',
-  
-  // Image optimization
-  images: {
-    unoptimized: true,
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'openwheels.racing',
-      },
-    ],
-  },
-  
-  // Type checking during build
-  typescript: {
-    ignoreBuildErrors: false,
-  },
-};
-
-module.exports = nextConfig;

package.json

@@ -11,10 +11,10 @@
     "dependencies": {
         "axios": "^1.12.2",
         "date-fns": "^4.1.0",
-        "next": "16.0.0",
+        "next": "^16.0.10",
         "pg": "^8.16.3",
-        "react": "19.2.0",
+        "react": "^19.2.3",
-        "react-dom": "19.2.0",
+        "react-dom": "^19.2.3",
         "socket.io-client": "^4.8.1"
     },
     "devDependencies": {