added changing color in navbar if ready

src/App.js

@@ -14,7 +14,7 @@ function App() {
   const [redirect, setRedirect] = useState()
 
   useEffect(() => {
-    axios.get('http://localhost:3000', {
+    axios.get('http://localhost:3000/player', {
       withCredentials:true,
       mode: 'cors'
     })
@@ -33,7 +33,7 @@ function App() {
   const idCallback = (id)=>{
     setId(id);
     
-    axios.get('http://localhost:3000', {
+    axios.get('http://localhost:3000/player/', {
       withCredentials:true,
       mode: 'cors',
       headers: { "Content-Type": "application/json" },

src/components/Navbar.jsx

@@ -6,9 +6,8 @@ import axios from 'axios';
 const Navbar = () => {
     
     const [players, setPlayers] = useState([]);
-
-    useEffect(()=>{
-        //fetching players data 
+    //fetching players data to display them in navbar
+    const fetchData = () => {
         axios.get('http://localhost:3000/room/',{
             withCredentials:true,
             mode: 'cors',
@@ -16,11 +15,14 @@ const Navbar = () => {
             while(response.data.players.length !== 4){
                 response.data.players.push({
                     name: "...",
-                    color: "grey"
                 })
             }
             setPlayers(response.data.players);
         })
+    }
+    useEffect(()=>{
+        //sending ajax every 3 sec 
+        setInterval(fetchData, 3000);
     },[]);
 
     return(

src/components/navbar-components/NameContainer.jsx

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

src/components/navbar-components/ReadyButton.jsx

@@ -12,9 +12,9 @@ const ReadyButton = () => {
     }
     
     return(
-    <div>
-        <label>Ready: </label>
+    <div className="ready-container"> 
         <Switch onClick={handleCheckboxChange} checked={checked}/>
+        <label>{checked ? 'I want to play' : 'Im waiting' }</label>
     </div>
     )