Update index.html

index.html

@@ -42,7 +42,7 @@
             display: flex;
             flex-wrap: wrap;
             gap: 20px;
-            max-width: 1400px;
+            max-width: 1450px;
             margin: 0 auto;
         }
 
@@ -140,7 +140,7 @@
 
     <header>
         <h1>🏎️ SILVERSTONE BRITISH GP — CROWD FLOW OPTIMISER</h1>
-        <p>Real-time crowd simulation, dynamic bottleneck detection & Google Maps style rerouting</p>
+        <p>Real-time interconnected crowd routing, dynamic bottleneck propagation & multi-path detours</p>
     </header>
 
     <div class="dashboard">
@@ -156,32 +156,33 @@
             </div>
 
             <div class="slider-group">
-                <label for="becketts">Becketts GS: <span id="becketts-val" class="value-badge">50</span> fans/min</label>
-                <input type="range" id="becketts" min="10" max="100" value="50" oninput="updateSimulation()">
+                <label for="becketts">Becketts GS: <span id="becketts-val" class="value-badge">60</span> fans/min</label>
+                <input type="range" id="becketts" min="10" max="100" value="60" oninput="updateSimulation()">
             </div>
 
             <div class="slider-group">
-                <label for="stowe">Stowe GS: <span id="stowe-val" class="value-badge">30</span> fans/min</label>
-                <input type="range" id="stowe" min="10" max="100" value="30" oninput="updateSimulation()">
+                <label for="stowe">Stowe GS: <span id="stowe-val" class="value-badge">40</span> fans/min</label>
+                <input type="range" id="stowe" min="10" max="100" value="40" oninput="updateSimulation()">
             </div>
 
             <div class="slider-group">
-                <label for="village">Village GS: <span id="village-val" class="value-badge">40</span> fans/min</label>
-                <input type="range" id="village" min="10" max="100" value="40" oninput="updateSimulation()">
+                <label for="village">Village GS: <span id="village-val" class="value-badge">55</span> fans/min</label>
+                <input type="range" id="village" min="10" max="100" value="55" oninput="updateSimulation()">
             </div>
 
             <div class="slider-group">
-                <label for="club">Club GS: <span id="club-val" class="value-badge">45</span> fans/min</label>
-                <input type="range" id="club" min="10" max="100" value="45" oninput="updateSimulation()">
+                <label for="club">Club GS: <span id="club-val" class="value-badge">50</span> fans/min</label>
+                <input type="range" id="club" min="10" max="100" value="50" oninput="updateSimulation()">
             </div>
 
             <hr style="border-color: #333; margin: 20px 0;">
 
             <div style="font-size: 12px; color: #aaa; line-height: 1.4;">
-                <p><strong>💡 How It Works:</strong></p>
-                <p>• <strong>Main Gate 1 Limit:</strong> 60 fans/min</p>
-                <p>• When crowd load exceeds 60, walking paths turn <span class="badge badge-red">RED</span>.</p>
-                <p>• The system instantly activates <span class="badge badge-purple">PURPLE</span> Google Maps detours to South Gate 2 and West Gate 4.</p>
+                <p><strong>💡 Dynamic Flow Rules:</strong></p>
+                <p>• <strong>Gate 1 Threshold:</strong> 50 fans/min</p>
+                <p>• <strong>Gate 3 Threshold:</strong> 45 fans/min</p>
+                <p>• Bottlenecks cause cascading <span class="badge badge-red">RED</span> corridor congestions.</p>
+                <p>• Active rerouting renders complex multi-node <span class="badge badge-purple">PURPLE</span> Google Maps detours.</p>
             </div>
         </div>
 
@@ -189,7 +190,7 @@
         <!-- RIGHT PANEL: HTML5 CANVAS MAP & TEXT ANALYSIS REPORT           -->
         <!-- ============================================================== -->
         <div class="map-panel">
-            <canvas id="silverstoneCanvas" width="850" height="500"></canvas>
+            <canvas id="silverstoneCanvas" width="900" height="520"></canvas>
             <div id="reportBox" class="report-box">
                 <!-- Dynamic Text Report Injected Here -->
             </div>
