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

src/components/LoginPage/JoinServer/ServersTable/ServersTable.jsx

@@ -14,17 +14,19 @@ const ServerListTable = ({ rooms, handleJoinClick }) => {
                 </tr>
             </thead>
             <tbody>
-                {rooms.map((room, index) => (
-                    <tr key={index}>
-                        <td>{room.private ? <img src={lock} alt='private' /> : null}</td>
-                        <td className={styles.roomName}>{room.name}</td>
-                        <td>{`${room.players.length}/4`}</td>
-                        <td>{room.isStarted ? 'started' : 'waiting'}</td>
-                        <td className={styles.lastColumn}>
-                            <button onClick={() => handleJoinClick(room)}>Join</button>
-                        </td>
-                    </tr>
-                ))}
+                {rooms.map((room, index) => {
+                    return room.started ? null : (
+                        <tr key={index}>
+                            <td>{room.private ? <img src={lock} alt='private' /> : null}</td>
+                            <td className={styles.roomName}>{room.name}</td>
+                            <td>{`${room.players.length}/4`}</td>
+                            <td>{room.isStarted ? 'started' : 'waiting'}</td>
+                            <td className={styles.lastColumn}>
+                                <button onClick={() => handleJoinClick(room)}>Join</button>
+                            </td>
+                        </tr>
+                    );
+                })}
             </tbody>
         </table>
     );

src/components/Navbar/Navbar.jsx

@@ -7,7 +7,7 @@ import { useContext } from 'react';
 import { PlayerDataContext } from '../../App';
 import styles from './Navbar.module.css';
 
-const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, movingPlayer }) => {
+const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, movingPlayer, ended }) => {
     const context = useContext(PlayerDataContext);
 
     const diceProps = {
@@ -21,7 +21,7 @@ const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, movi
             {players.map((player, index) => (
                 <div className={`${styles.playerContainer} ${styles[PLAYER_COLORS[index]]}`} key={index}>
                     <NameContainer player={player} time={time} />
-                    {started ? <Dice playerColor={PLAYER_COLORS[index]} {...diceProps} /> : null}
+                    {started && !ended ? <Dice playerColor={PLAYER_COLORS[index]} {...diceProps} /> : null}
                     {context.color === player.color && !started ? <ReadyButton isReady={isReady} /> : null}
                 </div>
             ))}