rajukottedi/ludo-web-multiplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added fetching data with socketio

Browse Source
This commit is contained in:
Wenszel 2022-05-30 09:06:59 +02:00
parent 9686276ece
commit 159b96a678
6 changed files with 97 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
backend/controllers/serverController.js
View File

@ -1,23 +1,23 @@
const session = require("express-session");
const CONNECTION_URI = require("../credentials.js");
const MongoDBStore = require("connect-mongodb-session")(session);
const session = require('express-session');
const CONNECTION_URI = require('../credentials.js');
const MongoDBStore = require('connect-mongodb-session')(session);
const store = new MongoDBStore({
uri: CONNECTION_URI,
collection: "sessions",
uri: CONNECTION_URI,
collection: 'sessions',
});
const sessionMiddleware = session({
secret: "lalala",
resave: true,
saveUninitialized: false,
store: store,
credentials: true,
cookie: {
httpOnly: false,
secure: false,
},
store: store,
credentials: true,
cookie: {
httpOnly: false,
secure: false,
},
secret: 'secret',
saveUninitialized: true,
resave: true,
maxAge: 20000,
});
const wrap = (expressMiddleware) => (socket, next) =>
expressMiddleware(socket.request, {}, next);
const wrap = expressMiddleware => (socket, next) => expressMiddleware(socket.request, {}, next);
module.exports = { sessionMiddleware, wrap };

2
backend/handlers/playerHandler.js
View File

@ -53,7 +53,7 @@ module.exports = (io, socket) => {
ready: false,
color: colors[room.players.length],
});
const updatedRoom = { players: room.players };
let updatedRoom = { players: room.players };
// Checking if the room is full
if (room.players.length === 4) {
// Changes the properties of the room to the state to start the game

35
backend/handlers/roomHandler.js Normal file
View File

@ -0,0 +1,35 @@
const RoomModel = require('../schemas/room');
module.exports = (io, socket) => {
const req = socket.request;
const getData = () => {
RoomModel.findOne({ _id: req.session.roomId }, function (err, room) {
if (!room) return err;
if (room.nextMoveTime <= Date.now()) {
changeCurrentMovingPlayer();
} else {
io.to(req.session.roomId).emit('room:data', JSON.stringify(room));
}
});
};
socket.on('room:data', getData);
function changeCurrentMovingPlayer() {
RoomModel.findOne({ _id: req.session.roomId }, function (err, room) {
if (!room) return err;
const index = room.players.findIndex(player => player.nowMoving === true);
const roomSize = room.players.length;
room.players[index].nowMoving = false;
if (index + 1 === roomSize) {
room.players[0].nowMoving = true;
} else {
room.players[index + 1].nowMoving = true;
}
room.nextMoveTime = Date.now() + 15000;
RoomModel.findOneAndUpdate({ _id: req.session.roomId }, room, function (err, updatedRoom) {
io.to(req.session.roomId).emit('room:data', JSON.stringify(updatedRoom));
});
});
}
};

47
backend/routes/room.js
View File

@ -1,47 +0,0 @@
const express = require("express");
const router = express.Router();
const RoomModel = require("../schemas/room");
//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 {
if (docs) {
if (docs.nextMoveTime <= Date.now()) {
RoomModel.findOne({ _id: req.session.roomId }, function (err, doc) {
if (err) {
res.status(500).send(err);
} else {
const index = doc.players.findIndex(player => player.nowMoving === true);
const roomSize = doc.players.length;
doc.players[index].nowMoving = false;
if (index + 1 === roomSize) {
doc.players[0].nowMoving = true;
} else {
doc.players[index + 1].nowMoving = true;
}
doc.nextMoveTime = Date.now() + 15000;
RoomModel.findOneAndUpdate({ _id: req.session.roomId }, doc, function (err, docs) {
if (err) {
res.status(500).send(err);
} else {
res.send(docs);
}
});
}
});
} else {
res.send(docs);
}
}
}
}
);
});
module.exports = router;

6
backend/server.js
View File