@@ -200,8 +201,9 @@
     <!-- 2. JAVASCRIPT SIMULATION & CANVAS DRAWING LOGIC                    -->
     <!-- ================================================================== -->
     <script>
-        // Gate Capacity Limit before bottleneck occurs
-        const GATE_1_CAPACITY = 60;
+        // Gate Capacity Limits
+        const GATE_1_CAPACITY = 50;
+        const GATE_3_CAPACITY = 45;
 
         function updateSimulation() {
             // 1. READ SLIDER VALUES FROM HTML INPUTS
@@ -219,23 +221,28 @@
             document.getElementById('club-val').innerText = clubCrowd;
 
             // 2. MATHEMATICAL TRAFFIC LOAD CALCULATIONS
-            const gate1Load = Math.round(hamiltonCrowd * 0.5 + beckettsCrowd * 0.3 + villageCrowd * 0.2);
-            const gate2Load = Math.round(hamiltonCrowd * 0.2 + stoweCrowd * 0.2 + clubCrowd * 0.4);
-            const gate3Load = Math.round(stoweCrowd * 0.7 + beckettsCrowd * 0.5);
-            const gate4Load = Math.round(villageCrowd * 0.6 + hamiltonCrowd * 0.3);
+            const gate1Load = Math.round(hamiltonCrowd * 0.5 + beckettsCrowd * 0.3 + villageCrowd * 0.3);
+            const gate2Load = Math.round(hamiltonCrowd * 0.2 + clubCrowd * 0.4);
+            const gate3Load = Math.round(stoweCrowd * 0.6 + beckettsCrowd * 0.4);
+            const gate4Load = Math.round(villageCrowd * 0.4 + hamiltonCrowd * 0.2);
 
-            // Check if bottleneck occurs at Main Gate 1
-            const isBottleneck = gate1Load > GATE_1_CAPACITY;
-            const excessCrowd = isBottleneck ? (gate1Load - GATE_1_CAPACITY) : 0;
+            // Bottleneck flags
+            const isGate1Bottleneck = gate1Load > GATE_1_CAPACITY;
+            const isGate3Bottleneck = gate3Load > GATE_3_CAPACITY;
+            const excessGate1 = isGate1Bottleneck ? (gate1Load - GATE_1_CAPACITY) : 0;
+            const excessGate3 = isGate3Bottleneck ? (gate3Load - GATE_3_CAPACITY) : 0;
 
             // 3. DRAW MAP ON HTML5 CANVAS
-            drawCanvasMap(hamiltonCrowd, beckettsCrowd, stoweCrowd, villageCrowd, clubCrowd, gate1Load, isBottleneck);
+            drawCanvasMap(
+                hamiltonCrowd, beckettsCrowd, stoweCrowd, villageCrowd, clubCrowd,
+                gate1Load, gate3Load, isGate1Bottleneck, isGate3Bottleneck
+            );
 
             // 4. UPDATE TEXT REPORT
-            updateReport(gate1Load, gate2Load, gate3Load, gate4Load, isBottleneck, excessCrowd);
+            updateReport(gate1Load, gate2Load, gate3Load, gate4Load, isGate1Bottleneck, isGate3Bottleneck, excessGate1, excessGate3);
         }
 
