added ready button

src/components/Navbar.css

@@ -0,0 +1,7 @@
+.navbar-container{
+    display: flex;
+    flex-direction: row;
+}
+.navbar-container>div{
+    margin-right: 10px;
+}

src/components/Navbar.jsx

@@ -1,25 +1,28 @@
 import React, { useEffect, useState } from 'react';
+import NameContainer from './navbar-components/NameContainer'
+import ReadyButton from './navbar-components/ReadyButton'
+import './Navbar.css';
 import axios from 'axios';
 const Navbar = () => {
     
     const [players, setPlayers] = useState([]);
+
     useEffect(()=>{
-        //fetching names, time and other data
+        //fetching players data 
         axios.get('http://localhost:3001/room/',{
             withCredentials:true,
             mode: 'cors',
         }).then((response)=>{
-
             setPlayers(response.data.players);
-            console.log(response.data.players);
         })
-    }
-    ,[]);
+    },[]);
+
     return(
-        <div>
-            {players.map((name)=>
-                <p key={name.player}>{name.player}</p>
+        <div className="navbar-container">
+            {players.map((player)=>
+                <NameContainer key={player.name} player = {player}/>
             )}
+            <ReadyButton/>
         </div>
     );
 }

src/components/navbar-components/NameContainer.css

@@ -0,0 +1,10 @@
+.name-container{
+    width: 100px;
+    height: 50px;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/components/navbar-components/NameContainer.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './NameContainer.css'
+const NameContainer = ( {player} ) => {
+    
+    return (
+        <div className="name-container" style={{backgroundColor: player.color}}>
+             {player.name} 
+        </div>
+    )
+
+}
+
+export default NameContainer;

src/components/navbar-components/ReadyButton.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import axios from 'axios';
+const ReadyButton = () => {
+
+    const handleCheckboxChange = () => {
+        axios.post('http://localhost:3000/player/ready',{},{withCredentials: true});
+    }
+    
+    return(
+    <>
+        <label>Ready: </label>
+        <input type="checkbox" onClick={handleCheckboxChange}/>
+    </>
+    )
+
+}
+
+export default ReadyButton;