Finished profile and avatar edit #58 #65

sopra-fs24-group-09 · Apr 19, 2024 · ba1576b · ba1576b
1 parent b25b2e1
commit ba1576b
Show file tree

Hide file tree

Showing 2 changed files with 207 additions and 30 deletions.
diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx
@@ -53,27 +53,60 @@ const RoomList: React.FC<RoomListProps> = ({ rooms }) => (
     ))}
   </div>
 );
+interface FormFieldProps {
+  label: string;
+  placeholder?: string;
+  value: string;
+  type?: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
 
+const FormField: React.FC<FormFieldProps> = (props) => {
+  return (
+    <div className="profile-popup field">
+      <label className="profile-popup label">
+        {props.label}
+      </label>
+      <input
+        className="profile-popup input"
+        placeholder={props.placeholder}
+        value={props.value}
+        type={props.type}
+        onChange={e => props.onChange(e.target.value)}
+        disabled={props.disabled}
+      />
+    </div>
+  );
+};
 Player.propTypes = {
   user: PropTypes.object,
 };
 
 const mockRoomPlayers: User[] = [
 
-  { id: 1, username: "Alice", avatar: "smiling-face-with-smiling-eyes", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
+  { id: 1, username: "Alice", avatar: "grinning-face-with-sweat", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
   { id: 2, username: "Bob", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },
+  { id: 3, username: "Han", avatar: "grinning-face-with-sweat", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
+  { id: 4, username: "Li", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },
+  { id: 5, username: "Liuz", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },
 
 ];
 
+const avatarList: string[] = [
+  "grinning-face-with-sweat","horse-face", "hot-face","hushed-face", "kissing-face",
+  "last-quarter-moon-face","loudly-crying-face", "lying-face"
+]
+
 const mockRooms: Room[] = [
   {
     id: "1",
     roomOwnerId: "1",
-    roomPlayersList: [mockRoomPlayers[0]],
+    roomPlayersList: mockRoomPlayers,
     theme: "Advanced",
     status: "In Game",
     maxPlayersNum: 4,
-    alivePlayersList: [mockRoomPlayers[0]],
+    alivePlayersList: mockRoomPlayers,
     currentPlayerIndex: 0,
     playToOuted: false,
   },
@@ -94,8 +127,13 @@ const Lobby = () => {
   const navigate = useNavigate();
   const roomCreationPopRef = useRef<HTMLDialogElement>(null);
   const profilePopRef = useRef<HTMLDialogElement>(null);
+  const changeAvatarPopRef = useRef<HTMLDialogElement>(null);
   const [rooms, setRooms] = useState<Room[]>(mockRooms);
   const [user, setUser] = useState<User[]>(mockRoomPlayers[0]);
+  const [username, setUsername] = useState<string | null>(null);
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const [avatarToBeChanged, setAvatarToBeChanged] = useState<string | null>(null);
+  const [avatarOrigin, setAvatarOrigin] = useState<string | null>(null);
   const logout = async () => {
     const id = sessionStorage.getItem("id");
     sessionStorage.removeItem("token");
@@ -141,6 +179,23 @@ const Lobby = () => {
   //   fetchData();
   // }, []);
 
+  const doEdit = async () => {
+    try {
+      const requestBody = JSON.stringify({ username, avatar: avatar });
+      const id = sessionStorage.getItem("id");
+      console.log("Request body:", requestBody);
+      await api.put(`/users/${id}`, requestBody);
+      toggleProfilePop();
+    } catch (error) {
+      if (error.response && error.response.data) {
+        alert(error.response.data.message);
+      } else {
+        console.error('Error:', error.message);
+        alert('An unexpected error occurred.');
+      }
+    }
+  };
+
   const toggleRoomCreationPop = () => {
     // if the ref is not set, do nothing
     if (!roomCreationPopRef.current) {
@@ -163,29 +218,53 @@ const Lobby = () => {
       : profilePopRef.current.showModal();
   };
 
+  const toggleAvatarPop = () => {
+    // if the ref is not set, do nothing
+    if (!changeAvatarPopRef.current) {
+      return;
+    }
+    // if the dialog is open, close it. Otherwise, open it.
+    changeAvatarPopRef.current.hasAttribute("open")
+      ? changeAvatarPopRef.current.close()
+      : changeAvatarPopRef.current.showModal();
+  };
+
+  const changeAvatar = (avatar) =>{
+    setAvatarToBeChanged(avatar);
+    updateAvatar(avatar);
+    toggleAvatarPop();
+  }
+
+  const updateAvatar = (newAvatar) => {
+    setUser(prevUser => ({
+      ...prevUser, // 复制 prevUser 对象的所有现有属性
+      avatar: newAvatar // 更新 avatar 属性
+    }));
+  };
+
   const userinfo = () => {
     return;
   };
   const renderRoomLists = () => {
-    return mockRooms.map((room) => (
-      <div className="room-container" key={room.id}>
+    return mockRooms.map((Room) => (
+      <div className="room-container" key={Room.id}>
         <div className="room-players">
-          {room.roomPlayersList?.map((user, index) => (
+          {Room.roomPlayersList?.map((user, index) => (
             <div className="player" key={index}>
               <i className={"twa twa-" + user.avatar} style={{fontSize: "3.8rem"}}/>
               <div className="name">{user.username}</div>
             </div>
           ))}
         </div>
         <div className="room-header">
-          ROOM #{room.id}
-          <div>{room.theme}</div>
+          ROOM #{Room.id}
+          <div>{Room.theme}</div>
           <span
             className={`room-status ${
-              room.status === "In Game" ? "in-game" : "free"
+              Room.status === "In Game" ? "in-game" : "free"
             }`}
           >
-            {room.status}
+            {Room.status}
           </span>
         </div>
       </div>
@@ -215,24 +294,60 @@ const Lobby = () => {
 
       <Popup ref={profilePopRef} toggleDialog={toggleProfilePop} className = "profile-popup">
         <BaseContainer className="profile-popup content">
-          <div className="header-cnt">
-            <i className={"twa twa-" + user.avatar} style={{fontSize: "5rem", marginTop:"0.8rem", textAlign:"center"}}/>
-            <div className="title">{user.username}</div>
+          <div className="avatar-container" onClick={() => {
+            toggleAvatarPop();
+            toggleProfilePop();
+            setAvatarOrigin(user.avatar);
+          }}>
+            <i className={"twa twa-" + user.avatar} style={{fontSize: "10rem", marginTop:"0.8rem", textAlign:"center"}}/>
           </div>
+            <FormField
+              label="Username:"
+              type="text"
+              placeholder="Username..."
+              value={user.username}
+              onChange={un => setUsername(un)}
+              disabled={false}
+            />
+
           <div>Name: {user.name}</div>
           <div>Status: {user.status}</div>
 
           <div>RegisterDate: {user && new Date(user.registerDate).toLocaleDateString()}</div>
           <div>Birthday: {user && new Date(user.birthday).toLocaleDateString()}</div>
 
           <div className="profile-popup btn-container">
-            <Button className="cancel" onClick={toggleProfilePop}>
-              Close
+            <Button className="cancel" onClick={() => {
+              toggleProfilePop();
+              updateAvatar(avatarOrigin);
+            }}>
+              Cancel
+            </Button>
+            <Button className="cancel" onClick={() => doEdit()
+            }>
+              Edit
             </Button>
           </div>
         </BaseContainer>
       </Popup>
 
+      <Popup
+        ref={changeAvatarPopRef}
+        toggleDialog={toggleAvatarPop}
+        className="room-creation-popup"
+      >
+        <div className="avatar-list">
+          {avatarList?.map((avatar,index) => (
+            <div className="player" key={index} >
+              <i className={"twa twa-" + avatar} style={{fontSize: "3.8rem"}} onClick={() => {
+                changeAvatar(avatar);
+                toggleProfilePop();
+              }}/>
+            </div>
+          ))}
+        </div>
+      </Popup>
+
       <Popup
         ref={roomCreationPopRef}
         toggleDialog={toggleRoomCreationPop}

diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss
@@ -108,14 +108,15 @@
   padding: 10px;
   margin-inline: 5%;
   justify-content: space-between;
+  flex-direction: row;
 }
 .room {
   background-color: #fff;
   margin-bottom: 10px;
   border-radius: 8px;
   //overflow: hidden;
 
-  .room-header, .room-players {
+  .room-header{
     flex: 1;                   // Allow both children to grow and take up equal space
     display: flex;
     flex-direction: column;    // Stack the children of these containers vertically
@@ -126,27 +127,19 @@
 
   .room-players {
     align-items: flex-start;   // Align the players to the start of the flex container
+    flex: 1;                   // Allow both children to grow and take up equal space
+    display: flex;
+    flex-direction: row;    // Stack the children of these containers vertically
+    //align-items: center;       // Center the items horizontally
+    justify-content: center;   // Center the items vertically
+    padding: 10px;
   }
 
   .room-header {
     align-items: flex-end;     // Align the room details to the end of the flex container
   }
 
-  .player {
-    margin-right: 10px;
-    text-align: center;
-
-    .player-avatar {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background-color: #D9D9D9; // 默认背景色
-    }
 
-    .player-username {
-      font-size: 0.8em;
-    }
-  }
 
   .room-footer {
     display: flex;
@@ -160,6 +153,50 @@
 
   }
 }
+.avatar-list {
+  display: flex;
+  flex-wrap: wrap; // 允许头像列表换行
+  justify-content: flex-start; // 头像左对齐
+  margin: 0 -10px; // 用于抵消每个头像的外边距，可以根据实际需求调整
+
+  .player {
+    width: 20%; // 四个头像一行，每个占总宽的25%
+    padding-left: 10%; // 每个头像周围的间距，可以根据实际需求调整
+    box-sizing: border-box; // 包括padding在内的宽度计算方式
+
+    i {
+      display: block; // 确保图标块状显示
+      font-size: 3.8rem; // 图标大小
+      cursor: pointer; // 鼠标悬停时显示指针
+      margin: 10px 0; // 上下间距，可以根据需要调整
+    }
+  }
+}
+.player {
+  margin-right: 10px;
+  margin-left: 10px;
+  text-align: center;
+
+  .player-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #D9D9D9; // 默认背景色
+  }
+
+  .player-username {
+    font-size: 0.8em;
+  }
+}
+.room-players {
+  align-items: flex-end;   // Align the players to the start of the flex container
+  flex: 1;                   // Allow both children to grow and take up equal space
+  display: flex;
+  flex-direction: row;    // Stack the children of these containers vertically
+  //align-items: center;       // Center the items horizontally
+  justify-content: left;   // Center the items vertically
+  padding: 10px;
+}
 .status-container {
   width: 18%; /* 或者任何固定宽度 */
   display: inline-block; /* 或者 block，取决于你的布局需求 */
@@ -258,7 +295,13 @@
       display: inline;
       text-align: center;
     }
+    .avatar-container {
+      display: flex;
+      justify-content: center; /* 水平居中 */
+      margin-bottom: 3rem;
+    }
   }
+
   &.header-cnt{
     display: flex;
     flex-direction: row;
@@ -286,6 +329,25 @@
       background-color: $classicYellow;
     }
   }
+  &.label {
+    display: flex;
+    font-size: 32px;
+  }
+  &.field {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+  &.input {
+    height: 35px;
+    padding-left: 15px;
+    margin-left: -4px;
+    border: none;
+    border-radius: 0.75em;
+    //margin-top: 20px;
+    background: transparentize(white, 0.85);
+    color: $textColor;
+  }
 
 }
 .room-creation-popup{