-        function drawCanvasMap(hamilton, becketts, stowe, village, club, gate1Load, isBottleneck) {
+        function drawCanvasMap(hamilton, becketts, stowe, village, club, gate1Load, gate3Load, isGate1Bottleneck, isGate3Bottleneck) {
             const canvas = document.getElementById('silverstoneCanvas');
             const ctx = canvas.getContext('2d');
 
@@ -246,8 +253,8 @@
             // Map coordinate converter
             function toCanvas(x, y) {
                 return {
-                    x: x * 65 + 400,
-                    y: -y * 50 + 250
+                    x: x * 65 + 430,
+                    y: -y * 48 + 260
                 };
             }
 
@@ -260,18 +267,18 @@
                 {x: 1, y: 4}, {x: 3, y: 4}, {x: 4, y: 2}, {x: 2, y: 0}, {x: -1, y: 0}
             ];
 
-            // Draw outer dark grey track
+            // Outer track border
             ctx.beginPath();
             trackPoints.forEach((pt, idx) => {
                 const c = toCanvas(pt.x, pt.y);
                 if (idx === 0) ctx.moveTo(c.x, c.y);
                 else ctx.lineTo(c.x, c.y);
             });
-            ctx.strokeStyle = '#444444';
+            ctx.strokeStyle = '#333333';
             ctx.lineWidth = 14;
             ctx.stroke();
 
-            // Draw center dashed line (racing line)
+            // Racing line
             ctx.beginPath();
             ctx.setLineDash([6, 6]);
             trackPoints.forEach((pt, idx) => {
@@ -279,13 +286,13 @@
                 if (idx === 0) ctx.moveTo(c.x, c.y);
                 else ctx.lineTo(c.x, c.y);
             });
-            ctx.strokeStyle = '#ffffff';
+            ctx.strokeStyle = '#aaaaaa';
             ctx.lineWidth = 1.5;
             ctx.stroke();
             ctx.setLineDash([]); // Reset dash
 
             // -------------------------------------------------------------
-            // B. DEFINE MAP NODES (Grandstands, Food Stalls, Gates)
+            // B. DEFINE MAP NODES (Grandstands, Food, Hubs, Gates)
             // -------------------------------------------------------------
             const nodes = {
                 // Grandstands
@@ -301,38 +308,42 @@
                 "Village Plaza": { pos: toCanvas(-1.8, 2.2), type: "food", label: "🍕 Village Plaza" },
                 "Club Eats": { pos: toCanvas(0.2, -2.2), type: "food", label: "🍦 Club Eats" },
 
+                // Intermediate Junction Hubs
+                "Arena Crossroad": { pos: toCanvas(-1.2, 0.8), 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" },
+
                 // Gates
-                "Main Gate 1": { pos: toCanvas(-3.2, 0), type: "gate", label: "🚪 Main Gate 1" },
+                "Main Gate 1": { pos: toCanvas(-3.5, 0), 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.2, -1), type: "gate", label: "🚪 East Gate 3" },
-                "West Gate 4": { pos: toCanvas(-3.8, 2.8), type: "gate", label: "🚪 West Gate 4" }
+                "East Gate 3": { pos: toCanvas(4.5, -1), type: "gate", label: "🚪 East Gate 3" },
+                "West Gate 4": { pos: toCanvas(-4.0, 2.8), type: "gate", label: "🚪 West Gate 4" }
             };
 
             // -------------------------------------------------------------
-            // C. DRAW PEDESTRIAN WALKING PATHS
+            // C. INTERCONNECTED STANDARD PEDESTRIAN PATHS (GREEN / RED)
             // -------------------------------------------------------------
             const paths = [
-                // Hamilton & Main Gate Paths
-                { start: "Hamilton GS", end: "Main Fan Zone", color: "#00cc66" },
-                { start: "Main Fan Zone", end: "Main Gate 1", color: isBottleneck ? "#ff4444" : "#00cc66" },
-                
-                // Becketts Paths
-                { start: "Becketts GS", end: "Becketts Food", color: "#00cc66" },
-                { start: "Becketts Food", end: "Main Gate 1", color: isBottleneck ? "#ff4444" : "#00cc66" },
-                { start: "Becketts GS", end: "East Gate 3", color: "#00cc66" },
-
-                // Stowe & East Gate Paths
-                { start: "Stowe GS", end: "East Gate 3", color: "#00cc66" },
-
-                // Village & West Gate 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: "Village Plaza", end: "Main Gate 1", color: isBottleneck ? "#ff4444" : "#00cc66" },
-
-                // Club & South Gate Paths
+                { 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" },
-                { start: "Hamilton GS", end: "Club Eats", color: "#00cc66" }
+                { start: "Club Eats", end: "South Gate 2", color: "#00cc66" }
             ];
 
             paths.forEach(p => {
@@ -345,28 +356,43 @@
             });
 
             // -------------------------------------------------------------
-            // D. DRAW GOOGLE MAPS PURPLE DETOUR PATHS (If Bottlenecked)
+            // D. EXPANDED GOOGLE MAPS MULTI-NODE DETOURS (PURPLE)
             // -------------------------------------------------------------
-            if (isBottleneck) {
-                // Detour to South Gate 2
+            if (isGate1Bottleneck) {
+                // Multi-leg Detour 1: Fan Zone -> South Bypass -> Club Eats -> South Gate 2
                 ctx.beginPath();
-                ctx.setLineDash([8, 8]);
+                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"; // Purple
+                ctx.strokeStyle = "#a020f0";
                 ctx.lineWidth = 5;
                 ctx.stroke();
 
-                // Secondary Detour to West Gate 4
+                // Multi-leg Detour 2: Arena Hub -> Village Plaza -> West Gate 4
                 ctx.beginPath();
-                ctx.moveTo(nodes["Village Plaza"].pos.x, nodes["Village Plaza"].pos.y);
+                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([]); // Reset dash
+                ctx.setLineDash([]);
+            }
+
+            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([]);
             }
 
             // -------------------------------------------------------------
@@ -376,12 +402,17 @@
                 const n = nodes[key];
                 ctx.font = "bold 11px Arial";
                 const textWidth = ctx.measureText(n.label).width;
-                const boxPadding = 8;
+                const boxPadding = 7;
                 
-                let boxColor = "#3498db"; // Blue for Grandstand
-                if (n.type === "food") boxColor = "#f39c12"; // Orange for Food Court
+                let boxColor = "#3498db"; // Blue for Grandstands
+                if (n.type === "food") boxColor = "#f39c12"; // Orange for Food
+                if (n.type === "hub") boxColor = "#7f8c8d";  // Grey for Hubs
                 if (n.type === "gate") {
-                    boxColor = (key === "Main Gate 1" && isBottleneck) ? "#ff4444" : "#00cc66";
+                    if ((key === "Main Gate 1" && isGate1Bottleneck) || (key === "East Gate 3" && isGate3Bottleneck)) {
+                        boxColor = "#ff4444";
+                    } else {
+                        boxColor = "#00cc66";
+                    }
                 }
 
                 // Draw background rounded box
@@ -399,7 +430,7 @@
                 ctx.lineWidth = 1;
                 ctx.stroke();
 
-                // Draw white text
+                // Draw label text
                 ctx.fillStyle = "#ffffff";
                 ctx.textAlign = "center";
                 ctx.textBaseline = "middle";
@@ -410,34 +441,41 @@
             ctx.font = "11px Arial";
             ctx.fillStyle = "#ffffff";
             ctx.textAlign = "left";
-            ctx.fillText("🟢 Clear Path", 20, 30);
-            ctx.fillText("🔴 Congested Path", 120, 30);
-            ctx.fillText("🟣 Google Maps Detour", 240, 30);
+            ctx.fillText("🟢 Clear Pathway", 20, 25);
+            ctx.fillText("🔴 Congested Network Segment", 140, 25);
+            ctx.fillText("🟣 Google Maps Active Multi-Leg Detour", 330, 25);
         }
 
-        function updateReport(gate1, gate2, gate3, gate4, isBottleneck, excess) {
+        function updateReport(gate1, gate2, gate3, gate4, isG1Alert, isG3Alert, excess1, excess3) {
             const reportDiv = document.getElementById('reportBox');
             
-            if (isBottleneck) {
+            if (isG1Alert || isG3Alert) {
                 reportDiv.className = "report-box alert";
-                reportDiv.innerHTML = `
-                    <h3 style="color: #ff4444;">🔴 BOTTLENECK ALERT AT MAIN GATE 1</h3>
-                    <p>• <strong>Gate 1 Load:</strong> <code>${gate1}</code> fans/min (Limit: <code>${GATE_1_CAPACITY}</code>)</p>
-                    <p>• <strong>Queue Overflow:</strong> <code>${excess}</code> fans facing delay risks.</p>
+                let alertsHtml = `<h3 style="color: #ff4444;">🔴 NETWORK BOTTLENECK ALERT ACTIVATED</h3>`;
+                
+                if (isG1Alert) {
+                    alertsHtml += `<p>• <strong>Main Gate 1 Bottleneck:</strong> Load <code>${gate1}</code> fans/min (Max limit: ${GATE_1_CAPACITY}). Overflow: <code>${excess1}</code> fans.</p>`;
+                }
+                if (isG3Alert) {
+                    alertsHtml += `<p>• <strong>East Gate 3 Bottleneck:</strong> Load <code>${gate3}</code> fans/min (Max limit: ${GATE_3_CAPACITY}). Overflow: <code>${excess3}</code> fans.</p>`;
+                }
+
+                alertsHtml += `
                     <hr style="border-color: #552222; margin: 10px 0;">
-                    <h4 style="color: #a020f0;">🔄 Dynamic Rerouting Active:</h4>
-                    <p>1. <strong>Google Maps Rerouting:</strong> Diverting crowd overflow along <span class="badge badge-purple">PURPLE DETOURS</span> to <strong>South Gate 2</strong> and <strong>West Gate 4</strong>.</p>
-                    <p>2. <strong>Staggering Notice:</strong> Directing Village Grandstand pedestrian traffic directly toward West Gate 4 bypass.</p>
+                    <h4 style="color: #a020f0;">🔄 Dynamic Rerouting Protocol:</h4>
+                    <p>• Activating interconnected <span class="badge badge-purple">PURPLE DETOURS</span> across <strong>Arena Hub</strong>, <strong>South Bypass</strong>, and <strong>Becketts Interchange</strong>.</p>
+                    <p>• Directing overflow pedestrian traffic to under-utilized exit points at <strong>South Gate 2</strong> and <strong>West Gate 4</strong>.</p>
                 `;
+                reportDiv.innerHTML = alertsHtml;
             } else {
                 reportDiv.className = "report-box";
                 reportDiv.innerHTML = `
-                    <h3 style="color: #00cc66;">🟢 ALL PEDESTRIAN PATHWAYS CLEAR</h3>
-                    <p>• <strong>Main Gate 1:</strong> <code>${gate1}</code> / ${GATE_1_CAPACITY} fans/min (Safe)</p>
-                    <p>• <strong>South Gate 2:</strong> <code>${gate2}</code> / 50 fans/min (Safe)</p>
-                    <p>• <strong>East Gate 3:</strong> <code>${gate3}</code> / 40 fans/min (Safe)</p>
-                    <p>• <strong>West Gate 4:</strong> <code>${gate4}</code> / 45 fans/min (Safe)</p>
-                    <p style="margin-top: 5px; color: #aaa;"><em>Status: No detour required. Crowd distribution across all 4 gates is balanced.</em></p>
+                    <h3 style="color: #00cc66;">🟢 ALL INTERCONNECTED PATHWAYS OPTIMAL</h3>
+                    <p>• <strong>Main Gate 1 Load:</strong> <code>${gate1}</code> / ${GATE_1_CAPACITY} fans/min (Safe)</p>
+                    <p>• <strong>South Gate 2 Load:</strong> <code>${gate2}</code> / 50 fans/min (Safe)</p>
+                    <p>• <strong>East Gate 3 Load:</strong> <code>${gate3}</code> / ${GATE_3_CAPACITY} fans/min (Safe)</p>
+                    <p>• <strong>West Gate 4 Load:</strong> <code>${gate4}</code> / 45 fans/min (Safe)</p>
+                    <p style="margin-top: 5px; color: #aaa;"><em>Status: Grid flow is balanced across all junctions. No purple detour routing required.</em></p>
                 `;
             }
         }