magdo
836 lines
30 KiB
React
836 lines
30 KiB
React
import React, { createContext, useContext, useRef, useState, useCallback, useMemo, useEffect } from 'react';
|
|
import { io } from 'socket.io-client';
|
|
import { API_CONFIG } from '../api/userApi';
|
|
|
|
const GameWebSocketContext = createContext(null);
|
|
|
|
const isDev = import.meta.env.DEV;
|
|
const log = (...args) => isDev && console.log(...args);
|
|
const warn = (...args) => isDev && console.warn(...args);
|
|
const logError = (...args) => console.error(...args);
|
|
|
|
/**
|
|
* Provider that maintains WebSocket connection across page navigation
|
|
*/
|
|
export const GameWebSocketProvider = ({ children }) => {
|
|
const socketRef = useRef(null);
|
|
const gameTokenRef = useRef(null);
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
|
|
// Single game object containing all game data
|
|
const [gameState, setGameState] = useState(null);
|
|
// Structure: {
|
|
// gameCode: string,
|
|
// boardData: object,
|
|
// turnInfo: { currentPlayer, currentPlayerName, turnNumber },
|
|
// players: [{ playerId, playerName, isOnline, isReady }],
|
|
// playerPositions: { playerName: position },
|
|
// connectedPlayers: [],
|
|
// readyPlayers: [],
|
|
// state: string,
|
|
// isGamemaster: boolean
|
|
// }
|
|
|
|
const [error, setError] = useState(null);
|
|
const [isGamemaster, setIsGamemaster] = useState(false);
|
|
const [gameStarted, setGameStarted] = useState(false);
|
|
const [pendingPlayers, setPendingPlayers] = useState([]);
|
|
const [approvalStatus, setApprovalStatus] = useState(null);
|
|
const [playerIdentifier, setPlayerIdentifier] = useState(null);
|
|
const [isMyTurnFlag, setIsMyTurnFlag] = useState(false); // Directly controlled by game:your-turn
|
|
const [playerDiceRolls, setPlayerDiceRolls] = useState({});
|
|
|
|
// Memoized derived values - extract from single game object
|
|
const players = useMemo(() => {
|
|
return gameState?.players || [];
|
|
}, [gameState?.players]);
|
|
|
|
const playerPositions = useMemo(() => {
|
|
return gameState?.playerPositions || {};
|
|
}, [gameState?.playerPositions]);
|
|
|
|
const boardData = useMemo(() => {
|
|
return gameState?.boardData || null;
|
|
}, [gameState?.boardData]);
|
|
|
|
const currentTurn = useMemo(() => gameState?.turnInfo?.currentPlayer || null, [gameState?.turnInfo?.currentPlayer]);
|
|
const currentTurnName = useMemo(() => gameState?.turnInfo?.currentPlayerName || null, [gameState?.turnInfo?.currentPlayerName]);
|
|
|
|
// isMyTurn is simply the flag set by game:your-turn event
|
|
const isMyTurn = isMyTurnFlag;
|
|
|
|
/**
|
|
* Connect to game WebSocket with a game token
|
|
* This maintains the connection even when navigating between pages
|
|
*/
|
|
const connect = useCallback((gameToken) => {
|
|
if (!gameToken) {
|
|
warn('⚠️ Cannot connect without game token');
|
|
return;
|
|
}
|
|
|
|
// If already connected with same token, don't reconnect
|
|
if (socketRef.current?.connected && gameTokenRef.current === gameToken) {
|
|
log('✅ Already connected with same token');
|
|
return;
|
|
}
|
|
|
|
// Disconnect old socket if exists
|
|
if (socketRef.current) {
|
|
log('🔌 Disconnecting old socket');
|
|
socketRef.current.removeAllListeners();
|
|
socketRef.current.disconnect();
|
|
}
|
|
|
|
log('🔌 Connecting to game WebSocket...');
|
|
gameTokenRef.current = gameToken;
|
|
|
|
// Decode token to get player identifier
|
|
try {
|
|
const payload = JSON.parse(atob(gameToken.split('.')[1]));
|
|
const identifier = payload.userId || payload.playerName;
|
|
setPlayerIdentifier(identifier);
|
|
log('🎮 Player identifier:', identifier);
|
|
} catch (err) {
|
|
logError('Failed to decode game token:', err);
|
|
}
|
|
|
|
// Connect to /game namespace
|
|
socketRef.current = io(`${API_CONFIG.wsURL}/game`, {
|
|
transports: ['websocket'],
|
|
reconnection: true,
|
|
reconnectionAttempts: 5,
|
|
reconnectionDelay: 1000,
|
|
timeout: 5000,
|
|
});
|
|
|
|
const socket = socketRef.current;
|
|
|
|
// Connection handlers
|
|
socket.on('connect', () => {
|
|
log('✅ Connected to game WebSocket');
|
|
setIsConnected(true);
|
|
setError(null);
|
|
socket.emit('game:join', { gameToken });
|
|
});
|
|
|
|
socket.on('connect_error', (err) => {
|
|
logError('❌ Connection error:', err);
|
|
setIsConnected(false);
|
|
setError(err.message);
|
|
|
|
// If reconnection fails completely, navigate to home
|
|
if (err.message?.includes('timeout') || err.message?.includes('xhr poll error')) {
|
|
setTimeout(() => {
|
|
if (!socketRef.current?.connected) {
|
|
logError('⚠️ Connection failed - redirecting to home');
|
|
window.location.href = '/';
|
|
}
|
|
}, 10000); // Give 10 seconds for reconnection attempts
|
|
}
|
|
});
|
|
|
|
socket.on('disconnect', (reason) => {
|
|
log('🔌 Disconnected:', reason);
|
|
setIsConnected(false);
|
|
setIsMyTurnFlag(false); // Clear turn flag on disconnect
|
|
});
|
|
|
|
// Game state handlers
|
|
socket.on('game:state', (state) => {
|
|
log('📊 Game state received:', state);
|
|
if (state?.isGamemaster !== undefined) {
|
|
setIsGamemaster(state.isGamemaster);
|
|
}
|
|
// Merge state into single game object
|
|
setGameState(prev => {
|
|
// Build players array from various sources
|
|
let playersArray = prev?.players || [];
|
|
|
|
// If we have currentPlayers or players from backend, use them (already have proper structure)
|
|
if (state.currentPlayers && Array.isArray(state.currentPlayers) && state.currentPlayers.length > 0) {
|
|
playersArray = state.currentPlayers.map(p => ({
|
|
playerId: p.playerId || p.id,
|
|
playerName: p.playerName || p.name,
|
|
name: p.playerName || p.name, // Add name for compatibility
|
|
isOnline: p.isOnline !== undefined ? p.isOnline : true,
|
|
isReady: p.isReady || false
|
|
}));
|
|
} else if (state.players && Array.isArray(state.players) && state.players.length > 0) {
|
|
playersArray = state.players.map(p => ({
|
|
playerId: p.playerId || p.id,
|
|
playerName: p.playerName || p.name,
|
|
name: p.playerName || p.name, // Add name for compatibility
|
|
isOnline: p.isOnline !== undefined ? p.isOnline : true,
|
|
isReady: p.isReady || false
|
|
}));
|
|
}
|
|
// If players array is still empty but we have connectedPlayers (array of strings), convert them
|
|
else if (playersArray.length === 0 && state.connectedPlayers && Array.isArray(state.connectedPlayers) && state.connectedPlayers.length > 0) {
|
|
playersArray = state.connectedPlayers.map((playerName, index) => ({
|
|
playerId: `player-${index}`, // Temporary ID until we get the real one
|
|
playerName: playerName,
|
|
name: playerName, // Add name for compatibility
|
|
isOnline: true,
|
|
isReady: false
|
|
}));
|
|
}
|
|
|
|
// Initialize playerPositions from backend data if joining game in progress
|
|
let playerPositions = prev?.playerPositions || {};
|
|
// If we don't have positions yet but backend sent players with positions, initialize from them
|
|
if (Object.keys(playerPositions).length === 0 && state.players && Array.isArray(state.players)) {
|
|
const positionsFromBackend = {};
|
|
state.players.forEach(p => {
|
|
const playerName = p.playerName || p.name;
|
|
if (playerName && p.position !== undefined) {
|
|
positionsFromBackend[playerName] = p.position;
|
|
}
|
|
});
|
|
if (Object.keys(positionsFromBackend).length > 0) {
|
|
playerPositions = positionsFromBackend;
|
|
}
|
|
}
|
|
|
|
const merged = {
|
|
...prev,
|
|
gameCode: state.gameCode || prev?.gameCode,
|
|
boardData: state.boardData || prev?.boardData,
|
|
state: state.state || prev?.state,
|
|
connectedPlayers: state.connectedPlayers || prev?.connectedPlayers || [],
|
|
readyPlayers: state.readyPlayers || prev?.readyPlayers || [],
|
|
// Preserve turn info - only turn-changed updates it
|
|
turnInfo: prev?.turnInfo || { currentPlayer: null, currentPlayerName: null, turnNumber: 0 },
|
|
// Use the built players array
|
|
players: playersArray,
|
|
// Initialize playerPositions from backend if joining in progress, otherwise preserve
|
|
playerPositions: playerPositions
|
|
};
|
|
return merged;
|
|
});
|
|
});
|
|
|
|
socket.on('game:state-update', (state) => {
|
|
log('📊 Game state update:', state);
|
|
if (state?.isGamemaster !== undefined) {
|
|
setIsGamemaster(state.isGamemaster);
|
|
}
|
|
// Merge state update into single game object
|
|
setGameState(prev => ({
|
|
...prev,
|
|
gameCode: state.gameCode || prev?.gameCode,
|
|
boardData: state.boardData || prev?.boardData,
|
|
state: state.state || prev?.state,
|
|
connectedPlayers: state.connectedPlayers || prev?.connectedPlayers,
|
|
readyPlayers: state.readyPlayers || prev?.readyPlayers,
|
|
// Preserve turn info and positions
|
|
turnInfo: prev?.turnInfo,
|
|
players: prev?.players,
|
|
playerPositions: prev?.playerPositions
|
|
}));
|
|
});
|
|
|
|
socket.on('game:joined', (data) => {
|
|
log('✅ Joined game:', data);
|
|
if (data.isGamemaster !== undefined) {
|
|
setIsGamemaster(data.isGamemaster);
|
|
}
|
|
// Initialize or update gameState with gameCode and gameId from join confirmation
|
|
setGameState(prev => {
|
|
if (prev && prev.gameCode) {
|
|
// If already has gameCode, just add gameId if missing
|
|
return {
|
|
...prev,
|
|
gameId: data.gameId || prev.gameId,
|
|
gameCode: data.gameCode,
|
|
playerName: data.playerName,
|
|
isAuthenticated: data.isAuthenticated
|
|
};
|
|
}
|
|
return {
|
|
...prev,
|
|
gameId: data.gameId, // Store gameId from backend
|
|
gameCode: data.gameCode,
|
|
playerName: data.playerName,
|
|
isAuthenticated: data.isAuthenticated
|
|
};
|
|
});
|
|
});
|
|
|
|
socket.on('game:player-joined', (data) => {
|
|
log('👤 Player joined:', data.playerName);
|
|
setGameState(prev => {
|
|
if (!prev) return prev;
|
|
const currentConnected = prev.connectedPlayers || [];
|
|
const currentPlayers = prev.players || [];
|
|
|
|
// Add to connectedPlayers if not already there
|
|
const updatedConnected = currentConnected.includes(data.playerName)
|
|
? currentConnected
|
|
: [...currentConnected, data.playerName];
|
|
|
|
// Add to players array if not already there (without position - that's in playerPositions)
|
|
const playerExists = currentPlayers.some(p =>
|
|
p.playerName === data.playerName || p.name === data.playerName
|
|
);
|
|
|
|
const updatedPlayers = playerExists
|
|
? currentPlayers
|
|
: [...currentPlayers, {
|
|
playerId: data.playerId,
|
|
playerName: data.playerName,
|
|
name: data.playerName, // Add name for compatibility with Lobby display
|
|
isOnline: true,
|
|
isReady: false
|
|
}];
|
|
|
|
return {
|
|
...prev,
|
|
connectedPlayers: updatedConnected,
|
|
players: updatedPlayers
|
|
};
|
|
});
|
|
window.dispatchEvent(new CustomEvent('game:player-joined', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-left', (data) => {
|
|
log('👋 Player left:', data.playerName);
|
|
setGameState(prev => {
|
|
if (!prev) return prev;
|
|
return {
|
|
...prev,
|
|
connectedPlayers: (prev.connectedPlayers || []).filter(p => p !== data.playerName)
|
|
};
|
|
});
|
|
window.dispatchEvent(new CustomEvent('game:player-left', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-ready', (data) => {
|
|
log('✅ Player ready:', data.playerName);
|
|
setGameState(prev => {
|
|
if (!prev) return prev;
|
|
const readyPlayers = prev.readyPlayers || [];
|
|
if (data.ready && !readyPlayers.includes(data.playerName)) {
|
|
return { ...prev, readyPlayers: [...readyPlayers, data.playerName] };
|
|
} else if (!data.ready) {
|
|
return { ...prev, readyPlayers: readyPlayers.filter(p => p !== data.playerName) };
|
|
}
|
|
return prev;
|
|
});
|
|
window.dispatchEvent(new CustomEvent('game:player-ready', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:all-ready', (data) => {
|
|
log('✅ All players ready! Game can start.');
|
|
window.dispatchEvent(new CustomEvent('game:all-ready', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:start', (data) => {
|
|
log('🎮 Game started:', data);
|
|
setGameStarted(true);
|
|
|
|
// Update game state with position initialization
|
|
setGameState(prev => {
|
|
// Initialize all player positions to 0 at game start
|
|
const initialPositions = {};
|
|
|
|
// Use existing players from prev (already set by game:joined/game:state)
|
|
const existingPlayers = prev?.players || [];
|
|
|
|
// Initialize positions for all existing players
|
|
existingPlayers.forEach((player) => {
|
|
const playerName = player.playerName || player.name;
|
|
if (playerName) {
|
|
// Initialize ALL positions to 0 - only game:player-arrived will change them
|
|
initialPositions[playerName] = 0;
|
|
}
|
|
});
|
|
|
|
const updated = {
|
|
...prev,
|
|
gameCode: data.gameCode || prev?.gameCode,
|
|
boardData: data.boardData || prev?.boardData,
|
|
state: data.gamePhase || data.state || 'playing',
|
|
boardSize: data.boardSize || prev?.boardSize,
|
|
// Keep existing players list, initialize positions to 0
|
|
players: existingPlayers,
|
|
playerPositions: initialPositions,
|
|
// Preserve turn info and other data
|
|
turnInfo: prev?.turnInfo || { currentPlayer: null, currentPlayerName: null, turnNumber: 0 },
|
|
connectedPlayers: prev?.connectedPlayers || [],
|
|
readyPlayers: prev?.readyPlayers || []
|
|
};
|
|
return updated;
|
|
});
|
|
});
|
|
|
|
socket.on('game:turn-changed', (data) => {
|
|
log('🔄 Turn changed to:', data.currentPlayerName);
|
|
|
|
// Turn changed means it's NOT my turn anymore
|
|
setIsMyTurnFlag(false);
|
|
|
|
// This is the ONLY place turnInfo should be set
|
|
setGameState(prev => ({
|
|
...prev,
|
|
turnInfo: {
|
|
currentPlayer: data.currentPlayer,
|
|
currentPlayerName: data.currentPlayerName,
|
|
turnNumber: data.turnNumber || prev?.turnInfo?.turnNumber || 0
|
|
}
|
|
}));
|
|
|
|
// Force a re-render by logging after state update
|
|
setTimeout(() => {
|
|
console.log('🔄 [game:turn-changed] State should be updated now');
|
|
}, 100);
|
|
});
|
|
|
|
socket.on('game:error', (err) => {
|
|
logError('❌ Game error:', err);
|
|
setError(err.message);
|
|
});
|
|
|
|
// Approval system handlers
|
|
socket.on('game:pending-approval', (data) => {
|
|
log('⏳ Pending gamemaster approval:', data);
|
|
setApprovalStatus('pending');
|
|
setError('Waiting for gamemaster approval...');
|
|
});
|
|
|
|
socket.on('game:player-requesting-join', (data) => {
|
|
log('🔔 Player requesting to join:', data.playerName);
|
|
setPendingPlayers(prev => {
|
|
if (prev.some(p => p.playerName === data.playerName)) return prev;
|
|
return [...prev, {
|
|
playerName: data.playerName,
|
|
isAuthenticated: data.isAuthenticated,
|
|
timestamp: data.timestamp
|
|
}];
|
|
});
|
|
});
|
|
|
|
socket.on('game:approval-granted', (data) => {
|
|
log('✅ Join request approved:', data);
|
|
setApprovalStatus('approved');
|
|
setError(null);
|
|
socket.emit('game:join-approved', { gameToken });
|
|
});
|
|
|
|
socket.on('game:approval-denied', (data) => {
|
|
logError('❌ Join request denied:', data.reason || data.message);
|
|
setApprovalStatus('denied');
|
|
setError(data.reason || 'Your request to join was denied');
|
|
});
|
|
|
|
socket.on('game:player-approved', (data) => {
|
|
log('✅ Player approved by gamemaster:', data.playerName);
|
|
setPendingPlayers(prev => prev.filter(p => p.playerName !== data.playerName));
|
|
setGameState(prev => {
|
|
if (!prev) return prev;
|
|
const currentConnected = prev.connectedPlayers || [];
|
|
if (!currentConnected.includes(data.playerName)) {
|
|
return {
|
|
...prev,
|
|
connectedPlayers: [...currentConnected, data.playerName]
|
|
};
|
|
}
|
|
return prev;
|
|
});
|
|
});
|
|
|
|
socket.on('game:your-turn', (data) => {
|
|
log('🎯 Your turn!', data);
|
|
console.log('🎯 [game:your-turn] Received - enabling dice');
|
|
|
|
// Set flag to true - dice is now enabled
|
|
setIsMyTurnFlag(true);
|
|
|
|
// Emit custom event for GameScreen to display turn notification
|
|
window.dispatchEvent(new CustomEvent('game:your-turn', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:dice-rolled', (data) => {
|
|
log('🎲 Dice rolled:', data.diceValue, 'by', data.playerName);
|
|
// Track the dice roll for this player
|
|
setPlayerDiceRolls(prev => ({
|
|
...prev,
|
|
[data.playerName]: data.diceValue
|
|
}));
|
|
window.dispatchEvent(new CustomEvent('game:dice-rolled', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-moving', (data) => {
|
|
log('🚶 Player moving:', data.playerName, 'from', data.fromPosition, 'to', data.toPosition);
|
|
window.dispatchEvent(new CustomEvent('game:player-moving', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-arrived', (data) => {
|
|
log('🎯 Player arrived:', data.playerName, 'at position', data.position, '(' + data.fieldType + ')');
|
|
|
|
// Update playerPositions in game object - THIS IS THE ONLY PLACE POSITIONS ARE MODIFIED
|
|
setGameState(prev => {
|
|
if (!prev) return prev;
|
|
const updatedPositions = { ...prev.playerPositions, [data.playerName]: data.position };
|
|
|
|
return {
|
|
...prev,
|
|
playerPositions: updatedPositions
|
|
};
|
|
});
|
|
|
|
window.dispatchEvent(new CustomEvent('game:player-arrived', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:card-drawn', (data) => {
|
|
log('🃏 Card drawn:', data.cardType, 'by', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:card-drawn', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:card-result', (data) => {
|
|
log('🎴 Card result:', data.playerName, data.description);
|
|
window.dispatchEvent(new CustomEvent('game:card-result', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:answer-timeout', (data) => {
|
|
log('⏰ Answer timeout:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:answer-timeout', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:answer-result', (data) => {
|
|
log('📝 Answer result:', data.correct ? '✅ Correct' : '❌ Wrong', '-', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:answer-result', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:gamemaster-decision-request', (data) => {
|
|
log('👨⚖️ Gamemaster decision request:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:gamemaster-decision-request', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:gamemaster-decision-result', (data) => {
|
|
log('⚖️ Gamemaster decision result:', data.decision, '-', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:gamemaster-decision-result', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:card-drawn-self', (data) => {
|
|
log('🃏 You drew a card:', data.cardType);
|
|
window.dispatchEvent(new CustomEvent('game:card-drawn-self', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:joker-activated', (data) => {
|
|
log('🃏 Joker activated:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:joker-activated', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:extra-turn', (data) => {
|
|
log('⭐ Extra turn:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:extra-turn', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:turn-lost', (data) => {
|
|
log('😞 Turn lost:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:turn-lost', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:no-movement', (data) => {
|
|
log('⛔ No movement:', data.playerName, '-', data.reason);
|
|
window.dispatchEvent(new CustomEvent('game:no-movement', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:penalty-avoided', (data) => {
|
|
log('🛡️ Penalty avoided:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:penalty-avoided', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:guess-timeout', (data) => {
|
|
log('⏰ Guess timeout:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:guess-timeout', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-guessing', (data) => {
|
|
log('🤔 Player guessing:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:player-guessing', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:secondary-landing', (data) => {
|
|
log('🎯 Secondary landing:', data.playerName, 'on', data.fieldType);
|
|
window.dispatchEvent(new CustomEvent('game:secondary-landing', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-disconnected', (data) => {
|
|
log('⚠️ Player disconnected:', data.playerName);
|
|
setGameState(prev => {
|
|
if (!prev) return prev;
|
|
return {
|
|
...prev,
|
|
connectedPlayers: (prev.connectedPlayers || []).filter(p => p !== data.playerName)
|
|
};
|
|
});
|
|
window.dispatchEvent(new CustomEvent('game:player-disconnected', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-disconnected-during-turn', (data) => {
|
|
log('⚠️ Player disconnected during turn:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:player-disconnected-during-turn', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:player-disconnected-during-card', (data) => {
|
|
log('⚠️ Player disconnected during card:', data.playerName);
|
|
window.dispatchEvent(new CustomEvent('game:player-disconnected-during-card', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:guess-result', (data) => {
|
|
log('🎯 Guess result:', data);
|
|
// Position update will come from game:player-arrived event
|
|
window.dispatchEvent(new CustomEvent('game:guess-result', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:joker-complete', (data) => {
|
|
log('🃏 Joker complete:', data);
|
|
// Position update will come from game:player-arrived event
|
|
window.dispatchEvent(new CustomEvent('game:joker-complete', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:luck-consequence', (data) => {
|
|
log('🍀 Luck consequence:', data);
|
|
// Position update will come from game:player-arrived event
|
|
window.dispatchEvent(new CustomEvent('game:luck-consequence', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:ended', (data) => {
|
|
log('🏁 Game ended! Winner:', data.winner);
|
|
setGameState(prev => ({
|
|
...prev,
|
|
status: 'finished',
|
|
winner: data.winner,
|
|
finalScores: data.scores
|
|
}));
|
|
window.dispatchEvent(new CustomEvent('game:ended', { detail: data }));
|
|
|
|
// Don't auto-navigate - let the player close the winner modal manually
|
|
// They can use the "Vissza a főoldalra" button when ready
|
|
});
|
|
|
|
socket.on('game:extra-turn-remaining', (data) => {
|
|
log('⭐ Extra turn remaining:', data);
|
|
window.dispatchEvent(new CustomEvent('game:extra-turn-remaining', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:players-skipped', (data) => {
|
|
log('⏭️ Players skipped:', data.skippedPlayers);
|
|
window.dispatchEvent(new CustomEvent('game:players-skipped', { detail: data }));
|
|
});
|
|
|
|
socket.on('game:cleanup-complete', (data) => {
|
|
log('🧹 Cleanup complete:', data);
|
|
window.dispatchEvent(new CustomEvent('game:cleanup-complete', { detail: data }));
|
|
|
|
// Navigate to home after cleanup
|
|
setTimeout(() => {
|
|
log('🏠 Navigating to home after cleanup');
|
|
window.location.href = '/';
|
|
}, 2000);
|
|
});
|
|
}, []);
|
|
|
|
/**
|
|
* Disconnect from WebSocket
|
|
*/
|
|
const disconnect = useCallback(() => {
|
|
if (socketRef.current) {
|
|
log('🔌 Disconnecting from game WebSocket');
|
|
socketRef.current.removeAllListeners();
|
|
socketRef.current.disconnect();
|
|
socketRef.current = null;
|
|
gameTokenRef.current = null;
|
|
setIsConnected(false);
|
|
setGameState(null); // Clear entire game object
|
|
setError(null);
|
|
setIsGamemaster(false);
|
|
setGameStarted(false);
|
|
setPendingPlayers([]);
|
|
setApprovalStatus(null);
|
|
}
|
|
}, []);
|
|
|
|
// Action methods
|
|
const rollDice = useCallback((diceValue) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected) {
|
|
warn('⚠️ Cannot roll dice: not connected');
|
|
return false;
|
|
}
|
|
log('🎲 Rolling dice:', diceValue);
|
|
socket.emit('game:dice-roll', { gameCode: gameState?.gameCode, diceValue });
|
|
return true;
|
|
}, [isConnected, gameState?.gameCode]);
|
|
|
|
const sendMessage = useCallback((message) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected) return false;
|
|
socket.emit('game:chat', { gameCode: gameState?.gameCode, message });
|
|
return true;
|
|
}, [isConnected, gameState?.gameCode]);
|
|
|
|
const setReady = useCallback((ready = true) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected) return false;
|
|
socket.emit('game:ready', { gameCode: gameState?.gameCode, ready });
|
|
return true;
|
|
}, [isConnected, gameState?.gameCode]);
|
|
|
|
const leaveGame = useCallback(() => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected) return false;
|
|
socket.emit('game:leave', { gameCode: gameState?.gameCode });
|
|
return true;
|
|
}, [isConnected, gameState?.gameCode]);
|
|
|
|
const approvePlayer = useCallback((playerName) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected || !isGamemaster) return false;
|
|
socket.emit('game:approve-player', { gameCode: gameState?.gameCode, playerName });
|
|
return true;
|
|
}, [isConnected, isGamemaster, gameState?.gameCode]);
|
|
|
|
const rejectPlayer = useCallback((playerName, reason = 'Join request denied') => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected || !isGamemaster) return false;
|
|
socket.emit('game:reject-player', { gameCode: gameState?.gameCode, playerName, reason });
|
|
return true;
|
|
}, [isConnected, isGamemaster, gameState?.gameCode]);
|
|
|
|
const submitAnswer = useCallback((answer, cardId = null) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected) {
|
|
warn('⚠️ Cannot submit answer: not connected');
|
|
return false;
|
|
}
|
|
log('📝 Submitting answer:', answer, 'for card:', cardId);
|
|
socket.emit('game:card-answer', {
|
|
gameCode: gameState?.gameCode,
|
|
answer,
|
|
cardId
|
|
});
|
|
return true;
|
|
}, [isConnected, gameState?.gameCode]);
|
|
|
|
const submitPositionGuess = useCallback((guessedPosition) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected) {
|
|
warn('⚠️ Cannot submit position guess: not connected');
|
|
return false;
|
|
}
|
|
log('🎯 Submitting position guess:', guessedPosition);
|
|
socket.emit('game:position-guess', { gameCode: gameState?.gameCode, guessedPosition });
|
|
return true;
|
|
}, [isConnected, gameState?.gameCode]);
|
|
|
|
const submitJokerPositionGuess = useCallback((guessedPosition) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected) {
|
|
warn('⚠️ Cannot submit joker position guess: not connected');
|
|
return false;
|
|
}
|
|
log('🃏🎯 Submitting joker position guess:', guessedPosition);
|
|
socket.emit('game:joker-position-guess', { gameCode: gameState?.gameCode, guessedPosition });
|
|
return true;
|
|
}, [isConnected, gameState?.gameCode]);
|
|
|
|
const approveJoker = useCallback((requestId) => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected || !isGamemaster) {
|
|
warn('⚠️ Cannot approve joker: not gamemaster or not connected');
|
|
return false;
|
|
}
|
|
log('✅ Approving joker request:', requestId);
|
|
socket.emit('game:gamemaster-decision', {
|
|
gameCode: gameState?.gameCode,
|
|
requestId,
|
|
decision: 'approve'
|
|
});
|
|
return true;
|
|
}, [isConnected, isGamemaster, gameState?.gameCode]);
|
|
|
|
const rejectJoker = useCallback((requestId, reason = 'Joker answer rejected') => {
|
|
const socket = socketRef.current;
|
|
if (!socket || !isConnected || !isGamemaster) {
|
|
warn('⚠️ Cannot reject joker: not gamemaster or not connected');
|
|
return false;
|
|
}
|
|
log('❌ Rejecting joker request:', requestId, 'Reason:', reason);
|
|
socket.emit('game:gamemaster-decision', {
|
|
gameCode: gameState?.gameCode,
|
|
requestId,
|
|
decision: 'reject',
|
|
reason
|
|
});
|
|
return true;
|
|
}, [isConnected, isGamemaster, gameState?.gameCode]);
|
|
|
|
const addEventListener = useCallback((event, handler) => {
|
|
const socket = socketRef.current;
|
|
if (socket) {
|
|
socket.on(event, handler);
|
|
}
|
|
}, []);
|
|
|
|
const removeEventListener = useCallback((event, handler) => {
|
|
const socket = socketRef.current;
|
|
if (socket) socket.off(event, handler);
|
|
}, []);
|
|
|
|
const value = {
|
|
socket: socketRef.current,
|
|
isConnected,
|
|
gameState, // Single game object with all data
|
|
players, // Memoized from gameState.players
|
|
playerPositions, // Memoized from gameState.playerPositions (SINGLE SOURCE OF TRUTH for positions)
|
|
boardData, // Memoized from gameState.boardData
|
|
currentTurn, // Memoized from gameState.turnInfo.currentPlayer
|
|
currentTurnName, // Memoized from gameState.turnInfo.currentPlayerName
|
|
isMyTurn,
|
|
playerIdentifier,
|
|
error,
|
|
isGamemaster,
|
|
gameStarted,
|
|
pendingPlayers,
|
|
approvalStatus,
|
|
playerDiceRolls,
|
|
// Connection management
|
|
connect,
|
|
disconnect,
|
|
// Methods
|
|
rollDice,
|
|
sendMessage,
|
|
setReady,
|
|
leaveGame,
|
|
approvePlayer,
|
|
rejectPlayer,
|
|
submitAnswer,
|
|
submitPositionGuess,
|
|
submitJokerPositionGuess,
|
|
approveJoker,
|
|
rejectJoker,
|
|
addEventListener,
|
|
removeEventListener,
|
|
};
|
|
|
|
return (
|
|
<GameWebSocketContext.Provider value={value}>
|
|
{children}
|
|
</GameWebSocketContext.Provider>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Hook to access the shared WebSocket connection
|
|
*/
|
|
export const useGameWebSocketContext = () => {
|
|
const context = useContext(GameWebSocketContext);
|
|
if (!context) {
|
|
throw new Error('useGameWebSocketContext must be used within GameWebSocketProvider');
|
|
}
|
|
return context;
|
|
};
|