import React, { useState, useEffect } from 'react'; import Board from 'Board'; import { revealCellMultiplayer, subscribeToGameRoom, boardsAreDifferent } from 'gameRoom'; import { forceRefreshBoard, needsRefresh } from 'forceRefresh'; import Header from 'Header'; import GameOver from 'GameOver'; export default function MultiplayerGame({ gameInfo, onExit, supabase }) { const { roomId, playerId, playerName, roomData } = gameInfo; const [board, setBoard] = useState([]); const [minesLeft, setMinesLeft] = useState(10); const [gameState, setGameState] = useState(roomData); const [subscription, setSubscription] = useState(null); const [error, setError] = useState(''); // Initialize game board from room data useEffect(() => { if (roomData && roomData.board) { const loadBoard = (retryCount = 0, maxRetries = 3) => { try { // Check if board is already an object (pre-parsed) const parsedBoard = typeof roomData.board === 'string' ? JSON.parse(roomData.board) : roomData.board; // Additional validation to ensure we have a valid board if (!Array.isArray(parsedBoard) || !parsedBoard.length) { throw new Error('Invalid board structure'); } console.log(`Successfully loaded board with ${parsedBoard.flat().filter(cell => cell.isRevealed).length} revealed cells`); setBoard(parsedBoard); setError(''); // Clear any previous errors } catch (err) { console.error(`Error parsing board (attempt ${retryCount + 1}):`, err); if (retryCount < maxRetries) { console.log(`Retrying board load (${retryCount + 1}/${maxRetries})...`); // Exponential backoff: 500ms, 1000ms, 2000ms setTimeout(() => loadBoard(retryCount + 1, maxRetries), 500 * Math.pow(2, retryCount)); } else { console.error('Maximum retry attempts reached. Could not load game board.'); setError('Could not load game board. Please try refreshing the page.'); } } }; loadBoard(); // Initial attempt } }, [roomData]); // Subscribe to game updates with enhanced real-time handling useEffect(() => { if (!supabase || !roomId) return; // Track the last update timestamp to prevent duplicate processing let lastUpdateTimestamp = 0; const sub = subscribeToGameRoom(supabase, roomId, (updatedRoom) => { console.log('Received subscription update at:', Date.now()); // Only update if we got valid data if (!updatedRoom) return; // Check specifically for last_move updates // Safely handle last_move updates regardless of format if (updatedRoom.last_move && (!gameState.last_move || JSON.stringify(updatedRoom.last_move) !== JSON.stringify(gameState.last_move))) { // Ensure last_move is properly formatted let moveData = updatedRoom.last_move; // Handle string format (parse it) or object format (use directly) if (typeof moveData === 'string') { try { moveData = JSON.parse(moveData); console.log('Parsed string last_move:', moveData); } catch (e) { console.error('Error parsing last_move string:', e); // Keep the original format if parsing fails } } else { console.log('Using object last_move directly:', moveData); } // Update our local reference updatedRoom.last_move = moveData; console.log('Last move updated:', moveData); // Check if this is an opponent's move if (updatedRoom.last_move.player !== playerName) { console.log('OPPONENT MOVE DETECTED:', { player: updatedRoom.last_move.player, action: updatedRoom.last_move.action || 'reveal', position: `row: ${updatedRoom.last_move.row}, col: ${updatedRoom.last_move.col}`, timestamp: new Date().toISOString() }); } // Force an immediate board refresh when last_move is updated if (updatedRoom.board) { try { // Parse the board data with retry mechanism let parsedBoard; try { parsedBoard = typeof updatedRoom.board === 'string' ? JSON.parse(updatedRoom.board) : updatedRoom.board; if (!Array.isArray(parsedBoard) || !parsedBoard.length) { throw new Error('Invalid board structure'); } } catch (err) { console.error('Error parsing board on last_move update. Retrying...', err); // Second attempt with error recovery try { // Try to recover the board from previous state if available parsedBoard = board.length > 0 ? JSON.parse(JSON.stringify(board)) : typeof updatedRoom._parsedBoard === 'object' && updatedRoom._parsedBoard ? updatedRoom._parsedBoard : null; if (!parsedBoard) { throw new Error('Failed to recover board data'); } console.log('Successfully recovered board data from previous state'); } catch (recoveryErr) { console.error('Recovery attempt failed:', recoveryErr); return; // Exit early rather than using bad data } } // Add a unique timestamp to force UI refresh const refreshTimestamp = Date.now(); const refreshedBoard = parsedBoard.map(row => row.map(cell => ({ ...cell, _refresh: `${refreshTimestamp}-${Math.random().toString(36).substring(2)}` })) ); // Force immediate board update console.log('Forcing board refresh due to last_move update'); refreshedBoard._updateTimestamp = refreshTimestamp; // Extra logging for opponent move board updates if (updatedRoom.last_move && updatedRoom.last_move.player !== playerName) { console.log('GRID UPDATE: Refreshing board after opponent move', { revealedCellCount: refreshedBoard.flat().filter(cell => cell.isRevealed).length, lastMoveBy: updatedRoom.last_move.player, timestamp: new Date().toISOString(), refreshId: refreshTimestamp }); } setBoard(refreshedBoard); } catch (err) { console.error('Error refreshing board on last_move update:', err); } } } // Update game state immediately with safely processed data setGameState(prevState => { // Ensure we're creating a new reference to trigger re-renders const newState = {...updatedRoom}; // Add validation for important fields if (typeof newState.last_move === 'string') { try { newState.last_move = JSON.parse(newState.last_move); } catch (err) { console.error('Error parsing last_move during state update:', err); // Fallback to previous last_move if parsing fails newState.last_move = prevState.last_move; } } return newState; }); // Visual indicator for updates from other players if (updatedRoom.last_move && updatedRoom.last_move.player !== playerName) { // Flash notification that another player made a move const notification = document.createElement('div'); notification.textContent = `${updatedRoom.last_move.player} made a move!`; notification.style.position = 'absolute'; notification.style.top = '50%'; notification.style.left = '50%'; notification.style.transform = 'translate(-50%, -50%)'; notification.style.backgroundColor = 'rgba(33, 150, 243, 0.9)'; notification.style.color = 'white'; notification.style.padding = '12px 16px'; notification.style.borderRadius = '6px'; notification.style.zIndex = '100'; notification.style.animation = 'fadeIn 0.3s, fadeOut 0.3s 1.5s forwards'; // Add animation styles const style = document.createElement('style'); style.textContent = ` @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -60%); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } `; document.head.appendChild(style); // Add to DOM document.querySelector('.board-container')?.appendChild(notification); // Remove after animation setTimeout(() => { notification.remove(); style.remove(); }, 2000); } // Process board changes separately for more responsive updates if (updatedRoom.board) { try { // Check if this update is newer than our last processed update const currentTimestamp = updatedRoom._forceRefresh || Date.now(); if (currentTimestamp <= lastUpdateTimestamp) { console.log('Ignoring outdated update'); return; } lastUpdateTimestamp = currentTimestamp; // Prioritize using pre-parsed board from subscription handler let parsedBoard; if (updatedRoom._parsedBoard) { parsedBoard = updatedRoom._parsedBoard; console.log('Using pre-parsed board from subscription'); } else { // Otherwise parse it ourselves with error recovery try { parsedBoard = typeof updatedRoom.board === 'string' ? JSON.parse(updatedRoom.board) : updatedRoom.board; if (!Array.isArray(parsedBoard) || !parsedBoard.length) { throw new Error('Invalid board structure'); } } catch (err) { console.error('Error parsing board, attempting recovery:', err); // Recovery logic - try to use previous board state or pre-parsed board if (board.length > 0) { console.log('Using previous board state for recovery'); parsedBoard = JSON.parse(JSON.stringify(board)); } else { console.error('No previous board state available for recovery'); return; // Exit early to prevent using invalid data } } } const prevBoard = board.length ? board : []; // Always update on subscription events to ensure real-time sync console.log('Immediate board refresh with timestamp:', currentTimestamp); // Track if this board update is from opponent const isOpponentUpdate = updatedRoom.last_move && updatedRoom.last_move.player !== playerName; if (isOpponentUpdate) { console.log('GRID SYNC: Processing opponent board update', { currentCells: prevBoard.flat().filter(cell => cell.isRevealed).length, newCells: parsedBoard.flat().filter(cell => cell.isRevealed).length, lastMoveBy: updatedRoom.last_move.player, cellPosition: `row: ${updatedRoom.last_move.row}, col: ${updatedRoom.last_move.col}`, updateId: currentTimestamp }); } // Apply the force refresh mechanism with a new timestamp const refreshedBoard = forceRefreshBoard(parsedBoard); // Log the cells that should be revealed for debugging const revealedCount = refreshedBoard.flat().filter(cell => cell.isRevealed).length; console.log(`Setting board with ${revealedCount} revealed cells`); // Set a specific property to force component update refreshedBoard._updateTimestamp = currentTimestamp; // Direct board update for immediate UI refresh setBoard(refreshedBoard); // Force immediate render cycle to reflect changes requestAnimationFrame(() => { // This causes React to perform a re-render by modifying state setMinesLeft(prev => { // Calculate actual mines left for accurate display const flaggedCount = refreshedBoard.flat().filter(cell => cell.isFlagged).length; return 10 - flaggedCount; }); }); // Force a re-render through the component state setMinesLeft(prev => { // Calculate actual mines left for accurate display const flaggedCount = refreshedBoard.flat().filter(cell => cell.isFlagged).length; return 10 - flaggedCount; }); } catch (err) { console.error('Error handling board update:', err); } } return updatedRoom; }); setSubscription(sub); return () => { // Clean up subscription on unmount if (subscription) { subscription.unsubscribe(); } }; }, [supabase, roomId]); const handleCellClick = async (row, col) => { // Prevent clicks if the game is not in playing state if (gameState.status !== 'playing') return; try { const result = await revealCellMultiplayer( supabase, roomId, playerId, row, col, playerName ); if (!result.success) { console.log(result.message || 'Could not reveal cell'); return; } // If we hit a mine, play explosion sound or animation if (result.hitMine) { // Future enhancement: Add explosion animation console.log('BOOM! 💣'); } // Force an immediate local board update for better responsiveness // This will be overwritten when the subscription receives the update, but // provides instant feedback to the user if (result.data && result.data.board) { try { // Parse with error handling let updatedBoard; try { updatedBoard = typeof result.data.board === 'string' ? JSON.parse(result.data.board) : result.data.board; if (!Array.isArray(updatedBoard) || !updatedBoard.length) { throw new Error('Invalid board structure received from server'); } } catch (parseErr) { console.error('Error parsing result board:', parseErr); // Fall back to using our current board state updatedBoard = board.length > 0 ? JSON.parse(JSON.stringify(board)) : null; if (!updatedBoard) { throw new Error('Could not recover board state'); } console.log('Using current board state as fallback'); } // Apply our force refresh mechanism to ensure React detects the change const refreshedBoard = forceRefreshBoard(updatedBoard); setBoard(refreshedBoard); } catch (err) { console.error('Error updating local board after cell reveal:', err); } } } catch (err) { console.error('Error revealing cell:', err); } }; // Handle right-click to place flags in multiplayer const handleRightClick = async (e, row, col) => { e.preventDefault(); // Prevent if game is not in playing state if (gameState.status !== 'playing') return; // Prevent if cell is already revealed if (board[row][col].isRevealed) return; try { // Clone the current board const newBoard = JSON.parse(JSON.stringify(board)); // Toggle flag on the cell newBoard[row][col].isFlagged = !newBoard[row][col].isFlagged; // Mark who flagged this cell newBoard[row][col].flaggedBy = playerId; // Update flag count locally for immediate feedback const flaggedCount = newBoard.flat().filter(cell => cell.isFlagged).length; setMinesLeft(10 - flaggedCount); // Apply local update immediately for better responsiveness setBoard(forceRefreshBoard(newBoard)); // Send update to database const { data, error } = await supabase .from('game_rooms') .update({ board: JSON.stringify(newBoard), last_move: { player: playerName, row, col, action: newBoard[row][col].isFlagged ? 'flag' : 'unflag' } }) .eq('room_id', roomId) .select(); if (error) throw error; } catch (err) { console.error('Error placing flag:', err); } }; const getScoreDisplay = () => { const player1Name = gameState.player1 || 'Player 1'; const player2Name = gameState.player2 || 'Waiting...'; return (

{player1Name} {gameState.player1_score || 0}

{player2Name} {gameState.player2_score || 0}

); }; // Determine if the game is finished const isGameOver = gameState.status === 'completed'; // Track board updates to detect and log real-time changes React.useEffect(() => { if (board.length > 0) { const revealedCount = board.flat().filter(cell => cell.isRevealed).length; console.log(`Board updated with ${revealedCount} revealed cells at ${new Date().toISOString()}`); } }, [board]); // Add specific tracking for board updates from opponent moves React.useEffect(() => { if (board.length > 0 && gameState.last_move && gameState.last_move.player !== playerName) { console.log('OPPONENT MOVE BOARD UPDATE COMPLETED', { totalRevealedCells: board.flat().filter(cell => cell.isRevealed).length, lastMoveBy: gameState.last_move.player, moveDetails: gameState.last_move, boardUpdateTime: new Date().toISOString() }); } }, [board, gameState.last_move, playerName]); // Custom cell renderer for multiplayer that shows which player revealed each cell const renderMultiplayerBoard = () => { // Enhanced logging with update timestamp to track rendering console.log('Rendering board with revealed cells:', board.flat().filter(cell => cell.isRevealed).length, 'timestamp:', board._updateTimestamp || 'none'); // Add player color indicator and position info to cells const coloredBoard = board.map((row, rowIndex) => row.map((cell, colIndex) => { // For all cells, add position info to help with tracking const enhancedCell = { ...cell, row: rowIndex, col: colIndex, // Add a unique key to force React to recognize this as a new cell _cellKey: cell._refresh || `${rowIndex}-${colIndex}-${cell.isRevealed ? 1 : 0}` }; if (!cell.isRevealed) return enhancedCell; // Return a new cell with player indicator for revealed cells return { ...enhancedCell, playerColor: cell.revealedBy === 'player1' ? '#4CAF50' : '#2196F3', // Ensure neighborMines is properly set if the cell is revealed neighborMines: cell.neighborMines !== undefined ? cell.neighborMines : 0 }; })); return ( ); }; return (

Room: {roomId}

{getScoreDisplay()}

{gameState.status === 'waiting' ? '⏳ Waiting for player 2 to join...' : '🎮 Game in progress'}

{/* Last move indicator with animation for new updates */} {gameState.last_move && ( <>

Last move: {gameState.last_move.player} {gameState.last_move.hitMine ? ' hit a mine! 💣' : gameState.last_move.action === 'flag' ? ' placed a flag 🚩' : gameState.last_move.action === 'unflag' ? ' removed a flag' : ' cleared a cell'}