Merge pull request #91 from sopra-fs24-group-09/M3-ui-modify

M3 UI modify
sopra-fs24-group-09 · Apr 26, 2024 · 1d496fa · 1d496fa
2 parents b11632f + c4f1d61
commit 1d496fa
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 51 deletions.
diff --git a/src/components/views/Gameroom.tsx b/src/components/views/Gameroom.tsx
@@ -44,11 +44,14 @@ const Gameroom = () => {
   console.log(user)
   const [showReadyPopup, setShowReadyPopup] = useState(false);
   const [gameOver, setGameOver] = useState(false);
+  const gameOverRef = useRef(false);
   const [currentSpeakerID, setCurrentSpeakerID] = useState(null);
   const [playerLists, setPlayerLists] = useState([]);
   const roundFinished = useRef(false);
   const [endTime, setEndTime] = useState(null);
-  const gameTheme = useRef(null);
+  const gameTheme = useRef("Loading....");
+  const leaderboardInfoRecieved = useRef(false);
+  const [leaderboardInfo, setLeaderboardInfo] = useState([]);
 
   const [gameInfo, setGameInfo] = useState(null);
   const gameInfoRef = useRef(null);
@@ -161,6 +164,10 @@ const Gameroom = () => {
           console.log(roundFinished.current);
         }
       }
