diff --git a/multiplayer.js b/multiplayer.js
index 15321c3..b353fc5 100644
--- a/multiplayer.js
+++ b/multiplayer.js
@@ -80,6 +80,10 @@ class MultiplayerClient {
};
const tempSocket = io(url, socketOptions);
+
+ // Set up ALL listeners BEFORE the connection completes
+ // This prevents race conditions
+ this.setupSocketListeners(tempSocket);
const timeout = setTimeout(() => {
if (!tempSocket.connected) {
@@ -91,7 +95,15 @@ class MultiplayerClient {
tempSocket.on('connect', () => {
clearTimeout(timeout);
this.socket = tempSocket;
- this.setupSocketListeners();
+ console.log('✅ Socket connected, listeners ready');
+
+ // Now that listeners are set up, handle auto-registration
+ const savedUsername = localStorage.getItem('connect5_username') || this.username;
+ if (savedUsername) {
+ console.log('Auto-registering with saved username:', savedUsername);
+ this.registerPlayer(savedUsername);
+ }
+
resolve();
});
@@ -103,8 +115,8 @@ class MultiplayerClient {
});
}
- setupSocketListeners() {
- if (!this.socket) return;
+ setupSocketListeners(socket) {
+ if (!socket) return;
// Safety timeout: If we are connected but don't get a player list or login prompt within 5 seconds, warn the user.
setTimeout(() => {
@@ -112,65 +124,53 @@ class MultiplayerClient {
if (loading && loading.textContent.includes('Connecting')) {
loading.textContent = 'Connection successful, but server response is slow...';
} else if (loading && loading.textContent === 'Loading players...') {
- loading.innerHTML = 'Server not responding. Retry';
+ loading.innerHTML = 'Server not responding. Retry';
}
}, 5000);
-
- this.socket.on('connect', () => {
- console.log('✅ Connected to multiplayer server');
-
- // If we have a username (from localStorage or recently entered), try to register
- const savedUsername = localStorage.getItem('connect5_username') || this.username;
-
- if (savedUsername) {
- console.log('Found saved username:', savedUsername);
- this.registerPlayer(savedUsername);
- }
- // If no username yet, do nothing (user is seeing the modal and will call registerPlayer when they submit)
- });
- this.socket.on('disconnect', () => {
+ socket.on('disconnect', () => {
console.log('❌ Disconnected from server');
this.handleDisconnect();
});
- this.socket.on('registration_result', (data) => {
+ socket.on('registration_result', (data) => {
+ console.log('📥 Received registration_result:', data);
this.handleRegistration(data);
});
- this.socket.on('active_players_update', (players) => {
+ socket.on('active_players_update', (players) => {
this.updateActivePlayers(players);
});
- this.socket.on('challenge_received', (data) => {
+ socket.on('challenge_received', (data) => {
this.showChallengeNotification(data);
});
- this.socket.on('challenge_result', (data) => {
+ socket.on('challenge_result', (data) => {
this.handleChallengeResult(data);
});
- this.socket.on('challenge_declined', (data) => {
+ socket.on('challenge_declined', (data) => {
this.showMessage(`${data.by} declined your challenge`, 'error');
});
- this.socket.on('game_started', (data) => {
+ socket.on('game_started', (data) => {
this.startMultiplayerGame(data);
});
- this.socket.on('opponent_move', (data) => {
+ socket.on('opponent_move', (data) => {
this.handleOpponentMove(data);
});
- this.socket.on('move_result', (data) => {
+ socket.on('move_result', (data) => {
this.handleMoveResult(data);
});
- this.socket.on('game_ended', (data) => {
+ socket.on('game_ended', (data) => {
this.handleGameEnded(data);
});
- this.socket.on('opponent_disconnected', (data) => {
+ socket.on('opponent_disconnected', (data) => {
this.showMessage(data.message + '. Waiting for reconnection...', 'warning');
});