Merge pull request #113 from ammar-ahmed22/development

Minor changes before release

README.md

@@ -50,7 +50,7 @@ Client-side and server-side deployment is set-up automatically with `production`
 
 Aesthetic radar charts created for skills using [recharts](https://recharts.org/en-US)
 
-## 🚧 Roadmap
+<!-- ## 🚧 Roadmap
 
 ### Feature: Chess Game
 
@@ -72,18 +72,18 @@ Aesthetic radar charts created for skills using [recharts](https://recharts.org/
 - Authentication backend setup complete
 - Authentication frontend complete
 - Game database design complete
-- Creating game, adding moves, querying game API implemented
+- Creating game, adding moves, querying game API implemented -->
 
 ## 🎨 Design Reference
 
-<!-- #### Colors
+#### Colors
 
 | Color             | Hex                                                                |
 | ----------------- | ------------------------------------------------------------------ |
-| Light Mode Primary | ![#a10010](https://via.placeholder.com/10/a10010?text=+&raw=true) #A10010 |
-| Dark Mode Primary | ![#9c414a](https://via.placeholder.com/10/9c414a?text=+&raw=true) #9C414A |
-| Dark Color | ![#1a202c](https://via.placeholder.com/10/1a202c?text=+&raw=true) #1A202C |
-| Light Color| ![#ffffff](https://via.placeholder.com/10/ffffff?text=+&raw=true) #FFFFFF | -->
+| Blue | ![#667EEA](https://placehold.co/15x15/667EEA/667EEA.png) #667EEA |
+| Purple | ![#764BA2](https://placehold.co/15x15/764BA2/764BA2.png) #764BA2 |
+| Dark Color | ![#1A202C](https://placehold.co/15x15/1a202c/1a202c.png) #1A202C |
+| Light Color| ![#FFFFFF](https://placehold.co/15x15/ffffff/ffffff.png) #FFFFFF |
 
 #### Fonts
 
@@ -106,11 +106,11 @@ If you have any feedback, please reach out to me at [email protected]. I
 - [TypeGraphQL](https://typegraphql.com/docs/getting-started.html)
 - [Typegoose](https://typegoose.github.io/typegoose/)
 
-#### Chess (Coming soon...)
+<!-- #### Chess (Coming soon...)
 
 - [JWT Frontend Token Authentication](https://medium.com/ovrsea/token-authentication-with-react-and-apollo-client-a-detailed-example-a3cc23760e9)
 - [GraphQL Authentication](https://www.youtube.com/watch?v=dBuU61ABEDs)
 - [FEN Strings for Chess games](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation)
-- [FEN Generator for testing](http://www.netreal.de/Forsyth-Edwards-Notation/index.php)
+- [FEN Generator for testing](http://www.netreal.de/Forsyth-Edwards-Notation/index.php) -->
 <!-- - [Google Authentication](https://dev.to/sivaneshs/add-google-login-to-your-react-apps-in-10-mins-4del)
 - [Backend Authentication with Google](https://developers.google.com/identity/sign-in/web/backend-auth) -->

src/Router.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { Box } from "@chakra-ui/react";
 
 // Pages
 import Home from "./pages/Home";
 import About from "./pages/About";
 import Blog from "./pages/Blog";
 import Post from "./pages/Post";
+import Arcade from "./pages/Arcade";
+import Game from "./pages/Game";
 // import ChessRouter from "./components/Chess/Routers/ChessRouter";
 
 import ChessRouter from "./chess/ChessRouter";
@@ -60,6 +63,22 @@ const Router: React.FC = () => {
       element: <ChessRouter />,
       children: chessRoutes,
     },
+    {
+      path: '/arcade',
+      element: (
+        <Page activeNav="arcade" pageTitle="Arcade">
+          <Arcade />
+        </Page>
+      )
+    },
+    {
+      path: "/arcade/:game",
+      element: (
+        <Page activeNav="arcade" pageTitle="" >
+          <Game />
+        </Page>
+      )
+    }
   ]);
 
   return <RouterProvider router={router} />;

src/chess/components/Square.tsx

@@ -51,7 +51,7 @@ const Square: React.FC<SquareProps> = ({
       if (board.isInCheck(piece.color)) {
         // if check removers returns empty array (CHECKMATE!)
         updateValidMoves(
-          board.onlyCheckRemovers(rank, file, piece.color, moves) // filter to only moves that remove check
+          board.onlyCheckRemovers(rank, file, piece.color, moves, board) // filter to only moves that remove check
         );
       } else {
         updateValidMoves(moves);

src/chess/contexts/GameContext.tsx

@@ -143,7 +143,7 @@ export const GameProvider: React.FC<GameProviderProps> = ({
   useEffect(() => {
     if (move.moveTo && move.toMove) {
       // swap and update fen
-      const response = FENHelper.executeMove(fen, move.toMove, move.moveTo);
+      const response = FENHelper.executeMove(fen, move.toMove, move.moveTo, boardOpts);
       // console.log(response.fen);
       setFEN(response.fen);
       if (response.take) {

src/chess/game/Board.tsx

@@ -31,7 +31,50 @@ export class Board {
     this.userColor = opts?.userColor ?? "w";
   }
 
-  public getPiece = (rank: number, numberFile: number): BoardMatrixType => {
+  get boardOpts(): BoardOpts {
+    return {
+      colorToMove: this.colorToMove as "w" | "b",
+      castling: this.castling,
+      enPassant: this.enPassant,
+      userColor: this.userColor as "w" | "b",
+      halfMove: this.halfMove,
+      fullMove: this.fullMove,
+      squareSize: this.squareSize
+    }
+  }
+
+  public canCastle = (color: "w" | "b", queenSide: boolean) => {
+    const whiteKing = this.castling[0];
+    const whiteQueen = this.castling[1];
+    const blackKing = this.castling[2];
+    const blackQueen = this.castling[3];
+
+    if (color === "w" && queenSide && whiteQueen === "Q") {
+      return true;
+    }
+
+    if (color === "w" && !queenSide && whiteKing === "K") {
+      return true;
+    }
+
+    if (color === "b" && queenSide && blackQueen === "q") {
+      return true;
+    }
+
+    if (color === "b" && !queenSide && blackKing === "k") {
+      return true;
+    }
+
+    return false;
+  }
+
+  public getPiece = (rank: number, file: number | string): BoardMatrixType => {
+    let numberFile;
+    if (typeof file === "string" ) {
+      numberFile = fileToNumber(file);
+    } else {
+      numberFile = file;
+    }
     const row = 8 - rank;
     const col = numberFile - 1;
 
@@ -118,14 +161,16 @@ export class Board {
     rank: number,
     file: string,
     color: "w" | "b",
-    moves: string[]
+    moves: string[],
+    board: Board
   ): string[] => {
     return moves.filter((move) => {
       const [moveFile, moveRank] = move.split("");
       const simulated = FENHelper.executeMove(
         this.fen,
         { rank, file },
-        { rank: parseInt(moveRank), file: moveFile }
+        { rank: parseInt(moveRank), file: moveFile },
+        board.boardOpts
       );
       const simulatedBoard = new Board(simulated.fen);
       return !simulatedBoard.isInCheck(color);

src/chess/game/FENHelper.ts

@@ -5,6 +5,7 @@ interface MoveExecutionResponse {
   fen: string;
   take: BoardMatrixType;
   matrix: BoardMatrixType[][];
+  boardOpts: BoardOpts;
 }
 
 export class FENHelper {
@@ -99,13 +100,28 @@ export class FENHelper {
   static executeMove = (
     fen: string,
     toMove: IAlgebraic,
-    moveTo: IAlgebraic
+    moveTo: IAlgebraic,
+    boardOpts: BoardOpts
   ): MoveExecutionResponse => {
     const matrix = FENHelper.parseFEN(fen);
     const toMoveIndex = FENHelper.algebraicToIndex(toMove);
     const moveToIndex = FENHelper.algebraicToIndex(moveTo);
 
     const takenPiece = matrix[moveToIndex.row][moveToIndex.col];
+    const movedPiece = matrix[toMoveIndex.row][toMoveIndex.col];
+    const newBoardOpts = { ...boardOpts };
+
+    if (movedPiece && movedPiece.type === "king") {
+      if (movedPiece.color === "w" && newBoardOpts.castling) {
+        newBoardOpts.castling = "--" + newBoardOpts.castling[2] + newBoardOpts.castling[3];
+      } else if (movedPiece.color === "b" && newBoardOpts.castling) {
+        newBoardOpts.castling = newBoardOpts.castling[0] + newBoardOpts.castling[1] + "--";  
+      }
+    }
+
+    if (movedPiece && movedPiece.type === "rook") {
+
+    }
 
     matrix[moveToIndex.row][moveToIndex.col] =
       matrix[toMoveIndex.row][toMoveIndex.col];
@@ -115,6 +131,7 @@ export class FENHelper {
       fen: FENHelper.parseMatrix(matrix),
       take: takenPiece,
       matrix,
+      boardOpts
     };
   };
 }

src/chess/game/Pieces/King.ts

@@ -85,7 +85,8 @@ export class King extends Piece {
       const simulated = FENHelper.executeMove(
         currFen,
         { rank, file },
-        { rank: move.rank, file: numberToFile(move.file) }
+        { rank: move.rank, file: numberToFile(move.file) },
+        board.boardOpts
       );
 
       const simulatedBoard = new Board(simulated.fen);
@@ -137,6 +138,60 @@ export class King extends Piece {
 
     const moves = valid.map((move) => createAlgebraic(move.rank, move.file));
 
+    const firstRank = this.color === "w" ? 1 : 8;
+    if (rank === firstRank && file === "e") {
+      const fullRank = [];
+      for (let i = 1; i < 9; i++) {
+        fullRank.push(board.getPiece(firstRank, i));
+      }
+
+      const queenCorner = fullRank[0];
+      const kingCorner = fullRank[fullRank.length - 1];
+      // Queen-side castle
+      if (queenCorner && queenCorner.type === "rook" && queenCorner.color === this.color && !fullRank[1] && !fullRank[2] && !fullRank[3] && board.canCastle(this.color, true)) {
+
+      }
+
+      // King-side castle
+      if (kingCorner && kingCorner.type === "rook" && kingCorner.color === this.color && !fullRank[8 - 2] && !fullRank[8 - 3] && board.canCastle(this.color, false)) {
+
+      }
+    }
+    // // If kings and rooks have not moved
+    // if (this.color === "w" && rank === 1 && file === "e") {
+    //   const fullRank = [];
+    //   for (let i = 1; i < 9; i++) {
+    //     fullRank.push(board.getPiece(1, i));
+    //   };
+    //   const queenCorner = fullRank[0];
+    //   const kingCorner = fullRank[fullRank.length - 1];
+
+    //   // Queen-side castle
+    //   if (queenCorner && queenCorner.type === "rook" && queenCorner.color === "w" && !fullRank[1] && !fullRank[2] && !fullRank[3]) {
+
+    //   }
+    //   // King-side castle
+    //   if (kingCorner && kingCorner.type === "rook" && kingCorner.color === "w" && !fullRank[8 - 2] && !fullRank[8 - 3]) {
+
+    //   }
+    // }
+
+    // if (this.color === "b" && rank === 8 && file === "e") {
+    //   const fullRank = [];
+    //   for (let i = 1; i < 9; i++) {
+    //     fullRank.push(board.getPiece(8, i));
+    //   }
+    //   const queenCorner = fullRank[0];
+    //   const kingCorner = fullRank[fullRank.length - 1];
+
+    //   // Queen-side castle
+
+    //   // King-side castle
+    // }
+
+
+
+
     if (opts?.validOnly) return this.removeKings(moves, board);
     if (opts?.takesOnly) return this.removeNonTakes(moves, board);
 

src/chess/pages/Home.tsx

@@ -89,7 +89,7 @@ const Home: React.FC = () => {
                 h="37vh"
                 key={game._id}
               >
-                <VStack>
+                <VStack p="3" >
                   <Flex direction="column">
                     <GameProvider playerIDs={game.playerIDs} colorToMove="w">
                       {board.renderDisplay("3vh")}

src/chess/pages/Login.tsx

@@ -13,6 +13,7 @@ import {
   Link,
   Alert,
   AlertIcon,
+  Box
 } from "@chakra-ui/react";
 import { Formik, Field, FormikProps } from "formik";
 import { FaRegEyeSlash, FaRegEye } from "react-icons/fa";
@@ -43,7 +44,7 @@ const Login: React.FC = () => {
 
   useEffect(() => {
     if (!loading && !error && submitted) {
-      if (loc.state.redirect) {
+      if (loc.state?.redirect) {
         navigate(loc.state.redirect);
       } else {
         navigate("/chess/home");
@@ -60,6 +61,7 @@ const Login: React.FC = () => {
         </Alert>
       )}
       <Card w="60%" h="auto">
+        <Box p="5" >
         <Text
           fontSize={{ base: "4xl", lg: "5xl" }}
           fontFamily="heading"
@@ -155,6 +157,7 @@ const Login: React.FC = () => {
             </form>
           )}
         </Formik>
+        </Box>
       </Card>
     </Flex>
   );