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

added moving around map

Browse Source
This commit is contained in:
Wenszel 2021-04-29 19:33:57 +02:00
parent 57358b0105
commit 3ec1fad0c8
4 changed files with 61 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
backend/routes/game.js
View File

@ -2,77 +2,30 @@ var express = require('express');
var router = express.Router();
const RoomModel = require('../schemas/room');
function setNextPlayer(req, res){
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.player.length;
doc.players[index].nowMoving = false;
if(index++ === roomSize){
doc.players[0].nowMoving = true;
}else{
doc.players[index].nowMoving = true;
}
RoomModel.findOneAndUpdate({_id: req.session.roomId}, doc);
}
});
}
router.get('/roll', function (req, res){
const rolledNumber = Math.ceil(Math.random() * 6);
req.session.rolledNumber = rolledNumber;
res.send({number: rolledNumber});
});
router.post('/move', async function (req, res){
const rolledNumber = req.session.rolledNumber;
req.session.rolledNumber = null;
const room = await RoomModel.findOne({_id: req.session.roomId});
console.log(room);
const indexOfMovedPawn = room.pawns.findIndex( pawn => pawn._id === req.body.pawnId);
let { position } = room.pawns[indexOfMovedPawn];
switch (req.session.color){
case 'red':
if(position >= 0 && position <= 3){
position = 4;
}else if(position > 15 && position + rolledNumber <= 66){
position = position + rolledNumber;
router.post('/move', function (req, res){
RoomModel.findOne({_id: req.session.roomId}, function (err, doc){
if(doc){
const updatedPawn = doc.pawns.findIndex(pawn => pawn._id == req.body.pawnId);
doc.pawns[updatedPawn].position = req.body.position;
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{
position = 67 + (position + rolledNumber - 66);
doc.players[index+1].nowMoving = true;
}
break;
case 'blue':
if(position >= 4 && position <= 7){
position = 55;
}else if(position+rolledNumber>55 || position+rolledNumber <= 53){
position = position + rolledNumber;
}else{
position = 71 + (position + rolledNumber - 53);
}
break;
case 'green':
if(pawn.position >= 8 && pawn.position <= 11){
position = 42;
}else if(position + rolledNumber > 42 || position+rolledNumber <= 40){
position = position + rolledNumber;
}else{
position = 76 - (position + rolledNumber - 40)
}
break;
case 'yellow':
if(pawn.position >= 12 && pawn.position <= 15){
return 29;
}else if(position + rolledNumber > 29 || position+rolledNumber <= 27){
position = position + rolledNumber;
}else{
position = 82 + (position + rolledNumber - 27)
}
break;
}
RoomModel.findOneAndUpdate({_id: req.session.roomId, 'pawnw._id': req.body.pawnId}, room);
res.send("Correctly Moved!");
RoomModel.findOneAndUpdate({_id: req.session.roomId}, doc, function(err, doc){
res.send("Correctly Moved!");
});
}
});
});

9
package.json
View File

@ -18,7 +18,7 @@
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"heroku-postbuild": "cd backend && npm install && cd .. && npm install && npm run build",
"heroku-postbuild": "cd backend && npm install && node server.js && cd .. && npm install && npm run build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
@ -40,5 +40,10 @@
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
"buildpacks": [
{
"url": "https://github.com/mars/create-react-app-buildpack"
}
],
"proxy": "http://localhost:3000"
}

9
src/components/Gameboard.jsx
View File

@ -8,7 +8,6 @@ import Navbar from './Navbar'
const Gameboard = () => {
// Context data
const context = useContext(PlayerDataContext);
const [id, setId] = useState();
// Render data
const [pawns, setPawns] = useState([]);
const [players, setPlayers] = useState([]);
@ -28,24 +27,22 @@ const Gameboard = () => {
response.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 = response.data.players.find(player => player.nowMoving === true);
if(nowMovingPlayer){
if(nowMovingPlayer._id === id){
if(nowMovingPlayer._id === context.playerId){
setNowMoving(true);
}else{
setRolledNumber(null);
setNowMoving(false);
}
}
console.log(nowMoving);
setPlayers(response.data.players);
setPawns(response.data.pawns);
setTime(response.data.nextMoveTime);
setStarted(response.data.started);
})
}
useEffect(() => {
setId(context.playerId);
useEffect(() => {
//sending ajax every 1 sec
const interval = setInterval(fetchData, 1000);
return () => clearInterval(interval);

59
src/components/game-board-components/Map.jsx
View File

@ -6,7 +6,6 @@ import './Map.css';
const Map = ({ pawns, nowMoving, rolledNumber }) => {
const context = useContext(PlayerDataContext);
const [color, setColor] = useState();
const [hintPawn, setHintPawn] = useState();
const paintPawn = (context, x, y, color) =>{
@ -25,16 +24,15 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
// If hint pawn exist it means that pawn can move
if(hintPawn){
const canvas = canvasRef.current
const context = canvas.getContext('2d')
const ctx = canvas.getContext('2d')
const rect = canvas.getBoundingClientRect(),
x = event.clientX - rect.left,
y = event.clientY - rect.top;
for(const pawn of pawns){
if (context.isPointInPath(pawn.circle, x, y)) {
axios.post('http://localhost:3000/game/move', {
if (ctx.isPointInPath(pawn.circle, x, y)) {
axios.post('http://localhost:3000/game/move', {pawnId: pawn._id, position: hintPawn.position},
{
withCredentials: true,
mode: 'cors',
data: {pawnId: pawn._id}
});
setHintPawn(null);
}
@ -48,41 +46,52 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
next if pawn is in the end or will go in there
else if pawn is on map
*/
switch (color){
let { position } = pawn;
switch (context.color){
case 'red':
if(pawn.position >= 0 && pawn.position <= 3){
if(position >= 0 && position <= 3){
return 16;
}else if(pawn.position>15 && pawn.position<67){
return pawn.position + rolledNumber
}else if(position > 15 && position + rolledNumber <= 66){
return position + rolledNumber;
}else{
return 67 + (position + rolledNumber - 66);
}
break;
case 'blue':
if(pawn.position >= 4 && pawn.position <= 7){
if(position >= 4 && position <= 7){
return 55;
}else if(position+rolledNumber>55 || position+rolledNumber <= 53){
return position + rolledNumber;
}else{
return 71 + (position + rolledNumber - 53);
}
break;
case 'green':
if(pawn.position >= 8 && pawn.position <= 11){
if(position >= 8 && position <= 11){
return 42;
}else if(position + rolledNumber > 42 || position+rolledNumber <= 40){
return position + rolledNumber;
}else{
return 76 - (position + rolledNumber - 40)
}
break;
case 'yellow':
if(pawn.position >= 12 && pawn.position <= 15){
if(position >= 12 && position <= 15){
return 29;
}else if(position + rolledNumber > 29 || position+rolledNumber <= 27){
return position + rolledNumber;
}else{
return 82 + (position + rolledNumber - 27)
}
break;
}
};
const handleMouseMove = event => {
if(nowMoving && rolledNumber){
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
const ctx = canvas.getContext('2d');
// Gets x and y cords of mouse on canvas
const rect = canvas.getBoundingClientRect(),
x = event.clientX - rect.left,
y = event.clientY - rect.top;
canvas.style.cursor = "default";
console.log("Ruszam się")
for (const pawn of pawns){
if(pawn.circle){
/*
@ -92,10 +101,12 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
3) if pawn is on base is rolledNumber is 1 or 6 which allows pawn to exit base
And then sets cursor to pointer and paints hint pawn - where will be pawn after click
*/
if (context.isPointInPath(pawn.circle, x, y) && pawn.color === color && (pawn.position>15 || rolledNumber === 1 || rolledNumber === 6)) {
//&& (pawn.position>15 || rolledNumber === 1 || rolledNumber === 6)
console.log(context, pawn.color)
if (ctx.isPointInPath(pawn.circle, x, y) && context.color == pawn.color) {
canvas.style.cursor = "pointer";
const pawnPosition = getHintPawnPosition(pawn);
setHintPawn({id: pawn._id, x: positions[pawnPosition].x, y: positions[pawnPosition].y, color: 'grey'});
setHintPawn({id: pawn._id, position: pawnPosition, color: 'grey'});
break;
}else{
setHintPawn(null);
@ -115,15 +126,15 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
pawns[index].circle = paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color);
});
if (hintPawn){
paintPawn(context, hintPawn.x, hintPawn.y, hintPawn.color);
paintPawn(context, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
}
}
}
// Rerender canvas when pawns have changed
useEffect(() => {
setColor(context.color);
console.log(context.color);
rerenderCanvas();
}, [pawns]);
}, [hintPawn, pawns]);
return(
<canvas