From c576b07a660fd96bf56a9684ffc1f18a88dc0269 Mon Sep 17 00:00:00 2001
From: Dustin Pianalto <dustin@djpianalto.com>
Date: Fri, 7 Mar 2025 00:59:46 -0900
Subject: [PATCH] sse

---
 web/templates/race_manage.templ    | 162 ++++++++++++++---------------
 web/templates/race_manage_templ.go |   2 +-
 web/templates/race_public.templ    | 148 ++++++++++++++++----------
 web/templates/race_public_templ.go |  32 +++---
 4 files changed, 189 insertions(+), 155 deletions(-)

diff --git a/web/templates/race_manage.templ b/web/templates/race_manage.templ
index 6fd0a5b..1fba8b9 100644
--- a/web/templates/race_manage.templ
+++ b/web/templates/race_manage.templ
@@ -144,65 +144,90 @@ templ RaceManage(groups []models.Group, currentGroup models.Group, heats []model
         </div>
 
         <script>
-            // WebSocket connections
-            const timerSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/timer`);
-            const adminSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/admin`);
-            const eventsSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/events`);
+            // Set up SSE connection
+            console.log("Setting up SSE connection...");
             
-            const timerDisplay = document.getElementById('timer');
-            const statusIndicator = document.getElementById('status-indicator');
-            const gateStatus = document.getElementById('gate-status');
-            const gateStatusText = document.getElementById('gate-status-text');
+            const eventSource = new EventSource('/api/events');
             
-            // Timer socket handling
-            timerSocket.onmessage = function(event) {
-                const data = JSON.parse(event.data);
-                
-                if (data.type === 'time') {
-                    timerDisplay.textContent = data.time.toFixed(3);
-                } else if (data.type === 'status') {
-                    statusIndicator.textContent = data.status;
+            eventSource.onopen = function() {
+                console.log("SSE connection opened");
+            };
+            
+            eventSource.onerror = function(error) {
+                console.error("SSE connection error:", error);
+            };
+            
+            eventSource.addEventListener('debug', function(event) {
+                console.log("Debug event received:", event.data);
+            });
+            
+            eventSource.addEventListener('lane-finish', function(event) {
+                console.log("Lane finish event received:", event.data);
+                try {
+                    const laneFinishData = JSON.parse(event.data);
+                    const laneTimeElement = document.getElementById(`lane-${laneFinishData.lane}-time`);
+                    if (laneTimeElement) {
+                        laneTimeElement.textContent = laneFinishData.time.toFixed(4);
+                    }
                     
-                    // Update status indicator color
-                    statusIndicator.className = 'badge mb-3 ';
-                    if (data.status === 'Ready') {
-                        statusIndicator.className += 'bg-secondary';
-                    } else if (data.status === 'Running') {
-                        statusIndicator.className += 'bg-success';
-                    } else if (data.status === 'Finished') {
-                        statusIndicator.className += 'bg-primary';
+                    const lanePositionElement = document.getElementById(`lane-${laneFinishData.lane}-position`);
+                    if (lanePositionElement) {
+                        lanePositionElement.textContent = laneFinishData.place;
+                    }
+                } catch (error) {
+                    console.error("Error processing lane finish event:", error);
+                }
+            });
+            
+            eventSource.addEventListener('status', function(event) {
+                console.log("Status event received:", event.data);
+                try {
+                    const statusData = JSON.parse(event.data);
+                    let statusText = 'Unknown';
+                    let statusClass = 'bg-secondary';
+                    
+                    if (statusData.status === 'idle') {
+                        statusText = 'Ready';
+                        statusClass = 'bg-primary';
                         
-                        // Auto-save results when race finishes
+                        // Reset all times and positions
+                        document.querySelectorAll('[id^="lane-"][id$="-time"]').forEach(el => {
+                            el.textContent = '--.-';
+                        });
+                        
+                        document.querySelectorAll('[id^="lane-"][id$="-position"]').forEach(el => {
+                            el.textContent = '-';
+                        });
+                        
+                    } else if (statusData.status === 'running') {
+                        statusText = 'Race Running';
+                        statusClass = 'bg-success';
+                    } else if (statusData.status === 'finished') {
+                        statusText = 'Race Complete';
+                        statusClass = 'bg-info';
+                        
+                        // Save heat results
                         saveHeatResults();
                     }
-                } else if (data.type === 'gate') {
-                    gateStatusText.textContent = data.status;
                     
-                    // Update gate status color
-                    gateStatus.className = 'alert ';
-                    if (data.status === 'Open') {
-                        gateStatus.className += 'alert-danger';
-                    } else if (data.status === 'Closed') {
-                        gateStatus.className += 'alert-success';
-                    } else {
-                        gateStatus.className += 'alert-secondary';
-                    }
-                } else if (data.type === 'lane-time') {
-                    // Update lane time display
-                    const laneTimeElement = document.getElementById(`lane-${data.lane}-time`);
-                    if (laneTimeElement) {
-                        laneTimeElement.textContent = data.time.toFixed(3);
+                    const statusIndicator = document.getElementById('status-indicator');
+                    if (statusIndicator) {
+                        statusIndicator.textContent = statusText;
+                        statusIndicator.className = `badge mb-3 ${statusClass}`;
                     }
-                } else if (data.type === 'lane-position') {
-                    // Update lane position display
-                    const lanePositionElement = document.getElementById(`lane-${data.lane}-position`);
-                    if (lanePositionElement) {
-                        lanePositionElement.textContent = data.position;
+                    
+                    const timerDisplay = document.getElementById('timer');
+                    if (timerDisplay && statusData.status === 'idle') {
+                        timerDisplay.textContent = '0.000';
                     }
+                } catch (error) {
+                    console.error("Error processing status event:", error);
                 }
-            };
+            });
+            
+            // Admin socket for admin-specific events
+            const adminSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/admin`);
             
