Stabilize TTS voice reload and reconnect logging

public/js/socket-client-module.js

@@ -19,9 +19,11 @@ class SocketClientModule extends BaseModule {
         this.storyHistory = null;
         this.isConnected = false;
         this.reconnectAttempts = 0;
-        this.maxReconnectAttempts = Infinity;
-        this.reconnectDelay = 2000;
-        this.maxReconnectDelay = 30000;
+        this.maxReconnectAttempts = 12;
+        this.reconnectDelay = 5000;
+        this.maxReconnectDelay = 5000;
+        this.reconnectTimer = null;
+        this.reconnectAlerted = false;
         this.url = null;
         this.eventListeners = {};
         this.defaultHost = 'localhost:3000';
@@ -77,6 +79,8 @@ class SocketClientModule extends BaseModule {
             'resolveAssetUrl',
             'looksLikeAssetPath',
             'attemptReconnect',
+            'stopReconnectLoop',
+            'notifyReconnectFailed',
             'getConnectionStatus',
             'loadSocketIO'
         ]);
@@ -152,6 +156,12 @@ class SocketClientModule extends BaseModule {
             try {
                 console.log(`Socket Client: Connecting to ${socketUrl}`);
                 
+                if (this.socket) {
+                    this.socket.removeAllListeners();
+                    this.socket.close();
+                    this.socket = null;
+                }
+
                 // Create Socket.IO connection (will automatically use /socket.io endpoint)
                 this.socket = window.io(socketUrl, {
                     reconnection: false, // We handle reconnection ourselves
@@ -162,6 +172,8 @@ class SocketClientModule extends BaseModule {
                     console.log('Socket Client: Connected to server with ID:', this.socket.id);
                     this.isConnected = true;
                     this.reconnectAttempts = 0;
+                    this.stopReconnectLoop();
+                    this.reconnectAlerted = false;
                     this.emitEvent('connect');
                     resolve(true);
                 });
@@ -177,6 +189,9 @@ class SocketClientModule extends BaseModule {
                 this.socket.on('connect_error', (error) => {
                     console.error('Socket Client: Connection error:', error);
                     this.emitEvent('connect_error', error);
+                    if (!this.isConnected) {
+                        this.attemptReconnect();
+                    }
                     resolve(false);
                 });
                 
@@ -659,7 +674,11 @@ class SocketClientModule extends BaseModule {
      */
     attemptReconnect() {
         if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-            console.error('Socket Client: Max reconnect attempts reached');
+            this.notifyReconnectFailed();
+            return;
+        }
+
+        if (this.reconnectTimer) {
             return;
         }
         
@@ -667,13 +686,45 @@ class SocketClientModule extends BaseModule {
         const delay = Math.min(this.maxReconnectDelay, this.reconnectDelay * this.reconnectAttempts);
         
         console.log(`Socket Client: Attempting to reconnect in ${delay}ms (attempt ${this.reconnectAttempts})`);
+        document.dispatchEvent(new CustomEvent('story:process-state', {
+            detail: { state: 'waiting-generating', reason: 'socket-reconnecting', attempt: this.reconnectAttempts }
+        }));
         
-        setTimeout(() => {
+        this.reconnectTimer = setTimeout(() => {
+            this.reconnectTimer = null;
             if (!this.isConnected) {
                 this.connect();
             }
         }, delay);
     }
+
+    stopReconnectLoop() {
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+    }
+
+    notifyReconnectFailed() {
+        if (this.reconnectAlerted) return;
+        this.reconnectAlerted = true;
+        this.stopReconnectLoop();
+        const message = this.translate(
+            'popup.serverUnavailable',
+            'The game server is currently unavailable. The client tried to reconnect for one minute. Please reload the page after the server is running again.'
+        );
+        console.error('Socket Client: Reconnect failed after one minute');
+        document.dispatchEvent(new CustomEvent('story:tag', {
+            detail: {
+                key: 'error',
+                value: message,
+                source: 'socket-reconnect'
+            }
+        }));
+        document.dispatchEvent(new CustomEvent('story:process-state', {
+            detail: { state: 'ready', reason: 'socket-reconnect-failed' }
+        }));
+    }
     
     /**
      * Disconnect from the server