Update index.html

index.html

@@ -83,6 +83,123 @@
             font-weight: bold;
         }
 
+        /* Online Ordering Section inside Controls Panel */
+        .order-btn {
+            width: 100%;
+            padding: 12px;
+            background-color: #e10600;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-weight: bold;
+            font-size: 14px;
+            cursor: pointer;
+            margin-top: 10px;
+            transition: background 0.2s;
+        }
+
+        .order-btn:hover {
+            background-color: #ff1e1e;
+        }
+
+        .active-orders-list {
+            margin-top: 15px;
+            max-height: 180px;
+            overflow-y: auto;
+            background: #141414;
+            padding: 10px;
+            border-radius: 6px;
+            border: 1px solid #333;
+        }
+
+        .order-card {
+            background: #252525;
+            padding: 8px;
+            margin-bottom: 8px;
+            border-radius: 4px;
+            border-left: 3px solid #f39c12;
+            font-size: 12px;
+        }
+
+        .order-card.ready {
+            border-left-color: #00cc66;
+        }
+
+        /* Modal Overlay */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background-color: #1e1e1e;
+            padding: 25px;
+            border-radius: 10px;
+            border: 1px solid #444;
+            width: 400px;
+            max-width: 90%;
+        }
+
+        .modal-content h3 {
+            color: #e10600;
+            margin-bottom: 15px;
+        }
+
+        .form-group {
+            margin-bottom: 12px;
+        }
+
+        .form-group label {
+            display: block;
+            font-size: 13px;
+            margin-bottom: 5px;
+            color: #ccc;
+        }
+
+        .form-group select, .form-group input {
+            width: 100%;
+            padding: 8px;
+            background: #2b2b2b;
+            border: 1px solid #444;
+            color: white;
+            border-radius: 4px;
+        }
+
+        .modal-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .btn-submit {
+            flex: 1;
+            background: #00cc66;
+            color: black;
+            padding: 10px;
+            border: none;
+            border-radius: 4px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .btn-cancel {
+            flex: 1;
+            background: #444;
+            color: white;
+            padding: 10px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
         /* Right Panel: Interactive Canvas Map & Report */
         .map-panel {
             flex: 2;
@@ -140,12 +257,12 @@
 
     <header>
         <h1>🏎️ SILVERSTONE BRITISH GP — CROWD FLOW OPTIMISER</h1>
-        <p>Real-time interconnected crowd routing, dynamic bottleneck propagation & multi-path detours</p>
+        <p>Real-time interconnected crowd routing, dynamic bottleneck propagation & online ordering integration</p>
     </header>
 
     <div class="dashboard">
         <!-- ============================================================== -->
-        <!-- LEFT PANEL: USER SLIDER INPUTS                                 -->
+        <!-- LEFT PANEL: USER SLIDER INPUTS & ONLINE ORDERING               -->
         <!-- ============================================================== -->
         <div class="controls-panel">
             <h2>⚙️ Grandstand Crowd Inputs</h2>
@@ -175,7 +292,20 @@
                 <input type="range" id="club" min="10" max="100" value="50" oninput="updateSimulation()">
             </div>
 
-            <hr style="border-color: #333; margin: 20px 0;">
+            <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>
+
+            <div style="margin-top: 15px;">
+                <span style="font-size: 13px; font-weight: bold; color: #aaa;">Active Mobile Orders:</span>
+                <div id="ordersContainer" class="active-orders-list">
+                    <p style="color: #666; font-size: 12px; text-align: center;">No active mobile orders</p>
+                </div>
+            </div>
+
+            <hr style="border-color: #333; margin: 15px 0;">
 
             <div style="font-size: 12px; color: #aaa; line-height: 1.4;">
                 <p><strong>💡 Dynamic Flow Rules:</strong></p>
@@ -197,6 +327,39 @@
         </div>
     </div>
 
+    <!-- ONLINE ORDER MODAL DIALOG -->
+    <div id="orderModal" class="modal">
+        <div class="modal-content">
+            <h3>🍔 Place Online Pickup Order</h3>
+            <div class="form-group">
+                <label for="pickupLocation">Select Pickup Location:</label>
+                <select id="pickupLocation">
+                    <option value="Main Fan Zone">Main Fan Zone</option>
+                    <option value="Becketts Food">Becketts Food</option>
+                    <option value="Village Plaza">Village Plaza</option>
+                    <option value="Club Eats">Club Eats</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="itemSelect">Select Express Menu Item:</label>
+                <select id="itemSelect">
+                    <option value="F1 Burger & Chips Combo (£14.00)">F1 Burger & Chips Combo (£14.00)</option>
+                    <option value="Woodfired Pizza Slices (£11.50)">Woodfired Pizza Slices (£11.50)</option>
+                    <option value="Grid Soft Drink & Fries (£7.00)">Grid Soft Drink & Fries (£7.00)</option>
+                    <option value="Silverstone Official Cap (£30.00)">Silverstone Official Cap (£30.00)</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="custName">Customer Name / Ticket ID:</label>
+                <input type="text" id="custName" placeholder="e.g. John - Row C" value="Seat 14B">
+            </div>
+            <div class="modal-actions">
+                <button class="btn-submit" onclick="submitOrder()">Confirm Order</button>
+                <button class="btn-cancel" onclick="closeOrderModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
     <!-- ================================================================== -->
     <!-- 2. JAVASCRIPT SIMULATION & CANVAS DRAWING LOGIC                    -->
     <!-- ================================================================== -->
@@ -205,6 +368,10 @@
         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);
@@ -242,6 +409,67 @@
             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 submitOrder() {
+            const location = document.getElementById('pickupLocation').value;
+            const item = document.getElementById('itemSelect').value;
+            const customer = document.getElementById('custName').value || 'Guest';
+
+            const newOrder = {
+                id: `#ORD-${orderCounter++}`,
+                location: location,
+                item: item,
+                customer: customer,
+                status: 'Preparing'
+            };
+
+            activeOrders.push(newOrder);
+            closeOrderModal();
+            renderOrdersUI();
+            updateSimulation(); // Refresh Canvas Map Badges
+
+            // Automatically transition order status to Ready after 8 seconds
+            setTimeout(() => {
+                newOrder.status = 'Ready for Pickup';
+                renderOrdersUI();
+                updateSimulation();
+            }, 8000);
+        }
+
+        function completeOrder(orderId) {
+            activeOrders = activeOrders.filter(o => o.id !== orderId);
+            renderOrdersUI();
+            updateSimulation();
+        }
+
+        function renderOrdersUI() {
+            const container = document.getElementById('ordersContainer');
+            if (activeOrders.length === 0) {
+                container.innerHTML = `<p style="color: #666; font-size: 12px; text-align: center;">No active mobile orders</p>`;
+                return;
+            }
+
+            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;">
+                        <span>${o.id} - ${o.customer}</span>
+                        <span style="color: ${o.status === 'Ready for Pickup' ? '#00cc66' : '#f39c12'}">${o.status}</span>
+                    </div>
+                    <div style="color: #aaa; margin-top:3px;">📍 ${o.location}</div>
+                    <div style="color: #ddd;">🍔 ${o.item}</div>
+                    ${o.status === 'Ready for Pickup' ? `<button onclick="completeOrder('${o.id}')" style="margin-top:5px; background:#00cc66; color:black; border:none; padding:2px 6px; border-radius:3px; cursor:pointer; font-size:10px; font-weight:bold;">Collect Order</button>` : ''}
+                </div>
+            `).join('');
+        }
+
         function drawCanvasMap(hamilton, becketts, stowe, village, club, gate1Load, gate3Load, isGate1Bottleneck, isGate3Bottleneck) {
             const canvas = document.getElementById('silverstoneCanvas');
             const ctx = canvas.getContext('2d');
@@ -396,7 +624,7 @@
             }
 
             // -------------------------------------------------------------
-            // E. DRAW NODE BOXES AND LABELS
+            // E. DRAW NODE BOXES, LABELS & ORDER BADGES
             // -------------------------------------------------------------
             for (let key in nodes) {
                 const n = nodes[key];
@@ -435,6 +663,24 @@
                 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) {
+                        ctx.fillStyle = "#e10600";
+                        ctx.beginPath();
+                        ctx.arc(n.pos.x + textWidth / 2 + 5, n.pos.y - 10, 10, 0, Math.PI * 2);
+                        ctx.fill();
+                        ctx.strokeStyle = "#ffffff";
+                        ctx.lineWidth = 1.5;
+                        ctx.stroke();
+
+                        ctx.fillStyle = "#ffffff";
+                        ctx.font = "bold 10px Arial";
+                        ctx.fillText(pendingCount, n.pos.x + textWidth / 2 + 5, n.pos.y - 10);
+                    }
+                }
             }
 
             // Draw Legend