-            // Admin socket handling
             adminSocket.onmessage = function(event) {
                 const data = JSON.parse(event.data);
                 
@@ -212,40 +237,9 @@ templ RaceManage(groups []models.Group, currentGroup models.Group, heats []model
                 }
             };
             
-            // Events socket handling
-            eventsSocket.onmessage = function(event) {
-                const data = JSON.parse(event.data);
-                
-                if (data.event === 'race_start') {
-                    // Race has started
-                    console.log('Race started!');
-                    // Update UI or play sound if needed
-                } else if (data.event === 'lane_finish') {
-                    // A lane has finished
-                    console.log(`Lane ${data.lane} finished with time ${data.time}`);
-                    
-                    // Update the lane time and position in the UI
-                    const laneTimeElement = document.getElementById(`lane-${data.lane}-time`);
-                    if (laneTimeElement) {
-                        laneTimeElement.textContent = data.time.toFixed(3);
-                    }
-                    
-                    const lanePositionElement = document.getElementById(`lane-${data.lane}-position`);
-                    if (lanePositionElement) {
-                        lanePositionElement.textContent = data.position;
-                    }
-                } else if (data.event === 'race_end') {
-                    // Race has ended
-                    console.log('Race ended!');
-                    
-                    // Save the heat results
-                    saveHeatResults();
-                }
-            };
-            
             // Function to reset the timer
             function resetTimer() {
-                fetch('/api/timer/reset', { method: 'POST' })
+                fetch('/api/reset', { method: 'POST' })
                     .then(response => {
                         if (!response.ok) {
                             console.error('Failed to reset timer');
@@ -258,7 +252,7 @@ templ RaceManage(groups []models.Group, currentGroup models.Group, heats []model
             
             // Function to force end the current heat
             function forceEndHeat() {
-                fetch('/api/timer/force-end', { method: 'POST' })
+                fetch('/api/force-end', { method: 'POST' })
                     .then(response => {
                         if (!response.ok) {
                             console.error('Failed to force end heat');
@@ -308,6 +302,12 @@ templ RaceManage(groups []models.Group, currentGroup models.Group, heats []model
                     console.error('Error:', error);
                 });
             }
+            
+            function getOrdinal(n) {
+                const s = ["th", "st", "nd", "rd"];
+                const v = n % 100;
+                return n + (s[(v-20)%10] || s[v] || s[0]);
+            }
         </script>
     }
 }
diff --git a/web/templates/race_manage_templ.go b/web/templates/race_manage_templ.go
index a7c8786..62691f5 100644
--- a/web/templates/race_manage_templ.go
+++ b/web/templates/race_manage_templ.go
@@ -238,7 +238,7 @@ func RaceManage(groups []models.Group, currentGroup models.Group, heats []models
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</tbody></table></div></div></div></div></div></div><script>\r\n            // WebSocket connections\r\n            const timerSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/timer`);\r\n            const adminSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/admin`);\r\n            const eventsSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/events`);\r\n            \r\n            const timerDisplay = document.getElementById('timer');\r\n            const statusIndicator = document.getElementById('status-indicator');\r\n            const gateStatus = document.getElementById('gate-status');\r\n            const gateStatusText = document.getElementById('gate-status-text');\r\n            \r\n            // Timer socket handling\r\n            timerSocket.onmessage = function(event) {\r\n                const data = JSON.parse(event.data);\r\n                \r\n                if (data.type === 'time') {\r\n                    timerDisplay.textContent = data.time.toFixed(3);\r\n                } else if (data.type === 'status') {\r\n                    statusIndicator.textContent = data.status;\r\n                    \r\n                    // Update status indicator color\r\n                    statusIndicator.className = 'badge mb-3 ';\r\n                    if (data.status === 'Ready') {\r\n                        statusIndicator.className += 'bg-secondary';\r\n                    } else if (data.status === 'Running') {\r\n                        statusIndicator.className += 'bg-success';\r\n                    } else if (data.status === 'Finished') {\r\n                        statusIndicator.className += 'bg-primary';\r\n                        \r\n                        // Auto-save results when race finishes\r\n                        saveHeatResults();\r\n                    }\r\n                } else if (data.type === 'gate') {\r\n                    gateStatusText.textContent = data.status;\r\n                    \r\n                    // Update gate status color\r\n                    gateStatus.className = 'alert ';\r\n                    if (data.status === 'Open') {\r\n                        gateStatus.className += 'alert-danger';\r\n                    } else if (data.status === 'Closed') {\r\n                        gateStatus.className += 'alert-success';\r\n                    } else {\r\n                        gateStatus.className += 'alert-secondary';\r\n                    }\r\n                } else if (data.type === 'lane-time') {\r\n                    // Update lane time display\r\n                    const laneTimeElement = document.getElementById(`lane-${data.lane}-time`);\r\n                    if (laneTimeElement) {\r\n                        laneTimeElement.textContent = data.time.toFixed(3);\r\n                    }\r\n                } else if (data.type === 'lane-position') {\r\n                    // Update lane position display\r\n                    const lanePositionElement = document.getElementById(`lane-${data.lane}-position`);\r\n                    if (lanePositionElement) {\r\n                        lanePositionElement.textContent = data.position;\r\n                    }\r\n                }\r\n            };\r\n            \r\n            // Admin socket handling\r\n            adminSocket.onmessage = function(event) {\r\n                const data = JSON.parse(event.data);\r\n                \r\n                if (data === 'heat-changed' || data === 'group-changed' || data === 'heat-rerun') {\r\n                    // Reload the page when heat or group changes\r\n                    window.location.reload();\r\n                }\r\n            };\r\n            \r\n            // Events socket handling\r\n            eventsSocket.onmessage = function(event) {\r\n                const data = JSON.parse(event.data);\r\n                \r\n                if (data.event === 'race_start') {\r\n                    // Race has started\r\n                    console.log('Race started!');\r\n                    // Update UI or play sound if needed\r\n                } else if (data.event === 'lane_finish') {\r\n                    // A lane has finished\r\n                    console.log(`Lane ${data.lane} finished with time ${data.time}`);\r\n                    \r\n                    // Update the lane time and position in the UI\r\n                    const laneTimeElement = document.getElementById(`lane-${data.lane}-time`);\r\n                    if (laneTimeElement) {\r\n                        laneTimeElement.textContent = data.time.toFixed(3);\r\n                    }\r\n                    \r\n                    const lanePositionElement = document.getElementById(`lane-${data.lane}-position`);\r\n                    if (lanePositionElement) {\r\n                        lanePositionElement.textContent = data.position;\r\n                    }\r\n                } else if (data.event === 'race_end') {\r\n                    // Race has ended\r\n                    console.log('Race ended!');\r\n                    \r\n                    // Save the heat results\r\n                    saveHeatResults();\r\n                }\r\n            };\r\n            \r\n            // Function to reset the timer\r\n            function resetTimer() {\r\n                fetch('/api/timer/reset', { method: 'POST' })\r\n                    .then(response => {\r\n                        if (!response.ok) {\r\n                            console.error('Failed to reset timer');\r\n                        }\r\n                    })\r\n                    .catch(error => {\r\n                        console.error('Error:', error);\r\n                    });\r\n            }\r\n            \r\n            // Function to force end the current heat\r\n            function forceEndHeat() {\r\n                fetch('/api/timer/force-end', { method: 'POST' })\r\n                    .then(response => {\r\n                        if (!response.ok) {\r\n                            console.error('Failed to force end heat');\r\n                        }\r\n                    })\r\n                    .catch(error => {\r\n                        console.error('Error:', error);\r\n                    });\r\n            }\r\n            \r\n            // Function to save heat results\r\n            function saveHeatResults() {\r\n                // Get lane times and positions from the UI\r\n                const lanes = [1, 2, 3, 4];\r\n                const results = {\r\n                    group_id: parseInt(document.getElementById('group-select').value),\r\n                    heat_number: parseInt('{ strconv.Itoa(currentHeatNum) }'),\r\n                };\r\n                \r\n                lanes.forEach(lane => {\r\n                    const timeElement = document.getElementById(`lane-${lane}-time`);\r\n                    const positionElement = document.getElementById(`lane-${lane}-position`);\r\n                    \r\n                    if (timeElement && positionElement) {\r\n                        const timeText = timeElement.textContent.trim();\r\n                        const positionText = positionElement.textContent.trim();\r\n                        \r\n                        results[`lane${lane}_time`] = timeText !== '--.-' ? parseFloat(timeText) : 0;\r\n                        results[`lane${lane}_position`] = positionText !== '-' ? parseInt(positionText) : 0;\r\n                    }\r\n                });\r\n                \r\n                // Save results to the server\r\n                fetch('/api/race/save-result', {\r\n                    method: 'POST',\r\n                    headers: {\r\n                        'Content-Type': 'application/json',\r\n                    },\r\n                    body: JSON.stringify(results),\r\n                })\r\n                .then(response => {\r\n                    if (!response.ok) {\r\n                        console.error('Failed to save heat results');\r\n                    }\r\n                })\r\n                .catch(error => {\r\n                    console.error('Error:', error);\r\n                });\r\n            }\r\n        </script>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</tbody></table></div></div></div></div></div></div><script>\r\n            // Set up SSE connection\r\n            console.log(\"Setting up SSE connection...\");\r\n            \r\n            const eventSource = new EventSource('/api/events');\r\n            \r\n            eventSource.onopen = function() {\r\n                console.log(\"SSE connection opened\");\r\n            };\r\n            \r\n            eventSource.onerror = function(error) {\r\n                console.error(\"SSE connection error:\", error);\r\n            };\r\n            \r\n            eventSource.addEventListener('debug', function(event) {\r\n                console.log(\"Debug event received:\", event.data);\r\n            });\r\n            \r\n            eventSource.addEventListener('lane-finish', function(event) {\r\n                console.log(\"Lane finish event received:\", event.data);\r\n                try {\r\n                    const laneFinishData = JSON.parse(event.data);\r\n                    const laneTimeElement = document.getElementById(`lane-${laneFinishData.lane}-time`);\r\n                    if (laneTimeElement) {\r\n                        laneTimeElement.textContent = laneFinishData.time.toFixed(4);\r\n                    }\r\n                    \r\n                    const lanePositionElement = document.getElementById(`lane-${laneFinishData.lane}-position`);\r\n                    if (lanePositionElement) {\r\n                        lanePositionElement.textContent = laneFinishData.place;\r\n                    }\r\n                } catch (error) {\r\n                    console.error(\"Error processing lane finish event:\", error);\r\n                }\r\n            });\r\n            \r\n            eventSource.addEventListener('status', function(event) {\r\n                console.log(\"Status event received:\", event.data);\r\n                try {\r\n                    const statusData = JSON.parse(event.data);\r\n                    let statusText = 'Unknown';\r\n                    let statusClass = 'bg-secondary';\r\n                    \r\n                    if (statusData.status === 'idle') {\r\n                        statusText = 'Ready';\r\n                        statusClass = 'bg-primary';\r\n                        \r\n                        // Reset all times and positions\r\n                        document.querySelectorAll('[id^=\"lane-\"][id$=\"-time\"]').forEach(el => {\r\n                            el.textContent = '--.-';\r\n                        });\r\n                        \r\n                        document.querySelectorAll('[id^=\"lane-\"][id$=\"-position\"]').forEach(el => {\r\n                            el.textContent = '-';\r\n                        });\r\n                        \r\n                    } else if (statusData.status === 'running') {\r\n                        statusText = 'Race Running';\r\n                        statusClass = 'bg-success';\r\n                    } else if (statusData.status === 'finished') {\r\n                        statusText = 'Race Complete';\r\n                        statusClass = 'bg-info';\r\n                        \r\n                        // Save heat results\r\n                        saveHeatResults();\r\n                    }\r\n                    \r\n                    const statusIndicator = document.getElementById('status-indicator');\r\n                    if (statusIndicator) {\r\n                        statusIndicator.textContent = statusText;\r\n                        statusIndicator.className = `badge mb-3 ${statusClass}`;\r\n                    }\r\n                    \r\n                    const timerDisplay = document.getElementById('timer');\r\n                    if (timerDisplay && statusData.status === 'idle') {\r\n                        timerDisplay.textContent = '0.000';\r\n                    }\r\n                } catch (error) {\r\n                    console.error(\"Error processing status event:\", error);\r\n                }\r\n            });\r\n            \r\n            // Admin socket for admin-specific events\r\n            const adminSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/admin`);\r\n            \r\n            adminSocket.onmessage = function(event) {\r\n                const data = JSON.parse(event.data);\r\n                \r\n                if (data === 'heat-changed' || data === 'group-changed' || data === 'heat-rerun') {\r\n                    // Reload the page when heat or group changes\r\n                    window.location.reload();\r\n                }\r\n            };\r\n            \r\n            // Function to reset the timer\r\n            function resetTimer() {\r\n                fetch('/api/reset', { method: 'POST' })\r\n                    .then(response => {\r\n                        if (!response.ok) {\r\n                            console.error('Failed to reset timer');\r\n                        }\r\n                    })\r\n                    .catch(error => {\r\n                        console.error('Error:', error);\r\n                    });\r\n            }\r\n            \r\n            // Function to force end the current heat\r\n            function forceEndHeat() {\r\n                fetch('/api/force-end', { method: 'POST' })\r\n                    .then(response => {\r\n                        if (!response.ok) {\r\n                            console.error('Failed to force end heat');\r\n                        }\r\n                    })\r\n                    .catch(error => {\r\n                        console.error('Error:', error);\r\n                    });\r\n            }\r\n            \r\n            // Function to save heat results\r\n            function saveHeatResults() {\r\n                // Get lane times and positions from the UI\r\n                const lanes = [1, 2, 3, 4];\r\n                const results = {\r\n                    group_id: parseInt(document.getElementById('group-select').value),\r\n                    heat_number: parseInt('{ strconv.Itoa(currentHeatNum) }'),\r\n                };\r\n                \r\n                lanes.forEach(lane => {\r\n                    const timeElement = document.getElementById(`lane-${lane}-time`);\r\n                    const positionElement = document.getElementById(`lane-${lane}-position`);\r\n                    \r\n                    if (timeElement && positionElement) {\r\n                        const timeText = timeElement.textContent.trim();\r\n                        const positionText = positionElement.textContent.trim();\r\n                        \r\n                        results[`lane${lane}_time`] = timeText !== '--.-' ? parseFloat(timeText) : 0;\r\n                        results[`lane${lane}_position`] = positionText !== '-' ? parseInt(positionText) : 0;\r\n                    }\r\n                });\r\n                \r\n                // Save results to the server\r\n                fetch('/api/race/save-result', {\r\n                    method: 'POST',\r\n                    headers: {\r\n                        'Content-Type': 'application/json',\r\n                    },\r\n                    body: JSON.stringify(results),\r\n                })\r\n                .then(response => {\r\n                    if (!response.ok) {\r\n                        console.error('Failed to save heat results');\r\n                    }\r\n                })\r\n                .catch(error => {\r\n                    console.error('Error:', error);\r\n                });\r\n            }\r\n            \r\n            function getOrdinal(n) {\r\n                const s = [\"th\", \"st\", \"nd\", \"rd\"];\r\n                const v = n % 100;\r\n                return n + (s[(v-20)%10] || s[v] || s[0]);\r\n            }\r\n        </script>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/web/templates/race_public.templ b/web/templates/race_public.templ
index f9d6e14..33a950d 100644
--- a/web/templates/race_public.templ
+++ b/web/templates/race_public.templ
@@ -69,71 +69,105 @@ templ RacePublic(currentGroup models.Group, heats []models.Heat, racers []models
         </div>
 
         <script>
-            // WebSocket connection for timer updates
-            const timerSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/timer`);
-            const timerDisplay = document.getElementById('timer');
-            const statusIndicator = document.getElementById('status-indicator');
+            // Set up SSE connection
+            console.log("Setting up SSE connection...");
             
-            timerSocket.onmessage = function(event) {
-                const data = JSON.parse(event.data);
-                
-                if (data.type === 'time') {
-                    timerDisplay.textContent = data.time.toFixed(3);
-                } else if (data.type === 'status') {
-                    statusIndicator.textContent = data.status;
-                    
-                    // Update status indicator color
-                    statusIndicator.className = 'badge ';
-                    if (data.status === 'Ready') {
-                        statusIndicator.className += 'bg-secondary';
-                    } else if (data.status === 'Running') {
-                        statusIndicator.className += 'bg-success';
-                    } else if (data.status === 'Finished') {
-                        statusIndicator.className += 'bg-primary';
-                    }
-                } else if (data.type === 'lane-time') {
-                    // Update lane time display
-                    const laneTimeElement = document.getElementById(`lane-${data.lane}-time`);
+            const eventSource = new EventSource('/api/events');
+            
+            eventSource.onopen = function() {
+                console.log("SSE connection opened");
+            };
+            
+            eventSource.onerror = function(error) {
+                console.error("SSE connection error:", error);
+            };
+            
+            eventSource.addEventListener('debug', function(event) {
+                console.log("Debug event received:", event.data);
+            });
+            
+            eventSource.addEventListener('lane-finish', function(event) {
+                console.log("Lane finish event received:", event.data);
+                try {
+                    const laneFinishData = JSON.parse(event.data);
+                    const laneTimeElement = document.getElementById(`lane-${laneFinishData.lane}-time`);
                     if (laneTimeElement) {
-                        laneTimeElement.textContent = data.time.toFixed(3);
+                        laneTimeElement.textContent = laneFinishData.time.toFixed(4);
                     }
-                } else if (data.type === 'lane-position') {
-                    // Update lane position display
-                    const lanePositionElement = document.getElementById(`lane-${data.lane}-position`);
+                    
+                    const lanePositionElement = document.getElementById(`lane-${laneFinishData.lane}-position`);
                     if (lanePositionElement) {
-                        lanePositionElement.textContent = data.position;
+                        lanePositionElement.textContent = getOrdinal(laneFinishData.place);
+                    }
+                    
+                    // Highlight the lane card
+                    const laneCard = document.querySelector(`.lane-card[data-lane="${laneFinishData.lane}"]`);
+                    if (laneCard) {
+                        laneCard.classList.add('bg-success-subtle');
                     }
-                } else if (data.type === 'reload') {
-                    // Reload the page when heat changes
-                    window.location.reload();
+                } catch (error) {
+                    console.error("Error processing lane finish event:", error);
                 }
-            };
-            
-            // Events WebSocket for race events
-            const eventsSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/events`);
+            });
             
-            eventsSocket.onmessage = function(event) {
-                const data = JSON.parse(event.data);
-                
-                if (data.event === 'race_start') {
-                    // Race has started
-                    console.log('Race started!');
-                    // You could add visual effects or sounds here
-                } else if (data.event === 'lane_finish') {
-                    // A lane has finished
-                    console.log(`Lane ${data.lane} finished with time ${data.time}`);
-                    // You could add visual effects or sounds here
-                } else if (data.event === 'race_end') {
-                    // Race has ended
-                    console.log('Race ended!');
-                    // You could add visual effects or sounds here
+            eventSource.addEventListener('status', function(event) {
+                console.log("Status event received:", event.data);
+                try {
+                    const statusData = JSON.parse(event.data);
+                    let statusText = 'Unknown';
+                    let statusClass = 'bg-secondary';
+                    
+                    if (statusData.status === 'idle') {
+                        statusText = 'Ready';
+                        statusClass = 'bg-primary';
+                        
+                        // Reset all lanes
+                        document.querySelectorAll('.lane-card').forEach(lane => {
+                            lane.classList.remove('bg-success-subtle');
+                        });
+                        
+                        // Reset all times and positions
+                        document.querySelectorAll('[id^="lane-"][id$="-time"]').forEach(el => {
+                            el.textContent = '--.-';
+                        });
+                        
+                        document.querySelectorAll('[id^="lane-"][id$="-position"]').forEach(el => {
+                            el.textContent = '-';
+                        });
+                        
+                    } else if (statusData.status === 'running') {
+                        statusText = 'Race Running';
+                        statusClass = 'bg-success';
+                    } else if (statusData.status === 'finished') {
+                        statusText = 'Race Complete';
+                        statusClass = 'bg-info';
+                        
+                        // Reload the page after a short delay to show final results
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 3000);
+                    }
                     
-                    // Reload the page after a short delay to show final results
-                    setTimeout(() => {
-                        window.location.reload();
-                    }, 3000);
+                    const statusIndicator = document.getElementById('status-indicator');
+                    if (statusIndicator) {
+                        statusIndicator.textContent = statusText;
+                        statusIndicator.className = `badge ${statusClass}`;
+                    }
+                    
+                    const timerDisplay = document.getElementById('timer');
+                    if (timerDisplay && statusData.status === 'idle') {
+                        timerDisplay.textContent = '0.000';
+                    }
+                } catch (error) {
+                    console.error("Error processing status event:", error);
                 }
-            };
+            });
+            
+            function getOrdinal(n) {
+                const s = ["th", "st", "nd", "rd"];
+                const v = n % 100;
+                return n + (s[(v-20)%10] || s[v] || s[0]);
+            }
             
             // Auto-refresh the page every 30 seconds to keep data current
             setTimeout(() => {
@@ -218,7 +252,7 @@ templ raceLaneCard(lane int, racerID int64, racers []models.Racer, result *model
     }}
     
     <div class="col">
-        <div class="card h-100 lane-card">
+        <div class="card h-100 lane-card" data-lane="{ strconv.Itoa(lane) }">
             <div class="card-header bg-primary text-white">
                 <h4 class="mb-0">Lane { strconv.Itoa(lane) }</h4>
             </div>
diff --git a/web/templates/race_public_templ.go b/web/templates/race_public_templ.go
index 7101424..b2cb139 100644
--- a/web/templates/race_public_templ.go
+++ b/web/templates/race_public_templ.go
@@ -125,7 +125,7 @@ func RacePublic(currentGroup models.Group, heats []models.Heat, racers []models.
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></div></div></div></div><script>\r\n            // WebSocket connection for timer updates\r\n            const timerSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/timer`);\r\n            const timerDisplay = document.getElementById('timer');\r\n            const statusIndicator = document.getElementById('status-indicator');\r\n            \r\n            timerSocket.onmessage = function(event) {\r\n                const data = JSON.parse(event.data);\r\n                \r\n                if (data.type === 'time') {\r\n                    timerDisplay.textContent = data.time.toFixed(3);\r\n                } else if (data.type === 'status') {\r\n                    statusIndicator.textContent = data.status;\r\n                    \r\n                    // Update status indicator color\r\n                    statusIndicator.className = 'badge ';\r\n                    if (data.status === 'Ready') {\r\n                        statusIndicator.className += 'bg-secondary';\r\n                    } else if (data.status === 'Running') {\r\n                        statusIndicator.className += 'bg-success';\r\n                    } else if (data.status === 'Finished') {\r\n                        statusIndicator.className += 'bg-primary';\r\n                    }\r\n                } else if (data.type === 'lane-time') {\r\n                    // Update lane time display\r\n                    const laneTimeElement = document.getElementById(`lane-${data.lane}-time`);\r\n                    if (laneTimeElement) {\r\n                        laneTimeElement.textContent = data.time.toFixed(3);\r\n                    }\r\n                } else if (data.type === 'lane-position') {\r\n                    // Update lane position display\r\n                    const lanePositionElement = document.getElementById(`lane-${data.lane}-position`);\r\n                    if (lanePositionElement) {\r\n                        lanePositionElement.textContent = data.position;\r\n                    }\r\n                } else if (data.type === 'reload') {\r\n                    // Reload the page when heat changes\r\n                    window.location.reload();\r\n                }\r\n            };\r\n            \r\n            // Events WebSocket for race events\r\n            const eventsSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/events`);\r\n            \r\n            eventsSocket.onmessage = function(event) {\r\n                const data = JSON.parse(event.data);\r\n                \r\n                if (data.event === 'race_start') {\r\n                    // Race has started\r\n                    console.log('Race started!');\r\n                    // You could add visual effects or sounds here\r\n                } else if (data.event === 'lane_finish') {\r\n                    // A lane has finished\r\n                    console.log(`Lane ${data.lane} finished with time ${data.time}`);\r\n                    // You could add visual effects or sounds here\r\n                } else if (data.event === 'race_end') {\r\n                    // Race has ended\r\n                    console.log('Race ended!');\r\n                    // You could add visual effects or sounds here\r\n                    \r\n                    // Reload the page after a short delay to show final results\r\n                    setTimeout(() => {\r\n                        window.location.reload();\r\n                    }, 3000);\r\n                }\r\n            };\r\n            \r\n            // Auto-refresh the page every 30 seconds to keep data current\r\n            setTimeout(() => {\r\n                window.location.reload();\r\n            }, 30000);\r\n        </script>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></div></div></div></div><script>\r\n            // Set up SSE connection\r\n            console.log(\"Setting up SSE connection...\");\r\n            \r\n            const eventSource = new EventSource('/api/events');\r\n            \r\n            eventSource.onopen = function() {\r\n                console.log(\"SSE connection opened\");\r\n            };\r\n            \r\n            eventSource.onerror = function(error) {\r\n                console.error(\"SSE connection error:\", error);\r\n            };\r\n            \r\n            eventSource.addEventListener('debug', function(event) {\r\n                console.log(\"Debug event received:\", event.data);\r\n            });\r\n            \r\n            eventSource.addEventListener('lane-finish', function(event) {\r\n                console.log(\"Lane finish event received:\", event.data);\r\n                try {\r\n                    const laneFinishData = JSON.parse(event.data);\r\n                    const laneTimeElement = document.getElementById(`lane-${laneFinishData.lane}-time`);\r\n                    if (laneTimeElement) {\r\n                        laneTimeElement.textContent = laneFinishData.time.toFixed(4);\r\n                    }\r\n                    \r\n                    const lanePositionElement = document.getElementById(`lane-${laneFinishData.lane}-position`);\r\n                    if (lanePositionElement) {\r\n                        lanePositionElement.textContent = getOrdinal(laneFinishData.place);\r\n                    }\r\n                    \r\n                    // Highlight the lane card\r\n                    const laneCard = document.querySelector(`.lane-card[data-lane=\"${laneFinishData.lane}\"]`);\r\n                    if (laneCard) {\r\n                        laneCard.classList.add('bg-success-subtle');\r\n                    }\r\n                } catch (error) {\r\n                    console.error(\"Error processing lane finish event:\", error);\r\n                }\r\n            });\r\n            \r\n            eventSource.addEventListener('status', function(event) {\r\n                console.log(\"Status event received:\", event.data);\r\n                try {\r\n                    const statusData = JSON.parse(event.data);\r\n                    let statusText = 'Unknown';\r\n                    let statusClass = 'bg-secondary';\r\n                    \r\n                    if (statusData.status === 'idle') {\r\n                        statusText = 'Ready';\r\n                        statusClass = 'bg-primary';\r\n                        \r\n                        // Reset all lanes\r\n                        document.querySelectorAll('.lane-card').forEach(lane => {\r\n                            lane.classList.remove('bg-success-subtle');\r\n                        });\r\n                        \r\n                        // Reset all times and positions\r\n                        document.querySelectorAll('[id^=\"lane-\"][id$=\"-time\"]').forEach(el => {\r\n                            el.textContent = '--.-';\r\n                        });\r\n                        \r\n                        document.querySelectorAll('[id^=\"lane-\"][id$=\"-position\"]').forEach(el => {\r\n                            el.textContent = '-';\r\n                        });\r\n                        \r\n                    } else if (statusData.status === 'running') {\r\n                        statusText = 'Race Running';\r\n                        statusClass = 'bg-success';\r\n                    } else if (statusData.status === 'finished') {\r\n                        statusText = 'Race Complete';\r\n                        statusClass = 'bg-info';\r\n                        \r\n                        // Reload the page after a short delay to show final results\r\n                        setTimeout(() => {\r\n                            window.location.reload();\r\n                        }, 3000);\r\n                    }\r\n                    \r\n                    const statusIndicator = document.getElementById('status-indicator');\r\n                    if (statusIndicator) {\r\n                        statusIndicator.textContent = statusText;\r\n                        statusIndicator.className = `badge ${statusClass}`;\r\n                    }\r\n                    \r\n                    const timerDisplay = document.getElementById('timer');\r\n                    if (timerDisplay && statusData.status === 'idle') {\r\n                        timerDisplay.textContent = '0.000';\r\n                    }\r\n                } catch (error) {\r\n                    console.error(\"Error processing status event:\", error);\r\n                }\r\n            });\r\n            \r\n            function getOrdinal(n) {\r\n                const s = [\"th\", \"st\", \"nd\", \"rd\"];\r\n                const v = n % 100;\r\n                return n + (s[(v-20)%10] || s[v] || s[0]);\r\n            }\r\n            \r\n            // Auto-refresh the page every 30 seconds to keep data current\r\n            setTimeout(() => {\r\n                window.location.reload();\r\n            }, 30000);\r\n        </script>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -269,14 +269,14 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 				position = result.Lane4Position
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"col\"><div class=\"card h-100 lane-card\"><div class=\"card-header bg-primary text-white\"><h4 class=\"mb-0\">Lane ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"col\"><div class=\"card h-100 lane-card\" data-lane=\"{ strconv.Itoa(lane) }\"><div class=\"card-header bg-primary text-white\"><h4 class=\"mb-0\">Lane ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(lane))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 223, Col: 58}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 257, Col: 58}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -289,7 +289,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(racer.FirstName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 226, Col: 56}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 260, Col: 56}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -302,7 +302,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(racer.LastName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 226, Col: 75}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 260, Col: 75}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -315,7 +315,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(racer.CarNumber)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 228, Col: 61}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 262, Col: 61}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -328,7 +328,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f oz", racer.CarWeight))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 229, Col: 86}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 263, Col: 86}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
@@ -341,7 +341,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("lane-%d-time", lane))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 236, Col: 75}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 270, Col: 75}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
@@ -355,7 +355,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 			var templ_7745c5c3_Var14 string
 			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.3f", time))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 238, Col: 67}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 272, Col: 67}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 			if templ_7745c5c3_Err != nil {
