diff --git a/client/src/pages/WaitingRoom/WaitingRoom.jsx b/client/src/pages/WaitingRoom/WaitingRoom.jsx index fdf7326..785cb1c 100644 --- a/client/src/pages/WaitingRoom/WaitingRoom.jsx +++ b/client/src/pages/WaitingRoom/WaitingRoom.jsx @@ -104,6 +104,10 @@ export const WaitingRoom = () => { }); }; + const handleRoomJoined = (code) => { + setRoomCode(code); + }; + const cleanupHostStatus = on("host-status", handleHostStatus); const cleanupUserInfo = on("user-info", handleUserInfo); const cleanupRoomUsers = on("room-users", handleRoomUsers); @@ -115,6 +119,7 @@ export const WaitingRoom = () => { const cleanupGameStarted = on("game-started", handleGameStarted); const cleanupPlaylistOptions = on("playlist-options", handlePlaylistOptions); const cleanupVotesUpdated = on("playlist-votes-updated", handleVotesUpdated); + const cleanupRoomJoined = on("room-joined", handleRoomJoined); setMessages([{ system: true, @@ -133,6 +138,7 @@ export const WaitingRoom = () => { cleanupGameStarted(); cleanupPlaylistOptions(); cleanupVotesUpdated(); + cleanupRoomJoined(); }; }, [on, send, socket, setCurrentState]); @@ -240,13 +246,15 @@ export const WaitingRoom = () => { <span>Zurück zur Startseite</span> </button> <h1>Warteraum</h1> - <div className="room-code-container"> - <div className="room-code" onClick={copyRoomCode}> - Code: <span className="code">{roomCode}</span> - <FontAwesomeIcon icon={copied ? faCheck : faCopy} className={copied ? "copied" : ""} /> + {roomCode && ( + <div className="room-code-container"> + <div className="room-code" onClick={copyRoomCode}> + Code: <span className="code">{roomCode}</span> + <FontAwesomeIcon icon={copied ? faCheck : faCopy} className={copied ? "copied" : ""} /> + </div> + <div className="copy-hint">{copied ? "Kopiert!" : "Klicken zum Kopieren"}</div> </div> - <div className="copy-hint">{copied ? "Kopiert!" : "Klicken zum Kopieren"}</div> - </div> + )} </div> <div className="waiting-room-layout">