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

77
backend/routes/game.js
View File

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

9
package.json
View File

@ -18,7 +18,7 @@
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "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", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
@ -40,5 +40,10 @@
"last 1 safari version" "last 1 safari version"
] ]
}, },
"proxy": "http://localhost:5000" "buildpacks": [
{
"url": "https://github.com/mars/create-react-app-buildpack"
}
],
"proxy": "http://localhost:3000"
} }

7
src/components/Gameboard.jsx
View File

@ -8,7 +8,6 @@ import Navbar from './Navbar'
const Gameboard = () => { const Gameboard = () => {
// Context data // Context data
const context = useContext(PlayerDataContext); const context = useContext(PlayerDataContext);
const [id, setId] = useState();
// Render data // Render data
const [pawns, setPawns] = useState([]); const [pawns, setPawns] = useState([]);
const [players, setPlayers] = useState([]); const [players, setPlayers] = useState([]);
@ -28,16 +27,15 @@ const Gameboard = () => {
response.data.players.push({name: "...",}); response.data.players.push({name: "...",});
}; };
// Checks if client is currently moving player by session ID // 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){
if(nowMovingPlayer._id === id){ if(nowMovingPlayer._id === context.playerId){
setNowMoving(true); setNowMoving(true);
}else{ }else{
setRolledNumber(null); setRolledNumber(null);
setNowMoving(false); setNowMoving(false);
} }
} }
console.log(nowMoving);
setPlayers(response.data.players); setPlayers(response.data.players);
setPawns(response.data.pawns); setPawns(response.data.pawns);
setTime(response.data.nextMoveTime); setTime(response.data.nextMoveTime);
@ -45,7 +43,6 @@ const Gameboard = () => {
}) })
} }
useEffect(() => { useEffect(() => {
setId(context.playerId);
//sending ajax every 1 sec //sending ajax every 1 sec
const interval = setInterval(fetchData, 1000); const interval = setInterval(fetchData, 1000);
return () => clearInterval(interval); 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 Map = ({ pawns, nowMoving, rolledNumber }) => {
const context = useContext(PlayerDataContext); const context = useContext(PlayerDataContext);
const [color, setColor] = useState();
const [hintPawn, setHintPawn] = useState(); const [hintPawn, setHintPawn] = useState();
const paintPawn = (context, x, y, color) =>{ 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 hint pawn exist it means that pawn can move
if(hintPawn){ if(hintPawn){
const canvas = canvasRef.current const canvas = canvasRef.current
const context = canvas.getContext('2d') const ctx = canvas.getContext('2d')
const rect = canvas.getBoundingClientRect(), const rect = canvas.getBoundingClientRect(),
x = event.clientX - rect.left, x = event.clientX - rect.left,
y = event.clientY - rect.top; y = event.clientY - rect.top;
for(const pawn of pawns){ for(const pawn of pawns){
if (context.isPointInPath(pawn.circle, x, y)) { if (ctx.isPointInPath(pawn.circle, x, y)) {
axios.post('http://localhost:3000/game/move', { axios.post('http://localhost:3000/game/move', {pawnId: pawn._id, position: hintPawn.position},
{
withCredentials: true, withCredentials: true,
mode: 'cors',
data: {pawnId: pawn._id}
}); });
setHintPawn(null); setHintPawn(null);
} }
@ -48,41 +46,52 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
next if pawn is in the end or will go in there next if pawn is in the end or will go in there
else if pawn is on map else if pawn is on map
*/ */
switch (color){ let { position } = pawn;
switch (context.color){
case 'red': case 'red':
if(pawn.position >= 0 && pawn.position <= 3){ if(position >= 0 && position <= 3){
return 16; return 16;
}else if(pawn.position>15 && pawn.position<67){ }else if(position > 15 && position + rolledNumber <= 66){
return pawn.position + rolledNumber return position + rolledNumber;
}else{
return 67 + (position + rolledNumber - 66);
} }
break;
case 'blue': case 'blue':
if(pawn.position >= 4 && pawn.position <= 7){ if(position >= 4 && position <= 7){
return 55; return 55;
}else if(position+rolledNumber>55 || position+rolledNumber <= 53){
return position + rolledNumber;
}else{
return 71 + (position + rolledNumber - 53);
} }
break;
case 'green': case 'green':
if(pawn.position >= 8 && pawn.position <= 11){ if(position >= 8 && position <= 11){
return 42; return 42;
}else if(position + rolledNumber > 42 || position+rolledNumber <= 40){
return position + rolledNumber;
}else{
return 76 - (position + rolledNumber - 40)
} }
break;
case 'yellow': case 'yellow':
if(pawn.position >= 12 && pawn.position <= 15){ if(position >= 12 && position <= 15){
return 29; return 29;
}else if(position + rolledNumber > 29 || position+rolledNumber <= 27){
return position + rolledNumber;
}else{
return 82 + (position + rolledNumber - 27)
} }
break;
} }
}; };
const handleMouseMove = event => { const handleMouseMove = event => {
if(nowMoving && rolledNumber){ if(nowMoving && rolledNumber){
const canvas = canvasRef.current; const canvas = canvasRef.current;
const context = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// Gets x and y cords of mouse on canvas // Gets x and y cords of mouse on canvas
const rect = canvas.getBoundingClientRect(), const rect = canvas.getBoundingClientRect(),
x = event.clientX - rect.left, x = event.clientX - rect.left,
y = event.clientY - rect.top; y = event.clientY - rect.top;
canvas.style.cursor = "default"; canvas.style.cursor = "default";
console.log("Ruszam się")
for (const pawn of pawns){ for (const pawn of pawns){
if(pawn.circle){ 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 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 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"; canvas.style.cursor = "pointer";
const pawnPosition = getHintPawnPosition(pawn); 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; break;
}else{ }else{
setHintPawn(null); 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); pawns[index].circle = paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color);
}); });
if (hintPawn){ 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 // Rerender canvas when pawns have changed
useEffect(() => { useEffect(() => {
setColor(context.color); console.log(context.color);
rerenderCanvas(); rerenderCanvas();
}, [pawns]); }, [hintPawn, pawns]);
return( return(
<canvas <canvas