From 3ec1fad0c8576c8d667b005006904d62bfc049f1 Mon Sep 17 00:00:00 2001 From: Wenszel Date: Thu, 29 Apr 2021 19:33:57 +0200 Subject: [PATCH] added moving around map --- backend/routes/game.js | 79 ++++---------------- package.json | 9 ++- src/components/Gameboard.jsx | 9 +-- src/components/game-board-components/Map.jsx | 59 +++++++++------ 4 files changed, 61 insertions(+), 95 deletions(-) diff --git a/backend/routes/game.js b/backend/routes/game.js index 28d8cbd..ffa57a6 100644 --- a/backend/routes/game.js +++ b/backend/routes/game.js @@ -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!"); + }); + } + }); }); diff --git a/package.json b/package.json index c52177b..c19022b 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index 0de8a35..95913e0 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -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); diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx index 9eb7b47..69891ef 100644 --- a/src/components/game-board-components/Map.jsx +++ b/src/components/game-board-components/Map.jsx @@ -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(