@@ -374,7 +374,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 		var templ_7745c5c3_Var15 string
 		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("lane-%d-position", lane))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 248, Col: 79}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 282, Col: 79}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 		if templ_7745c5c3_Err != nil {
@@ -388,7 +388,7 @@ func raceLaneCard(lane int, racerID int64, racers []models.Racer, result *models
 			var templ_7745c5c3_Var16 string
 			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(position))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 250, Col: 64}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 284, Col: 64}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 			if templ_7745c5c3_Err != nil {
@@ -446,7 +446,7 @@ func raceNextHeatPreview(heats []models.Heat, racers []models.Racer, heatNum int
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(heatNum))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 277, Col: 49}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 311, Col: 49}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
@@ -526,7 +526,7 @@ func raceNextHeatRow(lane int, racerID int64, racers []models.Racer) templ.Compo
 		var templ_7745c5c3_Var20 string
 		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(lane))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 319, Col: 32}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 353, Col: 32}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 		if templ_7745c5c3_Err != nil {
@@ -539,7 +539,7 @@ func raceNextHeatRow(lane int, racerID int64, racers []models.Racer) templ.Compo
 		var templ_7745c5c3_Var21 string
 		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(racer.FirstName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 320, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 354, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 		if templ_7745c5c3_Err != nil {
@@ -552,7 +552,7 @@ func raceNextHeatRow(lane int, racerID int64, racers []models.Racer) templ.Compo
 		var templ_7745c5c3_Var22 string
 		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(racer.LastName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 320, Col: 48}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 354, Col: 48}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 		if templ_7745c5c3_Err != nil {
@@ -565,7 +565,7 @@ func raceNextHeatRow(lane int, racerID int64, racers []models.Racer) templ.Compo
 		var templ_7745c5c3_Var23 string
 		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(racer.CarNumber)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 321, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/templates/race_public.templ`, Line: 355, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 		if templ_7745c5c3_Err != nil {