diff --git a/client/src/pages/Game/Game.jsx b/client/src/pages/Game/Game.jsx index 9e67f10..bbfdc36 100644 --- a/client/src/pages/Game/Game.jsx +++ b/client/src/pages/Game/Game.jsx @@ -19,6 +19,7 @@ export const Game = () => { const [selectedSong, setSelectedSong] = useState(null); const [guessResult, setGuessResult] = useState(null); const [isHost, setIsHost] = useState(false); + const [hasGuessed, setHasGuessed] = useState(false); const [messages, setMessages] = useState([]); const [inputValue, setInputValue] = useState(""); @@ -48,9 +49,10 @@ export const Game = () => { setTimeLeft(data.timeRemaining); }, "guessing-phase-started": (data) => { + console.log("Guessing phase started:", data); setPhase("guessing"); setTimeLeft(data.timeRemaining); - setSongOptions(data.songOptions); + setSongOptions(data.songOptions || []); }, "guess-result": (result) => { setGuessResult(result.isCorrect); @@ -94,6 +96,13 @@ export const Game = () => { console.log("Received frequency update:", data.frequency); setFrequency(data.frequency); } + }, + "phase-changed": (data) => { + console.log("Phase changed:", data); + setPhase(data.phase); + if (data.timeRemaining) { + setTimeLeft(data.timeRemaining); + } } }; @@ -143,8 +152,21 @@ export const Game = () => { const handleSongSelect = useCallback((song) => { setSelectedSong(song); - send("submit-guess", { songId: song.id }); - }, [send]); + }, []); + + const handleSubmitGuess = useCallback(() => { + if (!selectedSong || phase !== 'guessing') return; + + console.log("Submitting guess:", selectedSong.id); + send("submit-guess", { songId: selectedSong.id }); + + setMessages(prev => [...prev, { + system: true, + text: `Du hast "${selectedSong.title}" von ${selectedSong.artist} gewählt.` + }]); + + setHasGuessed(true); + }, [selectedSong, send, phase]); const handleNextRound = useCallback(() => { send("next-round"); @@ -212,23 +234,54 @@ export const Game = () => {

Die Rater versuchen nun, deinen Song zu erraten...

) : ( -
+

Welchen Song hat der Komponist gespielt?

-
- {songOptions.map(song => ( -
handleSongSelect(song)} - > - {song.title} -
-
{song.title}
-
{song.artist}
-
+ + {songOptions.length === 0 ? ( +
+

Lade Songoptionen...

+
+ ) : ( + <> +
+ {songOptions.map(song => ( +
!hasGuessed && handleSongSelect(song)} + > +
+ {song.title} + {selectedSong?.id === song.id && ( +
+ +
+ )} +
+
+
{song.title}
+
{song.artist}
+
+
+ ))}
- ))} -
+ +
+ {hasGuessed ? ( +

Deine Antwort wurde eingereicht!

+ ) : ( + + )} +
+ + )}
)}
diff --git a/client/src/pages/Game/components/MusicSlider/MusicSlider.jsx b/client/src/pages/Game/components/MusicSlider/MusicSlider.jsx index 4c18df8..802381a 100644 --- a/client/src/pages/Game/components/MusicSlider/MusicSlider.jsx +++ b/client/src/pages/Game/components/MusicSlider/MusicSlider.jsx @@ -187,6 +187,14 @@ export const MusicSlider = ({ isReadOnly = false, onFrequencyChange, frequency: }; }, []); + useEffect(() => { + return () => { + if (isPlaying) { + stopAudio(); + } + }; + }, [isPlaying]); + return (