diff --git a/backend/handlers/playerHandler.js b/backend/handlers/playerHandler.js index c3f096c..14d5ef1 100644 --- a/backend/handlers/playerHandler.js +++ b/backend/handlers/playerHandler.js @@ -49,10 +49,10 @@ module.exports = (io, socket) => { _id: roomId, }, room, - (err, updatedRoom) => { + err => { if (err) return err; // Sends to all players in room game data - io.to(roomId).emit('room:data', JSON.stringify(updatedRoom)); + io.to(roomId).emit('room:data', JSON.stringify(room)); } ); }); diff --git a/src/App.js b/src/App.js index 6fd0381..fa208b4 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,6 @@ function App() { useEffect(() => { const socket = io('http://localhost:8080', { withCredentials: true }); socket.on('player:data', data => { - console.log(data); data = JSON.parse(data); setPlayerData(data); data.roomId != null ? setRedirect(true) : setRedirect(false); diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index afbe121..9c563a9 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -14,6 +14,7 @@ const Gameboard = () => { // Game logic data const [rolledNumber, setRolledNumber] = useState(null); const [time, setTime] = useState(); + const [isReady, setIsReady] = useState(); const [nowMoving, setNowMoving] = useState(false); const [started, setStarted] = useState(false); @@ -33,7 +34,6 @@ const Gameboard = () => { socket.emit('room:data', context.roomId); socket.on('room:data', data => { data = JSON.parse(data); - //console.log(data); // Filling navbar with empty player nick container while (data.players.length !== 4) { data.players.push({ name: '...' }); @@ -48,7 +48,9 @@ const Gameboard = () => { setNowMoving(false); } } + const currentPlayer = data.players.find(player => player._id === context.playerId); checkWin(); + setIsReady(currentPlayer.ready); setPlayers(data.players); setPawns(data.pawns); setTime(data.nextMoveTime); @@ -63,7 +65,7 @@ const Gameboard = () => { return ( <> - + {nowMoving ? : null} diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 47e5975..5f78dcc 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,15 +1,15 @@ import React from 'react'; -import NameContainer from './navbar-components/NameContainer' -import ReadyButton from './navbar-components/ReadyButton' +import NameContainer from './navbar-components/NameContainer'; +import ReadyButton from './navbar-components/ReadyButton'; -const Navbar = ({ players, started, time }) => { - return( -
- {players.map((player, index) => - - )} - {started ? null : } +const Navbar = ({ players, started, time, isReady }) => { + return ( +
+ {players.map((player, index) => ( + + ))} + {started ? null : }
); -} -export default Navbar; \ No newline at end of file +}; +export default Navbar; diff --git a/src/components/navbar-components/ReadyButton.jsx b/src/components/navbar-components/ReadyButton.jsx index 5600099..abb55aa 100644 --- a/src/components/navbar-components/ReadyButton.jsx +++ b/src/components/navbar-components/ReadyButton.jsx @@ -1,19 +1,20 @@ -import React, { useState, useContext } from 'react'; +import React, { useState, useContext, useEffect, useLayoutEffect } from 'react'; import { SocketContext } from '../../App'; import Switch from '@material-ui/core/Switch'; -const ReadyButton = () => { +const ReadyButton = ({ isReady }) => { const socket = useContext(SocketContext); - const [checked, setChecked] = useState(false); - + const [checked, setChecked] = useState(); const handleCheckboxChange = () => { socket.emit('player:ready'); setChecked(!checked); }; - + useEffect(() => { + setChecked(isReady); + }); return (
- +
);