added handling for end of game

README.md

@@ -1,6 +1,5 @@
 # <center>Online Multiplayer Ludo Game</center>
 
-
 \>\> [Play Online here](www.github.com/wenszel/mern-ludo) <<
 
 \>\> [Watch YouTube Video here](www.github.com/wenszel/mern-ludo) <<
@@ -20,10 +19,15 @@
 -   [Screenshots](#screenshots)
 
 ## About
+
 Ludo Online is a multiplayer web-based implementation of the classic board game Ludo, built using the MERN stack and integrated with SocketIO for real-time communication.
+
 ## Architecture
+
 ![Interface](https://github.com/Wenszel/mern-ludo/blob/main/src/images/architecture.png?raw=true)
+
 ## Tech Stack
+
 Frontend:
 ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)
 ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white)
@@ -42,14 +46,15 @@ Tools:
 -   Hosted in a **Docker** container on **AWS EC2**.
 -   Established CI/CD using **CircleCI**.
 
-
 ## Installation
+
 1.  Download this repository
 2.  Generate your own [mongoDB atlas](https://www.mongodb.com) credential URL. It should looks like this:
 
 ```
 mongodb+srv://madmin:<password>@clustername.mongodb.net/<dbname>?retryWrites=true&w=majority
 ```
+
 3.  Add this URL to the /backend/credentials.js file
 4.  Perform these commands in the main directory:
 
@@ -64,3 +69,7 @@ node server.js
 ## Screenshots
 
 ![Interface](https://github.com/Wenszel/mern-ludo/blob/main/src/images/readme1.png?raw=true)
+
+![Interface](https://github.com/Wenszel/mern-ludo/blob/main/src/images/lobby.png?raw=true)
+
+![Interface](https://github.com/Wenszel/mern-ludo/blob/main/src/images/winner.png?raw=true)

backend/handlers/gameHandler.js

@@ -1,5 +1,5 @@
 const { getRoom, updateRoom } = require('../services/roomService');
-const { sendToPlayersRolledNumber } = require('../socket/emits');
+const { sendToPlayersRolledNumber, sendWinner } = require('../socket/emits');
 const { rollDice, isMoveValid } = require('./handlersFunctions');
 
 module.exports = socket => {
@@ -7,12 +7,18 @@ module.exports = socket => {
 
     const handleMovePawn = async pawnId => {
         const room = await getRoom(req.session.roomId);
+        if (room.winner) return;
         const pawn = room.getPawn(pawnId);
         if (isMoveValid(req.session, pawn, room)) {
             const newPositionOfMovedPawn = pawn.getPositionAfterMove(room.rolledNumber);
             room.changePositionOfPawn(pawn, newPositionOfMovedPawn);
             room.beatPawns(newPositionOfMovedPawn, req.session.color);
             room.changeMovingPlayer();
+            const winner = room.getWinner();
+            if (winner) {
+                room.endGame(winner);
+                sendWinner(room._id.toString(), winner);
+            }
             await updateRoom(room);
         }
     };

backend/handlers/handlersFunctions.js

@@ -1,4 +1,4 @@
-const { sendToPlayersRolledNumber } = require('../socket/emits');
+const { sendToPlayersRolledNumber, sendWinner } = require('../socket/emits');
 
 const rollDice = () => {
     const rolledNumber = Math.ceil(Math.random() * 6);
@@ -8,6 +8,7 @@ const rollDice = () => {
 const makeRandomMove = async roomId => {
     const { updateRoom, getRoom } = require('../services/roomService');
     const room = await getRoom(roomId);
+    if (room.winner) return;
     if (room.rolledNumber === null) {
         room.rolledNumber = rollDice();
         sendToPlayersRolledNumber(room._id.toString(), room.rolledNumber);
@@ -19,6 +20,11 @@ const makeRandomMove = async roomId => {
         room.movePawn(randomPawn);
     }
     room.changeMovingPlayer();
+    const winner = room.getWinner();
+    if (winner) {
+        room.endGame(winner);
+        sendWinner(room._id.toString(), winner);
+    }
     await updateRoom(room);
 };
 

backend/handlers/playerHandler.js

@@ -12,6 +12,14 @@ module.exports = socket => {
         addPlayerToExistingRoom(room, data);
     };
 
+    const handleExit = async () => {
+        req.session.reload(err => {
+            if (err) return socket.disconnect();
+            req.session.destroy();
+            socket.emit('redirect');
+        });
+    };
+
     const handleReady = async () => {
         const room = await getRoom(req.session.roomId);
         room.getPlayer(req.session.playerId).changeReadyStatus();
@@ -45,4 +53,5 @@ module.exports = socket => {
 
     socket.on('player:login', handleLogin);
     socket.on('player:ready', handleReady);
+    socket.on('player:exit', handleExit);
 };

backend/handlers/roomHandler.js

@@ -1,5 +1,5 @@
 const { getRooms, getRoom, updateRoom, createNewRoom } = require('../services/roomService');
-const { sendToOnePlayerRooms, sendToOnePlayerData } = require('../socket/emits');
+const { sendToOnePlayerRooms, sendToOnePlayerData, sendWinner } = require('../socket/emits');
 
 module.exports = socket => {
     const req = socket.request;
@@ -13,6 +13,7 @@ module.exports = socket => {
             await updateRoom(room);
         }
         sendToOnePlayerData(socket.id, room);
+        if (room.winner) sendWinner(socket.id, room.winner);
     };
 
     const handleGetAllRooms = async () => {

backend/models/room.js

@@ -15,6 +15,7 @@ const RoomSchema = new mongoose.Schema({
     timeoutID: Number,
     rolledNumber: Number,
     players: [PlayerSchema],
+    winner: { type: String, default: null },
     pawns: {
         type: [PawnSchema],
         default: () => {
@@ -45,6 +46,7 @@ RoomSchema.methods.beatPawns = function (position, attackingPawnColor) {
 };
 
 RoomSchema.methods.changeMovingPlayer = function () {
+    if (this.winner) return;
     const playerIndex = this.players.findIndex(player => player.nowMoving === true);
     this.players[playerIndex].nowMoving = false;
     if (playerIndex + 1 === this.players.length) {
@@ -87,6 +89,31 @@ RoomSchema.methods.startGame = function () {
     this.timeoutID = setTimeout(makeRandomMove, 15000, this._id.toString());
 };
 
+RoomSchema.methods.endGame = function (winner) {
+    this.timeoutID = null;
+    this.rolledNumber = null;
+    this.nextMoveTime = null;
+    this.players.map(player => (player.nowMoving = false));
+    this.winner = winner;
+    this.save();
+};
+
+RoomSchema.methods.getWinner = function () {
+    if (this.pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4) {
+        return 'red';
+    }
+    if (this.pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4) {
+        return 'blue';
+    }
+    if (this.pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4) {
+        return 'green';
+    }
+    if (this.pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4) {
+        return 'yellow';
+    }
+    return null;
+};
+
 RoomSchema.methods.isFull = function () {
     if (this.players.length === 4) {
         this.full = true;

backend/socket/emits.js

@@ -16,4 +16,14 @@ const sendToOnePlayerRooms = (id, rooms) => {
     socketManager.getIO().to(id).emit('room:rooms', JSON.stringify(rooms));
 };
 
-module.exports = { sendToPlayersData, sendToPlayersRolledNumber, sendToOnePlayerData, sendToOnePlayerRooms };
+const sendWinner = (id, winner) => {
+    socketManager.getIO().to(id).emit('game:winner', winner);
+};
+
+module.exports = {
+    sendToPlayersData,
+    sendToPlayersRolledNumber,
+    sendToOnePlayerData,
+    sendToOnePlayerRooms,
+    sendWinner,
+};

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,7 +14,8 @@ const ServerListTable = ({ rooms, handleJoinClick }) => {
                 </tr>
             </thead>
             <tbody>
-                {rooms.map((room, index) => (
+                {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>
@@ -24,7 +25,8 @@ const ServerListTable = ({ rooms, handleJoinClick }) => {
                                 <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>
             ))}