Added timers but it is not stable for now

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

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useRef } from 'react'
+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
@@ -71,6 +71,7 @@ const ChessGameContextProvider = ({ children }) => {
     let myColor = localStorage.getItem('myColor');
     console.log('INSIDE CONTEXT PROVIDER');
     const [{ chess, chessBoard, moveHints, selected, gameHistory, currentIndex }, dispatch] = useReducer(reducer, myColor, chessGameStateInit);
+    const [isTimerOn, setIsTimerOn] = useState(true);
     console.log(gameHistory);
 
 
@@ -111,11 +112,13 @@ const ChessGameContextProvider = ({ children }) => {
             if (!type && selected && marked) {
                 dispatch({ type: MOVE_PIECE, val: { from: selected, to: square } })
                 emitToSocketCallback({ from: selected, to: square })
+                setIsTimerOn(false)
                 captureAudioRef.current.play();
             }
             if (type && marked) {
                 dispatch({ type: CAPTURE_PIECE, val: { from: selected, to: square } })
                 emitToSocketCallback({ from: selected, to: square })
+                setIsTimerOn(false);
                 moveAudioRef.current.play();
             }
         } else {
@@ -130,10 +133,12 @@ const ChessGameContextProvider = ({ children }) => {
             if (chess.get(to)) {
                 dispatch({ type: CAPTURE_PIECE, val: { from: from, to: to } });  // capture piece
                 captureAudioRef.current.play();
+                setIsTimerOn(false)
                 emitToSocketCallback(moveData);
             } else {
                 dispatch({ type: MOVE_PIECE, val: { from: from, to: to } }); // move piece
                 moveAudioRef.current.play();
+                setIsTimerOn(false)
                 emitToSocketCallback(moveData);
             }
         }
@@ -187,7 +192,7 @@ const ChessGameContextProvider = ({ children }) => {
 
     return (
         <ChessGameContext.Provider value={{
-            myColor, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked, selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack, setGameHistory
+            myColor, chessBoard, moveHints, selected, handleOpponentMove, handleSquareClick, getSquareColor, isSquareMarked, selectPiece, handleDrop, gameHistory, jumpTo, getChessBoard, currentIndex, goAhead, goBack, setGameHistory, isTimerOn
         }}>
             {children}
             <audio src='/src/assets/move-self.mp3' ref={moveAudioRef} />

frontend/src/hooks/useCountDown.jsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from 'react'
 
-const useCountDown = (timeLimit) => {
+const useCountDown = (timeLimit,isTimerOn) => {
     const [timeLeft, setTimeLeft] = useState(timeLimit * 60 * 1000);
 
     useEffect(() => {
+        if(!isTimerOn) {
+            return;
+        }
         if (timeLeft > 0) {
             const interval = setInterval(() => {
                 setTimeLeft((prev) => prev - 1000);

frontend/src/pages/Chess/ChessGame.jsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, Flex, Image, Loader, MediaQuery, NavLink, Text, Title } from '@mantine/core'
+import { Avatar, Button, Flex, Group, Image, Loader, MediaQuery, NavLink, Text, Title } from '@mantine/core'
 import React, { useContext, useEffect, useState } from 'react'
 import ChessBoard from '../Chess/ChessBoard'
 import { useNavigate, useParams } from 'react-router-dom'
@@ -6,15 +6,16 @@ import { socket } from '../../socket'
 import { getUserData } from '../../../utils/auth'
 import { ChessGameContext } from '../../context/chess-game-context'
 import GameHistory from '../../components/GameHistory'
+import Timer from './Timer'
 
 const ChessGame = () => {
-    const { gameHistory,setGameHistory } = useContext(ChessGameContext);
+    const { gameHistory, setGameHistory, isTimerOn,setIsTimerOn } = useContext(ChessGameContext);
     const user = getUserData();
     let username = user.username;
     let color = localStorage.getItem('myColor')
     const [hasJoinedRoom, setHasJoinedRoom] = useState(localStorage.getItem('socketid'));
     const [isWaiting, setIsWaiting] = useState(true);
-    const roomID = localStorage.getItem('roomID')
+    const roomID = localStorage.getItem('roomID');
     const navigate = useNavigate();
     const opponent = localStorage.getItem('opponent');
 
@@ -57,7 +58,8 @@ const ChessGame = () => {
         })
 
         socket.on('opponent-move', (data) => {
-            console.log(data)
+            console.log(data);
+            // setIsTimerOn(true);
         })
 
     }, []);
@@ -69,19 +71,27 @@ const ChessGame = () => {
     return (
         <Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
             <Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
-                <NavLink
-                    p="2px"
-                    label={opponent}
-                    icon={<Avatar radius="3px" children={opponent[0].toUpperCase()} />}
-                    description={"description"}
-                />
+                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
+                    <NavLink
+                     style={{width:"500px"}}
+                        p="2px"
+                        label={opponent}
+                        icon={<Avatar radius="3px" children={opponent[0].toUpperCase()} />}
+                        description={"description"}
+                    />
+                    {/* <Timer on={!isTimerOn} /> */}
+                </div>
                 <ChessBoard />
-                <NavLink
-                    p="2px"
-                    label={username}
-                    icon={<Avatar radius="3px" />}
-                    description={"description"}
-                />
+                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
+                    <NavLink
+                     style={{width:"500px"}}
+                        p="2px"
+                        label={username}
+                        icon={<Avatar radius="3px" children={username[0].toUpperCase()} />}
+                        description={"description"}
+                    />
+                    {/* <Timer on={isTimerOn} /> */}
+                </div>
             </Flex>
             <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
                 <Flex maw={450} sx={{

frontend/src/pages/Chess/Timer.jsx

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react'
+import useCountDown from '../../hooks/useCountDown'
+import { Box } from '@mantine/core';
+import { ChessGameContext } from '../../context/chess-game-context';
+
+const Timer = ({ on }) => {
+    const { isTimerOn } = useContext(ChessGameContext)
+    const timeLimit = localStorage.getItem('timeLimit');
+    const [seconds, minutes] = useCountDown(timeLimit, on);
+    return (
+        <Box ff='monospace' sx={{ fontSize: '30px' }}>
+            {minutes}:{seconds}
+        </Box>
+    )
+}
+
+export default Timer