diff --git a/client/src/pages/Game/Game.jsx b/client/src/pages/Game/Game.jsx index 74c3a77..0e24875 100644 --- a/client/src/pages/Game/Game.jsx +++ b/client/src/pages/Game/Game.jsx @@ -149,6 +149,10 @@ export const Game = () => { return prevMsg; })); }, + "song-options": (data) => { + console.log("Received song options early:", data); + setSongOptions(data.songOptions || []); + }, }; const cleanupFunctions = Object.entries(eventHandlers).map( @@ -320,11 +324,38 @@ export const Game = () => { )} {role === "guesser" && ( -
-
- +
+
+
+ +
+

Listen carefully and think about which song it might be!

-

Höre genau zu und versuche, den Song zu erkennen!

+ + {songOptions.length > 0 && ( +
+ {songOptions.map(song => ( +
handleSongSelect(song)} + > +
+ {song.title} + {selectedSong?.id === song.id && ( +
+ +
+ )} +
+
+
{song.title}
+
{song.artist}
+
+
+ ))} +
+ )}
)}
@@ -334,8 +365,8 @@ export const Game = () => { return (
-

Runde {round}: Song erraten

-
+

Final Answer Time!

+
{timeLeft}s
diff --git a/client/src/pages/Game/styles.sass b/client/src/pages/Game/styles.sass index fb7460a..f5fe0a5 100644 --- a/client/src/pages/Game/styles.sass +++ b/client/src/pages/Game/styles.sass @@ -597,6 +597,26 @@ opacity: 0.8 animation: pulse 1.5s infinite ease-in-out +.guessing-display + display: flex + flex-direction: column + gap: 20px + margin-top: 20px + + .early-preview + opacity: 0.8 + transition: opacity 0.3s ease + + &:hover + opacity: 1 + + .song-grid + margin-top: 10px + +.timer.urgent + animation: urgent-pulse 1s infinite + background: rgba(255, 100, 100, 0.2) + @keyframes subtle-text-glow 0%, 100% text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) @@ -1045,4 +1065,12 @@ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 0, 0.3) 50% transform: scale(1.1) - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.6) \ No newline at end of file + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.6) + +@keyframes urgent-pulse + 0%, 100% + transform: scale(1) + background: rgba(255, 100, 100, 0.2) + 50% + transform: scale(1.05) + background: rgba(255, 100, 100, 0.3) \ No newline at end of file diff --git a/server/controller/game.js b/server/controller/game.js index 09ba7a2..dc07400 100644 --- a/server/controller/game.js +++ b/server/controller/game.js @@ -26,7 +26,7 @@ const initializeGameState = (roomId) => { roundStartTime: null, phaseTimeLimit: { composing: 30, - guessing: 30 + guessing: 10 }, lastFrequency: 440, }; @@ -55,11 +55,14 @@ const startNewRound = async (roomId) => { gameState.currentComposer = determineNextComposer(roomId, gameState, users); + const success = await selectSongAndOptions(gameState); + if (!success) return false; + users.forEach(user => { gameState.roles[user.id] = user.id === gameState.currentComposer ? 'composer' : 'guesser'; }); - return await selectSongAndOptions(gameState); + return true; }; const determineNextComposer = (roomId, gameState, users) => { diff --git a/server/handler/connection.js b/server/handler/connection.js index bb4e275..824c202 100644 --- a/server/handler/connection.js +++ b/server/handler/connection.js @@ -55,18 +55,22 @@ module.exports = (io) => (socket) => { const roles = gameController.getRoles(roomId); const selectedSong = gameController.getSelectedSong(roomId); const timeLeft = gameController.getTimeRemaining(roomId); + const songOptions = gameController.getSongOptions(roomId); io.to(roomId).emit('roles-assigned', roles); Object.entries(roles).forEach(([userId, role]) => { if (role === 'composer') { io.to(userId).emit('song-selected', selectedSong); + } else { + io.to(userId).emit('song-options', { songOptions }); } }); io.to(roomId).emit('round-started', { round: gameController.getRoundResults(roomId).round, - timeRemaining: timeLeft + timeRemaining: timeLeft, + phase: 'composing' }); startPhaseTimer(roomId); @@ -84,7 +88,8 @@ module.exports = (io) => (socket) => { io.to(roomId).emit('phase-changed', { phase: 'guessing', - timeRemaining: timeLeft + timeRemaining: timeLeft, + message: 'Time to submit your final answer!' }); Object.entries(roles).forEach(([userId, role]) => {