Spaces:

k-l-lambda
/

trigo

Sleeping

App Files Files Community

k-l-lambda commited on about 1 month ago

Commit

a7d41bc

1 Parent(s): a4a9194

fix(vs-people): initialize socket listeners when switching game modes

Browse files

Files changed (5) hide show

trigo-web/app/dist/assets/{index-BsbKWb8A.js → index-CMsE5CnF.js} +0 -0
trigo-web/app/dist/index.html +1 -1
trigo-web/app/src/views/TrigoView.vue +230 -187
trigo-web/app/test-frontend-flow.cjs +0 -62
trigo-web/app/test-hf-rooms.cjs +0 -41

trigo-web/app/dist/assets/{index-BsbKWb8A.js → index-CMsE5CnF.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

trigo-web/app/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Trigo - 3D Go Game</title>
-		<script type="module" crossorigin src="/assets/index-BsbKWb8A.js"></script>
 		<link rel="stylesheet" crossorigin href="/assets/index-Siwlapuk.css">
 	</head>
 	<body>

 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Trigo - 3D Go Game</title>
+		<script type="module" crossorigin src="/assets/index-CMsE5CnF.js"></script>
 		<link rel="stylesheet" crossorigin href="/assets/index-Siwlapuk.css">
 	</head>
 	<body>

trigo-web/app/src/views/TrigoView.vue CHANGED Viewed

@@ -1392,6 +1392,220 @@
 		}
 	});
 	// Lifecycle hooks
 	onMounted(() => {
 		console.log("[TrigoView] Component mounted, gameMode:", gameMode.value, "route.path:", route.path, "route.meta.mode:", route.meta.mode);
@@ -1471,187 +1685,30 @@
 			});
 		}
