From c87368352c0fab5e973fd559d7e86f0dc28b7660 Mon Sep 17 00:00:00 2001
From: Haaaan1 <YangHan991123@gmail.com>
Date: Sun, 12 May 2024 21:30:28 +0200
Subject: [PATCH] Implement display room capacity and how much empty seats left
 #141

---
 src/components/views/Lobby.tsx | 48 ++++++++++++++++++++++++----------
 src/styles/views/Lobby.scss    | 10 ++++---
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx
index dfcf3d3..77e1d32 100644
--- a/src/components/views/Lobby.tsx
+++ b/src/components/views/Lobby.tsx
@@ -450,25 +450,45 @@ const Lobby = () => {
   }, [navigate, showToast]);
 
   const renderRoomLists = () => {
-    return rooms.map((Room) => (
-      <div className="room-container" key={Room.roomId} onClick={handleRoomClick(Room)}>
-        <div className="room-players">
-          {Room.roomPlayersList?.map((user, index) => (
-            <div className="player" key={index}>
-              <i className={"twa twa-" + user.avatar} style={{ fontSize: "3.8rem" }} />
+    return rooms.map((Room) => {
+      const playerSlots = [];
+
+      // 生成玩家头像或空白框，总数等于房间最大玩家数
+      for (let i = 0; i < Room.roomMaxNum; i++) {
+        if (i < Room.roomPlayersList.length) {
+          const user = Room.roomPlayersList[i];
+          playerSlots.push(
+            <div className="player" key={i}>
+              <i className={`twa twa-${user.avatar}`} style={{ fontSize: "3.8rem" }} />
               <div className="name">{user.userName}</div>
             </div>
-          ))}
-        </div>
-        <div className="room-header">
-          <div style={{ fontWeight: "bold" }}>{Room.roomName}</div>
-          <div>{Room.theme}</div>
-          <span className={`room-status ${Room.status === "INGAME" ? "in-game" : Room.status === "WAITING" ? "waiting" : "game-over"}`}>
+          );
+        } else {
+          // 空白框
+          playerSlots.push(
+            <div className="player" key={i}>
+
+            </div>
+          );
+        }
+      }
+
+      return (
+        <div className="room-container" key={Room.roomId} onClick={handleRoomClick(Room)}>
+          <div className="room-players">
+            {playerSlots}
+          </div>
+          <div className="room-header">
+            <div style={{ fontWeight: "bold" }}>{Room.roomName}</div>
+            <div>{Room.theme}</div>
+            <span
+              className={`room-status ${Room.status === "INGAME" ? "in-game" : Room.status === "WAITING" ? "waiting" : "game-over"}`}>
             {Room.status}
           </span>
+          </div>
         </div>
-      </div>
-    ));
+      )
+    });
   };
 
   if (user === null) {
diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss
index 7a22ba5..ed7f8ef 100644
--- a/src/styles/views/Lobby.scss
+++ b/src/styles/views/Lobby.scss
@@ -193,8 +193,8 @@
   margin-left: 10px;
   text-align: center;
   .player-avatar {
-    width: 40px;
-    height: 40px;
+    width: 60.8px;
+    height: 60.8px;
     border-radius: 50%;
     background-color: #D9D9D9; // Default background color
   }
@@ -233,6 +233,10 @@
   }
 }
 .player {
+  background: rgba(217, 217, 217, 1);
+  border-radius: 20px;
+  width: 85px;
+  height: 85px;
   &.container {
     margin: 0.5em 0;
     width: 20em;
@@ -240,7 +244,7 @@
     border-radius: $borderRadius;
     display: flex;
     align-items: center;
-    background: lighten($background, 5);
+    background: gray;
   }
   &.status {
     font-weight: 600;