added handling for end of game

src/components/Gameboard/Gameboard.jsx

@@ -4,11 +4,13 @@ import { PlayerDataContext, SocketContext } from '../../App';
 import useSocketData from '../../hooks/useSocketData';
 import Map from './Map/Map';
 import Navbar from '../Navbar/Navbar';
+import Overlay from '../Overlay/Overlay';
+import styles from './Gameboard.module.css';
+import trophyImage from '../../images/trophy.webp';
 
 const Gameboard = () => {
     const socket = useContext(SocketContext);
     const context = useContext(PlayerDataContext);
-
     const [pawns, setPawns] = useState([]);
     const [players, setPlayers] = useState([]);
 
@@ -20,6 +22,8 @@ const Gameboard = () => {
 
     const [movingPlayer, setMovingPlayer] = useState('red');
 
+    const [winner, setWinner] = useState(null);
+
     useEffect(() => {
         socket.emit('room:data', context.roomId);
         socket.on('room:data', data => {
@@ -47,11 +51,18 @@ const Gameboard = () => {
             setTime(data.nextMoveTime);
             setStarted(data.started);
         });
-    }, [socket]);
+
+        socket.on('game:winner', winner => {
+            setWinner(winner);
+        });
+        socket.on('redirect', () => {
+            window.location.reload();
+        });
+    }, [socket, context.playerId, context.roomId, setRolledNumber]);
 
     return (
         <>
-            {(players[0] && !started) || (time && started) ? (
+            {pawns.length === 16 ? (
                 <div className='container'>
                     <Navbar
                         players={players}
@@ -61,12 +72,24 @@ const Gameboard = () => {
                         movingPlayer={movingPlayer}
                         rolledNumber={rolledNumber}
                         nowMoving={nowMoving}
+                        ended={winner !== null}
                     />
                     <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
                 </div>
             ) : (
                 <ReactLoading type='spinningBubbles' color='white' height={667} width={375} />
             )}
+            {winner ? (
+                <Overlay>
+                    <div className={styles.winnerContainer}>
+                        <img src={trophyImage} alt='winner' />
+                        <h1>
+                            1st: <span style={{ color: winner }}>{winner}</span>
+                        </h1>
+                        <button onClick={() => socket.emit('player:exit')}>Play again</button>
+                    </div>
+                </Overlay>
+            ) : null}
         </>
     );
 };

src/components/Gameboard/Gameboard.module.css

@@ -0,0 +1,20 @@
+.winnerContainer {
+    display: flex;
+    flex-direction: column;
+    padding: 40px;
+    width: 300px;
+    height: 250px;
+    background: radial-gradient(circle, rgba(0, 138, 255, 1) 5%, rgba(9, 9, 121, 1) 81%);
+    color: white;
+    border: 1px solid white;
+    border-radius: 8px;
+    margin: 20px;
+    z-index: 2;
+    justify-content: center;
+    text-align: center;
+    cursor: default;
+}
+.winnerContainer > button {
+    align-self: center;
+    width: 200px;
+}