Merge branch 'lobby-ui-M4' of https://github.com/sopra-fs24-group-09/…

…sopra-fs24-group-09-client into lobby-ui-M4
sopra-fs24-group-09 · May 16, 2024 · 9607722 · 9607722
2 parents 220ce15 + 76b24be
commit 9607722
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 44 deletions.
diff --git a/src/components/routing/routers/AppRouter.js b/src/components/routing/routers/AppRouter.js
@@ -39,7 +39,7 @@ const AppRouter = () => {
 
         {/* no guard for gameroom page now*/}
         {/* the parameter name should match with the useParam in the Gameroom */}
-        <Route path="/rooms/:currentRoomID/:currentRoomName" element={<LobbyGuard/>} >
+        <Route path="/rooms/:currentRoomID" element={<LobbyGuard/>} >
           <Route path="" element={<Gameroom />} />
         </Route>
 

diff --git a/src/components/views/Gameroom.tsx b/src/components/views/Gameroom.tsx
@@ -34,7 +34,7 @@ type SharedAudioURL = { [userId: string]: string };
 
 const Gameroom = () => {
   const navigate = useNavigate();
-  const { currentRoomID,currentRoomName } = useParams();
+  const { currentRoomID } = useParams();
   const stompClientRef = useRef(null);
   const user = {
     token: sessionStorage.getItem("token"),
@@ -102,7 +102,7 @@ const Gameroom = () => {
 
 
   useEffect(() => {
-    currentRoomNameValid.current = currentRoomName;
+    //currentRoomNameValid.current = currentRoomName;
     const isChrome = (window as any).chrome;
     // console.error("ISCHROME",isChrome);
     if (!isChrome) {
@@ -165,17 +165,17 @@ const Gameroom = () => {
       console.log("[onResponseReceived] receiptId",msg.receiptId)
       console.log("[onResponseReceived] reqList:",requestLists.current)
 
-      // Check if the message indicates an invalid or expired token
-      if (msg.auth === false) {
-        showToast("Invalid or expired token, please login again!", "error");
-        sessionStorage.clear(); // Clear session storage
-        navigate("/login"); // Navigate to the login page
-
-        return; // Exit the function to avoid further processing
-      }
-
       const index = requestLists.current.findIndex(item => item.receiptId === msg.receiptId);
       if (index !== INDEX_NOT_FOUND) {
+        // Check if the message indicates an invalid or expired token
+        if (msg.auth === false) {
+          showToast("Invalid or expired token, please login again!", "error");
+          sessionStorage.clear(); // Clear session storage
+          navigate("/login"); // Navigate to the login page
+
+          return; // Exit the function to avoid further processing
+        }
+
         const messageType = requestLists.current[index].type;
         const success = msg.success;
         let toastMessage;
@@ -700,6 +700,7 @@ const Gameroom = () => {
     <BaseContainer className="gameroom basecontainer">
       {/* <Header left="28vw" /> */}
       <PlayerList
+        currentPlayerId={user.id}
         playerStatus={playerLists}
         sharedAudioList={sharedAudioList}
         gameTheme={gameTheme.current}

diff --git a/src/components/views/GameroomPlayerList.tsx b/src/components/views/GameroomPlayerList.tsx
@@ -23,10 +23,11 @@ type PlayerListProps = {
     showReadyPopup: boolean;
     gameOver: boolean;
     globalVolume: number;
+    currentPlayerId: string;
 }
 
 export const PlayerList = (props:PlayerListProps) => {
-  const { playerStatus, sharedAudioList, gameTheme, currentRoomName, showReadyPopup, gameOver, globalVolume } = props;
+  const { playerStatus, sharedAudioList, gameTheme, currentRoomName, showReadyPopup, gameOver, globalVolume,currentPlayerId } = props;
 
   return (
     <div className="gameroom left-area">
@@ -47,9 +48,11 @@ export const PlayerList = (props:PlayerListProps) => {
           if (hasRecording) {
             _audioURL = sharedAudioList[playerInfo.user.id];
           }
+          const currentUserName= (playerInfo.user.id === currentPlayerId) ? "(You)" : "";
+          const currentUserBgColor = (playerInfo.user.id === currentPlayerId) ? "rgb(255, 233, 158)" : "rgba(255, 243, 207, 1)";
 
           return (
-            <div className="gameroom singlePlayerContainer" key={index}>
+            <div className="gameroom singlePlayerContainer" style={{ background: `${currentUserBgColor}` }} key={index}>
               <span className="gameroom playerAvatar">
                 <i
                   className={"twa twa-" + playerInfo.user.avatar}
@@ -59,9 +62,12 @@ export const PlayerList = (props:PlayerListProps) => {
               {!showReadyPopup && !gameOver && (
                 <>
                   <div className="gameroom secondcolumn">
-                    <span className="gameroom playerName">
-                      {playerInfo.user.name}
-                    </span>
+                    <div style={{display:"flex",flexDirection:"row"}}>
+                      <span className="gameroom playerName">
+                        {playerInfo.user.name}
+                      </span>
+                      <span style={{marginLeft:"0.5rem"}}>{currentUserName}</span>
+                    </div>
                     <span className="gameroom secondRow">
                       <span className="gameroom scoreTitle">Score:</span>
                       <span className="gameroom playerScore">
@@ -93,9 +99,12 @@ export const PlayerList = (props:PlayerListProps) => {
               {gameOver && (
                 <>
                   <div className="gameroom secondcolumn">
-                    <span className="gameroom playerName">
-                      {playerInfo.user.name}
-                    </span>
+                    <div style={{display:"flex",flexDirection:"row"}}>
+                      <span className="gameroom playerName">
+                        {playerInfo.user.name}
+                      </span>
+                      <span style={{marginLeft:"0.5rem"}}>{currentUserName}</span>
+                    </div>
                     <span className="gameroom secondRow">
                       <span className="gameroom scoreTitle">Score:</span>
                       <span className="gameroom playerScore">
@@ -111,7 +120,9 @@ export const PlayerList = (props:PlayerListProps) => {
                     <span className="gameroom playerName">
                       {playerInfo.user.name}
                     </span>
-                    <span className="gameroom secondRow"></span>
+                    <span className="gameroom secondRow">
+                      <span>{currentUserName}</span>
+                    </span>
                   </div>
                   <div className="gameroom playerStatus">
                     {playerInfo.ready ? (

diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx
@@ -127,7 +127,7 @@ const Lobby = () => {
         // if (meIngameRoom) {
         //   console.log("[DEBUG] Found me in the room, redirecting to the room page" + payload);
         //   const Room = payload.find(room => room.roomPlayersList.some(user => user.userId === sessionStorage.getItem("id")));
-        //   navigate(`/rooms/${Room.roomId}/${Room.roomName}`);
+        //   navigate(`/rooms/${Room.roomId}`);
         //   showToast("Reconnect to your previous room!", "success");
         // }
 
@@ -188,7 +188,7 @@ const Lobby = () => {
       if (meInRoom) {
         console.log("[DEBUG] Found me in the room, redirecting to the room page" + rooms);
         const Room = rooms.find(room => room.roomPlayersList.some(user => user.userId === sessionStorage.getItem("id")));
-        navigate(`/rooms/${Room.roomId}/${Room.roomName}`);
+        navigate(`/rooms/${Room.roomId}`);
         showToast("Reconnect to your previous room!", "success");
       }
     }, RELOAD_TIME_MS);
@@ -234,7 +234,7 @@ const Lobby = () => {
       console.log("Room created successfully:", response);
       console.log("Room ID:", response.data.roomId);
       const roomId = response.data.roomId;
-      navigate(`/rooms/${roomId}/${roomName}`);
+      navigate(`/rooms/${roomId}`);
       //toggleRoomCreationPop();  
     } catch (error) {
       handleError(error);
@@ -382,10 +382,10 @@ const Lobby = () => {
 
       if (Room.roomPlayersList.length === Room.roomMaxNum) {
         showToast("Room is Full, please enter another room!", "error");
-      } else if (Room.status === "In Game") {
+      } else if (Room.status !== "WAITING") {
         showToast("Game is already started, please enter another room!", "error");
       } else {
-        navigate(`/rooms/${Room.roomId}/${Room.roomName}`);
+        navigate(`/rooms/${Room.roomId}`);
       }
     } catch (error) {
       console.error(`Something went wrong during the enterRoom: \n${error}`);
@@ -431,6 +431,11 @@ const Lobby = () => {
         }
       }
 
+      // don't render the room if there is no player in the room or the game is over
+      if (Room.roomPlayersList.length === 0 || Room.status === "GAMEOVER") {
+        return ;
+      }
+
       return (
         <div className="room-container" key={Room.roomId} onClick={handleRoomClick(Room)}>
           <div className="room-players">
@@ -452,6 +457,7 @@ const Lobby = () => {
   // if (user === null) {
   //   return <BaseContainer>Loading...</BaseContainer>;
   // }
+  const specialCharactersRegex = /[^\w\s]/;
 
   return (
     <BaseContainer>
@@ -564,7 +570,15 @@ const Lobby = () => {
         className="room-creation-popup"
         buttonJSX={
           <>
-            <Button disabled={roomName === "" || maxRoomPlayers < DEFAULT_MIN_PLAYERS || maxRoomPlayers > DEFAULT_MAX_PLAYERS || roomTheme === "" || isNaN(maxRoomPlayers)}
+            <Button
+              disabled={
+                roomName === "" ||
+                // maxRoomPlayers < DEFAULT_MIN_PLAYERS ||
+                // maxRoomPlayers > DEFAULT_MAX_PLAYERS ||
+                roomTheme === "" ||
+                isNaN(maxRoomPlayers) ||
+                specialCharactersRegex.test(roomName)
+              }
               className="create-room" onClick={createRoom}>Create Room</Button>
             <Button className="cancel" onClick={toggleRoomCreationPop}>Cancel</Button>
           </>
@@ -578,9 +592,9 @@ const Lobby = () => {
             placeholder="Max. 10"
             value={roomName}
             onChange={(e) => {
-              const inputValue = e.target.value;
-              if (inputValue.length <= MAX_ROOM_NAME_LENGTH) {
-                setRoomName(inputValue);
+              const inputValue = e.target.value.replace(/[^\w\s]/gi, "");
+              if (inputValue.length <= MAX_ROOM_NAME_LENGTH) { 
+                setRoomName(inputValue); 
               }
             }}
           />

diff --git a/src/components/views/Register.tsx b/src/components/views/Register.tsx
@@ -55,8 +55,8 @@ const Register = () => {
       sessionStorage.setItem("id", user.id);
       sessionStorage.setItem("username", user.username);
       // Register successfully worked --> navigate to the route /game in the LobbyRouter
-      showToast("Register successful!", "success");
-      navigate("/lobby");
+      showToast("Register successful!\nWelcome to this guide for newbies!", "success");
+      navigate("/guide");
     } catch (error) {
       let message = "An unexpected error occurred during Register.";
       if (error.response) {

diff --git a/src/components/views/RuleGuide.tsx b/src/components/views/RuleGuide.tsx
@@ -11,6 +11,7 @@ import "../../styles/views/RuleGuide.scss";
 import { showToast} from "../../helpers/toastService";
 
 const mockGameTheme = "FOOD";
+const mockCurrentPlayer = "id1";
 const mockRoomName = "GuideRoom";
 const mockGlobalVolume = 0.5;
 const MS_PER_SEC = 1000;
@@ -101,6 +102,7 @@ const RuleGuide = () => {
       localStorage.removeItem("RuleGuide");
     }
   }, []);
+
   const navigate = useNavigate();
   const roundStatusComponentRef = useRef(null);
   const [gameInfo, setGameInfo] = useState(mockGameInfo);
@@ -139,6 +141,7 @@ const RuleGuide = () => {
     <BaseContainer className="gameroom basecontainer">
       {/* <Header left="28vw" /> */}
       <PlayerList
+        currentPlayerId={mockCurrentPlayer}
         playerStatus={playerInfo}
         sharedAudioList={mockSharedAudioList}
         gameTheme={mockGameTheme}
@@ -213,33 +216,33 @@ const RuleGuide = () => {
         steps={[
           {
             selector: ".roundstatus",
-            title: "Speak-Phase",
+            title: "Guide: Speak-Phase",
             content: "Now you are the Speaker, and you need to record the word 'Banana' in the next 20 seconds",
           },
           {
             selector: ".remindermssg",
-            title: "Speak-Phase",
+            title: "Guide: Speak-Phase",
             content: "This is where you record your audio",
           },
           {
             selector: ".record-button",
-            title: "Speak-Phase",
+            title: "Guide: Speak-Phase",
             content: "Click here to start a recording, click again to finish, if you are not satisfied with the recording, you can click again to re-record. The maximum recording time is 5 seconds, if you exceed the time limit, the recording will be automatically stopped.",
           },
           {
             selector: ".toggle-reverse-button",
-            title: "Speak-Phase",
+            title: "Guide: Speak-Phase",
             content: "Click here to reverse the audio, and click again to restore to the original audio",
           },
           {
             selector: ".audio-recorder.play-button",
-            title: "Speak-Phase",
+            title: "Guide: Speak-Phase",
             content: "Click here to listen to your recording, you can also click the sound wave to listen.",
           },
           {
             // upload button
             selector: ".readybutton", // it is weird that the button is using a class name of readybutton
-            title: "Speak-Phase",
+            title: "Guide: Speak-Phase",
             placement: "top",
             content: "Click here to submit your recording, and then all the other players will guess the word you recorded",
             beforeStepChange: () => {
@@ -280,30 +283,30 @@ const RuleGuide = () => {
           },
           {
             selector: ".roundstatus",
-            title: "Guess-Phase",
+            title: "Guide: Guess-Phase",
             content: "Now, user3 is the Speaker, and you need to guess the word by simulating the reversed audio",
             placement: "left",
           },
           {
             selector: ".speakPlayerContainer",
-            title: "Guess-Phase",
+            title: "Guide: Guess-Phase",
             content: "Click here to listen to the speaker's audio",
           },
           {
             selector: ".remindermssg",
-            title: "Guess-Phase",
+            title: "Guide: Guess-Phase",
             content: "You shuold simulate the reversed audio and reverse it again to figure out the word",
             placement: "top",
           },
           {
             selector: ".inputarea",
-            title: "Guess-Phase",
+            title: "Guide: Guess-Phase",
             content: "After you figure out the word, you can submit your answer here, also you can share your audio with others (Optional)",
             placement: "top",
           },
           {
             selector: ".btn-player",
-            title: "Guess-Phase",
+            title: "Guide: Guess-Phase",
             content: "When someone shares their audio, you can click here to listen to their audio",
             beforeStepChange: () => {
               showToast("Congratulations! You have successfully completed the Rule Guide!\nEnjoy the game!", "success");

diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss
@@ -186,9 +186,10 @@ Button {
 
 .avatar-popup{
   max-width: 80vw;
-  justify-content: center;
+  justify-content: flex-start;
   .popup-content{
     display: flex;
+    justify-content: flex-start;
   }
   .avatar-list {
     display: flex;