UI Refactoring and Fix of image issue when adding an image to a quiz

django/templates/play/lobby.html

@@ -70,11 +70,10 @@
     const maxReconnectAttempts = 5;
     const pingDelay = 30000; // 30 seconds
     const heartbeatDelay = 10000; // 10 seconds
+    let heartbeatInterval = null;
 
     function startPingInterval() {
-        if (pingInterval) {
-            clearInterval(pingInterval);
-        }
+        stopPingInterval();
         pingInterval = setInterval(() => {
             if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
                 lobbySocket.send(JSON.stringify({ type: 'ping' }));
@@ -89,6 +88,25 @@
         }
     }
 
+    function startHeartbeat() {
+        stopHeartbeat();
+        heartbeatInterval = setInterval(() => {
+            if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
+                lobbySocket.send(JSON.stringify({
+                    type: 'heartbeat',
+                    participant_id: '{{ participant.participant_id }}'
+                }));
+            }
+        }, heartbeatDelay);
+    }
+
+    function stopHeartbeat() {
+        if (heartbeatInterval) {
+            clearInterval(heartbeatInterval);
+            heartbeatInterval = null;
+        }
+    }
+
     function connectWebSocket() {
         if (lobbySocket && (lobbySocket.readyState === WebSocket.CONNECTING || lobbySocket.readyState === WebSocket.OPEN)) {
             return lobbySocket; // Already connected or connecting
@@ -109,6 +127,9 @@
                 console.log('Lobby socket connected');
                 reconnectAttempts = 0;
                 startPingInterval();
+                {% if participant %}
+                startHeartbeat();
+                {% endif %}
                 // Request initial participants list
                 lobbySocket.send(JSON.stringify({
                     type: 'update_participants'
@@ -118,10 +139,12 @@
             lobbySocket.onclose = function(e) {
                 wsUtil.handleClose(e);
                 stopPingInterval();
+                stopHeartbeat();
                 lobbySocket = null;
                 reconnectAttempts++;
                 if (reconnectAttempts < maxReconnectAttempts) {
-                    setTimeout(connectWebSocket, 1000 * Math.min(reconnectAttempts, 3));
+                    const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 10000); // Exponential backoff, max 10s
+                    setTimeout(connectWebSocket, delay);
                 }
             };
 
@@ -165,17 +188,7 @@
         }
     }
 
-    {% if participant %}
-    // Send heartbeat every 10 seconds
-    setInterval(function() {
-        if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
-            lobbySocket.send(JSON.stringify({
-                type: 'heartbeat',
-                participant_id: '{{ participant.participant_id }}'
-            }));
-        }
-    }, heartbeatDelay);
-    {% endif %}
+
 
     // Initial connection
     lobbySocket = connectWebSocket();