edited ready button

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));
                 }
             );
         });

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);

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 (
         <>
-            <Navbar players={players} started={started} time={time} />
+            <Navbar players={players} started={started} time={time} isReady={isReady} />
             {nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
             <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
         </>

src/components/Navbar.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import NameContainer from './navbar-components/NameContainer'
+import NameContainer from './navbar-components/NameContainer';
-import ReadyButton from './navbar-components/ReadyButton'
+import ReadyButton from './navbar-components/ReadyButton';
 
-const Navbar = ({ players, started, time }) => {
+const Navbar = ({ players, started, time, isReady }) => {
-    return(
+    return (
-        <div className = "navbar-container">
+        <div className='navbar-container'>
-            {players.map((player, index) =>
+            {players.map((player, index) => (
-                <NameContainer key = {index} player = {player} time = {time}/>
+                <NameContainer key={index} player={player} time={time} />
-            )}
+            ))}
-            {started ?  null : <ReadyButton/>}
+            {started ? null : <ReadyButton isReady={isReady} />}
         </div>
     );
-}
+};
-export default Navbar;
+export default Navbar;

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 (
         <div className='ready-container'>
-            <Switch onClick={handleCheckboxChange} checked={checked} />
+            <Switch onChange={handleCheckboxChange} checked={checked || false} />
             <label>{checked ? 'I want to play' : 'Im waiting'}</label>
         </div>
     );