updated packages

src/components/Gameboard/Dice/Dice.jsx

@@ -21,7 +21,7 @@ const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color, movingPlay
         socket.on('game:roll', number => {
             rolledNumberCallback(number);
         });
-    }, []);
+    }, [socket, rolledNumberCallback]);
 
     return (
         <div className={`dice-container dice-${color}`}>

src/components/Gameboard/Gameboard.jsx

@@ -19,19 +19,6 @@ const Gameboard = () => {
 
     const [movingPlayer, setMovingPlayer] = useState('red');
 
-    const checkWin = () => {
-        // Player wins when all pawns with same color are inside end base
-        if (pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4) {
-            alert('Red Won');
-        } else if (pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4) {
-            alert('Blue Won');
-        } else if (pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4) {
-            alert('Green Won');
-        } else if (pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4) {
-            alert('Yellow Won');
-        }
-    };
-
     useEffect(() => {
         socket.emit('room:data', context.roomId);
         socket.on('room:data', data => {
@@ -52,7 +39,6 @@ const Gameboard = () => {
                 setMovingPlayer(nowMovingPlayer.color);
             }
             const currentPlayer = data.players.find(player => player._id === context.playerId);
-            checkWin();
             setIsReady(currentPlayer.ready);
             setRolledNumber(data.rolledNumber);
             setPlayers(data.players);

src/components/Gameboard/Map/Map.jsx

@@ -19,9 +19,8 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
         touchableArea.arc(x, y, 12, 0, 2 * Math.PI);
         const image = new Image();
         image.src = pawnImages[color];
-        image.onload = function () {
-            context.drawImage(image, x - 17, y - 14, 35, 30);
-        };
+        // image.onload = function () {
+        context.drawImage(image, x - 17, y - 14, 35, 30);
         return touchableArea;
     };
 
@@ -73,29 +72,30 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             setHintPawn(null);
         }
     };
-    const rerenderCanvas = () => {
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext('2d');
-        const image = new Image();
-        image.src = mapImage;
-        image.onload = function () {
-            ctx.drawImage(image, 0, 0);
-            pawns.forEach((pawn, index) => {
-                pawns[index].touchableArea = paintPawn(
-                    ctx,
-                    positions[pawn.position].x,
-                    positions[pawn.position].y,
-                    pawn.color
-                );
-            });
-            if (hintPawn) {
-                paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
-            }
-        };
-    };
+
     useEffect(() => {
+        const rerenderCanvas = () => {
+            const canvas = canvasRef.current;
+            const ctx = canvas.getContext('2d');
+            const image = new Image();
+            image.src = mapImage;
+            image.onload = function () {
+                ctx.drawImage(image, 0, 0);
+                pawns.forEach((pawn, index) => {
+                    pawns[index].touchableArea = paintPawn(
+                        ctx,
+                        positions[pawn.position].x,
+                        positions[pawn.position].y,
+                        pawn.color
+                    );
+                });
+                if (hintPawn) {
+                    paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
+                }
+            };
+        };
         rerenderCanvas();
-    }, [hintPawn, pawns, rerenderCanvas]);
+    }, [hintPawn, pawns]);
 
     return (
         <canvas

src/components/Gameboard/Map/canPawnMove.js

@@ -1,4 +1,4 @@
-export default (pawn, rolledNumber) => {
+const canPawnMove = (pawn, rolledNumber) => {
     // If is in base
     if ((rolledNumber === 1 || rolledNumber === 6) && pawn.position === pawn.basePos) {
         return true;
@@ -24,3 +24,4 @@ export default (pawn, rolledNumber) => {
         return false;
     }
 };
+export default canPawnMove;

src/components/Gameboard/Map/getPositionAfterMove.js

@@ -1,4 +1,4 @@
-export default (pawn, rolledNumber) => {
+const getPositionAfterMove = (pawn, rolledNumber) => {
     const { position, color } = pawn;
     switch (color) {
         case 'red':
@@ -55,5 +55,9 @@ export default (pawn, rolledNumber) => {
             } else {
                 return position;
             }
+        default:
+            return position;
     }
 };
+
+export default getPositionAfterMove;