Update index.html

index.html

@@ -486,6 +486,21 @@
                 };
             }
 
+            // Helper function to draw multi-point paths
+            function drawPath(points, color, isDashed = false) {
+                ctx.beginPath();
+                if (isDashed) ctx.setLineDash([8, 6]);
+                points.forEach((ptKey, idx) => {
+                    const pos = typeof ptKey === 'string' ? nodes[ptKey].pos : toCanvas(ptKey.x, ptKey.y);
+                    if (idx === 0) ctx.moveTo(pos.x, pos.y);
+                    else ctx.lineTo(pos.x, pos.y);
+                });
+                ctx.strokeStyle = color;
+                ctx.lineWidth = isDashed ? 5 : 4;
+                ctx.stroke();
+                if (isDashed) ctx.setLineDash([]);
+            }
+
             // -------------------------------------------------------------
             // A. DRAW F1 CIRCUIT TRACK
             // -------------------------------------------------------------
@@ -521,107 +536,79 @@
 
             // -------------------------------------------------------------
             // B. DEFINE MAP NODES (Grandstands, Food, Hubs, Gates)
-            // Coordinates adjusted outward to clear the track loop entirely
+            // Shifted safely outside the track boundary
             // -------------------------------------------------------------
             const nodes = {
                 // Grandstands
-                "Hamilton GS": { pos: toCanvas(-2.2, -0.5), type: "gs", label: `Hamilton (${hamilton})` },
-                "Becketts GS": { pos: toCanvas(1, 3.5), type: "gs", label: `Becketts (${becketts})` },
-                "Stowe GS": { pos: toCanvas(3.5, 2), type: "gs", label: `Stowe (${stowe})` },
-                "Village GS": { pos: toCanvas(-3.2, 1.8), type: "gs", label: `Village (${village})` },
-                "Club GS": { pos: toCanvas(1.5, -3), type: "gs", label: `Club (${club})` },
+                "Hamilton GS": { pos: toCanvas(-2.2, -2.5), type: "gs", label: `Hamilton (${hamilton})` },
+                "Becketts GS": { pos: toCanvas(1, 4.8), type: "gs", label: `Becketts (${becketts})` },
+                "Stowe GS": { pos: toCanvas(4.8, 1.5), type: "gs", label: `Stowe (${stowe})` },
+                "Village GS": { pos: toCanvas(-4.2, 1.2), type: "gs", label: `Village (${village})` },
+                "Club GS": { pos: toCanvas(2.8, -4.5), type: "gs", label: `Club (${club})` },
 
                 // Food Stalls & Arenas
-                "Main Fan Zone": { pos: toCanvas(-2.2, 0.8), type: "food", label: "🍔 Main Fan Zone" },
-                "Becketts Food": { pos: toCanvas(1.8, 2.8), type: "food", label: "🌭 Becketts Food" },
-                "Village Plaza": { pos: toCanvas(-2.8, 2.8), type: "food", label: "🍕 Village Plaza" },
-                "Club Eats": { pos: toCanvas(0.2, -2.2), type: "food", label: "🍦 Club Eats" },
+                "Main Fan Zone": { pos: toCanvas(-4.2, -1.0), type: "food", label: "🍔 Main Fan Zone" },
+                "Becketts Food": { pos: toCanvas(2.8, 4.2), type: "food", label: "🌭 Becketts Food" },
+                "Village Plaza": { pos: toCanvas(-3.2, 3.2), type: "food", label: "🍕 Village Plaza" },
+                "Club Eats": { pos: toCanvas(-0.5, -4.5), type: "food", label: "🍦 Club Eats" },
 
                 // Intermediate Junction Hubs
-                "Arena Crossroad": { pos: toCanvas(-2.8, 0.2), type: "hub", label: "📍 Arena Hub" },
-                "Becketts Interchange": { pos: toCanvas(0.5, 2.2), type: "hub", label: "📍 Becketts Hub" },
-                "South Bypass": { pos: toCanvas(-0.8, -1.5), type: "hub", label: "📍 South Hub" },
+                "Arena Crossroad": { pos: toCanvas(-3.5, -2.2), type: "hub", label: "📍 Arena Hub" },
+                "Becketts Interchange": { pos: toCanvas(-1.0, 4.2), type: "hub", label: "📍 Becketts Hub" },
+                "South Bypass": { pos: toCanvas(-2.2, -3.8), type: "hub", label: "📍 South Hub" },
 
                 // Gates
-                "Main Gate 1": { pos: toCanvas(-3.8, -0.5), type: "gate", label: "🚪 Main Gate 1" },
-                "South Gate 2": { pos: toCanvas(1, -4.2), type: "gate", label: "🚪 South Gate 2" },
-                "East Gate 3": { pos: toCanvas(4.5, -1), type: "gate", label: "🚪 East Gate 3" },
-                "West Gate 4": { pos: toCanvas(-4.2, 2.8), type: "gate", label: "🚪 West Gate 4" }
+                "Main Gate 1": { pos: toCanvas(-4.8, -2.2), type: "gate", label: "🚪 Main Gate 1" },
+                "South Gate 2": { pos: toCanvas(1.5, -4.8), type: "gate", label: "🚪 South Gate 2" },
+                "East Gate 3": { pos: toCanvas(5.2, -1.5), type: "gate", label: "🚪 East Gate 3" },
+                "West Gate 4": { pos: toCanvas(-4.8, 3.2), type: "gate", label: "🚪 West Gate 4" }
             };
 
             // -------------------------------------------------------------
             // C. INTERCONNECTED STANDARD PEDESTRIAN PATHS (GREEN / RED)
