Merge branch 'feature/lobby-ui' into dev

sopra-fs24-group-09 · Apr 14, 2024 · 440de70 · 440de70
2 parents 844753b + 9d2d375
commit 440de70
Show file tree

Hide file tree

Showing 10 changed files with 274 additions and 55 deletions.
diff --git a/src/components/routing/routeProtectors/LobbyGuard.js b/src/components/routing/routeProtectors/LobbyGuard.js
@@ -16,7 +16,8 @@ export const LobbyGuard = () => {
 
     return <Outlet />;
   }
-
+  // Debugging
+  // return <Outlet />;
   return <Navigate to="/login" replace />;
 };
 

diff --git a/src/components/views/Editprofile.tsx b/src/components/views/Editprofile.tsx
@@ -33,8 +33,8 @@ FormField.propTypes = {
 
 const EditProfile = () => {
   const navigate = useNavigate();
-  const userid = localStorage.getItem("id") ?? "";
-  const currentUsername = localStorage.getItem("username") ?? "";
+  const userid = sessionStorage.getItem("id") ?? "";
+  const currentUsername = sessionStorage.getItem("username") ?? "";
   const [id] = useState<string>(userid);
   const [username, setUsername] = useState<string | "">(currentUsername);
   const [birthday, setBirthday] = useState<string | "">("");

diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx
@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import { api, handleError } from "helpers/api";
 import { Spinner } from "components/ui/Spinner";
 import { Button } from "components/ui/Button";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import BaseContainer from "components/ui/BaseContainer";
 import PropTypes from "prop-types";
 import "styles/views/Lobby.scss";
 import { User, Room } from "types";
+import Popup from "components/ui/Popup";
+import { Dropdown } from "components/ui/Dropdown";
 type PlayerProps = {
   user: User;
 };
@@ -18,28 +20,35 @@ type RoomListProps = {
 };
 const Player: React.FC<PlayerProps> = ({ user }) => (
   <div className="player">
-    <img src={"https://twemoji.maxcdn.com/v/latest/72x72/1f604.png"} alt={user.username} className="player-avatar" />
+    <img
+      src={"https://twemoji.maxcdn.com/v/latest/72x72/1f604.png"}
+      alt={user.username}
+      className="player-avatar"
+    />
     <div className="player-username">{user.username}</div>
   </div>
 );
 const RoomComponent: React.FC<RoomComponentProps> = ({ room }) => (
   <div className="room">
     <div className="room-header">
-      {room.roomPlayersList.map(user => (
+      {room.roomPlayersList.map((user) => (
         <Player key={user.id} user={user} />
       ))}
     </div>
     <div className="room-footer">
       <div className="room-theme">{room.theme}</div>
-      <div className="room-status" style={{ color: room.status === "In Game" ? "orange" : "green" }}>
+      <div
+        className="room-status"
+        style={{ color: room.status === "In Game" ? "orange" : "green" }}
+      >
         {room.status}
       </div>
     </div>
   </div>
 );
-const RoomList: React.FC<RoomListProps> = ({ rooms }) =>  (
+const RoomList: React.FC<RoomListProps> = ({ rooms }) => (
   <div className="room-list">
-    {rooms.map(room => (
+    {rooms.map((room) => (
       <RoomComponent key={room.id} room={room} />
     ))}
   </div>
@@ -50,8 +59,10 @@ Player.propTypes = {
 };
 
 const mockRoomPlayers: User[] = [
-  { id: 1, username: "Alice", avatar: "https://twemoji.maxcdn.com/v/latest/72x72/1f604.png", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
+
+  { id: 1, username: "Alice", avatar: "twa twa-smiling-face-with-smiling-eyes", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
   { id: 2, username: "Bob", avatar: "https://twemoji.maxcdn.com/v/latest/72x72/1f602.png", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },
+
 ];
 
 const mockRooms: Room[] = [
@@ -76,24 +87,22 @@ const mockRooms: Room[] = [
     alivePlayersList: [mockRoomPlayers[1]],
     currentPlayerIndex: 1,
     playToOuted: false,
-  }
+  },
 ];
 
-
 const Lobby = () => {
   const navigate = useNavigate();
-
+  const roomCreationPopRef = useRef<HTMLDialogElement>(null);
   const [rooms, setRooms] = useState<Room[]>(mockRooms);
   const [user, setUser] = useState<User[]>(mockRoomPlayers[0]);
   const logout = async () => {
-    const id = localStorage.getItem("id");
-    localStorage.removeItem("token");
+    const id = sessionStorage.getItem("id");
+    sessionStorage.removeItem("token");
     //apply a post request for user logout
     try {
-      const requestBody = JSON.stringify({id:id});
+      const requestBody = JSON.stringify({ id: id });
       const response = await api.post("/users/logout", requestBody);
       console.log(response);
-
     } catch (error) {
       alert(`Something went wrong during the logout: \n${handleError(error)}`);
     }
@@ -131,11 +140,22 @@ const Lobby = () => {
   //   fetchData();
   // }, []);
 
-  const userinfo = () =>{
-    return
-  }
+  const toggleRoomCreationPop = () => {
+    // if the ref is not set, do nothing
+    if (!roomCreationPopRef.current) {
+      return;
+    }
+    // if the dialog is open, close it. Otherwise, open it.
+    roomCreationPopRef.current.hasAttribute("open")
+      ? roomCreationPopRef.current.close()
+      : roomCreationPopRef.current.showModal();
+  };
+
+  const userinfo = () => {
+    return;
+  };
   const renderRoomLists = () => {
-    return mockRooms.map(room => (
+    return mockRooms.map((room) => (
       <div className="room-container" key={room.id}>
         <div className="room-players">
           {room.roomPlayersList?.map((user, index) => (
@@ -148,33 +168,65 @@ const Lobby = () => {
         <div className="room-header">
           ROOM #{room.id}
           <div>{room.theme}</div>
-
-          <span className={`room-status ${room.status === "In Game" ? "in-game" : "free"}`}>
+          <span
+            className={`room-status ${
+              room.status === "In Game" ? "in-game" : "free"
+            }`}
+          >
             {room.status}
           </span>
-
         </div>
       </div>
     ));
   };
-
-  return (
 
+  return (
     <BaseContainer>
-
       <div className="user-container">
-        <img src={user.avatar} alt={user.name} className="player-avatar" />
+        <i className={"twa twa-" + user.avatar} style={{fontSize: "3.8rem"}}/>
+        {/*<img src={user.avatar} alt={user.name} className="player-avatar" />*/}
         <div className="name">{user.username}</div>
       </div>
-      <div className="big-title">
-        Kaeps
-      </div>
-      <div className='information'> i </div>
-      <div className="lobby room-list">
-        <h1>Rooms</h1>
-        {renderRoomLists()}
+      <div className="big-title">Kaeps</div>
+      <div className="information"> i </div>
+      <div className="lobby room-list-wrapper">
+        {/* for clip the scrollbar inside the border */}
+        <div className="lobby room-list">
+          <h1>Rooms</h1>
+          {renderRoomLists()}
+          <div className="lobby room-list btn-container">
+            <Button className="create-room-btn" onClick={toggleRoomCreationPop}>
+              New Room
+            </Button>
+          </div>
+        </div>
       </div>
 
+      <Popup
+        ref={roomCreationPopRef}
+        toggleDialog={toggleRoomCreationPop}
+        className="room-creation-popup"
+      >
+        <BaseContainer className="room-creation-popup content">
+          <div className="title">Create Room</div>
+          <input type="text" placeholder="Room Name" />
+          <input type="number" placeholder="Round" />
+          <Dropdown
+            className="theme-dropdown"
+            prompt="Select Theme"
+            options={[
+              { value: "Beginner", label: "Beginner"},
+              { value: "Food", label: "Food" },
+            ]}
+          />
+          <div className="room-creation-popup btn-container">
+            <Button className="create-room">Create Room</Button>
+            <Button className="cancel" onClick={toggleRoomCreationPop}>
+              Cancel
+            </Button>
+          </div>
+        </BaseContainer>
+      </Popup>
     </BaseContainer>
   );
 };

diff --git a/src/components/views/Login.tsx b/src/components/views/Login.tsx
@@ -46,12 +46,9 @@ const Login = () => {
       // Get the returned user and update a new object.
       const user = new User(response.data);
 
-      // Store the token into the local storage.
-      localStorage.setItem("token", user.token);
-
-      // Store the username into the local storage for log out.
-      localStorage.setItem("id",user.id);
-      localStorage.setItem("username",user.username);
+      sessionStorage.setItem("token", user.token);
+      sessionStorage.setItem("id", user.id);
+      sessionStorage.setItem("username", user.username);
 
       // Login successfully worked --> navigate to the route /game in the LobbyRouter
       navigate("/lobby");
@@ -65,6 +62,7 @@ const Login = () => {
   return (
     <BaseContainer>
       <div className="login container">
+        <div className="login kaeps-title">Kaeps</div>
         <div className="login form">
           <FormField
             label="Username"

diff --git a/src/components/views/Profile.tsx b/src/components/views/Profile.tsx
@@ -10,7 +10,7 @@ import { User } from "types";
 const Profile = () => {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
-  const localId = parseInt(localStorage.getItem("id") ?? "0", 10);
+  const localId = parseInt(sessionStorage.getItem("id") ?? "0", 10);
   const [user, setUser] = useState<User | "">("");
 
   useEffect(() => {
@@ -19,7 +19,7 @@ const Profile = () => {
         const response = await api.get<User>(`/users/${id}`);
         setUser(response.data);
         //update the username after editing
-        localStorage.setItem("username", response.data.username);
+        sessionStorage.setItem("username", response.data.username);
       } catch (error) {
         console.error(`Fetching user data failed: ${handleError(error)}`);
         alert(`Something went wrong during Fetching user: \n${handleError(error)}`);

diff --git a/src/components/views/Register.tsx b/src/components/views/Register.tsx
@@ -47,11 +47,9 @@ const Register = () => {
       // Get the returned user and update a new object.
       const user = new User(response.data);
 
-      // Store the token into the local storage.
-      localStorage.setItem("token", user.token);
-      localStorage.setItem("id", user.id);
-      // Store the username into the local storage.
-      localStorage.setItem("username", user.username);
+      sessionStorage.setItem("token", user.token);
+      sessionStorage.setItem("id", user.id);
+      sessionStorage.setItem("username", user.username);
       // Login successfully worked --> navigate to the route /game in the LobbyRouter
       navigate("/lobby");
     } catch (error) {
@@ -64,6 +62,7 @@ const Register = () => {
   return (
     <BaseContainer>
       <div className="register container">
+        <div className="login kaeps-title">Kaeps</div>
         <div className="register form">
           <FormField
             label="Username"

diff --git a/src/styles/ui/Popup.scss b/src/styles/ui/Popup.scss
@@ -0,0 +1,32 @@
+@import "../theme";
+
+.popup {
+  background-color: $whiteYellow;
+  outline: none;
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 0 0 10px $classicYellow;
+  min-height: auto;
+}
+.popup::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  &-track {
+    background: $whiteYellow;
+    border-radius: 5px;
+  }
+
+  &-thumb {
+    background: $greyBlue;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+  }
+}
+.popup-content {
+  height: 100%; // fill the height of the popup
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}