Feature added: Exit the game when opponent resigns

frontend/src/constants.js

@@ -1,6 +1,6 @@
 export const SOCKET_EVENTS = {
-    CONNECT:'connect',
-    DISCONNECT:'disconnect',
+    CONNECT: "connect",
+    DISCONNECT: "disconnect",
     CONNECTION: "connection",
     JOIN_ROOM: "join-room",
     JOIN_ROOM_SUCCESS: "join-room-success",
@@ -9,6 +9,7 @@ export const SOCKET_EVENTS = {
     CHESS_MOVE: "move",
     CHESS_OPPONENT_MOVE: "opponent-move",
     USER_JOINED_ROOM: "user-joined-room",
+    USER_RESIGNED: "user-resigned",
 };
 
 export const DISPATCH_EVENTS = {
@@ -17,4 +18,5 @@ export const DISPATCH_EVENTS = {
     CAPTURE_PIECE: "CAPTURE_PIECE",
     JUMP_TO: "JUMP_TO",
     SET_GAME_HISTORY: "SET_GAME_HISTORY",
+    END_GAME: "END_GAME",
 };

frontend/src/context/chess-game-context.jsx

@@ -1,7 +1,7 @@
 import React, { createContext, useReducer, useRef, useState } from 'react'
 import { ChessModified, chessInit } from '../../utils/chess';
 import { DISPATCH_EVENTS } from '../constants';
-const { CAPTURE_PIECE, MOVE_PIECE, SELECT_PIECE, JUMP_TO, SET_GAME_HISTORY } = DISPATCH_EVENTS
+const { CAPTURE_PIECE, MOVE_PIECE, SELECT_PIECE, JUMP_TO, SET_GAME_HISTORY, END_GAME } = DISPATCH_EVENTS
 export const ChessGameContext = createContext();
 // myColor: null, chess: null, chessBoard: null, moveHints: null, selected: null, dispatch: null, handleOpponentMove: null, handleSquareClick: null, getSquareColor: null, isSquareMarked: null, selectPiece: null, handleDrop: null
 
@@ -57,6 +57,10 @@ const reducer = (state, action) => {
                 }
                 return { ...state, chess: newChessObj, chessBoard: newChessObj.getBoard(state.chess.myColor), gameHistory: updatedGameHistory, currentIndex: updatedGameHistory.length - 1 }
             }
+        case END_GAME:
+            {
+                return { ...state, hasGameEnded: true, gameEndedReason: action.val }
+            }
         default:
             return state;
     }
@@ -200,11 +204,15 @@ const ChessGameContextProvider = ({ children }) => {
         dispatch({ type: SET_GAME_HISTORY, val: fetchedGameHistory })
     }
 
+    function endGame(reason) {
+        dispatch({ type: END_GAME, val: reason })
+    }
+
     return (
         <ChessGameContext.Provider value={{
             myColor, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked,
             selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack, setGameHistory,
-            isTimerOn, hasGameEnded, gameEndedReason
+            isTimerOn, hasGameEnded, gameEndedReason,endGame
         }}>
             {children}
             <audio src='/src/assets/move-self.mp3' ref={moveAudioRef} />

frontend/src/pages/Chess/ChessGame.jsx

@@ -9,15 +9,15 @@ import GameHistory from '../../components/GameHistory'
 import Timer from './Timer'
 import { useDisclosure } from '@mantine/hooks'
 import { SOCKET_EVENTS } from '../../constants'
-const { CONNECT, DISCONNECT, CHESS_MOVE, CHESS_OPPONENT_MOVE, CONNECTION, JOIN_ROOM, JOIN_ROOM_ERROR, JOIN_ROOM_SUCCESS, ROOM_FULL, USER_JOINED_ROOM } = SOCKET_EVENTS;
+const { CONNECT, DISCONNECT, CHESS_MOVE, CHESS_OPPONENT_MOVE, USER_RESIGNED, CONNECTION, JOIN_ROOM, JOIN_ROOM_ERROR, JOIN_ROOM_SUCCESS, ROOM_FULL, USER_JOINED_ROOM } = SOCKET_EVENTS;
 
 const ChessGame = () => {
-    const { setGameHistory, isTimerOn, setIsTimerOn, hasGameEnded, gameEndedReason } = useContext(ChessGameContext);
+    const { setGameHistory, isTimerOn, setIsTimerOn, hasGameEnded, gameEndedReason, endGame } = useContext(ChessGameContext);
     const [gameEndedModalOpen, modalFunctions] = useDisclosure(true);
 
     const user = getUserData();
     let username = user.username;
-    let color = localStorage.getItem('myColor')
+    let color = localStorage.getItem('myColor');
     const [hasJoinedRoom, setHasJoinedRoom] = useState(localStorage.getItem('socketid'));
     const [isWaiting, setIsWaiting] = useState(true);
     const roomID = localStorage.getItem('roomID');
@@ -25,6 +25,7 @@ const ChessGame = () => {
     const opponent = localStorage.getItem('opponent');
 
     const exitGame = () => {
+        // cleanup game related data
         localStorage.removeItem('socketid');
         localStorage.removeItem('roomID');
         localStorage.removeItem('opponent');
@@ -34,6 +35,12 @@ const ChessGame = () => {
         navigate('/play/friend');
     }
 
+    const resign = () => {
+        socket.emit(USER_RESIGNED,roomID, username);
+        endGame('RESIGN');
+        exitGame();
+    }
+
     useEffect(() => {
         socket.connect();
         socket.on(CONNECT, () => {
@@ -70,6 +77,14 @@ const ChessGame = () => {
             setIsWaiting(false);
         });
 
+        socket.on(USER_RESIGNED, (roomID, username) => {
+            endGame('RESIGN');
+        })
+
+        return () => {
+            socket.offAny();
+            socket.disconnect()
+        }
     }, []);
 
     if (!hasJoinedRoom) return (
@@ -132,7 +147,7 @@ const ChessGame = () => {
                             <GameHistory />
                         </Flex>
                         <Flex>
-                            <Button onClick={exitGame} color='red'>Exit Game</Button>
+                            <Button onClick={resign} color='red'>Exit Game</Button>
                         </Flex>
                     </Flex>
                 </MediaQuery>