added useSocketData hook

src/components/Gameboard/Dice/Dice.jsx

@@ -1,38 +0,0 @@
-import React, { useEffect, useContext } from 'react';
-import { SocketContext } from '../../../App';
-import one from '../../../images/dice/1.png';
-import two from '../../../images/dice/2.png';
-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';
-import roll from '../../../images/dice/roll.png';
-
-const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color, movingPlayer }) => {
-    const socket = useContext(SocketContext);
-
-    const images = [one, two, three, four, five, six, roll];
-
-    const handleRoll = () => {
-        socket.emit('game:roll');
-    };
-
-    useEffect(() => {
-        socket.on('game:roll', number => {
-            rolledNumberCallback(number);
-        });
-    }, [socket, rolledNumberCallback]);
-
-    return (
-        <div className={`dice-container dice-${color}`}>
-            {movingPlayer === color ? (
-                rolledNumber ? (
-                    <img src={images[rolledNumber - 1]} alt={rolledNumber} width='100' height='100' />
-                ) : nowMoving ? (
-                    <img src={images[6]} className='roll' alt='roll' width='100' height='100' onClick={handleRoll} />
-                ) : null
-            ) : null}
-        </div>
-    );
-};
-export default Dice;

src/components/Gameboard/Gameboard.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import ReactLoading from 'react-loading';
 import { PlayerDataContext, SocketContext } from '../../App';
+import useSocketData from '../../hooks/useSocketData';
 import Map from './Map/Map';
 import Navbar from '../Navbar/Navbar';
 
@@ -11,7 +12,7 @@ const Gameboard = () => {
     const [pawns, setPawns] = useState([]);
     const [players, setPlayers] = useState([]);
 
-    const [rolledNumber, setRolledNumber] = useState(null);
+    const [rolledNumber, setRolledNumber] = useSocketData('game:roll');
     const [time, setTime] = useState();
     const [isReady, setIsReady] = useState();
     const [nowMoving, setNowMoving] = useState(false);
@@ -48,10 +49,6 @@ const Gameboard = () => {
         });
     }, [socket]);
 
-    const rolledNumberCallback = number => {
-        setRolledNumber(number);
-    };
-
     return (
         <>
             {(players[0] && !started) || (time && started) ? (
@@ -64,7 +61,6 @@ const Gameboard = () => {
                         movingPlayer={movingPlayer}
                         rolledNumber={rolledNumber}
                         nowMoving={nowMoving}
-                        rolledNumberCallback={rolledNumberCallback}
                     />
                     <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
                 </div>

src/components/Navbar/Dice/Dice.jsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { SocketContext } from '../../../App';
+import images from '../../../constants/diceImages';
+
+const Dice = ({ rolledNumber, nowMoving, color, movingPlayer }) => {
+    const socket = useContext(SocketContext);
+
+    const handleRoll = () => {
+        socket.emit('game:roll');
+    };
+
+    return (
+        <div className={`dice-container dice-${color}`}>
+            {movingPlayer === color ? (
+                rolledNumber ? (
+                    <img src={images[rolledNumber - 1]} alt={rolledNumber} width='100' height='100' />
+                ) : nowMoving ? (
+                    <img src={images[6]} className='roll' alt='roll' width='100' height='100' onClick={handleRoll} />
+                ) : null
+            ) : null}
+        </div>
+    );
+};
+export default Dice;

src/components/Navbar/Navbar.css

@@ -7,23 +7,6 @@
 .roll {
     cursor: pointer;
 }
-.ready-container {
-    display: flex;
-    width: 300px;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    flex-flow: row-reverse;
-    background-color: grey;
-    border-radius: 10px;
-    border: 2px solid white;
-}
-.ready-container > label {
-    margin-left: 10px;
-    margin-right: 10px;
-    width: 100px;
-    color: white;
-}
 .player-container {
     display: flex;
     align-items: center;
@@ -52,4 +35,3 @@
     grid-column: 2;
     grid-row: 4;
 }
-/* Styl dla overlay */

src/components/Navbar/Navbar.jsx

@@ -1,29 +1,31 @@
 import React from 'react';
-import Dice from '../Gameboard/Dice/Dice';
+import Dice from './Dice/Dice';
 import NameContainer from './NameContainer/NameContainer';
 import ReadyButton from './ReadyButton/ReadyButton';
 import './Navbar.css';
+import { PLAYER_COLORS } from '../../constants/colors';
 import { useContext } from 'react';
 import { PlayerDataContext } from '../../App';
-const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, rolledNumberCallback, movingPlayer }) => {
+
+const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, movingPlayer }) => {
     const context = useContext(PlayerDataContext);
-    const colors = ['red', 'blue', 'green', 'yellow'];
+
     return (
         <>
             {players.map((player, index) => (
-                <div className={`player-container ${colors[index]}`} key={index}>
+                <div className={`player-container ${PLAYER_COLORS[index]}`} key={index}>
                     <NameContainer player={player} time={time} />
                     <Dice
                         movingPlayer={movingPlayer}
                         rolledNumber={rolledNumber}
                         nowMoving={nowMoving}
-                        color={colors[index]}
-                        rolledNumberCallback={rolledNumberCallback}
+                        color={PLAYER_COLORS[index]}
                     />
-                    {context.color !== player.color || started ? null : <ReadyButton isReady={isReady} />}
+                    {context.color === player.color || (!started && <ReadyButton isReady={isReady} />)}
                 </div>
             ))}
         </>
     );
 };
+
 export default Navbar;

src/constants/diceImages.js

@@ -0,0 +1,11 @@
+import one from '../images/dice/1.png';
+import two from '../images/dice/2.png';
+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';
+import roll from '../images/dice/roll.png';
+
+const diceImages = [one, two, three, four, five, six, roll];
+
+export default diceImages;

src/hooks/useSocketData.js

@@ -0,0 +1,13 @@
+import { useState, useContext } from 'react';
+import { SocketContext } from '../App';
+
+const useSocketData = port => {
+    const socket = useContext(SocketContext);
+    const [data, setData] = useState(null);
+    socket.on(port, data => {
+        setData(data);
+    });
+    return [data, setData];
+};
+
+export default useSocketData;