Update index.html

index.html

@@ -453,34 +453,39 @@
             ctx.fillStyle = '#181818';
             ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-            // Coordinate system mapping
+            // Scale and translation to frame the official Silverstone Grand Prix track
             function toCanvas(x, y) {
                 return {
-                    x: x * 65 + 430,
-                    y: -y * 48 + 260
+                    x: x * 68 + 400,
+                    y: -y * 52 + 250
                 };
             }
 
-            // Real Silverstone circuit geometry outline
+            // Accurate 18-turn geometry of Silverstone Circuit
             const trackPoints = [
-                {x: -1.5, y: -2.5}, // Hamilton Straight / Grid
-                {x: -0.2, y: -2.5}, // Abbey
-                {x: 0.5, y: -1.8},  // Farm Curve
-                {x: -0.2, y: -1.0}, // Village Loop
-                {x: -1.2, y: -1.2}, // The Loop
-                {x: -2.2, y: 0.2},  // Wellington Straight
-                {x: -2.0, y: 1.8},  // Brooklands / Luffield
-                {x: -0.8, y: 2.2},  // Woodcote
-                {x: 1.2, y: 3.2},   // Copse
-                {x: 3.2, y: 2.8},   // Maggotts / Becketts
-                {x: 3.8, y: 1.2},   // Chapel / Hangar Straight
-                {x: 3.5, y: -1.2},  // Stowe
-                {x: 2.2, y: -3.0},  // Vale
-                {x: 0.2, y: -3.2},  // Club
-                {x: -1.5, y: -2.5}  // Finish Line / Main Straight
+                {x: -1.0, y: -2.3}, // Hamilton Straight / Grid
+                {x: 0.1,  y: -2.3}, // Turn 1: Abbey
+                {x: 0.7,  y: -1.7}, // Turn 2: Farm Curve
+                {x: -0.1, y: -1.1}, // Turn 3: Village
+                {x: -1.0, y: -1.3}, // Turn 4: The Loop
+                {x: -1.1, y: -0.8}, // Turn 5: Aintree
+                {x: -2.1, y: 0.5},  // Wellington Straight
+                {x: -1.9, y: 1.8},  // Turn 6: Brooklands
+                {x: -1.1, y: 2.1},  // Turn 7: Luffield
+                {x: -0.5, y: 1.8},  // Turn 8: Woodcote
+                {x: 0.5,  y: 2.6},  // National Straight
+                {x: 1.4,  y: 3.2},  // Turn 9: Copse
+                {x: 2.8,  y: 3.0},  // Turn 10 & 11: Maggotts
+                {x: 3.4,  y: 2.3},  // Turn 12 & 13: Becketts
+                {x: 3.7,  y: 1.4},  // Turn 14: Chapel
+                {x: 3.5,  y: -0.9}, // Hangar Straight
+                {x: 3.2,  y: -1.8}, // Turn 15: Stowe
+                {x: 2.0,  y: -3.1}, // Turn 16: Vale
+                {x: 0.3,  y: -3.2}, // Turn 17 & 18: Club
+                {x: -1.0, y: -2.3}  // Return to Hamilton Straight
             ];
 
