added ready button

backend/routes/player.js

@@ -1,5 +1,31 @@
 var express = require('express');
 var router = express.Router();
+var RoomModel = require('../schemas/room');
+
+
+router.post('/ready', function (req, res){
+    RoomModel.findOne({_id: req.session.roomId}, function (err, doc){    
+        if (err) {
+            res.status(500).send(err)
+        } else {
+            let updatedPlayers = doc.players;
+            let index = updatedPlayers.findIndex( player => player.name === req.session.name);
+            updatedPlayers[index].ready = !updatedPlayers[index].ready;
+            RoomModel.findOneAndUpdate({
+                _id: req.session.roomId
+            }, {players: updatedPlayers}, function(err, doc){
+                if (err){ 
+                    console.log(err) 
+                } 
+                else{ 
+                    console.log("Updated Docs : ", doc); 
+                }  
+            });
+            res.status(200).send("Ready!");
+        }    
+    });        
+});
+
 
 //adding users to exisiting room or creating new room if full
 router.post('/add', function (req, res) {

backend/routes/room.js

@@ -18,15 +18,15 @@ router.post('/add', function (req, res) {
                 full: false,
                 started: false,
                 players: [{
-                    player: req.body.name,
+                    name: req.body.name,
+                    ready: false,
                     color: colors[0]
                 }],
             });
             newRoom.save()
                 .then(function(){
                         req.session.roomId = newRoom._id;
-                        req.session.player = req.body.name;
-                    
+                        req.session.name = req.body.name;
                     res.status(200).send('Joined!'); 
                 })
                 .catch(err => res.status(400).json('Error: ' + err))
@@ -35,7 +35,8 @@ router.post('/add', function (req, res) {
             let players = results.players;
             players.push(
                 {
-                    player: req.body.name,
+                    name: req.body.name,
+                    ready: false,
                     color: colors[players.length]
                 }
                 
@@ -57,7 +58,7 @@ router.post('/add', function (req, res) {
                 }
             ).then(()=>{
                 req.session.roomId = results._id;
-                req.session.player = req.body.name;
+                req.session.name = req.body.name;
                 res.status(200).send('Joined!'); 
             });
             

backend/schemas/room.js

@@ -7,8 +7,9 @@ var RoomSchema = new Schema({
     started: Boolean,
     full: Boolean,
     players: [{
-        player: String,
+        name: String,
         color: String,
+        ready: Boolean,
     }],
     positions: Map
 });

backend/server.js

@@ -37,7 +37,7 @@ mongoose.connect(CONNECTION_URI, {
 var MongoDBStore = require('connect-mongodb-session')(session);
 var store = new MongoDBStore({
   uri: CONNECTION_URI,
-  collection: 'mySessions'
+  collection: 'sessions'
 });
 app.use(session({
   secret: 'lalala',
@@ -56,9 +56,11 @@ const playerRoutes = require("./routes/player");
 app.get('/', (req,res)=>{
   if(req.session.player){
     res.send({
-      player: req.session.player,
+      name: req.session.name,
       roomId: req.session.roomId,
     })
+  }else{
+    res.end();
   }
 })
 

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;