added displaying players

backend/routes/room.js

@@ -3,6 +3,8 @@ var router = express.Router();
 
 var RoomModel = require('../schemas/room');
 
+var colors = ['red','blue','green','yellow'];
+
 //creating new room in db
 router.post('/add', function (req, res) {
     console.log(req.session);
@@ -15,45 +17,48 @@ router.post('/add', function (req, res) {
                 createDate: new Date,
                 full: false,
                 started: false,
-                players: [req.body.name],
+                players: [{
+                    player: req.body.name,
+                    color: colors[0]
+                }],
             });
             newRoom.save()
-                .then( async function(){
+                .then(function(){
                         req.session.roomId = newRoom._id;
                         req.session.player = req.body.name;
                     
-                    res.send({id: newRoom._id}); 
+                    res.status(200).send('Joined!'); 
                 })
                 .catch(err => res.status(400).json('Error: ' + err))
                 
         }else {      
             let players = results.players;
-            players.push(req.body.name);
+            players.push(
+                {
+                    player: req.body.name,
+                    color: colors[players.length]
+                }
+                
+                );
             let updateObj = {
                 players: players,
             }
             players.length === 4 ? updateObj.full = true : updateObj.full = false;
             RoomModel.findOneAndUpdate(
-                { _id: results._id }, 
+                { _id: results._id }, //find room by id
                 updateObj,  
                 function (err, docs) { 
                     if (err){ 
                         console.log(err) 
                     } 
                     else{ 
-                        req.session.roomId = results._id;
-                req.session.player = req.body.name;
                         console.log("Updated Docs : ", docs); 
                     } 
                 }
             ).then(()=>{
                 req.session.roomId = results._id;
                 req.session.player = req.body.name;
-                console.log(req.session);
-                res.send({
-                    id: results._id,
-                    player: req.session.player
-                }); 
+                res.status(200).send('Joined!'); 
             });
             
         }
@@ -74,7 +79,18 @@ router.put('/edit', function(req,res){
 
 //get room values
 router.get('/', function(req,res){
-
+    RoomModel.findOne(
+        { _id: req.session.roomId }, //find room by id
+        function (err, docs) { 
+            if (err){ 
+                console.log(err) 
+            } 
+            else{ 
+                console.log(docs)
+                res.send({ players: docs.players}); 
+            } 
+        }
+    )
 });
 
 module.exports = router;

backend/schemas/room.js

@@ -6,7 +6,10 @@ var RoomSchema = new Schema({
     createDate: Date,
     started: Boolean,
     full: Boolean,
-    players: Array,
+    players: [{
+        player: String,
+        color: String,
+    }],
     positions: Map
 });
 

backend/server.js

@@ -55,7 +55,7 @@ const playerRoutes = require("./routes/player");
 
 app.get('/', (req,res)=>{
   if(req.session.player){
-    res.json({
+    res.send({
       player: req.session.player,
       roomId: req.session.roomId,
     })

src/App.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import { BrowserRouter as Router , Redirect } from 'react-router-dom';
+import { BrowserRouter as Router , Route , Redirect, Switch } from 'react-router-dom';
+
+import Navbar from './components/Navbar'
 import NameInput from './components/NameInput';
 
 function App() {
@@ -9,7 +11,7 @@ function App() {
       withCredentials:true,
       mode: 'cors'
     })
-    .then((response)=> response.id!=null ? setRedirect(true): null);
+    .then((response)=> response.id!=null ? setRedirect(true) : null);
   })
   const [id, setId] = useState('')
   const [redirect, setRedirect] = useState(false)
@@ -26,6 +28,11 @@ function App() {
   return (
     <Router>
       {redirect ?  <Redirect to="/game"></Redirect> : <NameInput idCallback = {idCallback}/>}
+      <Switch>
+          <Route path="/game">
+            <Navbar></Navbar>
+          </Route>
+        </Switch>
     </Router>
   );
 }

src/components/GameBoard.jsx

@@ -1,6 +0,0 @@
-import React from 'react';
-
-const GameBoard = () => {
-
-}
-export default GameBoard

src/components/Navbar.jsx

@@ -1,15 +1,26 @@
-import React, { useEffect } from 'react';
-
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
 const Navbar = () => {
-    const [names, setNames] = useState([]);
-    useEffect(
+    
+    const [players, setPlayers] = useState([]);
+    useEffect(()=>{
         //fetching names, time and other data
-    );
+        axios.get('http://localhost:3001/room/',{
+            withCredentials:true,
+            mode: 'cors',
+        }).then((response)=>{
+
+            setPlayers(response.data.players);
+            console.log(response.data.players);
+        })
+    }
+    ,[]);
     return(
         <div>
-            {names.map((name)=>{
-                <h1>{name}</h1>
-            })}
+            {players.map((name)=>
+                <p key={name.player}>{name.player}</p>
+            )}
         </div>
     );
 }
+export default Navbar;