added displaying dice to all players

backend/handlers/gameHandler.js

@@ -15,7 +15,7 @@ module.exports = (io, socket) => {
             // Saving session data
             req.session.rolledNumber = rolledNumber;
             req.session.save();
-            socket.emit('game:roll', rolledNumber);
+            io.to(req.session.roomId.toString()).emit('game:roll', rolledNumber);
             const isPossible = await isMovePossible(req.session.roomId, req.session.color, rolledNumber);
             if (!isPossible) {
                 RoomModel.findOne({ _id: req.session.roomId }, (err, room) => {
@@ -34,8 +34,7 @@ module.exports = (io, socket) => {
                     RoomModel.findOneAndUpdate({ _id: req.session.roomId }, room, err => {
                         if (err) return err;
                         io.to(req.session.roomId.toString()).emit('room:data', JSON.stringify(room));
-                        socket.emit('game:move');
+                        io.to(req.session.roomId.toString()).emit('game:skip');
-                        socket.emit('game:skip');
                     });
                 });
             }
@@ -51,7 +50,6 @@ module.exports = (io, socket) => {
     const isMovePossible = async (roomId, playerColor, rolledNumber) => {
         let isMovePossible = false;
         await RoomModel.findOne({ _id: roomId.toString() }, (err, room) => {
-            if (err) return err;
             const playerPawns = room.pawns.filter(pawn => pawn.color === playerColor);
             // Checking each player's pawn
             for (const pawn of playerPawns) {
@@ -86,8 +84,7 @@ module.exports = (io, socket) => {
             RoomModel.findOneAndUpdate({ _id: req.session.roomId }, room, err => {
                 if (err) return err;
                 io.to(req.session.roomId.toString()).emit('room:data', JSON.stringify(room));
-                socket.emit('game:move');
+                io.to(req.session.roomId.toString()).emit('game:skip');
-                socket.emit('game:skip');
             });
         });
     };
@@ -118,7 +115,7 @@ module.exports = (io, socket) => {
             RoomModel.findOneAndUpdate({ _id: req.session.roomId }, room, (err, updatedRoom) => {
                 if (!updatedRoom) return err;
                 io.to(req.session.roomId.toString()).emit('room:data', JSON.stringify(room));
-                socket.emit('game:move');
+                io.to(req.session.roomId.toString()).emit('game:move');
             });
         });
     };

src/components/Gameboard.jsx

@@ -19,6 +19,7 @@ const Gameboard = () => {
     const [nowMoving, setNowMoving] = useState(false);
     const [started, setStarted] = useState(false);
 
+    const [movingPlayer, setMovingPlayer] = useState('red');
     const checkWin = useCallback(() => {
         // Player wins when all pawns with same color are inside end base
         if (pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4) {
@@ -33,6 +34,12 @@ const Gameboard = () => {
     }, [pawns]);
     useEffect(() => {
         socket.emit('room:data', context.roomId);
+        socket.on('game:skip', () => {
+            setRolledNumber(null);
+        });
+        socket.on('game:move', () => {
+            setRolledNumber(null);
+        });
         socket.on('room:data', data => {
             data = JSON.parse(data);
             // Filling navbar with empty player nick container
@@ -51,6 +58,7 @@ const Gameboard = () => {
             }
             const currentPlayer = data.players.find(player => player._id === context.playerId);
             checkWin();
+            setMovingPlayer(nowMovingPlayer.color);
             setIsReady(currentPlayer.ready);
             setPlayers(data.players);
             setPawns(data.pawns);
@@ -69,7 +77,12 @@ const Gameboard = () => {
             {players ? (
                 <>
                     <Navbar players={players} started={started} time={time} isReady={isReady} />
-                    {nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
+                    <Dice
+                        rolledNumber={rolledNumber}
+                        nowMoving={nowMoving}
+                        color={movingPlayer}
+                        rolledNumberCallback={rolledNumberCallback}
+                    />
                     <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
                 </>
             ) : (

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

@@ -6,25 +6,20 @@ import three from '../../images/dice/3.png';
 import four from '../../images/dice/4.png';
 import five from '../../images/dice/5.png';
 import six from '../../images/dice/6.png';
-
+const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color }) => {
-const Dice = ({ rolledNumberCallback, nowMoving }) => {
     const socket = useContext(SocketContext);
-    const [rolledNumber, setRolledNumber] = useState();
     const [images] = useState([one, two, three, four, five, six]);
     const handleRoll = () => {
         socket.emit('game:roll');
     };
     useEffect(() => {
         socket.on('game:roll', number => {
-            const utterance = new SpeechSynthesisUtterance(number);
-            speechSynthesis.speak(utterance);
-            setRolledNumber(number);
             rolledNumberCallback(number);
         });
     }, []);
     return (
-        <div className='dice-container'>
+        <div className={`dice-container dice-${color}`}>
-            {rolledNumber ? (
+            {true ? (
                 <img src={images[rolledNumber - 1]} alt={rolledNumber} width='100' height='100' />
             ) : nowMoving ? (
                 <button onClick={handleRoll}> Roll </button>

src/index.css

@@ -17,10 +17,9 @@ canvas {
     border-radius: 15px;
     border: 2px solid black;
 }
-.dice-container {
+.dice-container > img {
-    position: absolute;
+    width: 50px;
-    top: 30%;
+    height: 50px;
-    left: 20%;
 }
 .navbar-container {
     display: flex;