From ba1576b9478116e3212f42f4e5c30f6d84330cd4 Mon Sep 17 00:00:00 2001 From: Haaaan1 Date: Fri, 19 Apr 2024 17:29:45 +0200 Subject: [PATCH] Finished profile and avatar edit #58 #65 --- src/components/views/Lobby.tsx | 145 +++++++++++++++++++++++++++++---- src/styles/views/Lobby.scss | 92 +++++++++++++++++---- 2 files changed, 207 insertions(+), 30 deletions(-) diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index d8ca449..349aebc 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -53,27 +53,60 @@ const RoomList: React.FC = ({ rooms }) => ( ))} ); +interface FormFieldProps { + label: string; + placeholder?: string; + value: string; + type?: string; + onChange: (value: string) => void; + disabled?: boolean; +} +const FormField: React.FC = (props) => { + return ( +
+ + props.onChange(e.target.value)} + disabled={props.disabled} + /> +
+ ); +}; 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(null); const profilePopRef = useRef(null); + const changeAvatarPopRef = useRef(null); const [rooms, setRooms] = useState(mockRooms); const [user, setUser] = useState(mockRoomPlayers[0]); + const [username, setUsername] = useState(null); + const [avatar, setAvatar] = useState(null); + const [avatarToBeChanged, setAvatarToBeChanged] = useState(null); + const [avatarOrigin, setAvatarOrigin] = useState(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,14 +218,38 @@ 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) => ( -
+ return mockRooms.map((Room) => ( +
- {room.roomPlayersList?.map((user, index) => ( + {Room.roomPlayersList?.map((user, index) => (
{user.username}
@@ -178,14 +257,14 @@ const Lobby = () => { ))}
- ROOM #{room.id} -
{room.theme}
+ ROOM #{Room.id} +
{Room.theme}
- {room.status} + {Room.status}
@@ -215,10 +294,22 @@ const Lobby = () => { -
- -
{user.username}
+
{ + toggleAvatarPop(); + toggleProfilePop(); + setAvatarOrigin(user.avatar); + }}> +
+ setUsername(un)} + disabled={false} + /> +
Name: {user.name}
Status: {user.status}
@@ -226,13 +317,37 @@ const Lobby = () => {
Birthday: {user && new Date(user.birthday).toLocaleDateString()}
- +
+ +
+ {avatarList?.map((avatar,index) => ( +
+ { + changeAvatar(avatar); + toggleProfilePop(); + }}/> +
+ ))} +
+ +