Fixed merge conflicts

prasuncct · Apr 22, 2024 · 5ae05c0 · 5ae05c0
2 parents ff51ff0 + ec2f106
commit 5ae05c0
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -14,5 +14,5 @@ Let's keep it simple
 1. React for Frontend
 2. Node.js for Backend
 3. Typescript as the language
-4. Saparate Websocket servers for handling real time games
+4. Separate Websocket servers for handling real time games
 5. Redis for storing all moves of a game in a queue
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      href="data:image/x-icon;base64,AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAzMzMADMzMwBmZmYAmZmZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMyIiIiIkAAAxAAAAAAQAADEgAAAAIAAANCAAAAJBM0E0IAAAIRMjBEMwAABBMCIzQ0AAAkIAAjMSQAACAAAABBNCADMAAAAxBDQAMgAAAhABNCAAAAEzEAASQgAAIwMQABEzMgAzIQAAARRDADAxAAAAARECEDAAAAAAAUQUQAAADwAAAA8AAAAfAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAQAAgAEAAMABAADAAwAA4AMAAPgHAAD+BwAA"
+      rel="icon"
+      type="image/x-icon"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chess - Play Chess Online for Free</title>
   </head>

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -14,6 +14,7 @@
     "@repo/ui": "*",
     "chess.js": "^1.0.0-beta.8",
     "react": "^18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "recoil": "^0.7.7"

diff --git a/apps/frontend/src/components/ChessBoard.tsx b/apps/frontend/src/components/ChessBoard.tsx
@@ -7,6 +7,7 @@ import ChessSquare from './chess-board/ChessSquare';
 import NumberNotation from './chess-board/NumberNotation';
 import { drawArrow } from '../utils/canvas';
 import useWindowSize from '../hooks/useWindowSize';
+import Confetti from 'react-confetti';
 import MoveSound from '../../public/move.wav';
 import CaptureSound from '../../public/capture.wav';
 
