diff --git a/src/components/Question.css b/src/components/Question.css index cb927db..cc46297 100644 --- a/src/components/Question.css +++ b/src/components/Question.css @@ -130,9 +130,10 @@ grid-auto-rows: minmax(auto, clamp(120px, 18vh, 200px)); column-gap: clamp(6px, 1.2vw, 12px); row-gap: clamp(6px, 0.8vh, 12px); - flex: 1; + flex: 1 1 0; min-height: 0; overflow-y: auto; + align-content: start; /* Scrollbar styling */ scrollbar-width: thin; scrollbar-color: rgba(255, 215, 0, 0.5) rgba(255, 255, 255, 0.1); @@ -153,7 +154,11 @@ @media (max-width: 768px) { .answers-grid { grid-template-columns: 1fr; - grid-auto-rows: minmax(auto, clamp(100px, 15vh, 140px)); + grid-auto-rows: minmax(100px, clamp(100px, 15vh, 140px)); + } + + .question-container { + max-height: 100%; } } diff --git a/src/hooks/useRoom.js b/src/hooks/useRoom.js index db2075a..16488f0 100644 --- a/src/hooks/useRoom.js +++ b/src/hooks/useRoom.js @@ -133,11 +133,12 @@ export const useRoom = (roomCode, onGameStarted = null, password = null) => { const response = await roomsApi.join(roomId, userId, name, role); // После успешного присоединения запрашиваем полное состояние через WebSocket - // Это гарантирует получение актуального состояния (список игроков, тема, voiceMode) - if (response.data?.code) { + // Это гарантирует получение актуального состояния от сервера (список игроков, тема, voiceMode) + // НЕ обновляем состояние локально - полагаемся только на серверные обновления для консистентности + if (roomCode) { // Небольшая задержка, чтобы убедиться, что WebSocket подключен setTimeout(() => { - socketService.emit('requestFullState', { roomCode: response.data.code }); + socketService.emit('requestFullState', { roomCode }); }, 100); } @@ -146,7 +147,7 @@ export const useRoom = (roomCode, onGameStarted = null, password = null) => { setError(err.message); throw err; } - }, []); + }, [roomCode]); const startGame = useCallback(() => { if (room && user) { diff --git a/src/pages/RoomPage.jsx b/src/pages/RoomPage.jsx index 7d4461b..13249ae 100644 --- a/src/pages/RoomPage.jsx +++ b/src/pages/RoomPage.jsx @@ -141,11 +141,13 @@ const RoomPage = () => { const isParticipant = participants.some((p) => p.userId === user.id); if (!isParticipant) { // Если зрители не разрешены, присоединяемся как PLAYER автоматически + // Присоединение разрешено независимо от статуса игры (WAITING, PLAYING, FINISHED) if (!room.allowSpectators) { try { setJoinError(null); await joinRoom(room.id, user.id, user.name || 'Гость', 'PLAYER'); setJoined(true); + // Если игра уже началась, перенаправление произойдет после обновления participants } catch (error) { console.error('Join error:', error); const errorMessage = error.response?.data?.message || error.message || 'Ошибка при присоединении к комнате'; @@ -163,6 +165,7 @@ const RoomPage = () => { }, [room, user, participants, joined, joinRoom, isRoleSelectionModalOpen]); // Обработка выбора роли + // Присоединение разрешено независимо от статуса игры (WAITING, PLAYING, FINISHED) const handleRoleSubmit = async (role) => { if (!room || !user) return; @@ -172,6 +175,7 @@ const RoomPage = () => { await joinRoom(room.id, user.id, user.name || 'Гость', role); setSelectedRole(role); setJoined(true); + // Если игра уже началась, перенаправление произойдет после обновления participants } catch (error) { console.error('Join error:', error); const errorMessage = error.response?.data?.message || error.message || 'Ошибка при присоединении к комнате'; @@ -206,11 +210,17 @@ const RoomPage = () => { }, [room, user, participants]); // Автоматически перенаправляем на страницу игры, если игра уже началась + // Важно: перенаправляем только если игрок уже присоединился (joined === true) + // и он есть в списке участников, чтобы избежать перенаправления до добавления игрока useEffect(() => { - if (room && room.status === 'PLAYING') { - navigate(`/game/${roomCode}`); + if (room && room.status === 'PLAYING' && joined && user) { + const isParticipant = participants.some((p) => p.userId === user.id); + // Перенаправляем только если игрок действительно присоединился + if (isParticipant) { + navigate(`/game/${roomCode}`); + } } - }, [room, roomCode, navigate]); + }, [room, roomCode, navigate, joined, user, participants]); // Применяем тему из gameStateUpdated/roomUpdate useEffect(() => {