added turns

backend/routes/room.js

@@ -28,7 +28,7 @@ router.post('/add', function (req, res) {
                     req.session.roomId = newRoom._id;
                     req.session.playerId = newRoom.players[0]._id;
                     req.session.name = req.body.name;
-                    res.status(200).send('Joined!'); 
+                    res.status(200).send(req.session.playerId); 
                 })
                 .catch(err => res.status(400).json('Error: ' + err))
         }else {      
@@ -54,7 +54,7 @@ router.post('/add', function (req, res) {
                     req.session.roomId = results._id;
                     req.session.playerId = updateObj.players[updateObj.players.length-1]._id;
                     req.session.name = req.body.name;
-                    res.status(200).send('Joined!'); 
+                    res.status(200).send(req.session.playerId); 
                 });  
                  
         } 

src/App.js

@@ -14,14 +14,17 @@ function App() {
   const [redirect, setRedirect] = useState()
 
   useEffect(() => {
+    console.log("id", id);
     axios.get('http://localhost:3000/player', {
       withCredentials:true,
       mode: 'cors'
     })
     .then( response => {
+      console.log(response);
+      setId(response.data.playerId);
       response.data.roomId!=null ? setRedirect(true) : setRedirect(false);
     });
-  })
+  },[id])
 
   const handleExit = e => {
     e.preventDefault();
@@ -31,14 +34,17 @@ function App() {
     } 
   
   const idCallback = (id)=>{
-    setId(id);
+    console.log(id);
     
     axios.get('http://localhost:3000/player/', {
       withCredentials:true,
       mode: 'cors',
       headers: { "Content-Type": "application/json" },
     })
-    .then(()=> setRedirect(true))
+    .then(response => {
+      setId(response.data.playerId);
+      setRedirect(true)
+    })
   }
 
   return (
@@ -53,8 +59,7 @@ function App() {
           </Route>
           <Route path="/game">
             <Beforeunload onBeforeunload={handleExit}>
-              <Navbar/>
-              <Gameboard/>
+              <Gameboard id={id}/>
             </Beforeunload>
           </Route>
         </Switch>

src/components/Gameboard.jsx

@@ -1,13 +1,40 @@
-import React from 'react';
-
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import Map from './game-board-components/Map'
 import Dice from './game-board-components/Dice'
+import Navbar from './Navbar'
 
-const Gameboard = () => {
+const Gameboard = ({id}) => {
 
+    const [players, setPlayers] = useState([]);
+    const [nowMoving, setNowMoving] = useState(false);
+    //fetching players data to display them in navbar
+    const fetchData = () => {
+        axios.get('http://localhost:3000/room/',{
+            withCredentials:true,
+            mode: 'cors',
+        }).then((response)=>{
+            while(response.data.players.length !== 4){
+                response.data.players.push({
+                    name: "...",
+                })
+            }
+            setPlayers(response.data.players);
+            if(id===response.data.players.find(player => player.nowMoving === true)?._id){
+                setNowMoving(true);
+            }else{
+                setNowMoving(false);
+            }
+        })
+    }
+    useEffect(()=>{
+        //sending ajax every 1 sec 
+        setInterval(fetchData, 1000);
+    },[]);
     return (
         <>
-            <Dice/>
+            <Navbar players={players}/>
+            {nowMoving ? <Dice nowMoving={nowMoving}/> : null}
             <Map/>
         </>
     )

src/components/NameInput.jsx

@@ -15,7 +15,8 @@ const NameInput = ({ idCallback }) => {
             "Content-Type": "application/json" 
         })
         .then(response => {
-            idCallback(response.data.id);
+            console.log(response.data);
+            idCallback(response.data);
         })
     }
     return(

src/components/Navbar.jsx

@@ -1,30 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React 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([]);
-    //fetching players data to display them in navbar
-    const fetchData = () => {
-        axios.get('http://localhost:3000/room/',{
-            withCredentials:true,
-            mode: 'cors',
-        }).then((response)=>{
-            while(response.data.players.length !== 4){
-                response.data.players.push({
-                    name: "...",
-                })
-            }
-            setPlayers(response.data.players);
-        })
-    }
-    useEffect(()=>{
-        //sending ajax every 3 sec 
-        setInterval(fetchData, 1000);
-    },[]);
-
+const Navbar = ( { players }) => {
     return(
         <div className="navbar-container">
             {players.map( (player, index) =>