-		// Setup socket listeners for VS People mode
 		if (gameMode.value === "vs-people") {
-			console.log("[TrigoView] Setting up socket listeners for VS People mode...");
-			// Listen for nickname changes
-			socketApi.onNicknameChanged((data) => {
-				console.log(
-					`[TrigoView] Player ${data.playerId} changed nickname: ${data.oldNickname} -> ${data.nickname}`
-				);
-				// If it's not us, update opponent nickname
-				if (data.playerId !== socketApi.socket.id) {
-					playerStore.setOpponentNickname(data.nickname);
-				}
-			});
-			// Listen for game updates (moves, passes, undo, redo)
-			socketApi.onGameUpdate((data) => {
-				console.log("[TrigoView] Game update received:", data);
-				// Update current player from server
-				if (data.currentPlayer) {
-					gameStore.setCurrentPlayer(data.currentPlayer);
-				}
-				// Handle different actions
-				if (data.action === "move" && data.lastMove) {
-					const { x, y, z } = data.lastMove;
-					// Apply move to local game state
-					const result = gameStore.makeMove(x, y, z);
-					if (result.success && viewport) {
-						// Add stone to viewport
-						const stoneColor = gameStore.opponentPlayer;
-						viewport.addStone(x, y, z, stoneColor);
-						// Remove captured stones
-						if (data.capturedPositions && data.capturedPositions.length > 0) {
-							data.capturedPositions.forEach((pos: { x: number; y: number; z: number }) => {
-								viewport.removeStone(pos.x, pos.y, pos.z);
-							});
-							console.log(`[TrigoView] Captured ${data.capturedPositions.length} stone(s)`);
-						}
-						// Hide territory visualization
-						viewport.hideDomainCubes();
-						showTerritoryMode.value = false;
-					}
-				} else if (data.action === "pass") {
-					gameStore.pass();
-					console.log("[TrigoView] Pass received from server");
-				} else if (data.action === "undo" || data.action === "redo") {
-					// For undo/redo, reload game from TGN
-					if (data.tgn && viewport) {
-						gameStore.loadFromTGN(data.tgn);
-						// Resync viewport with game state
-						viewport.clearBoard();
-						syncViewportWithGame();
-					}
-				}
-			});
-			// Listen for player joined
-			socketApi.onPlayerJoined((data) => {
-				console.log("[TrigoView] Player joined:", data);
-				playerStore.setOpponentNickname(data.nickname);
-				// Start game when second player joins
-				if (!gameStarted.value) {
-					gameStore.startGame();
-					if (viewport) {
-						viewport.setGameActive(true);
-					}
-					console.log("[TrigoView] Game started - opponent joined");
-				}
-			});
-			// Listen for player left
-			socketApi.onPlayerLeft((data) => {
-				console.log("[TrigoView] Player left:", data);
-				playerStore.setOpponentNickname(null);
-			});
-			// Listen for player disconnected
-			socketApi.onPlayerDisconnected((data) => {
-				console.log("[TrigoView] Player disconnected:", data);
-				if (data.playerId !== socketApi.socket.id) {
-					playerStore.setOpponentNickname(null);
-				}
-			});
-			// Listen for game ended
-			socketApi.onGameEnded((data) => {
-				console.log("[TrigoView] Game ended:", data);
-				alert(`Game ended! Winner: ${data.winner || "None"}\nReason: ${data.reason}`);
-			});
-			// Listen for game reset
-			socketApi.onGameReset((data) => {
-				console.log("[TrigoView] Game reset:", data);
-				// Reload game state
-				if (data.tgn) {
-					gameStore.loadFromTGN(data.tgn);
-				} else {
-					gameStore.resetGame(boardShape.value);
-				}
-				if (viewport) {
-					viewport.clearBoard();
-				}
-				// Update player colors if changed
-				if (data.players && socketApi.socket.id) {
-					const myPlayer = data.players[socketApi.socket.id];
-					if (myPlayer) {
-						playerStore.playerColor = myPlayer.color;
-					}
-				}
-			});
-			// Listen for errors
-			socketApi.onError((data) => {
-				console.error("[TrigoView] Socket error:", data.message);
-			});
-			// Setup room list listeners for room selector
-			setupRoomListeners();
-			// Set player ID when socket connects
-			if (socketApi.socket.id) {
-				playerStore.setPlayerId(socketApi.socket.id);
-			}
-			// Listen for browser navigation (back/forward) and URL changes
-			window.addEventListener("popstate", handleUrlChange);
-			// Handle socket connection and reconnection
-			socketApi.socket.on("connect", () => {
-				console.log("[TrigoView] Socket connected in VS People mode");
-				// Update player ID and connection status
-				if (socketApi.socket.id) {
-					playerStore.setPlayerId(socketApi.socket.id);
-				}
-				// Fetch room list for room selector
-				fetchRoomList();
-				// Initialize room based on URL hash (only if not already in a room)
-				if (!playerStore.roomId && !isJoiningRoom.value) {
-					console.log("[TrigoView] Initializing room after socket connection");
-					initializeMultiplayerRoom();
-				}
-			});
-			// Handle socket disconnection
-			socketApi.socket.on("disconnect", () => {
-				console.log("[TrigoView] Socket disconnected in VS People mode");
-				// Don't reset roomId - we want to rejoin on reconnect
-				if (playerStore.roomId) {
-					playerStore.connectionStatus = "connected"; // Still have room info, just disconnected
-				} else {
-					playerStore.disconnect();
-				}
-			});
-			// If socket is already connected, initialize room immediately
-			if (socketApi.socket.connected) {
-				console.log("[TrigoView] Socket already connected, initializing room");
-				fetchRoomList();
-				initializeMultiplayerRoom();
-			}
 		}
 		// Add keyboard shortcuts
 		window.addEventListener("keydown", handleKeyPress);
 	});
