added dice visibility for other players

src/App.js

@@ -20,9 +20,6 @@ function App() {
             setPlayerData(data);
             data.roomId != null ? setRedirect(true) : setRedirect(false);
         });
-        socket.on('uwaga', data => {
-            console.log(data);
-        });
         setPlayerSocket(socket);
     }, []);
 

src/components/Gameboard.jsx

@@ -55,10 +55,10 @@ const Gameboard = () => {
                     setRolledNumber(null);
                     setNowMoving(false);
                 }
+                setMovingPlayer(nowMovingPlayer.color);
             }
             const currentPlayer = data.players.find(player => player._id === context.playerId);
             checkWin();
-            setMovingPlayer(nowMovingPlayer.color);
             setIsReady(currentPlayer.ready);
             setPlayers(data.players);
             setPawns(data.pawns);
@@ -76,11 +76,14 @@ const Gameboard = () => {
         <>
             {players ? (
                 <>
-                    <Navbar players={players} started={started} time={time} isReady={isReady} />
+                    <Navbar
-                    <Dice
+                        players={players}
+                        started={started}
+                        time={time}
+                        isReady={isReady}
+                        movingPlayer={movingPlayer}
                         rolledNumber={rolledNumber}
                         nowMoving={nowMoving}
-                        color={movingPlayer}
                         rolledNumberCallback={rolledNumberCallback}
                     />
                     <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
@@ -93,3 +96,10 @@ const Gameboard = () => {
 };
 
 export default Gameboard;
+/* 
+<Dice
+                        rolledNumber={rolledNumber}
+                        nowMoving={nowMoving}
+                        color={movingPlayer}
+                        rolledNumberCallback={rolledNumberCallback}
+                    />*/

src/components/Navbar.css

@@ -1,14 +1,29 @@
+.red {
+    position: relative;
+    left: 176px;
+}
 .yellow {
     position: relative;
-    left: 38px;
+    flex-direction: row-reverse;
+    right: 170px;
 }
 .blue {
     position: relative;
+    right: 28px;
     top: 538px;
-    right: 114px;
 }
 .green {
     position: relative;
+    flex-direction: row-reverse;
     top: 538px;
-    left: 152px;
+    left: 36px;
+}
+.player-container {
+    display: flex;
+}
+.dice-container {
+    margin-left: 20px;
+    margin-right: 20px;
+    width: 50px;
+    height: 50px;
 }

src/components/Navbar.jsx

@@ -1,14 +1,24 @@
 import React from 'react';
+import Dice from './game-board-components/Dice';
 import NameContainer from './navbar-components/NameContainer';
 import ReadyButton from './navbar-components/ReadyButton';
 import './Navbar.css';
 
-const Navbar = ({ players, started, time, isReady }) => {
+const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, rolledNumberCallback, movingPlayer }) => {
     const colors = ['red', 'blue', 'green', 'yellow'];
     return (
         <div className='navbar-container'>
             {players.map((player, index) => (
-                <NameContainer key={index} player={player} color={colors[index]} time={time} />
+                <div className={`player-container ${colors[index]}`} key={index}>
+                    <NameContainer player={player} color={colors[index]} time={time} />
+                    <Dice
+                        movingPlayer={movingPlayer}
+                        rolledNumber={rolledNumber}
+                        nowMoving={nowMoving}
+                        color={colors[index]}
+                        rolledNumberCallback={rolledNumberCallback}
+                    />
+                </div>
             ))}
             {started ? null : <ReadyButton isReady={isReady} />}
         </div>

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

@@ -6,7 +6,8 @@ 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, rolledNumber, nowMoving, color, movingPlayer }) => {
     const socket = useContext(SocketContext);
     const [images] = useState([one, two, three, four, five, six]);
     const handleRoll = () => {
@@ -19,10 +20,12 @@ const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color }) => {
     }, []);
     return (
         <div className={`dice-container dice-${color}`}>
-            {true ? (
+            {movingPlayer === color ? (
+                rolledNumber ? (
                     <img src={images[rolledNumber - 1]} alt={rolledNumber} width='100' height='100' />
                 ) : nowMoving ? (
                     <button onClick={handleRoll}> Roll </button>
+                ) : null
             ) : null}
         </div>
     );

src/components/navbar-components/NameContainer.jsx

@@ -20,7 +20,7 @@ const NameContainer = ({ player, time, color }) => {
     }, [countdown]);
     return (
         <div
-            className={`name-container ${color}`}
+            className={`name-container`}
             style={player.ready ? { backgroundColor: color } : { backgroundColor: 'lightgrey' }}
         >
             <p>{player.name}</p>

src/index.css

@@ -49,3 +49,9 @@ canvas {
     height: 20px;
     border-radius: 5px;
 }
+#root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}