added fetching data with socketio
This commit is contained in:
Wenszel
parent
9686276ece
commit
159b96a678
@ -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",
|
||||
collection: 'sessions',
|
||||
});
|
||||
const sessionMiddleware = session({
|
||||
secret: "lalala",
|
||||
resave: true,
|
||||
saveUninitialized: 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 };
|
||||
|
||||
@ -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
35
backend/handlers/roomHandler.js
Normal 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));
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -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;
|
||||
@ -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') {
|
||||
|
||||
@ -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([]);
|
||||
@ -20,26 +21,29 @@ 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")
|
||||
alert('Red Won');
|
||||
} else if (pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4) {
|
||||
alert("Blue Won")
|
||||
alert('Blue Won');
|
||||
} else if (pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4) {
|
||||
alert("Green Won")
|
||||
alert('Green Won');
|
||||
} else if (pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4) {
|
||||
alert("Yellow Won")
|
||||
alert('Yellow Won');
|
||||
}
|
||||
}, [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);
|
||||
const nowMovingPlayer = data.players.find(player => player.nowMoving === true);
|
||||
if (nowMovingPlayer) {
|
||||
if (nowMovingPlayer._id === context.playerId) {
|
||||
setNowMoving(true);
|
||||
@ -49,22 +53,19 @@ const Gameboard = () => {
|
||||
}
|
||||
}
|
||||
checkWin();
|
||||
setPlayers(response.data.players);
|
||||
setPawns(response.data.pawns);
|
||||
setTime(response.data.nextMoveTime);
|
||||
setStarted(response.data.started);
|
||||
})
|
||||
},[checkWin, context.playerId]);
|
||||
|
||||
useEffect(() => {
|
||||
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]);
|
||||
// Callback to handle dice rolling between dice and map component
|
||||
const rolledNumberCallback = (number) => {
|
||||
const rolledNumberCallback = number => {
|
||||
setRolledNumber(number);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -72,8 +73,7 @@ const Gameboard = () => {
|
||||
{nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
|
||||
<Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Gameboard;
|
||||
Loading…
Reference in New Issue
Block a user