+      if (gameOverRef.current === true && leaderboardInfoRecieved.current === false){
+        setLeaderboardInfo(payloadData.message);
+        leaderboardInfoRecieved.current = true;
+      }
     };
 
     const onGameInfoReceived = (payload) => {
@@ -182,6 +189,7 @@ const Gameroom = () => {
         setShowReadyPopup(true);
       } else if (payloadData.message.gameStatus === "over") {
         setShowReadyPopup(false);
+        gameOverRef.current = true;
         setGameOver(true);
       } else {
         setShowReadyPopup(false);
@@ -464,60 +472,67 @@ const Gameroom = () => {
   console.log(playerLists);
 
   const LeaderBoard = ({ playerStatus }) => {
+    // console.log("123456")
+    console.log("[LeaderBoard]",playerStatus)
+
     return (
-      <div className="gameroom leaderboarddiv">
-        <div className="gameroom leaderboard">
-          {playerStatus.map((playerInfo, index) => (
-            <div className="gameroom singleScoreContainer" key={index}>
-              <span className={"gameroom ranking-" + index}>{index + 1}</span>
-              <span className="gameroom ldPlayerAvatar">
-                <i
-                  className={"twa twa-" + playerInfo.user.avatar}
-                  style={{ fontSize: "2.8rem" }}
-                />
-              </span>
-              <span className="gameroom ldPlayerName">
-                {playerInfo.user.name}
-              </span>
-              <span className="gameroom scorenum" style={{ gridColumn: "3" }}>
-                {playerInfo.score.total}
-              </span>
-              <span className="gameroom ldtitle" style={{ gridColumn: "3" }}>
+      <>
+        {playerStatus !== null && (
+          <div className="gameroom leaderboarddiv">
+            <div className="gameroom leaderboard">
+              {playerStatus.map((playerInfo, index) => (
+                <div className="gameroom singleScoreContainer" key={index}>
+                  <span className={"gameroom ranking-" + index}>{index + 1}</span>
+                  <span className="gameroom ldPlayerAvatar">
+                    <i
+                      className={"twa twa-" + playerInfo.user.avatar}
+                      style={{ fontSize: "2.8rem" }}
+                    />
+                  </span>
+                  <span className="gameroom ldPlayerName">
+                    {playerInfo.user.name}
+                  </span>
+                  <span className="gameroom scorenum" style={{ gridColumn: "3" }}>
+                    {playerInfo.score.total}
+                  </span>
+                  <span className="gameroom ldtitle" style={{ gridColumn: "3" }}>
                 Total
-              </span>
-              <span className="gameroom scorenum" style={{ gridColumn: "4" }}>
-                {playerInfo.score.guess}
-              </span>
-              <span className="gameroom ldtitle" style={{ gridColumn: "4" }}>
+                  </span>
+                  <span className="gameroom scorenum" style={{ gridColumn: "4" }}>
+                    {playerInfo.score.guess}
+                  </span>
+                  <span className="gameroom ldtitle" style={{ gridColumn: "4" }}>
                 Guess
-              </span>
-              <span className="gameroom scorenum" style={{ gridColumn: "5" }}>
-                {playerInfo.score.read}
-              </span>
-              <span className="gameroom ldtitle" style={{ gridColumn: "5" }}>
-                Read
-              </span>
-              {playerInfo.score.details.map((detail, detailIndex) => (
-                <React.Fragment key={detailIndex}>
-                  <span
-                    className="gameroom scorenum"
-                    style={{ gridColumn: `${detailIndex + 6}` }}
-                  >
-                    {detail.score}
                   </span>
-
-                  <span
-                    className="gameroom ldtitle"
-                    style={{ gridColumn: `${detailIndex + 6}` }}
-                  >
-                    {detail.word}
+                  <span className="gameroom scorenum" style={{ gridColumn: "5" }}>
+                    {playerInfo.score.read}
                   </span>
-                </React.Fragment>
+                  <span className="gameroom ldtitle" style={{ gridColumn: "5" }}>
+                Read
+                  </span>
+                  {playerInfo.score.details.map((detail, detailIndex) => (
+                    <React.Fragment key={detailIndex}>
+                      <span
+                        className="gameroom scorenum"
+                        style={{ gridColumn: `${detailIndex + 6}` }}
+                      >
+                        {detail.score}
+                      </span>
+
+                      <span
+                        className="gameroom ldtitle"
+                        style={{ gridColumn: `${detailIndex + 6}` }}
+                      >
+                        {detail.word}
+                      </span>
+                    </React.Fragment>
+                  ))}
+                </div>
               ))}
             </div>
-          ))}
-        </div>
-      </div>
+          </div>
+        )}
+      </>
     );
   };
 
@@ -575,7 +590,7 @@ const Gameroom = () => {
           <div className="gameroom readypopupbg">
             <div className="gameroom readypopupcontainer">
               <span className="gameroom popuptitle"> {"Room#" + currentRoomName}</span>
-              <span className="gameroom popuptheme"> {gameTheme.current}</span>
+              <span className="gameroom popuptheme">{gameTheme.current}</span>
               <span className="gameroom popuptext">
                 {" "}
                 Ready to start the game?
@@ -621,7 +636,7 @@ const Gameroom = () => {
           </div>
         )}
         {gameOver && (
-          <LeaderBoard playerStatus={playerLists}></LeaderBoard>
+          <LeaderBoard playerStatus={leaderboardInfo}></LeaderBoard>
         )}
         {!gameOver && !showReadyPopup && (
           <Roundstatus

diff --git a/src/styles/views/Gameroom.scss b/src/styles/views/Gameroom.scss
@@ -298,10 +298,12 @@
 
   .readybutton {
     background-color: $classicYellow;
+    border:0;
   }
 
   .cancelbutton {
     background-color: rgba(129, 129, 129, 1);
+    border:0;
   }
 
   .readybutton:hover {
@@ -421,7 +423,7 @@
     border-radius: 22px;
     background-color: $whiteYellow;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(4vw, 1fr));
+    grid-template-columns: minmax(5vw, 5vw) minmax(5vw, 5vw) minmax(5vw, 5vw) minmax(5vw, 5vw) repeat(auto-fit, minmax(6vw, 6vw));
     gap: 0.5rem;
   }
   &.ldPlayerAvatar {
@@ -553,6 +555,8 @@
     font-weight: 700;
     font-size: 0.8rem;
     color:lighten($darkBlue,20%);
+    max-width: 100%;
+    word-wrap: break-word;
   }
   &.currentAnswer {
     position: relative;