From 3c78b0cf8b1412fee5c4ab193d271e567ae0121b Mon Sep 17 00:00:00 2001 From: Wenszel Date: Sun, 25 Apr 2021 18:23:30 +0200 Subject: [PATCH] added hint pawns --- backend/routes/player.js | 4 +- backend/routes/room.js | 6 +- src/components/Gameboard.jsx | 13 ++- src/components/game-board-components/Dice.jsx | 8 +- src/components/game-board-components/Map.jsx | 91 ++++++++++++++----- .../game-board-components/positions.js | 91 +++++++++++++++++++ 6 files changed, 179 insertions(+), 34 deletions(-) diff --git a/backend/routes/player.js b/backend/routes/player.js index 1d6f66b..25fecf5 100644 --- a/backend/routes/player.js +++ b/backend/routes/player.js @@ -48,9 +48,9 @@ router.post('/exit', function(req,res){ //return session data router.get('/', (req,res)=>{ - if(req.session.name){ + // If session exist return sessions data to move player to game when he backs to site + if(req.session){ res.send({ - name: req.session.name, color: req.session.color, playerId: req.session.playerId, roomId: req.session.roomId, diff --git a/backend/routes/room.js b/backend/routes/room.js index 5c1332e..8b201be 100644 --- a/backend/routes/room.js +++ b/backend/routes/room.js @@ -40,7 +40,6 @@ router.post('/add', function (req, res) { req.session.roomId = newRoom._id; req.session.playerId = newRoom.players[0]._id; req.session.color = newRoom.players[0].color; - req.session.name = req.body.name; res.status(200).send(req.session.playerId); }) .catch(err => res.status(400).json('Error: ' + err)) @@ -59,7 +58,7 @@ router.post('/add', function (req, res) { updateObj.full = true; // Room is full updateObj.started = true; // Game started updateObj.players[0].nowMoving = true; //First joined player moving - updateObj.pawns = startPositions + updateObj.pawns = getStartPositions(); } RoomModel.findOneAndUpdate( { _id: results._id }, //find room by id @@ -67,8 +66,7 @@ router.post('/add', function (req, res) { .then(()=>{ req.session.roomId = results._id; req.session.playerId = updateObj.players[updateObj.players.length-1]._id; - req.session.name = req.body.name; - req.sessions.color = colors[players.length - 1]; + req.session.color = colors[updateObj.players.length-1]; res.status(200).send(req.session.playerId); }); diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index 3af3a98..5412ff3 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -7,6 +7,7 @@ import Navbar from './Navbar' const Gameboard = ({id, color}) => { const [pawns, setPawns] = useState([]); const [players, setPlayers] = useState([]); + const [rolledNumber, setRolledNumber] = useState(''); const [nowMoving, setNowMoving] = useState(false); const [started, setStarted] = useState(false); //fetching players data to display them in navbar @@ -32,13 +33,19 @@ const Gameboard = ({id, color}) => { } useEffect(()=>{ //sending ajax every 1 sec - setInterval(fetchData, 1000); + const interval = setInterval(fetchData, 1000); + return () => clearInterval(interval); },[]); + // Callback to handle dice rolling between dice and map component + const rolledNumberCallback = (number) => { + setRolledNumber(number); + } + return ( <> - {nowMoving ? : null} - + {nowMoving ? : null} + ) diff --git a/src/components/game-board-components/Dice.jsx b/src/components/game-board-components/Dice.jsx index 75db043..1730c10 100644 --- a/src/components/game-board-components/Dice.jsx +++ b/src/components/game-board-components/Dice.jsx @@ -7,7 +7,7 @@ import four from '../../images/dice/4.png'; import five from '../../images/dice/5.png'; import six from '../../images/dice/6.png'; -const Dice = () => { +const Dice = ({rolledNumberCallback}) => { const [rolledNumber, setRolledNumber] = useState() const [images] = useState([one, two, three, four, five, six]); const handleRoll = () => { @@ -16,12 +16,14 @@ const Dice = () => { const utterance = new SpeechSynthesisUtterance(response.data.number); speechSynthesis.speak(utterance); setRolledNumber(response.data.number); + rolledNumberCallback(response.data.number); }) } return(
- {rolledNumber ? : null } - + {rolledNumber ? : + } +
) } diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx index f00fcad..ea714db 100644 --- a/src/components/game-board-components/Map.jsx +++ b/src/components/game-board-components/Map.jsx @@ -1,23 +1,24 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import positions from './positions'; import './Map.css'; -const Map = ({ pawns, nowMoving, color }) => { - const paintPawn = (context, x, y, color, id) =>{ +const Map = ({ pawns, nowMoving, color, rolledNumber }) => { + const [hintPawn, setHintPawn] = useState(); + const paintPawn = (context, x, y, color) =>{ const circle = new Path2D(); circle.arc(x, y, 12, 0, 2 * Math.PI); - context.strokeStyle ='black'; + context.strokeStyle = 'black'; context.stroke(circle); context.fillStyle = color; context.fill(circle); - const currentPawnIndex = pawns.findIndex( pawn => pawn._id === id); - pawns[currentPawnIndex].circle = circle; + return circle; } const canvasRef = useRef(null); const handleCanvasClick = event => { - if(!nowMoving){ + // If hint pawn exist it means that pawn can move + if(hintPawn){ const canvas = canvasRef.current const context = canvas.getContext('2d') const rect = canvas.getBoundingClientRect(), @@ -25,43 +26,89 @@ const Map = ({ pawns, nowMoving, color }) => { y = event.clientY - rect.top; for(const pawn of pawns){ if (context.isPointInPath(pawn.circle, x, y)) { - alert(pawn._id); + setHintPawn(null); } } } } + const getHintPawnPosition = (pawn) => { + /* + Based on color (because specific color have specific base positions) + first if for each colors handle situation when pawn is in base + next if pawn is in the end or will go in there + else if pawn is on map + */ + switch (color){ + case 'red': + if(pawn.position >= 0 && pawn.position <= 3){ + return 16; + } + break; + case 'blue': + if(pawn.position >= 4 && pawn.position <= 7){ + return 55; + } + break; + case 'green': + if(pawn.position >= 8 && pawn.position <= 11){ + return 42; + } + break; + case 'yellow': + if(pawn.position >= 12 && pawn.position <= 15){ + return 29; + } + break; + } + }; const handleMouseMove = event => { - if(!nowMoving){ - const canvas = canvasRef.current - const context = canvas.getContext('2d') + if(nowMoving && rolledNumber){ + const canvas = canvasRef.current; + const context = canvas.getContext('2d'); const rect = canvas.getBoundingClientRect(), x = event.clientX - rect.left, y = event.clientY - rect.top; - document.querySelector("body").style.cursor = "default"; + canvas.style.cursor = "default"; for (const pawn of pawns){ if(pawn.circle){ - // Checks if current mouse location in above canvas pawn and if this pawn is same color as player - if (context.isPointInPath(pawn.circle, x, y) && pawn.color === color) { - document.querySelector("body").style.cursor = "pointer"; + /* + This condition checks if mouse location is: + 1) on pawn + 2) is color of pawn same as player's + 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)) { + canvas.style.cursor = "pointer"; + const pawnPosition = getHintPawnPosition(pawn); + setHintPawn({x: positions[pawnPosition].x, y: positions[pawnPosition].y, color: 'grey'}); break; + }else{ + setHintPawn(null); } } } } - } - - useEffect(() => { + }; + const rerenderCanvas = () => { const canvas = canvasRef.current const context = canvas.getContext('2d') var image = new Image(); image.src = 'https://img-9gag-fun.9cache.com/photo/a8GdpYZ_460s.jpg' image.onload = function() { context.drawImage(image, 0 , 0); - pawns.forEach( pawn => { - paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color, pawn._id); - }) + pawns.forEach( (pawn, index) => { + 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); + } } - }, [pawns]); + } + // Rerender canvas when pawns have changed + useEffect(() => { + rerenderCanvas(); + }, [pawns]); return(