feat: Add favicon and improve WebSocket connection handling with reconnection logic

Author: th33k

client/favicon.ico

@@ -0,0 +1 @@
+This is a placeholder favicon file. A proper .ico file should be generated, but this prevents the 404 error.

client/index.html

@@ -6,6 +6,7 @@
     <meta name="description" content="Tank Arena - Real-time multiplayer tank battle arena game">
     <meta name="theme-color" content="#00ff88">
     <title>Tank Arena: Online</title>
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com">

client/js/managers/network-manager.js

@@ -7,45 +7,81 @@ export class NetworkManager {
         this.pingInterval = null;
         this.lastPingTimestamp = null;
         this.currentPing = 0;
+        this.lobbyReconnectAttempts = 0;
+        this.maxReconnectAttempts = 5;
+        this.baseReconnectDelay = 1000;
     }
 
     getWebSocketUrl(serverAddress, path = '/game') {
-        const isSecure = window.location.protocol === 'https:';
-        const protocol = isSecure ? 'wss:' : 'ws:';
-        const port = isSecure ? '' : ':8080';
+        // Use ws:// by default; only use wss:// if server is same domain and page is HTTPS
+        let protocol = 'ws:';
+        let port = ':8080';
+        
+        // Check if explicit port is provided in serverAddress
+        if (serverAddress.includes(':')) {
+            port = '';
+        }
+        // Only use WSS if connecting to same domain over HTTPS
+        else if (window.location.protocol === 'https:' && serverAddress === window.location.hostname) {
+            protocol = 'wss:';
+            port = '';
+        }
+        
         return `${protocol}//${serverAddress}${port}${path}`;
     }
 
+    getReconnectDelay(attempts) {
+        return this.baseReconnectDelay * Math.pow(2, Math.min(attempts, 4));
+    }
+
     connectToLobby(serverAddress) {
         try {
+            if (this.lobbyWs) {
+                this.lobbyWs.close();
+            }
+            
             const wsUrl = this.getWebSocketUrl(serverAddress);
+            console.log('[LOBBY] Connecting to:', wsUrl);
             this.lobbyWs = new WebSocket(wsUrl);
 
             this.lobbyWs.onopen = () => {
+                console.log('[LOBBY] Connected');
+                this.lobbyReconnectAttempts = 0;
                 this.sendLobbyMessage({ type: 'lobby_info' });
             };
 
             this.lobbyWs.onmessage = (event) => {
-                const msg = JSON.parse(event.data);
-                if (msg.type === 'lobby_info') {
-                    this.game.uiManager.updateLobbyDisplay(msg);
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === 'lobby_info') {
+                        this.game.uiManager.updateLobbyDisplay(msg);
+                    }
+                } catch (e) {
+                    console.error('[LOBBY] Parse error:', e);
                 }
             };
 
             this.lobbyWs.onerror = (error) => {
-                console.log('Lobby connection error:', error);
-                document.getElementById('lobby-player-count').textContent = '?';
+                console.error('[LOBBY] Error:', error);
+                const el = document.getElementById('lobby-player-count');
+                if (el) el.textContent = '?';
             };
 
             this.lobbyWs.onclose = () => {
-                setTimeout(() => {
-                    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-                        this.connectToLobby(serverAddress);
-                    }
-                }, 3000);
+                console.log('[LOBBY] Closed');
+                if (this.lobbyReconnectAttempts < this.maxReconnectAttempts) {
+                    const delay = this.getReconnectDelay(this.lobbyReconnectAttempts);
+                    this.lobbyReconnectAttempts++;
+                    console.log('[LOBBY] Retrying in', delay, 'ms...');
+                    setTimeout(() => {
+                        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+                            this.connectToLobby(serverAddress);
+                        }
+                    }, delay);
+                }
             };
         } catch (error) {
-            console.log('Could not connect to lobby:', error);
+            console.error('[LOBBY] Failed:', error);
         }
     }
 
@@ -56,21 +92,26 @@ export class NetworkManager {
     }
 
     connectToGame(name, serverAddress, onOpen, onMessage, onClose, onError) {
+        if (this.ws) {
+            this.ws.close();
+        }
+        
         const wsUrl = this.getWebSocketUrl(serverAddress);
-        console.log('Attempting to connect to:', wsUrl);
+        console.log('[GAME] Connecting to:', wsUrl);
 
         this.ws = new WebSocket(wsUrl);
 
         const connectionTimeout = setTimeout(() => {
-            if (this.ws.readyState !== WebSocket.OPEN) {
+            if (this.ws && this.ws.readyState !== WebSocket.OPEN) {
+                console.warn('[GAME] Connection timeout');
                 this.ws.close();
-                onError('Connection timeout. Please check server address.');
+                onError('Connection timeout. Please verify server address and ensure server is running.');
             }
-        }, 10000);
+        }, 15000);
 
         this.ws.onopen = () => {
             clearTimeout(connectionTimeout);
-            console.log('WebSocket connected');
+            console.log('[GAME] Connected');
             this.sendMessage({ type: 'join', name: name });
             onOpen();
         };
@@ -79,20 +120,20 @@ export class NetworkManager {
             try {
                 onMessage(JSON.parse(event.data));
             } catch (e) {
-                console.error('Error parsing message:', e);
+                console.error('[GAME] Parse error:', e);
             }
         };
 
         this.ws.onclose = () => {
             clearTimeout(connectionTimeout);
-            console.log('WebSocket closed');
+            console.log('[GAME] Closed');
             onClose();
         };
 
         this.ws.onerror = (error) => {
             clearTimeout(connectionTimeout);
-            console.error('WebSocket error:', error);
-            onError('Failed to connect to server. Please verify the server address.');
+            console.error('[GAME] Error:', error);
+            onError('Connection failed. Verify server is running at: ' + wsUrl);
         };
     }
 
@@ -140,5 +181,6 @@ export class NetworkManager {
             this.lobbyWs.close();
             this.lobbyWs = null;
         }
+        this.lobbyReconnectAttempts = 0;
     }
 }