@ -3,6 +3,7 @@ const cors = require('cors');
const cookieParser = require('cookie-parser');
const { sessionMiddleware, wrap } = require('./controllers/serverController');
const registerPlayerHandlers = require('./handlers/playerHandler');
const registerRoomHandlers = require('./handlers/roomHandler');
const PORT = 8080;
const mongoose = require('mongoose');
const CONNECTION_URI = require('./credentials.js');
@ -73,20 +74,19 @@ io.use(wrap(sessionMiddleware));
io.on('connection', socket => {
registerPlayerHandlers(io, socket);
registerRoomHandlers(io, socket);
if (socket.request.session.roomId) {
socket.join(socket.request.session.roomId);
socket.emit('player:data', JSON.stringify(session));
socket.emit('player:data', JSON.stringify(socket.request.session));
io.to(socket.request.session.roomId).emit('player joined');
}
});
//ROUTES CONFIG
const roomRoutes = require('./routes/room');
const playerRoutes = require('./routes/player');
const gameRoutes = require('./routes/game');
app.use('/player', playerRoutes);
app.use('/room', roomRoutes);
app.use('/game', gameRoutes);
if (process.env.NODE_ENV === 'production') {

84
src/components/Gameboard.jsx
View File

@ -1,12 +1,13 @@
import React, { useState, useEffect, useContext, useCallback } from 'react';
import { PlayerDataContext } from '../App'
import { PlayerDataContext, SocketContext } from '../App';
import axios from 'axios';
import Map from './game-board-components/Map'
import Dice from './game-board-components/Dice'
import Navbar from './Navbar'
import Map from './game-board-components/Map';
import Dice from './game-board-components/Dice';
import Navbar from './Navbar';
const Gameboard = () => {
// Context data
const socket = useContext(SocketContext);
const context = useContext(PlayerDataContext);
// Render data
const [pawns, setPawns] = useState([]);
@ -19,61 +20,60 @@ const Gameboard = () => {
const checkWin = useCallback(() => {
// Player wins when all pawns with same color are inside end base
if(pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4){
alert("Red Won")
}else if(pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4){
alert("Blue Won")
}else if(pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4){
alert("Green Won")
}else if(pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4){
alert("Yellow Won")
if (pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4) {
alert('Red Won');
} else if (pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4) {
alert('Blue Won');
} else if (pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4) {
alert('Green Won');
} else if (pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4) {
alert('Yellow Won');
}
},[pawns]);
}, [pawns]);
// Fetching game data
const fetchData = useCallback(() => {
axios.get('/room/',{
withCredentials:true,
}).then((response)=>{
socket.emit('room:data');
}, []);
useEffect(() => {
socket.on('room:data', data => {
data = JSON.parse(data);
// Filling navbar with empty player nick container
while(response.data.players.length !== 4){
response.data.players.push({name: "...",});
};
while (data.players.length !== 4) {
data.players.push({ name: '...' });
}
// Checks if client is currently moving player by session ID
const nowMovingPlayer = response.data.players.find(player => player.nowMoving === true);
if(nowMovingPlayer){
if(nowMovingPlayer._id === context.playerId){
const nowMovingPlayer = data.players.find(player => player.nowMoving === true);
if (nowMovingPlayer) {
if (nowMovingPlayer._id === context.playerId) {
setNowMoving(true);
}else{
} else {
setRolledNumber(null);
setNowMoving(false);
}
}
checkWin();
setPlayers(response.data.players);
setPawns(response.data.pawns);
setTime(response.data.nextMoveTime);
setStarted(response.data.started);
})
},[checkWin, context.playerId]);
useEffect(() => {
//sending ajax every 1 sec
setPlayers(data.players);
setPawns(data.pawns);
setTime(data.nextMoveTime);
setStarted(data.started);
});
//sending ajax every 1 sec
const interval = setInterval(fetchData, 1000);
return () => clearInterval(interval);
},[fetchData]);
}, [fetchData]);
// Callback to handle dice rolling between dice and map component
const rolledNumberCallback = (number) => {
const rolledNumberCallback = number => {
setRolledNumber(number);
}
};
return (
<>
<Navbar players={players} started={started} time={time}/>
{nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback}/> : null}
<Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber}/>
<Navbar players={players} started={started} time={time} />
{nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
<Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
</>
)
);
};
}
export default Gameboard;
export default Gameboard;