diff --git a/backend/handlers/gameHandler.js b/backend/handlers/gameHandler.js index 174b3af..236e36f 100644 --- a/backend/handlers/gameHandler.js +++ b/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'); - socket.emit('game:skip'); + io.to(req.session.roomId.toString()).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) { @@ -67,7 +65,7 @@ module.exports = (io, socket) => { }); return isMovePossible; }; - + const skip = async () => { await RoomModel.findOne({ _id: req.session.roomId }, (err, room) => { if (room.nextMoveTime >= Date.now()) return err; @@ -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'); - socket.emit('game:skip'); + io.to(req.session.roomId.toString()).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'); }); }); }; diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index 0a25e90..f6860be 100644 --- a/src/components/Gameboard.jsx +++ b/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 ? ( <> - {nowMoving ? : null} + ) : ( diff --git a/src/components/game-board-components/Dice.jsx b/src/components/game-board-components/Dice.jsx index 3b5d011..c4cb9dc 100644 --- a/src/components/game-board-components/Dice.jsx +++ b/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, nowMoving }) => { +const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color }) => { 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 ( -
- {rolledNumber ? ( +
+ {true ? ( {rolledNumber} ) : nowMoving ? ( diff --git a/src/images/dice/1.png b/src/images/dice/1.png index 020ae1e..16fbb49 100644 Binary files a/src/images/dice/1.png and b/src/images/dice/1.png differ diff --git a/src/images/dice/2.png b/src/images/dice/2.png index f29b482..097255a 100644 Binary files a/src/images/dice/2.png and b/src/images/dice/2.png differ diff --git a/src/images/dice/3.png b/src/images/dice/3.png index f8209df..e3e54c9 100644 Binary files a/src/images/dice/3.png and b/src/images/dice/3.png differ diff --git a/src/images/dice/4.png b/src/images/dice/4.png index 4706e68..3613670 100644 Binary files a/src/images/dice/4.png and b/src/images/dice/4.png differ diff --git a/src/images/dice/5.png b/src/images/dice/5.png index f4dd47a..f69b21a 100644 Binary files a/src/images/dice/5.png and b/src/images/dice/5.png differ diff --git a/src/images/dice/6.png b/src/images/dice/6.png index 1db21db..f75e615 100644 Binary files a/src/images/dice/6.png and b/src/images/dice/6.png differ diff --git a/src/index.css b/src/index.css index b385aeb..771d70d 100644 --- a/src/index.css +++ b/src/index.css @@ -17,10 +17,9 @@ canvas { border-radius: 15px; border: 2px solid black; } -.dice-container { - position: absolute; - top: 30%; - left: 20%; +.dice-container > img { + width: 50px; + height: 50px; } .navbar-container { display: flex;