Create index.html

index.html

@@ -0,0 +1,175 @@
+  function drawCanvasMap(hamilton, becketts, stowe, gate1Load, isBottleneck) {
+            const canvas = document.getElementById('silverstoneCanvas');
+            const ctx = canvas.getContext('2d');
+
+            // Clear canvas background
+            ctx.fillStyle = '#181818';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Map coordinate converter (Scales world grid to canvas pixel positions)
+            function toCanvas(x, y) {
+                return {
+                    x: x * 55 + 320,
+                    y: -y * 45 + 220
+                };
+            }
+
+            // -------------------------------------------------------------
+            // A. DRAW F1 CIRCUIT TRACK
+            // -------------------------------------------------------------
+            const trackPoints = [
+                {x: 0, y: 0}, {x: 2, y: -2}, {x: 3, y: -3}, {x: 1, y: -3},
+                {x: -1, y: -2}, {x: -1, y: 2}, {x: 1, y: 4}, {x: 3, y: 4},
+                {x: 4, y: 2}, {x: 2, y: 0}, {x: 0, y: 0}
+            ];
+
+            // Draw outer dark grey track
+            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.lineWidth = 14;
+            ctx.stroke();
+
+            // Draw center dashed line (racing line)
+            ctx.beginPath();
+            ctx.setLineDash([6, 6]);
+            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 = '#ffffff';
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+            ctx.setLineDash([]); // Reset dash
+
+            // -------------------------------------------------------------
+            // B. DEFINE MAP NODES (Grandstands, Food Stalls, Gates)
+            // -------------------------------------------------------------
+            const nodes = {
+                "Hamilton GS": { pos: toCanvas(-0.5, 0), type: "gs", label: `Hamilton GS (${hamilton})` },
+                "Becketts GS": { pos: toCanvas(1, 3.5), type: "gs", label: `Becketts GS (${becketts})` },
+                "Stowe GS": { pos: toCanvas(3.5, 2), type: "gs", label: `Stowe GS (${stowe})` },
+                "Main Fan Zone": { pos: toCanvas(0.5, 0.8), type: "food", label: "🍔 Main Fan Zone" },
+                "Becketts Food": { pos: toCanvas(1.8, 3), type: "food", label: "🌭 Becketts Food" },
+                "Main Gate 1": { pos: toCanvas(-2.5, 1), type: "gate", label: "🚪 Main Gate 1" },
+                "South Gate 2": { pos: toCanvas(1, -4), type: "gate", label: "🚪 South Gate 2" },
+                "East Gate 3": { pos: toCanvas(4.5, -1), type: "gate", label: "🚪 East Gate 3" }
+            };
+
+            // -------------------------------------------------------------
+            // C. DRAW PEDESTRIAN WALKING PATHS
+            // -------------------------------------------------------------
+            const paths = [
+                { start: "Hamilton GS", end: "Main Fan Zone", color: "#00cc66" },
+                { start: "Main Fan Zone", end: "Main Gate 1", color: isBottleneck ? "#ff4444" : "#00cc66" },
+                { start: "Becketts GS", end: "Becketts Food", color: "#00cc66" },
+                { start: "Becketts Food", end: "Main Gate 1", color: isBottleneck ? "#ff4444" : "#00cc66" },
+                { start: "Stowe GS", end: "East Gate 3", color: "#00cc66" },
+                { start: "Hamilton GS", end: "South Gate 2", color: "#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();
+            });
+
+            // -------------------------------------------------------------
+            // D. DRAW GOOGLE MAPS PURPLE DETOUR PATH (If Bottlenecked)
+            // -------------------------------------------------------------
+            if (isBottleneck) {
+                ctx.beginPath();
+                ctx.setLineDash([8, 8]);
+                ctx.moveTo(nodes["Main Fan Zone"].pos.x, nodes["Main Fan Zone"].pos.y);
+                ctx.lineTo(nodes["South Gate 2"].pos.x, nodes["South Gate 2"].pos.y);
+                ctx.strokeStyle = "#a020f0"; // Purple
+                ctx.lineWidth = 5;
+                ctx.stroke();
+                ctx.setLineDash([]); // Reset dash
+            }
+
+            // -------------------------------------------------------------
+            // E. DRAW NODE BOXES AND LABELS
+            // -------------------------------------------------------------
+            for (let key in nodes) {
+                const n = nodes[key];
+                ctx.font = "bold 11px Arial";
+                const textWidth = ctx.measureText(n.label).width;
+                const boxPadding = 8;
+                
+                let boxColor = "#3498db"; // Blue for Grandstand
+                if (n.type === "food") boxColor = "#f39c12"; // Orange for Food Court
+                if (n.type === "gate") {
+                    boxColor = (key === "Main Gate 1" && isBottleneck) ? "#ff4444" : "#00cc66";
+                }
+
+                // Draw background rounded box
+                ctx.fillStyle = boxColor;
+                ctx.beginPath();
+                ctx.roundRect(
+                    n.pos.x - textWidth / 2 - boxPadding,
+                    n.pos.y - 12,
+                    textWidth + boxPadding * 2,
+                    24,
+                    6
+                );
+                ctx.fill();
+                ctx.strokeStyle = "#ffffff";
+                ctx.lineWidth = 1;
+                ctx.stroke();
+
+                // Draw white text
+                ctx.fillStyle = "#ffffff";
+                ctx.textAlign = "center";
+                ctx.textBaseline = "middle";
+                ctx.fillText(n.label, n.pos.x, n.pos.y);
+            }
+
+            // Draw Legend
+            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);
+        }
+
+        function updateReport(gate1, gate2, gate3, isBottleneck, excess, becketts) {
+            const reportDiv = document.getElementById('reportBox');
+            
+            if (isBottleneck) {
+                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 stampede/delay risks.</p>
+                    <hr style="border-color: #552222; margin: 10px 0;">
+                    <h4 style="color: #a020f0;">🔄 Real-Time Optimiser Actions:</h4>
+                    <p>1. <strong>Google Maps Rerouting:</strong> Diverting <strong>${excess} fans</strong> along the <span class="badge badge-purple">PURPLE DETOUR</span> to <strong>South Gate 2</strong>.</p>
+                    <p>2. <strong>Zomato Staggering:</strong> Delaying Becketts Grandstand exit calls by <strong>5 minutes</strong> to clear gate pressure.</p>
+                `;
+            } else {
+                reportDiv.className = "report-box";
+                reportDiv.innerHTML = `
+                    <h3 style="color: #00cc66;">🟢 ALL PEDESTRIAN PATHWAYS CLEAR</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> / 40 fans/min (Safe)</p>
+                    <p style="margin-top: 5px; color: #aaa;"><em>Status: No dynamic detour required. Crowd flow across grandstands and food stalls is balanced.</em></p>
+                `;
+            }
+        }
+
+        // Initialize simulation on initial page load
+        window.onload = updateSimulation;
+    </script>
+</body>
+</html>