-	// Watch for game mode changes and initialize AI when switching to vs-ai
 	watch(gameMode, (newMode, oldMode) => {
 		console.log(`[TrigoView] Game mode changed: ${oldMode} -> ${newMode}`);
-		if (newMode === "vs-ai" && !aiReady.value) {
 			console.log("[TrigoView] Switching to VS AI mode, initializing AI agent...");
 			aiAgent.initialize()
 				.then(() => {
@@ -1674,22 +1731,8 @@
 		// Remove keyboard shortcuts
 		window.removeEventListener("keydown", handleKeyPress);
-		// Cleanup socket listeners for VS People mode
-		if (gameMode.value === "vs-people") {
-			console.log("[TrigoView] Cleaning up socket listeners...");
-			socketApi.offNicknameChanged();
-			socketApi.offGameUpdate();
-			socketApi.offPlayerJoined();
-			socketApi.offPlayerLeft();
-			socketApi.offPlayerDisconnected();
-			socketApi.offGameEnded();
-			socketApi.offGameReset();
-			socketApi.offError();
-			cleanupRoomListeners();
-			// Remove URL change listener
-			window.removeEventListener("popstate", handleUrlChange);
-		}
 		// Disconnect ResizeObserver
 		if (resizeObserver) {

 		}
 	});
+	// Flag to track if VS People mode has been initialized
+	let vsPeopleModeInitialized = false;
+	// Initialize VS People mode - sets up all socket event listeners
+	const initializeVsPeopleMode = () => {
+		if (vsPeopleModeInitialized) {
+			console.log("[TrigoView] VS People mode already initialized, skipping...");
+			return;
+		}
+		console.log("[TrigoView] Initializing VS People mode...");
+		vsPeopleModeInitialized = true;
+		// Listen for nickname changes
+		socketApi.onNicknameChanged((data) => {
+			console.log(
+				`[TrigoView] Player ${data.playerId} changed nickname: ${data.oldNickname} -> ${data.nickname}`
+			);
+			// If it's not us, update opponent nickname
+			if (data.playerId !== socketApi.socket.id) {
+				playerStore.setOpponentNickname(data.nickname);
+			}
+		});
+		// Listen for game updates (moves, passes, undo, redo)
+		socketApi.onGameUpdate((data) => {
+			console.log("[TrigoView] Game update received:", data);
+			// Update current player from server
+			if (data.currentPlayer) {
+				gameStore.setCurrentPlayer(data.currentPlayer);
+			}
+			// Handle different actions
+			if (data.action === "move" && data.lastMove) {
+				const { x, y, z } = data.lastMove;
+				// Apply move to local game state
+				const result = gameStore.makeMove(x, y, z);
+				if (result.success && viewport) {
+					// Add stone to viewport
+					const stoneColor = gameStore.opponentPlayer;
+					viewport.addStone(x, y, z, stoneColor);
+					// Remove captured stones
+					if (data.capturedPositions && data.capturedPositions.length > 0) {
+						data.capturedPositions.forEach((pos: { x: number; y: number; z: number }) => {
+							viewport.removeStone(pos.x, pos.y, pos.z);
+						});
+						console.log(`[TrigoView] Captured ${data.capturedPositions.length} stone(s)`);
+					}
+					// Hide territory visualization
+					viewport.hideDomainCubes();
+					showTerritoryMode.value = false;
+				}
+			} else if (data.action === "pass") {
+				gameStore.pass();
+				console.log("[TrigoView] Pass received from server");
+			} else if (data.action === "undo" || data.action === "redo") {
+				// For undo/redo, reload game from TGN
+				if (data.tgn && viewport) {
+					gameStore.loadFromTGN(data.tgn);
+					// Resync viewport with game state
+					viewport.clearBoard();
+					syncViewportWithGame();
+				}
+			}
+		});
+		// Listen for player joined
+		socketApi.onPlayerJoined((data) => {
+			console.log("[TrigoView] Player joined:", data);
+			playerStore.setOpponentNickname(data.nickname);
+			// Start game when second player joins
+			if (!gameStarted.value) {
+				gameStore.startGame();
+				if (viewport) {
+					viewport.setGameActive(true);
+				}
+				console.log("[TrigoView] Game started - opponent joined");
+			}
+		});
+		// Listen for player left
+		socketApi.onPlayerLeft((data) => {
+			console.log("[TrigoView] Player left:", data);
+			playerStore.setOpponentNickname(null);
+		});
+		// Listen for player disconnected
+		socketApi.onPlayerDisconnected((data) => {
+			console.log("[TrigoView] Player disconnected:", data);
+			if (data.playerId !== socketApi.socket.id) {
+				playerStore.setOpponentNickname(null);
+			}
+		});
+		// Listen for game ended
+		socketApi.onGameEnded((data) => {
+			console.log("[TrigoView] Game ended:", data);
+			alert(`Game ended! Winner: ${data.winner || "None"}\nReason: ${data.reason}`);
+		});
+		// Listen for game reset
+		socketApi.onGameReset((data) => {
+			console.log("[TrigoView] Game reset:", data);
+			// Reload game state
+			if (data.tgn) {
+				gameStore.loadFromTGN(data.tgn);
+			} else {
+				gameStore.resetGame(boardShape.value);
+			}
+			if (viewport) {
+				viewport.clearBoard();
+			}
+			// Update player colors if changed
+			if (data.players && socketApi.socket.id) {
+				const myPlayer = data.players[socketApi.socket.id];
+				if (myPlayer) {
+					playerStore.playerColor = myPlayer.color;
+				}
+			}
+		});
+		// Listen for errors
+		socketApi.onError((data) => {
+			console.error("[TrigoView] Socket error:", data.message);
+		});
+		// Setup room list listeners for room selector
+		setupRoomListeners();
+		// Set player ID when socket connects
+		if (socketApi.socket.id) {
+			playerStore.setPlayerId(socketApi.socket.id);
+		}
+		// Listen for browser navigation (back/forward) and URL changes
+		window.addEventListener("popstate", handleUrlChange);
+		// Handle socket connection and reconnection
+		socketApi.socket.on("connect", () => {
+			console.log("[TrigoView] Socket connected in VS People mode");
+			// Update player ID and connection status
+			if (socketApi.socket.id) {
+				playerStore.setPlayerId(socketApi.socket.id);
+			}
+			// Fetch room list for room selector
+			fetchRoomList();
+			// Initialize room based on URL hash (only if not already in a room)
+			if (!playerStore.roomId && !isJoiningRoom.value) {
+				console.log("[TrigoView] Initializing room after socket connection");
+				initializeMultiplayerRoom();
+			}
+		});
+		// Handle socket disconnection
+		socketApi.socket.on("disconnect", () => {
+			console.log("[TrigoView] Socket disconnected in VS People mode");
+			// Don't reset roomId - we want to rejoin on reconnect
+			if (playerStore.roomId) {
+				playerStore.connectionStatus = "connected"; // Still have room info, just disconnected
+			} else {
+				playerStore.disconnect();
+			}
+		});
+		// If socket is already connected, initialize room immediately
+		if (socketApi.socket.connected) {
+			console.log("[TrigoView] Socket already connected, initializing room");
+			fetchRoomList();
+			initializeMultiplayerRoom();
+		}
+	};
+	// Cleanup VS People mode - removes all socket event listeners
+	const cleanupVsPeopleMode = () => {
+		if (!vsPeopleModeInitialized) {
+			return;
+		}
+		console.log("[TrigoView] Cleaning up VS People mode...");
+		vsPeopleModeInitialized = false;
+		socketApi.offNicknameChanged();
+		socketApi.offGameUpdate();
+		socketApi.offPlayerJoined();
+		socketApi.offPlayerLeft();
+		socketApi.offPlayerDisconnected();
+		socketApi.offGameEnded();
+		socketApi.offGameReset();
+		socketApi.offError();
+		cleanupRoomListeners();
+		// Remove URL change listener
+		window.removeEventListener("popstate", handleUrlChange);
+		// Remove socket event listeners
+		socketApi.socket.off("connect");
+		socketApi.socket.off("disconnect");
+		// Reset player store state
+		playerStore.disconnect();
+	};
 	// Lifecycle hooks
 	onMounted(() => {
 		console.log("[TrigoView] Component mounted, gameMode:", gameMode.value, "route.path:", route.path, "route.meta.mode:", route.meta.mode);
 			});
 		}
+		// Initialize VS People mode if needed
 		if (gameMode.value === "vs-people") {
+			initializeVsPeopleMode();
 		}
 		// Add keyboard shortcuts
 		window.addEventListener("keydown", handleKeyPress);
 	});