+            // Explicit waypoint routing around track perimeter
             // -------------------------------------------------------------
-            const paths = [
-                // Network towards Gate 1 (Turns Red on Gate 1 Bottleneck)
-                { start: "Hamilton GS", end: "Arena Crossroad", color: isGate1Bottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Arena Crossroad", end: "Main Fan Zone", color: isGate1Bottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Main Fan Zone", end: "Main Gate 1", color: isGate1Bottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Village GS", end: "Arena Crossroad", color: isGate1Bottleneck ? "#ff4444" : "#00cc66" },
-
-                // Network towards Becketts & Gate 3
-                { start: "Becketts GS", end: "Becketts Interchange", color: isGate3Bottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Becketts Interchange", end: "Becketts Food", color: isGate3Bottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Becketts Interchange", end: "Main Fan Zone", color: isGate1Bottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Becketts Food", end: "Stowe GS", color: isGate3Bottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Stowe GS", end: "East Gate 3", color: isGate3Bottleneck ? "#ff4444" : "#00cc66" },
-
-                // West & South Paths
-                { start: "Village GS", end: "Village Plaza", color: "#00cc66" },
-                { start: "Village Plaza", end: "West Gate 4", color: "#00cc66" },
-                { start: "Hamilton GS", end: "South Bypass", color: "#00cc66" },
-                { start: "South Bypass", end: "Club Eats", color: "#00cc66" },
-                { start: "Club GS", end: "Club Eats", color: "#00cc66" },
-                { start: "Club Eats", end: "South Gate 2", color: "#00cc66" }
-            ];
+            const pathColorG1 = isGate1Bottleneck ? "#ff4444" : "#00cc66";
+            const pathColorG3 = isGate3Bottleneck ? "#ff4444" : "#00cc66";
+
+            // Gate 1 Network
+            drawPath(["Hamilton GS", "Arena Crossroad"], pathColorG1);
+            drawPath(["Arena Crossroad", "Main Fan Zone"], pathColorG1);
+            drawPath(["Main Fan Zone", "Main Gate 1"], pathColorG1);
+            drawPath(["Village GS", "Main Fan Zone"], pathColorG1);
+
+            // Gate 3 & Becketts Network
+            drawPath(["Becketts GS", "Becketts Interchange"], pathColorG3);
+            drawPath(["Becketts GS", "Becketts Food"], pathColorG3);
+            drawPath(["Becketts Food", "Stowe GS"], pathColorG3);
+            drawPath(["Stowe GS", "East Gate 3"], pathColorG3);
+            
+            // Outer Northern Connection (Becketts Hub <-> Village Plaza <-> Fan Zone around top/left)
+            drawPath(["Becketts Interchange", "Village Plaza"], pathColorG1);
+            drawPath(["Village Plaza", "Village GS"], "#00cc66");
+            drawPath(["Village Plaza", "West Gate 4"], "#00cc66");
 
-            paths.forEach(p => {
-                ctx.beginPath();
-                ctx.moveTo(nodes[p.start].pos.x, nodes[p.start].pos.y);
-                ctx.lineTo(nodes[p.end].pos.x, nodes[p.end].pos.y);
-                ctx.strokeStyle = p.color;
-                ctx.lineWidth = 4;
-                ctx.stroke();
-            });
+            // Outer Southern Connection (Hamilton <-> South Bypass <-> Club Eats <-> South Gate 2 around bottom)
+            drawPath(["Hamilton GS", "South Bypass"], "#00cc66");
+            drawPath(["South Bypass", "Club Eats"], "#00cc66");
+            drawPath(["Club GS", "Club Eats"], "#00cc66");
+            drawPath(["Club Eats", "South Gate 2"], "#00cc66");
 
             // -------------------------------------------------------------
             // D. EXPANDED GOOGLE MAPS MULTI-NODE DETOURS (PURPLE)
+            // Detours routed cleanly along the outer perimeter
             // -------------------------------------------------------------
             if (isGate1Bottleneck) {
-                // Multi-leg Detour 1: Fan Zone -> South Bypass -> Club Eats -> South Gate 2
-                ctx.beginPath();
-                ctx.setLineDash([8, 6]);
-                ctx.moveTo(nodes["Main Fan Zone"].pos.x, nodes["Main Fan Zone"].pos.y);
-                ctx.lineTo(nodes["South Bypass"].pos.x, nodes["South Bypass"].pos.y);
-                ctx.lineTo(nodes["Club Eats"].pos.x, nodes["Club Eats"].pos.y);
-                ctx.lineTo(nodes["South Gate 2"].pos.x, nodes["South Gate 2"].pos.y);
-                ctx.strokeStyle = "#a020f0";
-                ctx.lineWidth = 5;
-                ctx.stroke();
+                // Fan Zone -> South Hub -> Club Eats -> South Gate 2
+                drawPath(["Main Fan Zone", "Arena Crossroad", "South Bypass", "Club Eats", "South Gate 2"], "#a020f0", true);
 
-                // Multi-leg Detour 2: Arena Hub -> Village Plaza -> West Gate 4
-                ctx.beginPath();
-                ctx.moveTo(nodes["Arena Crossroad"].pos.x, nodes["Arena Crossroad"].pos.y);
-                ctx.lineTo(nodes["Village Plaza"].pos.x, nodes["Village Plaza"].pos.y);
-                ctx.lineTo(nodes["West Gate 4"].pos.x, nodes["West Gate 4"].pos.y);
-                ctx.strokeStyle = "#a020f0";
-                ctx.lineWidth = 5;
-                ctx.stroke();
-                ctx.setLineDash([]);
+                // Arena Hub -> West Gate 4
+                drawPath(["Arena Crossroad", "Village GS", "West Gate 4"], "#a020f0", true);
             }
 
             if (isGate3Bottleneck) {
-                // Detour 3: Becketts Interchange -> Arena Hub -> South Bypass -> South Gate 2
-                ctx.beginPath();
-                ctx.setLineDash([8, 6]);
-                ctx.moveTo(nodes["Becketts Interchange"].pos.x, nodes["Becketts Interchange"].pos.y);
-                ctx.lineTo(nodes["Arena Crossroad"].pos.x, nodes["Arena Crossroad"].pos.y);
-                ctx.lineTo(nodes["South Bypass"].pos.x, nodes["South Bypass"].pos.y);
-                ctx.lineTo(nodes["South Gate 2"].pos.x, nodes["South Gate 2"].pos.y);
-                ctx.strokeStyle = "#a020f0";
-                ctx.lineWidth = 5;
-                ctx.stroke();
-                ctx.setLineDash([]);
+                // Becketts Hub -> Village Plaza -> Main Fan Zone -> South Hub -> South Gate 2
+                drawPath(["Becketts Interchange", "Village Plaza", "Main Fan Zone", "South Bypass", "South Gate 2"], "#a020f0", true);
             }
 
             // -------------------------------------------------------------