Fix Game Page Functionality

backend/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../app.ts","../config.ts","../index.ts","../controller/auth/login.ts","../controller/auth/signup.ts","../db/index.ts","../middleware/authenticationJWT.ts","../route/auth.ts","../zod/schema.ts","../zod/types.ts"],"errors":true,"version":"5.8.3"}
+{"root":["../app.ts","../config.ts","../index.ts","../controller/auth/login.ts","../controller/auth/signup.ts","../db/index.ts","../middleware/authenticationJWT.ts","../route/auth.ts","../src/generated/prisma/default.d.ts","../src/generated/prisma/edge.d.ts","../src/generated/prisma/index.d.ts","../src/generated/prisma/wasm.d.ts","../src/generated/prisma/runtime/index-browser.d.ts","../src/generated/prisma/runtime/library.d.ts","../zod/schema.ts","../zod/types.ts"],"version":"5.7.3"}

frontend/src/component/ChessBoard.tsx

@@ -19,6 +19,7 @@ const ChessBoard = ({
   boardFEN,
   disable,
   candidates,
+  squareSize,
 }: ChessBoardProps) => {
   const [promotion, setPromotion] = useState<{
     file: number;
@@ -29,7 +30,13 @@ const ChessBoard = ({
   const board = fenToBoard(boardFEN);
 
   return (
-    <div className="w-full h-full relative">
+    <div
+      style={{
+        width: `${squareSize}px`,
+        height: `${squareSize}px`,
+        position: "relative",
+      }}
+    >
       {promotion.piece ? (
         <Promotion
           file={orientation == "w" ? promotion.file : 7 - promotion.file}

frontend/src/component/chessboard/Piece.tsx

@@ -27,7 +27,7 @@ const PieceComponent = ({
   };
 
   const onClick: React.MouseEventHandler<HTMLDivElement> = (
-    _e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    // _e: React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
     actPiece();
   };

frontend/src/component/chessboard/Pieces.tsx

@@ -91,7 +91,7 @@ const Pieces = ({
                 turn={turn}
                 piece={piece}
                 square={board[rowI][colI]!.square}
-                onActive={!disable ? onActive : (_square) => {}}
+                onActive={!disable ? onActive : () => {}}
               />
             );
           } else {

frontend/src/features/game/component/GameBoard.tsx

@@ -7,7 +7,7 @@ import ChessBoard from "../../../component/ChessBoard";
 import {
   generateCandidates,
   setActivePiece,
-} from "../../../store/features/playGameSlice";
+} from "../../../store/features/gameSlice";
 import { ActivePiece, Color } from "../../../types/board";
 import { defaultBoardFEN } from "../../../utils/constant";
 import { GameBoardProps } from "../../../types/game";
@@ -16,33 +16,35 @@ const GameBoard = ({
   onMove,
   orientation, //TODO: may be we can make this global state (game)
   turn,
+  squareSize,
 }: GameBoardProps) => {
-  const playGame = useSelector((state: RootState) => state.playGame.value);
-  const dispach = useDispatch();
+  const playGame = useSelector((state: RootState) => state.game.value); //TODO: update this with custom selector
+  const dispatch = useDispatch();
 
   useEffect(() => {
     if (playGame?.activePiece) {
-      dispach(
+      dispatch(
         generateCandidates({
           square: playGame.activePiece.square,
         }),
       ); //TODO: change this to global state (play game state)
     }
-  }, [playGame?.activePiece]);
+  }, [playGame?.activePiece, dispatch]);
 
   return (
     <ChessBoard
       onMove={onMove}
       onActive={(active: ActivePiece) => {
         //TODO: make type for this
-        dispach(setActivePiece({ activePiece: active })); //TODO: write this in different place
+        dispatch(setActivePiece({ activePiece: active as any })); //TODO: write this in different place
       }}
-      active={playGame?.activePiece || null}
+      active={playGame?.activePiece as any || null}
       orientation={orientation == "w" ? Color.WHITE : Color.BLACK}
       turn={turn == "w" ? Color.WHITE : Color.BLACK}
       boardFEN={playGame?.boardFEN || defaultBoardFEN}
       disable={false}
       candidates={playGame?.candidates || []}
+      squareSize={squareSize}
     />
   );
 };

frontend/src/features/game/component/GameEnd.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../store/store";
+import { PlayButton } from "../../../component/ui/playButton";
+import { INIT_GAME } from "../../../utils/messages";
+
+interface GameEndProps {
+  socket: WebSocket | null;
+}
+
+const GameEnd: React.FC<GameEndProps> = ({ socket }) => {
+  const game = useSelector((state: RootState) => state.game.value);
+
+  if (!game?.gameEnd || !socket) {
+    return null;
+  }
+
+  const getResultText = () => {
+    switch (game.gameEnd) {
+      case "white_wins":
+        return "White Wins!";
+      case "black_wins":
+        return "Black Wins!";
+      case "draw":
+        return "Draw";
+      default:
+        return "Game Over";
+    }
+  };
+
+  const getResultIcon = () => {
+    switch (game.gameEnd) {
+      case "white_wins":
+        return "👑";
+      case "black_wins":
+        return "👑";
+      case "draw":
+        return "🤝";
+      default:
+        return "🏁";
+    }
+  };
+
+  const getResultDescription = () => {
+    const reason = game.gameEndReason;
+
+    if (game.gameEnd === "white_wins" || game.gameEnd === "black_wins") {
+      if (reason === "checkmate") {
+        return `Checkmate • ${game.gameEnd === "white_wins" ? "White" : "Black"} is victorious`;
+      }
+      return `${game.gameEnd === "white_wins" ? "White" : "Black"} wins`;
+    }
+
+    if (game.gameEnd === "draw") {
+      switch (reason) {
+        case "stalemate":
+          return "Stalemate • Game drawn";
+        case "repetition":
+          return "Threefold repetition • Game drawn";
+        case "insufficient_material":
+          return "Insufficient material • Game drawn";
+        case "50_move_rule":
+          return "50-move rule • Game drawn";
+        default:
+          return "Game drawn";
+      }
+    }
+
+    return "Game finished";
+  };
+
+  const handleNewGame = () => {
+    socket.send(
+      JSON.stringify({
+        type: INIT_GAME,
+      })
+    );
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+      <div className="bg-rightsection border-2 border-background rounded-lg p-8 max-w-md w-full mx-4 text-center">
+        <div className="text-6xl mb-4">{getResultIcon()}</div>
+        <h2 className="text-2xl font-bold text-white mb-2">{getResultText()}</h2>
+        <p className="text-gray-300 mb-6">{getResultDescription()}</p>
+
+        <div className="space-y-3">
+          <PlayButton onClick={handleNewGame}>
+            New Game
+          </PlayButton>
+          <button 
+            className="w-full py-2 px-4 bg-transparent border border-gray-500 text-gray-300 rounded hover:bg-gray-700 transition-colors"
+            onClick={() => {
+              // Could implement analysis mode or other features here
+              console.log("Analysis clicked");
+            }}
+          >
+            Analyze Game
+          </button>
+        </div>
+
+        {/* Game stats could be added here */}
+        <div className="mt-6 pt-4 border-t border-gray-600 text-sm text-gray-400">
+          <div className="flex justify-between">
+            <span>{game.player1.username}</span>
+            <span>vs</span>
+            <span>{game.player2.username}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GameEnd;

frontend/src/features/game/component/RightSection.tsx

@@ -21,9 +21,7 @@ enum SELECTED {
 }
 
 const RightSection: React.FC<RightSectionProps> = ({ socket }) => {
-  const moves = useSelector(
-    (state: RootState) => state.playGame.value?.history,
-  );
+  const moves = useSelector((state: RootState) => state.game.value?.history);
   const [selected, setSelected] = useState(SELECTED.PLAY);
   if (!moves) {
     return (
@@ -49,9 +47,8 @@ const RightSection: React.FC<RightSectionProps> = ({ socket }) => {
       {/* Header Navigation */}
       <div className="flex justify-center gap-1 py-1 border-b border-background">
         <button
-          className={`flex flex-col items-center justify-center px-3 py-2 w-15 hover:bg-dark-button ${
-            selected == SELECTED.PLAY ? "bg-background" : ""
-          }`}
+          className={`flex flex-col items-center justify-center px-3 py-2 w-15 hover:bg-dark-button ${selected == SELECTED.PLAY ? "bg-background" : ""
+            }`}
           onClick={() => {
             setSelected(SELECTED.PLAY);
           }}
@@ -68,9 +65,8 @@ const RightSection: React.FC<RightSectionProps> = ({ socket }) => {
           <span className="text-[0.7rem] w-full ">Play</span>
         </button>
         <button
-          className={`flex flex-col items-center justify-center px-3 py-2 w-15 hover:bg-dark-button  ${
-            selected == SELECTED.NEWGAME ? "bg-background" : ""
-          }`}
+          className={`flex flex-col items-center justify-center px-3 py-2 w-15 hover:bg-dark-button  ${selected == SELECTED.NEWGAME ? "bg-background" : ""
+            }`}
           onClick={() => {
             setSelected(SELECTED.NEWGAME);
           }}

frontend/src/features/game/component/leftGameSection.tsx

@@ -46,28 +46,25 @@ export function GameLeftSection({
             }}
             className={`bg-navbar`}
           >
-            <ChessProfileTimer />
-          </div>
-          <div
-            style={{
-              width: `${squareSize}px`,
-              height: `${squareSize}px`,
-            }}
-          >
-            <GameBoard
-              onMove={onMove}
-              orientation={turn || Color.WHITE} //TODO: make other state for orientation
-              turn={turn || Color.WHITE}
+            <ChessProfileTimer
+              color={turn == Color.WHITE ? Color.BLACK : Color.WHITE}
             />
           </div>
+
+          <GameBoard
+            onMove={onMove}
+            orientation={turn || Color.WHITE} //TODO: make other state for orientation
+            turn={turn || Color.WHITE}
+            squareSize={squareSize}
+          />
           <div
             style={{
               width: `${squareSize}px`,
               height: "50px",
             }}
             className={`bg-navbar`}
           >
-            <ChessProfileTimer />
+            <ChessProfileTimer color={turn || Color.WHITE} />
           </div>
         </div>
       </div>

frontend/src/features/game/component/profileTimer.tsx

@@ -1,69 +1,36 @@
 //TODO: change color / make color for this
 
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { User, Clock } from "lucide-react";
 import { Color } from "../../../types/board";
-
+import { useTimer } from "../hooks/useTimer";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../store/store";
 interface ChessProfileTimerProps {
-  username?: string;
-  rating?: number;
-  initialTime?: number; // in seconds
-  avatarUrl?: string;
-  isActive?: boolean;
   color: Color;
-  onTimeUp?: () => void;
 }
 
 export const ChessProfileTimer: React.FC<ChessProfileTimerProps> = ({
-  username = "LShaViR",
-  rating = 1398,
-  initialTime = 600, // 10:00 in seconds
-  avatarUrl,
-  color = Color.WHITE,
-  isActive = false,
-  onTimeUp,
+  color,
 }) => {
-  const [timeLeft, setTimeLeft] = useState(initialTime);
-  const [isRunning, setIsRunning] = useState(false);
-
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-
-    if (isRunning && timeLeft > 0) {
-      interval = setInterval(() => {
-        setTimeLeft((prev) => {
-          if (prev <= 1) {
-            setIsRunning(false);
-            onTimeUp?.();
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-    }
-
-    return () => clearInterval(interval);
-  }, [isRunning, timeLeft, onTimeUp]);
-
+  const { timer } = useTimer(color);
+  const { username, avatarUrl, rating } = useSelector((state: RootState) =>
+    color == Color.WHITE
+      ? state.game.value?.player1
+      : state.game.value?.player2,
+  ) || { username: "unknown", avatarUrl: "", rating: 800 };
   const formatTime = (seconds: number): string => {
     const mins = Math.floor(seconds / 60);
     const secs = seconds % 60;
     return `${mins}:${secs.toString().padStart(2, "0")}`;
   };
 
-  const getRatingBars = (rating: number): number => {
-    if (rating >= 2000) return 4;
-    if (rating >= 1600) return 3;
-    if (rating >= 1200) return 2;
-    return 1;
-  };
-
   return (
     <div className=" text-white px-3 py-2 h-full flex items-center justify-between w-full max-w-2xl">
       {/* Left side - Profile */}
       <div className="flex items-center space-x-2">
         {/* Avatar */}
-        <div className="w-6 h-6 bg-gray-500 rounded-full flex items-center justify-center overflow-hidden">
+        <div className="w-6 h-6 bg-gray-500 rounded-xs flex items-center justify-center overflow-hidden">
           {avatarUrl ? (
             <img
               src={avatarUrl}
@@ -94,7 +61,7 @@ export const ChessProfileTimer: React.FC<ChessProfileTimerProps> = ({
             className={color == Color.WHITE ? "text-gray-700" : "text-gray-100"}
           />
           <span className="font-mono text-sm font-semibold">
-            {formatTime(timeLeft)}
+            {formatTime(timer)}
           </span>
         </div>
       </div>

frontend/src/features/game/hooks/useMessageHandler.ts

@@ -1,11 +1,14 @@
 import { useDispatch } from "react-redux";
 import { messageHandler } from "../utils/messageHandler";
 
-const useMessageHandler = (socket: WebSocket) => {
+const useMessageHandler = (socket: WebSocket | null) => {
   const dispatch = useDispatch();
-  socket.onmessage = async (message) => {
-    await messageHandler(dispatch, message.data);
-  };
+
+  if (socket) {
+    socket.onmessage = async (message) => {
+      messageHandler(dispatch, message.data);
+    };
+  }
 
   return messageHandler;
 };