Update index.html

index.html

@@ -261,9 +261,7 @@
     </header>
 
     <div class="dashboard">
-        <!-- ============================================================== -->
-        <!-- LEFT PANEL: USER SLIDER INPUTS & ONLINE ORDERING               -->
-        <!-- ============================================================== -->
+        <!-- LEFT PANEL -->
         <div class="controls-panel">
             <h2>⚙️ Grandstand Crowd Inputs</h2>
             
@@ -294,7 +292,6 @@
 
             <hr style="border-color: #333; margin: 15px 0;">
 
-            <!-- ONLINE ORDERING SECTION -->
             <h2 style="color: #f39c12;">🍔 Click & Collect Food Express</h2>
             <button class="order-btn" onclick="openOrderModal()">🛒 Place Express Food/Merch Order</button>
 
@@ -316,18 +313,14 @@
             </div>
         </div>
 
-        <!-- ============================================================== -->
-        <!-- RIGHT PANEL: HTML5 CANVAS MAP & TEXT ANALYSIS REPORT           -->
-        <!-- ============================================================== -->
+        <!-- RIGHT PANEL -->
         <div class="map-panel">
             <canvas id="silverstoneCanvas" width="900" height="520"></canvas>
-            <div id="reportBox" class="report-box">
-                <!-- Dynamic Text Report Injected Here -->
-            </div>
+            <div id="reportBox" class="report-box"></div>
         </div>
     </div>
 
-    <!-- ONLINE ORDER MODAL DIALOG -->
+    <!-- MODAL -->
     <div id="orderModal" class="modal">
         <div class="modal-content">
             <h3>🍔 Place Online Pickup Order</h3>
@@ -360,63 +353,47 @@
         </div>
     </div>
 
-    <!-- ================================================================== -->
-    <!-- 2. JAVASCRIPT SIMULATION & CANVAS DRAWING LOGIC                    -->
-    <!-- ================================================================== -->
+    <!-- SCRIPT -->
     <script>
-        // Gate Capacity Limits
         const GATE_1_CAPACITY = 50;
         const GATE_3_CAPACITY = 45;
 
-        // Active Orders State Management
         let activeOrders = [];
         let orderCounter = 101;
 
         function updateSimulation() {
-            // 1. READ SLIDER VALUES FROM HTML INPUTS
             const hamiltonCrowd = parseInt(document.getElementById('hamilton').value);
             const beckettsCrowd = parseInt(document.getElementById('becketts').value);
             const stoweCrowd = parseInt(document.getElementById('stowe').value);
             const villageCrowd = parseInt(document.getElementById('village').value);
             const clubCrowd = parseInt(document.getElementById('club').value);
 
-            // Update UI slider text badges
             document.getElementById('hamilton-val').innerText = hamiltonCrowd;
             document.getElementById('becketts-val').innerText = beckettsCrowd;
             document.getElementById('stowe-val').innerText = stoweCrowd;
             document.getElementById('village-val').innerText = villageCrowd;
             document.getElementById('club-val').innerText = clubCrowd;
 
-            // 2. MATHEMATICAL TRAFFIC LOAD CALCULATIONS
             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);
 
-            // 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, gate3Load, isGate1Bottleneck, isGate3Bottleneck
             );
 
-            // 4. UPDATE TEXT REPORT
             updateReport(gate1Load, gate2Load, gate3Load, gate4Load, isGate1Bottleneck, isGate3Bottleneck, excessGate1, excessGate3);
         }
 
-        /* --- ONLINE ORDERING FUNCTIONS --- */
-        function openOrderModal() {
-            document.getElementById('orderModal').style.display = 'flex';
-        }
-
-        function closeOrderModal() {
-            document.getElementById('orderModal').style.display = 'none';
-        }
+        function openOrderModal() { document.getElementById('orderModal').style.display = 'flex'; }
+        function closeOrderModal() { document.getElementById('orderModal').style.display = 'none'; }
 
         function submitOrder() {
             const location = document.getElementById('pickupLocation').value;
@@ -434,9 +411,8 @@
             activeOrders.push(newOrder);
             closeOrderModal();
             renderOrdersUI();
-            updateSimulation(); // Refresh Canvas Map Badges
+            updateSimulation();
 
-            // Automatically transition order status to Ready after 8 seconds
             setTimeout(() => {
                 newOrder.status = 'Ready for Pickup';
                 renderOrdersUI();
@@ -459,7 +435,7 @@
 
             container.innerHTML = activeOrders.map(o => `
                 <div class="order-card ${o.status === 'Ready for Pickup' ? 'ready' : ''}">
-                    <div style="display:flex; justify-space-between; font-weight:bold;">
+                    <div style="display:flex; justify-content:space-between; font-weight:bold;">
                         <span>${o.id} - ${o.customer}</span>
                         <span style="color: ${o.status === 'Ready for Pickup' ? '#00cc66' : '#f39c12'}">${o.status}</span>
                     </div>
@@ -474,11 +450,10 @@
             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
+            // Coordinate system mapping
             function toCanvas(x, y) {
                 return {
                     x: x * 65 + 430,
@@ -486,28 +461,23 @@
                 };
             }
 
-            // 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
-            // -------------------------------------------------------------
+            // Real Silverstone circuit geometry outline
             const trackPoints = [
-                {x: -1, y: 0}, {x: 1, y: -2}, {x: 3, y: -3}, {x: 2, y: -4},
-                {x: -1, y: -3}, {x: -2, y: -1}, {x: -3, y: 1}, {x: -1, y: 3},
-                {x: 1, y: 4}, {x: 3, y: 4}, {x: 4, y: 2}, {x: 2, y: 0}, {x: -1, y: 0}
+                {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
             ];
 
             // Outer track border
@@ -532,97 +502,92 @@
             ctx.strokeStyle = '#aaaaaa';
             ctx.lineWidth = 1.5;
             ctx.stroke();
-            ctx.setLineDash([]); // Reset dash
+            ctx.setLineDash([]);
 
-            // -------------------------------------------------------------
-            // B. DEFINE MAP NODES (Grandstands, Food, Hubs, Gates)
-            // Shifted safely outside the track boundary
-            // -------------------------------------------------------------
+            // MAP NODES positioned outside the track outline
             const nodes = {
                 // Grandstands
-                "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})` },
+                "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})` },
 
                 // Food Stalls & Arenas
-                "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" },
+                "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" },
 
                 // Intermediate Junction Hubs
-                "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(-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" }
+                "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" },
+
+                // Outer 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" },
+                "West Gate 4": { pos: toCanvas(-4.5, 2.2), type: "gate", label: "🚪 West Gate 4" }
             };
 