+	// Watch for game mode changes and initialize modes as needed
 	watch(gameMode, (newMode, oldMode) => {
 		console.log(`[TrigoView] Game mode changed: ${oldMode} -> ${newMode}`);
+		// Cleanup previous mode
+		if (oldMode === "vs-people") {
+			console.log("[TrigoView] Switching away from VS People mode, cleaning up...");
+			cleanupVsPeopleMode();
+		}
+		// Initialize new mode
+		if (newMode === "vs-people") {
+			console.log("[TrigoView] Switching to VS People mode, initializing...");
+			initializeVsPeopleMode();
+		} else if (newMode === "vs-ai" && !aiReady.value) {
 			console.log("[TrigoView] Switching to VS AI mode, initializing AI agent...");
 			aiAgent.initialize()
 				.then(() => {
 		// Remove keyboard shortcuts
 		window.removeEventListener("keydown", handleKeyPress);
+		// Cleanup VS People mode if active
+		cleanupVsPeopleMode();
 		// Disconnect ResizeObserver
 		if (resizeObserver) {

trigo-web/app/test-frontend-flow.cjs DELETED Viewed

@@ -1,62 +0,0 @@
-const { io } = require('socket.io-client');
-console.log('=== Testing Frontend Flow on HF Space ===');
-console.log('');
-const serverUrl = 'https://k-l-lambda-trigo.hf.space';
-console.log('[1] Creating socket with URL:', serverUrl);
-let socketConnectedOnCreate = false;
-const socket = io(serverUrl, {
-    autoConnect: true,
-    reconnection: true,
-    transports: ['polling', 'websocket']
-});
-// Check if connected immediately (before setting up listeners)
-console.log('[2] Socket connected immediately after create?', socket.connected);
-socketConnectedOnCreate = socket.connected;
-// Set up connect listener (simulating what useSocket does)
-socket.on('connect', () => {
-    console.log('[3a] Socket connect event fired! ID:', socket.id);
-    console.log('[3b] Socket.connected value:', socket.connected);
-});
-// Simulate onMounted running "shortly after"
-setTimeout(() => {
-    console.log('');
-    console.log('[4] === Simulating onMounted ===');
-    console.log('[4a] gameMode is "vs-people" (assumed)');
-    console.log('[4b] Setting up connect listener in TrigoView...');
-    // This is what TrigoView does - set up another connect listener
-    socket.on('connect', () => {
-        console.log('[5] TrigoView connect listener fired!');
-        console.log('[5a] Would call fetchRoomList() here');
-        socket.emit('listRooms', (response) => {
-            console.log('[5b] listRooms response:', JSON.stringify(response));
-        });
-    });
-    // Check if socket is already connected
-    console.log('[4c] socket.connected at onMounted time:', socket.connected);
-    if (socket.connected) {
-        console.log('[4d] Socket already connected, calling fetchRoomList directly');
-        socket.emit('listRooms', (response) => {
-            console.log('[4e] listRooms response:', JSON.stringify(response));
-            socket.disconnect();
-            process.exit(0);
-        });
-    } else {
-        console.log('[4d] Socket not connected yet, waiting for connect event');
-    }
-}, 100); // Small delay to simulate Vue's mounting
-setTimeout(() => {
-    console.log('Timeout - test complete');
-    socket.disconnect();
-    process.exit(0);
-}, 10000);

trigo-web/app/test-hf-rooms.cjs DELETED Viewed

@@ -1,41 +0,0 @@
-const { io } = require('socket.io-client');
-const socket = io('https://k-l-lambda-trigo.hf.space', {
-    transports: ['websocket', 'polling'],
-    timeout: 10000
-});
-socket.on('connect', () => {
-    console.log('Connected to HF Space, socket id:', socket.id);
-    // Test listRooms
-    console.log('Calling listRooms...');
-    socket.emit('listRooms', (response) => {
-        console.log('listRooms response:', JSON.stringify(response, null, 2));
-        // Create a room to test
-        console.log('Creating a room...');
-        socket.emit('joinRoom', { nickname: 'TestBot' }, (joinResponse) => {
-            console.log('joinRoom response:', JSON.stringify(joinResponse, null, 2));
-            // List rooms again
-            setTimeout(() => {
-                socket.emit('listRooms', (response2) => {
-                    console.log('listRooms after create:', JSON.stringify(response2, null, 2));
-                    socket.disconnect();
-                    process.exit(0);
-                });
-            }, 500);
-        });
-    });
-});
-socket.on('connect_error', (err) => {
-    console.error('Connection error:', err.message);
-    process.exit(1);
-});
-setTimeout(() => {
-    console.log('Timeout - no response');
-    process.exit(1);
-}, 15000);