From 159b96a6782965974110e13c04b3c35038d7c9d5 Mon Sep 17 00:00:00 2001 From: Wenszel Date: Mon, 30 May 2022 09:06:59 +0200 Subject: [PATCH] added fetching data with socketio --- backend/controllers/serverController.js | 32 +++++----- backend/handlers/playerHandler.js | 2 +- backend/handlers/roomHandler.js | 35 +++++++++++ backend/routes/room.js | 47 -------------- backend/server.js | 6 +- src/components/Gameboard.jsx | 84 ++++++++++++------------- 6 files changed, 97 insertions(+), 109 deletions(-) create mode 100644 backend/handlers/roomHandler.js delete mode 100644 backend/routes/room.js diff --git a/backend/controllers/serverController.js b/backend/controllers/serverController.js index 474409d..56ead1c 100644 --- a/backend/controllers/serverController.js +++ b/backend/controllers/serverController.js @@ -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 }; diff --git a/backend/handlers/playerHandler.js b/backend/handlers/playerHandler.js index 6b245b2..f86248a 100644 --- a/backend/handlers/playerHandler.js +++ b/backend/handlers/playerHandler.js @@ -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 diff --git a/backend/handlers/roomHandler.js b/backend/handlers/roomHandler.js new file mode 100644 index 0000000..5649fca --- /dev/null +++ b/backend/handlers/roomHandler.js @@ -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)); + }); + }); + } +}; diff --git a/backend/routes/room.js b/backend/routes/room.js deleted file mode 100644 index 15b8afc..0000000 --- a/backend/routes/room.js +++ /dev/null @@ -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; diff --git a/backend/server.js b/backend/server.js index 48699d7..e4b8d6d 100644 --- a/backend/server.js +++ b/backend/server.js @@ -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') { diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index f173a44..06f7b60 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -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 ( <> - - {nowMoving ? : null} - + + {nowMoving ? : null} + - ) + ); +}; -} - -export default Gameboard; \ No newline at end of file +export default Gameboard;