Feat: Added Timing for each move, Spectator Feature, Chat Feature , Review Page and updated the ui for it

README.md

@@ -19,19 +19,18 @@ Let's keep it simple
 
 ## Setting it up locally
 
- - Clone the repo
- - Copy over .env.example over to .env everywhere
- - Update .env
-    - Postgres DB Credentials
-    - Github/Google Auth credentials
- - npm install
- - Start ws server
-    - cd apps/ws
-    - npm run dev
- - Start Backend
-    - cd apps/backend
-    - npm run dev
- - Start frontend
-    - cd apps/frontend
-    - npm run dev
-
+- Clone the repo
+- Copy over .env.example over to .env everywhere
+- Update .env
+  - Postgres DB Credentials
+  - Github/Google Auth credentials
+- npm install
+- Start ws server
+  - cd apps/ws
+  - npm run dev
+- Start Backend
+  - cd apps/backend
+  - npm run dev
+- Start frontend
+  - cd apps/frontend
+  - npm run dev

apps/backend/src/router/v1.ts

@@ -1,9 +1,47 @@
 import { Router } from 'express';
+import { db } from '../db';
 
 const v1Router = Router();
 
+export const IN_PROGRESS = 'IN_PROGRESS';
+
 v1Router.get('/', (req, res) => {
   res.send('Hello, World!');
 });
 
