front-end: ability to delete a player via settings button

seroteunine · Nov 30, 2023 · 579e12f · 579e12f
1 parent b7d79eb
commit 579e12f
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 53 deletions.
diff --git a/client/index.html b/client/index.html
@@ -8,12 +8,14 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Poppins:wght@500&display=swap"
     rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Caption This</title>
 </head>
 
 <body>
   <div id="root"></div>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
   <script type="module" src="/src/main.tsx"></script>
 </body>
 

diff --git a/client/src/components/host/Settings.tsx b/client/src/components/host/Settings.tsx
@@ -0,0 +1,30 @@
+import { useNameContext } from "../../context/NamesContext";
+import { useRoom } from "../../context/RoomContext";
+
+function Settings() {
+
+    const { roomDTO } = useRoom();
+    const { nameMap } = useNameContext();
+
+    const handleRemovePlayer = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+    }
+
+    return (
+        <div className="fixed-badge">
+            <div className="dropdown">
+                <button className="btn btn-secondary dropdown-toggle text-primary fs-3" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+                    <i className="bi bi-sliders"></i>
+                </button>
+                <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                    <li><h6 className="dropdown-header">Remove player: </h6></li>
+                    {roomDTO!.playerIDs.map((playerID) => (
+                        <li key={playerID}><button className="dropdown-item  player-item" onClick={handleRemovePlayer}>{nameMap.get(playerID) || playerID}</button></li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default Settings;
diff --git a/client/src/index.scss b/client/src/index.scss
@@ -5,37 +5,50 @@ $success: #37a77e;
 $font-family-base: 'Poppins';
 
 .bg-third {
-    background-color: #f2c65f;
+  background-color: #f2c65f;
 }
 
 .bg-fourth {
-    background-color: #d68033;
+  background-color: #d68033;
+}
+
+.fixed-badge {
+  position: fixed;
+  top: 5px;
+  right: 30px;
+  z-index: 1000;
+}
+
+.player-item:hover {
+  text-decoration: line-through;
 }
 
 .grid-image {
-    max-height: 30vh;
-    object-fit: contain;
+  max-height: 30vh;
+  object-fit: contain;
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
-  
+
 .caption-enter {
-    opacity: 0;
-    animation: fadeIn 2s ease forwards;
-}
-
-.animate-character
-{
-  background-image: linear-gradient(
-    -225deg,
-    $primary 0%,
-    #44107a 29%,
-    $success 67%,
-    $secondary 100%
-  );
+  opacity: 0;
+  animation: fadeIn 2s ease forwards;
+}
+
+.animate-character {
+  background-image: linear-gradient(-225deg,
+      $primary 0%,
+      #44107a 29%,
+      $success 67%,
+      $secondary 100%);
   background-size: auto auto;
   background-clip: border-box;
   background-size: 200% auto;

diff --git a/client/src/pages/Host.tsx b/client/src/pages/Host.tsx
@@ -5,6 +5,7 @@ import EndHost from "../components/host/EndHost";
 import PhotoUploadHost from "../components/host/PhotoUploadHost";
 import VotingHost from "../components/host/VotingHost";
 import { useNameContext } from "../context/NamesContext";
+import Settings from "../components/host/Settings";
 
 function Host() {
 
@@ -21,44 +22,47 @@ function Host() {
     }
 
     return (
-        <div className="container">
+        <>
+            <Settings></Settings>
 
-            <div className="bg-primary text-center text-white mb-2 p-3 shadow-sm rounded-bottom">
-                <h2 className="display-4">Roomcode: <span className="badge bg-secondary"><span className={roomDTO!.game ? 'text-primary' : "animate-character"}>{roomDTO!.roomID}</span></span></h2>
-                <h4>You're the host</h4>
-            </div>
-            {roomDTO!.game
-                ?
-                <div className="container mt-4">
-                    {{
-                        "PHOTO_UPLOAD": <PhotoUploadHost></PhotoUploadHost>,
-                        "CAPTION": <CaptionHost></CaptionHost>,
-                        "VOTING": <VotingHost></VotingHost>,
-                        "END": <EndHost></EndHost>
-                    }[roomDTO!.game.phase]}
+            <div className="container">
+                <div className="bg-primary text-center text-white mb-2 p-3 shadow-sm rounded-bottom">
+                    <h2 className="display-4">Roomcode: <span className="badge bg-secondary"><span className={roomDTO!.game ? 'text-primary' : "animate-character"}>{roomDTO!.roomID}</span></span></h2>
+                    <h4>You're the host</h4>
                 </div>
-                :
-                <div className="container mt-4 text-center ">
-                    <div title={isStartingDisallowed ?  "You need 4 to 8 players and everyone needs to change their name." :  "Ready to start."}>
-                        <button
-                            className='btn btn-lg btn-success text-white'
-                            onClick={handleStartGame}
-                            disabled={isStartingDisallowed}> Start game
-                        </button>
+                {roomDTO!.game
+                    ?
+                    <div className="container mt-4">
+                        {{
+                            "PHOTO_UPLOAD": <PhotoUploadHost></PhotoUploadHost>,
+                            "CAPTION": <CaptionHost></CaptionHost>,
+                            "VOTING": <VotingHost></VotingHost>,
+                            "END": <EndHost></EndHost>
+                        }[roomDTO!.game.phase]}
                     </div>
+                    :
+                    <div className="container mt-4 text-center">
+                        <div title={isStartingDisallowed ? "You need 4 to 8 players and everyone needs to change their name." : "Ready to start."}>
+                            <button
+                                className='btn btn-lg btn-success text-white'
+                                onClick={handleStartGame}
+                                disabled={isStartingDisallowed}> Start game
+                            </button>
+                        </div>
 
-                    <div className="w-25 mx-auto">
-                        <ul className="list-group mt-3 ">
-                            {roomDTO!.playerIDs.length > 0 && <li className="list-group-item active">Players:</li>}
-                            {roomDTO!.playerIDs.map((ID) => (
-                                <li className={"list-group-item " + (nameMap.get(ID) ? " text-success" : " text-warning")} key={ID}>{nameMap.get(ID) || ID}</li>
-                            ))}
-                        </ul>
-                    </div>
+                        <div className="w-25 mx-auto">
+                            <ul className="list-group mt-3 ">
+                                {roomDTO!.playerIDs.length > 0 && <li className="list-group-item active">Players:</li>}
+                                {roomDTO!.playerIDs.map((ID) => (
+                                    <li className={"list-group-item " + (nameMap.get(ID) ? " text-success" : " text-warning")} key={ID}>{nameMap.get(ID) || ID}</li>
+                                ))}
+                            </ul>
+                        </div>
 
-                </div>
-            }
-        </div>
+                    </div>
+                }
+            </div>
+        </>
     )
 }