@@ -88,6 +89,7 @@ export const ChessBoard = ({
     width > height
       ? Math.floor((height - OFFSET) / 8)
       : Math.floor((width - OFFSET) / 8);
+  const [gameOver, setGameOver] = useState(false);
   const moveAudio = new Audio(MoveSound);
   const captureAudio = new Audio(CaptureSound);
 
@@ -152,6 +154,7 @@ export const ChessBoard = ({
 
   return (
     <>
+      {gameOver && <Confetti />}
       <div className="flex relative">
         <div className="text-white-200 mr-10 rounded-md overflow-hidden">
           {(isFlipped ? board.slice().reverse() : board).map((row, i) => {
@@ -216,9 +219,14 @@ export const ChessBoard = ({
                             }
                             if (moveResult) {
                               moveAudio.play();
+
                               if (moveResult?.captured) {
                                 captureAudio.play();
                               }
+
+                              if (moveResult.san.includes('#')) {
+                                setGameOver(true);
+                              }
                             }
                             socket.send(
                               JSON.stringify({
@@ -239,9 +247,10 @@ export const ChessBoard = ({
                               from,
                               to: squareRepresentation,
                             });
+                            const piece=chess.get(squareRepresentation)?.type
                             setMoves((moves) => [
                               ...moves,
-                              { from, to: squareRepresentation },
+                              { from, to: squareRepresentation,piece },
                             ]);
                           } catch (e) {}
                         }

diff --git a/apps/frontend/src/components/MovesTable.tsx b/apps/frontend/src/components/MovesTable.tsx
@@ -1,50 +1,93 @@
+import bb from "../../public/bb.png"
+import bk from "../../public/bk.png"
+import bn from "../../public/bn.png"
+import bq from "../../public/bq.png"
+import br from "../../public/br.png"
+import bp from "../../public/bp.png"
+import wb from "../../public/wb.png"
+import wk from "../../public/wk.png"
+import wn from "../../public/wn.png"
+import wp from "../../public/wp.png"
+import wq from "../../public/wq.png"
+import wr from "../../public/wr.png"
+
 import React, { useState, useEffect } from 'react';
 import { Square } from 'chess.js';
 interface Move {
   from: Square;
   to: Square;
+  piece: String
 }
 
 interface MovesTableProps {
   moves: Move[];
 }
 
+const BlackPiece = {
+  'p': bp,
+  'n': bn,
+  'b': bb,
+  'r': br,
+  'q': bq,
+  'k': bk
+}
+const WhitePieces = {
+  'p': wp,
+  'n': wn,
+  'b': wb,
+  'r': wr,
+  'q': wq,
+  'k': wk
+}
+
 const MovesTable: React.FC<MovesTableProps> = ({ moves }) => {
   const [movesData, setMovesData] = useState<Move[]>([]);
 
   useEffect(() => {
     setMovesData(moves);
   }, [moves]);
-
   return (
     <div className="bg-black">
       <div className="bg-brown-600 rounded shadow">
-        <h2 className="text-lg font-bold mb-4 text-white text-center pt-2 ">
+      <h2 className="text-lg font-bold mb-4 text-white text-center pt-2 ">
           Moves Table
         </h2>
         <div className="overflow-x-auto">
           <table className="w-full border-collapse">
-            <thead>
-              <tr>
-                <th className="px-4 py-2 bg-brown-500 text-white border border-gray-700">
-                  From
-                </th>
-                <th className="px-4 py-2 bg-brown-500 text-white border border-gray-700">
-                  To
-                </th>
-              </tr>
-            </thead>
+
             <tbody>
-              {movesData.map((move, index) => (
+              {Array.from({ length: Math.ceil(movesData.length / 2) }, (_, i) => i).map((_, i) => (
                 <tr
-                  key={index}
-                  className={index % 2 === 0 ? 'bg-brown-600' : 'bg-brown-500'}
+                  key={i}
+                  className={i % 2 === 0 ? "bg-brown-600" : "bg-brown-500"}
                 >
-                  <td className="px-4 py-2 text-white border border-gray-700">
-                    {move.from}
+                  <td className="px-4 py-4 text-white  border-gray-700  w-12 ">
+                    {i + 1 + "."}
+                  </td>
+                  <td className="px-4 py-4 text-white border-gray-700  ">
+                    {movesData[i * 2] && (
+
+                      <>
+                      {console.log(movesData)}
+                        <div className="flex">
+                          <img className="h-4 w-4 mt-1" src={WhitePieces[movesData[i * 2].piece as keyof typeof WhitePieces]} />
+                          {movesData[i * 2].from + "x" + movesData[i * 2].to}
+                        </div>
+
+                      </>
+                    )}
                   </td>
-                  <td className="px-4 py-2 text-white border border-gray-700">
-                    {move.to}
+                  <td className=" py-4 px-6 text-white border-gray-700  ">
+                    {movesData[i * 2 + 1] && (
+                      <>
+                       {console.log(movesData)}
+                        <div className="flex">
+                          <img className="h-4 w-4 mt-1" src={BlackPiece[movesData[i * 2+1].piece as keyof typeof BlackPiece]} />
+                          {movesData[i * 2 + 1].from + "x" + movesData[i * 2 + 1].to}
+                        </div>
+                      </>
+                    )}
+
                   </td>
                 </tr>
               ))}

diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
@@ -25,4 +25,16 @@
   0%, 100% {
     filter: drop-shadow(0px 0px 50px rgba(249, 155, 22, 0.5));
   }
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+      display: none;
+  }
+ /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+}
 }
diff --git a/apps/frontend/src/screens/Game.tsx b/apps/frontend/src/screens/Game.tsx
@@ -26,8 +26,7 @@ export const GAME_TIME = 'game_time';
 const GAME_TIME_MS = 10 * 60 * 1000;
 
 export interface IMove {
-  from: Square;
-  to: Square;
+    from: Square; to: Square; piece: string
 }
 
 const moveAudio = new Audio(MoveSound);
@@ -104,7 +103,8 @@ export const Game = () => {
           }
           moveAudio.play();
           setBoard(chess.board());
-          setMoves((moves) => [...moves, move]);
+          const piece=chess.get(move.to)?.type
+          setMoves(moves => [...moves,{from:move.from,to:move.to,piece}])
           break;
         case GAME_OVER:
           setResult(message.payload.result);
@@ -222,8 +222,10 @@ export const Game = () => {
                 <div>
                   <div className='mb-4'>
                     {started && <div className="flex justify-between">
-                      <UserAvatar name={gameMetadata?.whitePlayer?.name ?? ''} />
-                      {getTimer(player1TimeConsumed)}
+                      <UserAvatar name={user.id === gameMetadata?.whitePlayer?.id
+                          ? gameMetadata?.blackPlayer?.name
+                          : gameMetadata?.whitePlayer?.name ?? ''} />
+                      {getTimer(user.id === gameMetadata?.whitePlayer?.id ? player2TimeConsumed : player1TimeConsumed)}
                     </div>}
                   </div>
                   <div>
@@ -246,13 +248,17 @@ export const Game = () => {
                     </div>
                   </div>
                   {started && <div className="mt-4 flex justify-between">
-                    <UserAvatar name={gameMetadata?.blackPlayer?.name ?? ''} />
-                    {getTimer(player2TimeConsumed)}
+                    <UserAvatar name={user.id === gameMetadata?.blackPlayer?.id
+                      ? gameMetadata?.blackPlayer?.name
+                      : gameMetadata?.whitePlayer?.name ?? ''} />
+                    {getTimer(user.id === gameMetadata?.blackPlayer?.id
+                            ? player2TimeConsumed
+                            : player1TimeConsumed)}
                   </div>}
                 </div>
               </div>
             </div>
-            <div className="col-span-2 bg-brown-500 w-full flex justify-center h-[90vh] overflow-scroll mt-10">
+            <div className="col-span-2 bg-brown-500 w-full flex justify-center h-[90vh] overflow-scroll mt-10 overflow-y-scroll no-scrollbar">
               {!started && (
                 <div className="pt-8">
                   {added ? (