-            // -------------------------------------------------------------
-            // C. INTERCONNECTED STANDARD PEDESTRIAN PATHS (GREEN / RED)
-            // Explicit waypoint routing around track perimeter
-            // -------------------------------------------------------------
+            // Custom Waypoint path drawing function
+            function drawPath(points, color, isDashed = false) {
+                ctx.beginPath();
+                if (isDashed) ctx.setLineDash([8, 6]);
+                points.forEach((pt, idx) => {
+                    const pos = typeof pt === 'string' ? nodes[pt].pos : toCanvas(pt.x, pt.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([]);
+            }
+
             const pathColorG1 = isGate1Bottleneck ? "#ff4444" : "#00cc66";
             const pathColorG3 = isGate3Bottleneck ? "#ff4444" : "#00cc66";
 
-            // Gate 1 Network
+            // Standard Pathways routed around the track perimeter
             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);
+            drawPath(["Village GS", {x: -2.8, y: 0.2}, "Village Plaza"], 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(["Becketts Interchange", {x: -2.5, y: 3.5}, "Village Plaza"], pathColorG1);
             drawPath(["Village Plaza", "West Gate 4"], "#00cc66");
 
-            // 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
-            // -------------------------------------------------------------
+            // Google Maps Detour Routing (Purple Lines) around perimeter
             if (isGate1Bottleneck) {
-                // Fan Zone -> South Hub -> Club Eats -> South Gate 2
                 drawPath(["Main Fan Zone", "Arena Crossroad", "South Bypass", "Club Eats", "South Gate 2"], "#a020f0", true);
-
-                // Arena Hub -> West Gate 4
-                drawPath(["Arena Crossroad", "Village GS", "West Gate 4"], "#a020f0", true);
+                drawPath(["Arena Crossroad", {x: -4.8, y: -0.2}, "West Gate 4"], "#a020f0", true);
             }
 
             if (isGate3Bottleneck) {
-                // 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);
+                drawPath(["Becketts Interchange", {x: -2.5, y: 3.5}, "Village Plaza", "Main Fan Zone", "South Bypass", "South Gate 2"], "#a020f0", true);
             }
 
-            // -------------------------------------------------------------
-            // E. DRAW NODE BOXES, LABELS & ORDER BADGES
-            // -------------------------------------------------------------
+            // Draw Nodes, Badges & Labels
             for (let key in nodes) {
                 const n = nodes[key];
                 ctx.font = "bold 11px Arial";
                 const textWidth = ctx.measureText(n.label).width;
                 const boxPadding = 7;
                 
-                let boxColor = "#3498db"; // Blue for Grandstands
-                if (n.type === "food") boxColor = "#f39c12"; // Orange for Food
-                if (n.type === "hub") boxColor = "#7f8c8d";  // Grey for Hubs
+                let boxColor = "#3498db";
+                if (n.type === "food") boxColor = "#f39c12";
+                if (n.type === "hub") boxColor = "#7f8c8d";
                 if (n.type === "gate") {
                     if ((key === "Main Gate 1" && isGate1Bottleneck) || (key === "East Gate 3" && isGate3Bottleneck)) {
                         boxColor = "#ff4444";
@@ -631,7 +596,6 @@
                     }
                 }
 
-                // Draw background rounded box
                 ctx.fillStyle = boxColor;
                 ctx.beginPath();
                 ctx.roundRect(
@@ -646,13 +610,11 @@
                 ctx.lineWidth = 1;
                 ctx.stroke();
 
-                // Draw label text
                 ctx.fillStyle = "#ffffff";
                 ctx.textAlign = "center";
                 ctx.textBaseline = "middle";
                 ctx.fillText(n.label, n.pos.x, n.pos.y);
 
-                // DRAW PENDING ORDERS OVERLAY BADGE FOR FOOD STALLS
                 if (n.type === "food") {
                     const pendingCount = activeOrders.filter(o => o.location === key).length;
                     if (pendingCount > 0) {
@@ -671,7 +633,7 @@
                 }
             }
 
-            // Draw Legend
+            // Legend
             ctx.font = "11px Arial";
             ctx.fillStyle = "#ffffff";
             ctx.textAlign = "left";
@@ -714,7 +676,6 @@
             }
         }
 
-        // Initialize simulation on initial page load
         window.onload = updateSimulation;
     </script>
 </body>