added validation for moves

src/components/Gameboard.jsx

@@ -7,7 +7,7 @@ import Navbar from './Navbar';
 const Gameboard = () => {
     // Context data
     const socket = useContext(SocketContext);
-    const player = useContext(PlayerDataContext);
+    const context = useContext(PlayerDataContext);
     // Render data
     const [pawns, setPawns] = useState([]);
     const [players, setPlayers] = useState([]);
@@ -32,7 +32,7 @@ const Gameboard = () => {
         }
     }, [pawns]);
     useEffect(() => {
-        socket.emit('room:data', player.roomId);
+        socket.emit('room:data', context.roomId);
         socket.on('room:data', data => {
             data = JSON.parse(data);
             // Filling navbar with empty player nick container
@@ -42,15 +42,14 @@ const Gameboard = () => {
             // Checks if client is currently moving player by session ID
             const nowMovingPlayer = data.players.find(player => player.nowMoving === true);
             if (nowMovingPlayer) {
-                if (nowMovingPlayer._id === player.playerId) {
+                if (nowMovingPlayer._id === context.playerId) {
                     setNowMoving(true);
                 } else {
                     setNowMoving(false);
                 }
                 setMovingPlayer(nowMovingPlayer.color);
             }
-            const currentPlayer = data.players.find(player => player._id === player.playerId);
-
+            const currentPlayer = data.players.find(player => player._id === context.playerId);
             checkWin();
             setIsReady(currentPlayer.ready);
             setRolledNumber(data.rolledNumber);

src/components/Navbar.jsx

@@ -10,7 +10,7 @@ const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, roll
         <div className='navbar-container'>
             {players.map((player, index) => (
                 <div className={`player-container ${colors[index]}`} key={index}>
-                    <NameContainer player={player} time={time} containerColor={colors[index]} />
+                    <NameContainer player={player} time={time} />
                     <Dice
                         movingPlayer={movingPlayer}
                         rolledNumber={rolledNumber}

src/components/game-board-components/Map.jsx

@@ -6,7 +6,6 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
     const context = useContext(PlayerDataContext);
     const socket = useContext(SocketContext);
     const [hintPawn, setHintPawn] = useState();
-    const [blinking, setBlinking] = useState(false);
     const paintPawn = (context, x, y, color) => {
         const circle = new Path2D();
         circle.arc(x, y, 12, 0, 2 * Math.PI);
@@ -150,7 +149,6 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
                         checkIfPawnCanMove(pawn)
                     ) {
                         const pawnPosition = getHintPawnPosition(pawn);
-                        setBlinking(false);
                         // Checks if pawn can make a move
                         if (pawnPosition) {
                             canvas.style.cursor = 'pointer';
@@ -172,7 +170,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
         image.onload = function () {
             ctx.drawImage(image, 0, 0);
             pawns.forEach((pawn, index) => {
-                if (nowMoving && rolledNumber && blinking && pawn.color === context.color && checkIfPawnCanMove(pawn)) {
+                if (nowMoving && rolledNumber && pawn.color === context.color && checkIfPawnCanMove(pawn)) {
                     pawns[index].circle = paintPawn(
                         ctx,
                         positions[pawn.position].x,
@@ -187,7 +185,6 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
                         pawn.color
                     );
                 }
-                setBlinking(!blinking);
             });
             if (hintPawn) {
                 paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);