+v1Router.get('/games', async (req, res) => {
+  try {
+    const games = await db.game.findMany({
+      include: {
+        blackPlayer: true,
+        whitePlayer: true,
+      },
+      where: {
+        status: IN_PROGRESS,
+      },
+    });
+    res.json(games);
+  } catch (e: any) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
+v1Router.get('/games/:gameId', async (req, res) => {
+  try {
+    const game = await db.game.findUnique({
+      include: {
+        blackPlayer: true,
+        whitePlayer: true,
+        moves: true,
+      },
+      where: {
+        id: req.params.gameId,
+      },
+    });
+    res.json(game);
+  } catch (e: any) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
 export default v1Router;

apps/frontend/src/App.tsx

@@ -7,6 +7,8 @@ import { Suspense } from 'react';
 import { RecoilRoot } from 'recoil';
 import { useUser } from '@repo/store/useUser';
 import { Loader } from './components/Loader';
+import { Spectate } from './screens/Spectate';
+import { Review } from './screens/Review';
 import { Layout } from './layout';
 
 function App() {
@@ -27,13 +29,15 @@ function AuthApp() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Layout children={<Landing />} />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/game/:gameId" element={<Layout children={<Game />} />} />
         <Route
-          path="/login"
-          element={<Login />}
+          path="/spectate/:gameId"
+          element={<Layout children={<Spectate />} />}
         />
         <Route
-          path="/game/:gameId"
-          element={<Layout children={<Game />} />}
+          path="/review/:gameId"
+          element={<Layout children={<Review />} />}
         />
       </Routes>
     </BrowserRouter>

apps/frontend/src/components/ChessBoard.tsx

@@ -10,6 +10,7 @@ import useWindowSize from '../hooks/useWindowSize';
 import Confetti from 'react-confetti';
 import MoveSound from '/move.wav';
 import CaptureSound from '/capture.wav';
+import { useNavigate } from 'react-router-dom';
 
 import { useRecoilState } from 'recoil';
 
@@ -52,6 +53,7 @@ export const ChessBoard = memo(({
   board,
   socket,
   setBoard,
+  setMoveResult
 }: {
   myColor: Color;
   gameId: string;
@@ -72,6 +74,7 @@ export const ChessBoard = memo(({
     color: Color;
   } | null)[][];
   socket: WebSocket;
+  setMoveResult: React.Dispatch<React.SetStateAction<Move | null>>;
 }) => {
   console.log("chessboard reloaded")
   const { height, width } = useWindowSize();
@@ -102,6 +105,8 @@ export const ChessBoard = memo(({
   const moveAudio = new Audio(MoveSound);
   const captureAudio = new Audio(CaptureSound);
 
+  const Navigate = useNavigate();
+
   const handleMouseDown = (
     e: MouseEvent<HTMLDivElement>,
     squareRep: string,
@@ -212,7 +217,17 @@ export const ChessBoard = memo(({
     <>
       {gameOver && <Confetti />}
       <div className="flex relative">
-        <div className="text-white-200 rounded-md overflow-hidden">
+        <div className="text-white-200 mr-10 rounded-md overflow-hidden">
+          {gameOver && (
+            <div
+              className="cursor-pointer re"
+              onClick={() => {
+                Navigate('/review/' + gameId);
+              }}
+            >
+              Review the Match
+            </div>
+          )}
           {(isFlipped ? board.slice().reverse() : board).map((row, i) => {
             i = isFlipped ? i + 1 : 8 - i;
             return (
@@ -290,6 +305,7 @@ export const ChessBoard = memo(({
                           );
                         } else {
                           try {
+                            const time = new Date(Date.now()).getTime();
                             let moveResult: Move;
                             if (
                               isPromoting(chess, from, squareRepresentation)
@@ -305,30 +321,43 @@ export const ChessBoard = memo(({
                                 to: squareRepresentation,
                               });
                             }
+                            const piece = chess.get(squareRepresentation)?.type;
                             if (moveResult) {
                               moveAudio.play();
 
                               if (moveResult?.captured) {
                                 captureAudio.play();
                               }
-                              setMoves((prev) => [...prev, moveResult]);
+                              setMoveResult(moveResult);
                               setFrom(null);
                               setLegalMoves([]);
                               if (moveResult.san.includes('#')) {
                                 setGameOver(true);
                               }
-                              socket.send(
-                                JSON.stringify({
-                                  type: MOVE,
-                                  payload: {
-                                    gameId,
-                                    move: moveResult,
-                                  },
-                                }),
-                              );
                             }
+                            socket.send(
+                              JSON.stringify({
+                                type: MOVE,
+                                payload: {
+                                  gameId,
+                                  move: {
+                                    from,
+                                    to: squareRepresentation,
+                                    san: moveResult?.san,
+                                    before: moveResult?.before,
+                                    after: moveResult?.after,
+                                    piece,
+                                    // createdAt: myMoveStartTime,
+                                    // timeTaken,
+                                  },
+                                },
+                              }),
+                            );
+                            setFrom(null);
+                            setLegalMoves([]);
+                            setBoard(chess.board());
                           } catch (e) {
-                            console.log('e', e);
+                            console.log(e);
                           }
                         }
                       }}

apps/frontend/src/components/GameEndModal.tsx

@@ -2,19 +2,23 @@ import React, { useState } from 'react';
 import WhiteKing from '../../public/wk.png';
 import BlackKing from '../../public/bk.png';
 import { GameResult, Result } from '@/screens/Game';
+import { useNavigate } from 'react-router-dom';
 
 interface ModalProps {
   blackPlayer?: { id: string; name: string };
   whitePlayer?: { id: string; name: string };
   gameResult: GameResult;
+  gameId: string;
 }
 
 const GameEndModal: React.FC<ModalProps> = ({
   blackPlayer,
   whitePlayer,
   gameResult,
+  gameId,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
+  const Navigate = useNavigate();
 
   const closeModal = () => {
     setIsOpen(false);
@@ -53,6 +57,12 @@ const GameEndModal: React.FC<ModalProps> = ({
     );
   };
 
+  const reviewRedirect = () => {
+    Navigate(`/review/${gameId}`, {
+      replace: false,
+    });
+  };
+
   const getWinnerMessage = (result: Result) => {
     switch (result) {
       case Result.BLACK_WINS:
@@ -76,20 +86,38 @@ const GameEndModal: React.FC<ModalProps> = ({
           <div className="relative rounded-lg shadow-lg bg-gray-800 w-96">
             <div className="px-6 py-8 items-center self-center m-auto">
               <div className="m-auto mb-6">
-                <h2 className={`text-4xl font-bold mb-2 text-yellow-400 text-center text-wrap`}>
-                 {getWinnerMessage(gameResult.result)}  
+                <h2
+                  className={`text-4xl font-bold mb-2 text-yellow-400 text-center text-wrap`}
+                >
+                  {getWinnerMessage(gameResult.result)}
                 </h2>
               </div>
               <div className="m-auto mb-6">
-                <p className="text-xl text-white text-center">by {gameResult.by}</p>
+                <p className="text-xl text-white text-center">
+                  by {gameResult.by}
+                </p>
               </div>
               <div className="flex flex-row justify-between items-center bg-gray-700 rounded-lg px-4 py-6">
-                <PlayerDisplay isWhite={true} player={whitePlayer} gameResult={gameResult.result} />
+                <PlayerDisplay
+                  isWhite={true}
+                  player={whitePlayer}
+                  gameResult={gameResult.result}
+                />
                 <div className="text-white text-2xl font-bold">vs</div>
-                <PlayerDisplay isWhite={false} player={blackPlayer} gameResult={gameResult.result} />
+                <PlayerDisplay
+                  isWhite={false}
+                  player={blackPlayer}
+                  gameResult={gameResult.result}
+                />
               </div>
             </div>
-            <div className="px-6 py-4 bg-gray-900 text-right rounded-b-lg">
+            <div className="px-6 py-4 bg-gray-900 text-right rounded-b-lg gap-2 flex justify-end">
+              <button
+                className="px-6 py-3 text-white bg-red-600 rounded-lg hover:bg-red-700 focus:outline-none"
+                onClick={reviewRedirect}
+              >
+                Review
+              </button>
               <button
                 className="px-6 py-3 text-white bg-red-600 rounded-lg hover:bg-red-700 focus:outline-none"
                 onClick={closeModal}

apps/frontend/src/components/MovesTable.tsx

@@ -1,9 +1,9 @@
 import {
+  TimingMove,
   isBoardFlippedAtom,
   movesAtom,
   userSelectedMoveIndexAtom,
 } from '@repo/store/chessBoard';
-import { Move } from 'chess.js';
 import { useEffect, useRef } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import {
@@ -16,19 +16,39 @@ import {
   RefreshCw,
 } from 'lucide-react';
 
-const MovesTable = () => {
+interface MovesTableProps {
+  newMoves?: TimingMove[];
+}
+
+const MovesTable: React.FC<MovesTableProps> = ({ newMoves }) => {
   const [userSelectedMoveIndex, setUserSelectedMoveIndex] = useRecoilState(
     userSelectedMoveIndexAtom,
   );
   const setIsFlipped = useSetRecoilState(isBoardFlippedAtom);
   const moves = useRecoilValue(movesAtom);
   const movesTableRef = useRef<HTMLInputElement>(null);
-  const movesArray = moves.reduce((result, _, index: number, array: Move[]) => {
-    if (index % 2 === 0) {
-      result.push(array.slice(index, index + 2));
-    }
-    return result;
-  }, [] as Move[][]);
+  let movesArray: TimingMove[][] = [];
+  if (newMoves) {
+    movesArray = newMoves.reduce(
+      (result, _, index: number, array: TimingMove[]) => {
+        if (index % 2 === 0) {
+          result.push(array.slice(index, index + 2));
+        }
+        return result;
+      },
+      [] as TimingMove[][],
+    );
+  } else {
+    movesArray = moves.reduce(
+      (result, _, index: number, array: TimingMove[]) => {
+        if (index % 2 === 0) {
+          result.push(array.slice(index, index + 2));
+        }
+        return result;
+      },
+      [] as TimingMove[][],
+    );
+  }
 
   useEffect(() => {
     if (movesTableRef && movesTableRef.current) {
@@ -39,7 +59,7 @@ const MovesTable = () => {
     }
   }, [moves]);
   return (
-    <div className="text-[#C3C3C0] relative w-full ">
+    <div className="text-[#C3C3C0] relative w-full bg-zinc-800">
       <div
         className="text-sm h-[45vh] max-h-[45vh] overflow-y-auto"
         ref={movesTableRef}
@@ -72,6 +92,9 @@ const MovesTable = () => {
                       }}
                     >
                       <span className="text-[#C3C3C0]">{san}</span>
+                      <p className="text-xs ml-2 mb-2">
+                        {(move.timeTaken / 1000).toString() + 's'}
+                      </p>
                     </div>
                   );
                 })}