-            // Outer track border
+            // Draw asphalt track base
             ctx.beginPath();
             trackPoints.forEach((pt, idx) => {
                 const c = toCanvas(pt.x, pt.y);
@@ -491,7 +496,7 @@
             ctx.lineWidth = 14;
             ctx.stroke();
 
-            // Racing line
+            // Draw racing line
             ctx.beginPath();
             ctx.setLineDash([6, 6]);
             trackPoints.forEach((pt, idx) => {
@@ -504,34 +509,34 @@
             ctx.stroke();
             ctx.setLineDash([]);
 
-            // MAP NODES positioned outside the track outline
+            // MAP NODES positioned cleanly outside the circuit perimeter
             const nodes = {
                 // Grandstands
-                "Hamilton GS": { pos: toCanvas(-1.0, -3.4), type: "gs", label: `Hamilton (${hamilton})` },
-                "Becketts GS": { pos: toCanvas(3.8, 3.5), type: "gs", label: `Becketts (${becketts})` },
-                "Stowe GS": { pos: toCanvas(4.8, -1.2), type: "gs", label: `Stowe (${stowe})` },
-                "Village GS": { pos: toCanvas(-0.2, -0.2), type: "gs", label: `Village (${village})` },
-                "Club GS": { pos: toCanvas(0.5, -4.2), type: "gs", label: `Club (${club})` },
+                "Hamilton GS": { pos: toCanvas(-0.8, -3.3), type: "gs", label: `Hamilton (${hamilton})` },
+                "Becketts GS": { pos: toCanvas(4.1, 2.8), type: "gs", label: `Becketts (${becketts})` },
+                "Stowe GS": { pos: toCanvas(4.5, -1.8), type: "gs", label: `Stowe (${stowe})` },
+                "Village GS": { pos: toCanvas(-0.1, -0.3), type: "gs", label: `Village (${village})` },
+                "Club GS": { pos: toCanvas(0.8, -4.1), type: "gs", label: `Club (${club})` },
 
                 // Food Stalls & Arenas
                 "Main Fan Zone": { pos: toCanvas(-2.8, -1.8), type: "food", label: "🍔 Main Fan Zone" },
                 "Becketts Food": { pos: toCanvas(2.2, 4.0), type: "food", label: "🌭 Becketts Food" },
                 "Village Plaza": { pos: toCanvas(-3.2, 1.2), type: "food", label: "🍕 Village Plaza" },
-                "Club Eats": { pos: toCanvas(-1.8, -4.0), type: "food", label: "🍦 Club Eats" },
+                "Club Eats": { pos: toCanvas(-1.5, -4.1), type: "food", label: "🍦 Club Eats" },
 
                 // Intermediate Junction Hubs
                 "Arena Crossroad": { pos: toCanvas(-3.8, -2.8), type: "hub", label: "📍 Arena Hub" },
                 "Becketts Interchange": { pos: toCanvas(0.2, 3.8), type: "hub", label: "📍 Becketts Hub" },
-                "South Bypass": { pos: toCanvas(-3.2, -3.8), type: "hub", label: "📍 South Hub" },
+                "South Bypass": { pos: toCanvas(-3.0, -3.8), type: "hub", label: "📍 South Hub" },
 
-                // Outer Gates
+                // Gates
                 "Main Gate 1": { pos: toCanvas(-4.8, -2.8), type: "gate", label: "🚪 Main Gate 1" },
-                "South Gate 2": { pos: toCanvas(2.5, -4.5), type: "gate", label: "🚪 South Gate 2" },
-                "East Gate 3": { pos: toCanvas(5.2, 0.2), type: "gate", label: "🚪 East Gate 3" },
+                "South Gate 2": { pos: toCanvas(2.5, -4.4), type: "gate", label: "🚪 South Gate 2" },
+                "East Gate 3": { pos: toCanvas(4.8, -0.5), type: "gate", label: "🚪 East Gate 3" },
                 "West Gate 4": { pos: toCanvas(-4.5, 2.2), type: "gate", label: "🚪 West Gate 4" }
             };
 
-            // Custom Waypoint path drawing function
+            // Waypoint drawing function for non-intersecting pedestrian paths
             function drawPath(points, color, isDashed = false) {
                 ctx.beginPath();
                 if (isDashed) ctx.setLineDash([8, 6]);
@@ -549,7 +554,7 @@
             const pathColorG1 = isGate1Bottleneck ? "#ff4444" : "#00cc66";
             const pathColorG3 = isGate3Bottleneck ? "#ff4444" : "#00cc66";
 
-            // Standard Pathways routed around the track perimeter
+            // Pedestrian paths around the outside of the circuit
             drawPath(["Hamilton GS", "Arena Crossroad"], pathColorG1);
             drawPath(["Arena Crossroad", "Main Fan Zone"], pathColorG1);
             drawPath(["Main Fan Zone", "Main Gate 1"], pathColorG1);
@@ -568,7 +573,7 @@
             drawPath(["Club GS", "Club Eats"], "#00cc66");
             drawPath(["Club Eats", "South Gate 2"], "#00cc66");
 
-            // Google Maps Detour Routing (Purple Lines) around perimeter
+            // Rerouting purple detours along perimeter pathways
             if (isGate1Bottleneck) {
                 drawPath(["Main Fan Zone", "Arena Crossroad", "South Bypass", "Club Eats", "South Gate 2"], "#a020f0", true);
                 drawPath(["Arena Crossroad", {x: -4.8, y: -0.2}, "West Gate 4"], "#a020f0", true);