added changing color in navbar if ready

README.md

@@ -0,0 +1,29 @@
+# Online multiplayer Ludo
+WORK IN PROGRESS ...
+## About
+
+**Ludo** is a strategy board game for two to four players, in which the players race their four tokens from start to finish according to the rolls of a single die. Like other cross and circle games, Ludo is derived from the Indian game Pachisi, but simpler. The game and its variations are popular in many countries and under various names.  [Read more](https://en.wikipedia.org/wiki/Ludo_(board_game))
+
+## Installation
+Play this game [here]()
+```
+npm i
+npm start 
+cd backend
+npm i
+node server.js
+``` 
+
+## Technologies
+### Backend
+- Node.js
+- Express 
+- express-session
+- MongoDB
+- MongoDB sessions store
+- Maybe Redis in future
+### Frontend
+- React 
+- Axios
+- Material UI
+- Canvas

backend/routes/game.js

@@ -0,0 +1,17 @@
+var express = require('express');
+var router = express.Router();
+
+//starts game
+router.post('/start', function (req, res){
+    /* set interval:
+        draw a number <1,6>
+        update positions 
+    */
+    
+});
+//returns positions 
+router.get('/', function (req, res){
+
+});
+
+module.exports = router;

backend/routes/player.js

@@ -2,8 +2,7 @@ var express = require('express');
 var router = express.Router();
 var RoomModel = require('../schemas/room');
 
-
-router.post('/ready', function (req, res){
+var changeReadyState = (req, res, exit) =>{
     RoomModel.findOne({_id: req.session.roomId}, function (err, doc){    
         if (err) {
             res.status(500).send(err)
@@ -13,7 +12,9 @@ router.post('/ready', function (req, res){
             let index = updatedPlayers.findIndex( 
                 player => (player._id).toString() == (req.session.playerId).toString()
             );
-            updatedPlayers[index].ready = !updatedPlayers[index].ready;
+            if(!exit) 
+            {updatedPlayers[index].ready = !updatedPlayers[index].ready;}
+            else {updatedPlayers[index].ready = false;}
             RoomModel.findOneAndUpdate({
                 _id: req.session.roomId
             }, {players: updatedPlayers}, function(err, doc){
@@ -27,11 +28,29 @@ router.post('/ready', function (req, res){
             res.status(200).send("Ready!");
         }    
     });        
+}
+
+//changing status of player to ready for game
+router.post('/ready', function (req, res){
+    changeReadyState(req, res, false)
 });
 
 //deleting user in case he left before game started
 router.post('/exit', function(req,res){
-    console.log("wyszedł XD")
+    changeReadyState(req,res, true)
+});
+
+//return session data
+router.get('/', (req,res)=>{
+    if(req.session.name){
+      res.send({
+        name: req.session.name,
+        playerId: req.session.playerId,
+        roomId: req.session.roomId,
+      })
+    }else{
+      res.end();
+    }
 });
 
 module.exports = router;

backend/routes/room.js

@@ -34,32 +34,22 @@ router.post('/add', function (req, res) {
                 
         }else {      
             let players = results.players;
+
             players.push({
                     name: req.body.name,
                     ready: false,
                     color: colors[players.length]
             });
 
-            let updateObj = {
-                players: players,
-            }
-
+            let updateObj = { players: players }
             players.length === 4 ? updateObj.full = true : updateObj.full = false;
 
             RoomModel.findOneAndUpdate(
                 { _id: results._id }, //find room by id
-                updateObj,  
-                function (err, docs) { 
-                    if (err){ 
-                        console.log(err) 
-                    } 
-                    else{ 
-                        console.log("Updated Docs : ", docs); 
-                    } 
-                }
-            ).then(()=>{
+                updateObj)
+                .then(()=>{
                     req.session.roomId = results._id;
-                req.session.playerId = results.players[results.players.lenght - 1]._id;
+                    req.session.playerId = updateObj.players[(updateObj.players).lenght - 1]._id;
                     req.session.name = req.body.name;
                     res.status(200).send('Joined!'); 
                 });    
@@ -68,16 +58,6 @@ router.post('/add', function (req, res) {
     
 });
 
-//deleting room after game ends
-router.delete('/delete/{id}', function(req,res){
-    
-});
-
-//editing room every move
-router.put('/edit', function(req,res){
-
-});
-
 //get room values
 router.get('/', function(req,res){
     RoomModel.findOne(
@@ -87,7 +67,6 @@ router.get('/', function(req,res){
                 console.log(err) 
             } 
             else{ 
-                console.log(docs)
                 res.send({ players: docs.players}); 
             } 
         }

backend/server.js

@@ -33,6 +33,7 @@ mongoose.connect(CONNECTION_URI, {
     console.log('MongoDB Connected…');
   })
 .catch(err => console.error(err));
+
 //SESSION CONFIG]
 var MongoDBStore = require('connect-mongodb-session')(session);
 var store = new MongoDBStore({
@@ -52,21 +53,11 @@ app.use(session({
 //ROUTES CONFIG
 const roomRoutes = require("./routes/room");
 const playerRoutes = require("./routes/player");
-
-app.get('/', (req,res)=>{
-  if(req.session.name){
-    res.send({
-      name: req.session.name,
-      playerId: req.session.playerId,
-      roomId: req.session.roomId,
-    })
-  }else{
-    res.end();
-  }
-})
+const gameRoutes = require("./routes/game");
 
 app.use('/player', playerRoutes);
 app.use('/room', roomRoutes);
+app.use('/game', gameRoutes)
 
 app.listen(PORT, ()=>{
     console.log("Server runs on port "+PORT);

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>
     )