{"id":15093242,"url":"https://github.com/gaurav-van/chess-game-using-typescript","last_synced_at":"2026-02-24T06:07:49.448Z","repository":{"id":241375526,"uuid":"806641523","full_name":"Gaurav-Van/Chess-Game-Using-TypeScript","owner":"Gaurav-Van","description":"A Chess Game developed using TypeScript and Angular. Play with your friend in the same browser or against a computer which uses Stockfish API","archived":false,"fork":false,"pushed_at":"2024-05-28T18:37:10.000Z","size":298,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-27T12:11:26.171Z","etag":null,"topics":["angular","angular-cli","chess-engine","chess-game","css","directive-angular","html","javascript","stockfish","stockfish-api","stockfish-chess","typescript"],"latest_commit_sha":null,"homepage":"https://chess-game-using-typescript.web.app/Chess-Game-Using-TypeScript/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gaurav-Van.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-27T15:35:33.000Z","updated_at":"2025-01-12T06:38:43.000Z","dependencies_parsed_at":"2024-11-28T22:41:50.442Z","dependency_job_id":"ab474683-fc50-4986-8bec-507a1da4013a","html_url":"https://github.com/Gaurav-Van/Chess-Game-Using-TypeScript","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"9dfa7253f411e26323c07793bfff9ee3af30e6cf"},"previous_names":["gaurav-van/chess-game-using-typescript"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaurav-Van%2FChess-Game-Using-TypeScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaurav-Van%2FChess-Game-Using-TypeScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaurav-Van%2FChess-Game-Using-TypeScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaurav-Van%2FChess-Game-Using-TypeScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gaurav-Van","download_url":"https://codeload.github.com/Gaurav-Van/Chess-Game-Using-TypeScript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244959315,"owners_count":20538624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-cli","chess-engine","chess-game","css","directive-angular","html","javascript","stockfish","stockfish-api","stockfish-chess","typescript"],"created_at":"2024-09-25T11:20:21.713Z","updated_at":"2025-10-24T12:41:45.153Z","avatar_url":"https://github.com/Gaurav-Van.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chess Game Using TypeScript\nA Chess Game Developed using TypeScript and Angular. Play with your friend in the same browser or against a computer which uses Stockfish API\n\n - Play with your Friend in the same browser\n - Play Against Computer which in this case is Stockfish\n - On left we have Move Tracker which tracks every moves and gives you the ability to go back to prev stage\n - On Right we have an option to choose Stockfish level. That pops up when user wants to play against computer.\n - Functionality of Promotion\n\u003chr\u003e\n\nProject Deployed as a web app on firebase: https://chess-game-using-typescript.web.app/Chess-Game-Using-TypeScript/\n\nThis project is not top-tier or perfect, but it’s sufficient for its intended use.\n\n\u003chr\u003e\n\n## Table of Content\n\n| Topics Covered                                                                                             |\n| ---------------------------------------------------------------------------------------------------------- |   \n| [Demo of the Project](#demo-of-the-project)                                                                |\n| [Overview of the Project Model](#overview-of-the-project-model)                                            |\n| [Some Basic Concepts of Angular used in this project](#some-basic-concepts-of-angular-used-in-this-project)|\n| [Functionalities of Some Important Functions](#functionalities-of-some-important-functions)                |\n| [Stockfish API Endpoint](#stockfish-api-endpoint)                                                          |\n| [How to Run it](#how-to-run-it)                                                                            |\n\u003chr\u003e\n\n## Demo of the Project\n\u003ca name=\"Demo of the Project\"\u003e\u003c/a\u003e\n\u003cvideo src=\"https://github.com/Gaurav-Van/Chess-Game-Using-TypeScript/assets/50765800/9c551aa1-01a0-4ef8-a088-3ade1b98bb87\"\u003e\u003c/video\u003e\n\u003cvideo src=\"https://github.com/Gaurav-Van/Chess-Game-Using-TypeScript/assets/50765800/d12002c9-0914-4be2-b956-4e11e16834cc\"\u003e\u003c/video\u003e\n\u003chr\u003e\n\n## Overview of the Project Model\n\n\u003cimg src=\"https://github.com/Gaurav-Van/Chess-Game-Using-TypeScript/assets/50765800/abdf2a21-6822-4200-8717-4ff6e90f5518\" height=400 width=900\u003e\n\n### Forsyth–Edwards Notation (FEN)\n\nForsyth–Edwards Notation (FEN) is a standard notation used to describe a particular board position of a chess game. It allows a game to be restarted from any given position by providing all necessary information in a concise format.\n\n### Purpose\nFEN provides a way to describe a chess position in a single line of text using ASCII characters. This notation is essential for recording game positions and resuming play from a specific point. However, FEN does not include information about threefold repetition or draw offers; for these, a different format like Extended Position Description (EPD) is needed.\n\n### FEN Format\nA FEN string consists of six fields, each separated by a space:\n\n1. **Piece Placement Data**: Describes the position of all pieces on the board.\n2. **Active Color**: Indicates which player is to move next.\n3. **Castling Availability**: Shows if castling is available for either side.\n4. **En Passant Target Square**: Specifies the target square for en passant capture, if applicable.\n5. **Halfmove Clock**: Counts the number of halfmoves since the last capture or pawn move.\n6. **Fullmove Number**: Indicates the fullmove number in the game.\n\n### Detailed Breakdown\n\n1. **Piece Placement Data**:\n   - The board is divided into ranks (rows) starting from rank 8 to rank 1.\n   - Each rank is separated by a slash (\"/\").\n   - Pieces are represented by letters: uppercase for White (P, N, B, R, Q, K) and lowercase for Black (p, n, b, r, q, k).\n   - Consecutive empty squares are denoted by digits 1 to 8.\n\n2. **Active Color**:\n   - \"w\" indicates White to move.\n   - \"b\" indicates Black to move.\n\n3. **Castling Availability**:\n   - \"-\" means no castling is available.\n   - \"K\" means White can castle kingside.\n   - \"Q\" means White can castle queenside.\n   - \"k\" means Black can castle kingside.\n   - \"q\" means Black can castle queenside.\n\n4. **En Passant Target Square**:\n   - Specifies the square over which a pawn has moved two squares, making an en passant capture possible.\n   - If no en passant target exists, this is \"-\".\n\n5. **Halfmove Clock**:\n   - Counts the number of halfmoves (plies) since the last pawn move or capture.\n   - Used for enforcing the fifty-move rule.\n\n6. **Fullmove Number**:\n   - Starts at 1 and increments after each Black move.\n\n### Examples\n\n### Starting Position\n```\nrnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1\n```\n\n### After 1.e4\n```\nrnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1\n```\n\n### After 1...c5\n```\nrnbqkbnr/pp1ppppp/8/2p5/4P3/8/PPPP1PPP/RNBQKBNR w KQkq c6 0 2\n```\n\n### After 2.Nf3\n```\nrnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R b KQkq - 1 2\n```\n\u003chr\u003e\n\n## Some Basic Concepts of Angular used in this project\n\n### Angular Directives\n\nAngular directives are special markers in the DOM that tell Angular to do something with a DOM element (e.g., apply behavior or transformation). Directives can be categorized into three types: **Component Directives**, **Structural Directives**, and **Attribute Directives**.\n\n### Component Directives\nComponent directives are the most common type, created with the `@Component` decorator.\n\n### Example:\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: '\u003ch1\u003eHello, World!\u003c/h1\u003e'\n})\nexport class ExampleComponent { }\n```\n- **selector**: Specifies the tag name for the component.\n- **template**: Defines the HTML template for the component.\n\n### Structural Directives\nStructural directives change the DOM layout by adding or removing elements. Common structural directives are `*ngIf`, `*ngFor`, and `*ngSwitch`.\n\n### `*ngIf`:\nConditionally includes a template based on the value of an expression.\n```html\n\u003cdiv *ngIf=\"isVisible\"\u003eVisible Content\u003c/div\u003e\n```\n\n### `*ngFor`:\nRepeats a template for each item in a list.\n```html\n\u003cul\u003e\n  \u003cli *ngFor=\"let item of items\"\u003e{{ item }}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### `*ngSwitch`:\nSwitches between alternative views.\n```html\n\u003cdiv [ngSwitch]=\"value\"\u003e\n  \u003cp *ngSwitchCase=\"'A'\"\u003eCase A\u003c/p\u003e\n  \u003cp *ngSwitchCase=\"'B'\"\u003eCase B\u003c/p\u003e\n  \u003cp *ngSwitchDefault\u003eDefault Case\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Attribute Directives\nAttribute directives change the appearance or behavior of an element, component, or another directive. Common attribute directives are `ngClass`, `ngStyle`, and custom attribute directives.\n\n### `ngClass`:\nDynamically adds or removes CSS classes.\n```html\n\u003cdiv [ngClass]=\"{'active': isActive, 'disabled': isDisabled}\"\u003eStyled Content\u003c/div\u003e\n```\n\n### `ngStyle`:\nDynamically sets inline styles.\n```html\n\u003cdiv [ngStyle]=\"{'color': color, 'font-size': fontSize + 'px'}\"\u003eStyled Content\u003c/div\u003e\n```\n\n### Custom Attribute Directive:\nCustom directives are created using the `@Directive` decorator.\n```typescript\nimport { Directive, ElementRef, Renderer2 } from '@angular/core';\n\n@Directive({\n  selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n  constructor(el: ElementRef, renderer: Renderer2) {\n    renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');\n  }\n}\n```\n- **ElementRef**: Accesses the element the directive is applied to.\n- **Renderer2**: Interacts with the DOM in a safe way.\n\n### Summary\n- **Component Directives**: Define reusable UI components.\n- **Structural Directives**: Alter the DOM layout (`*ngIf`, `*ngFor`, `*ngSwitch`).\n- **Attribute Directives**: Change the appearance or behavior of elements (`ngClass`, `ngStyle`, custom directives).\n\u003chr\u003e\n\n### Lifecycle Hooks in Angular\n\nLifecycle hooks in Angular are special methods that allow you to tap into different phases of a component or directive's lifecycle. These hooks provide opportunities to execute custom logic at key moments in the lifecycle, such as when a component is created, initialized, updated, or destroyed.\n\n### Lifecycle Hooks Overview\n\nHere are the main lifecycle hooks provided by Angular:\n\n1. **`ngOnChanges`**: Called before `ngOnInit` and whenever one or more data-bound input properties change.\n2. **`ngOnInit`**: Called once after the first `ngOnChanges`.\n3. **`ngDoCheck`**: Called during every change detection run, immediately after `ngOnChanges` and `ngOnInit`.\n4. **`ngAfterContentInit`**: Called once after Angular projects external content into the component's view.\n5. **`ngAfterContentChecked`**: Called after every check of the projected content.\n6. **`ngAfterViewInit`**: Called once after Angular initializes the component's views and child views.\n7. **`ngAfterViewChecked`**: Called after every check of the component's views and child views.\n8. **`ngOnDestroy`**: Called just before Angular destroys the component.\n\n\u003cb\u003eOptional: \u003c/b\u003e As I continue to expand the Domain of my Knowledge I recently did Basics of Angular and Typescript. In my opinion Knowing JavaScript and a statically-typed language like Java or C++ can make learning TypeScript significantly easier. Concepts like Single Page Application, Structure of Angular Project, Concepts like Directives, lifecycle hooks are really Important. \u003ca href=\"https://www.youtube.com/watch?v=fJIsqZmQVZQ\"\u003eThis\u003c/a\u003e video from FCC helped in completion of this Game. Learned a lot about TypeScript, Angular and Logic Building through this video. \n\n### `OnInit`\n\nThe `OnInit` interface is used to define the `ngOnInit` method, which is a lifecycle hook called by Angular to indicate that the component has been initialized.\n\n#### Purpose\n\n* Perform initialization logic that requires component properties to be initialized.\n* Fetch data from a service.\n* Set up initial states or variables.\n\n#### Implementation\n\nTo use `OnInit`:\n\n1. Import `OnInit` from `@angular/core`.\n2. Implement the `OnInit` interface in your component.\n3. Define the `ngOnInit` method.\n\n#### Example\n\n    import { Component, OnInit } from '@angular/core';\n    \n    @Component({\n      selector: 'app-example',\n      template: `\u003cp\u003eExample component\u003c/p\u003e`,\n    })\n    export class ExampleComponent implements OnInit {\n      constructor() { }\n    \n      ngOnInit(): void {\n        // Initialization logic here\n        console.log('Component initialized');\n      }\n    }\n\nIn this example, `ngOnInit` is called after the component has been initialized, allowing you to perform any necessary setup.\n\n### `OnDestroy`\n\nThe `OnDestroy` interface is used to define the `ngOnDestroy` method, which is a lifecycle hook called by Angular just before the component is destroyed.\n\n#### Purpose\n\n* Perform cleanup logic such as unsubscribing from observables, detaching event handlers, and releasing resources.\n* Prevent memory leaks by cleaning up any lingering references or timers.\n\n#### Implementation\n\nTo use `OnDestroy`:\n\n1. Import `OnDestroy` from `@angular/core`.\n2. Implement the `OnDestroy` interface in your component.\n3. Define the `ngOnDestroy` method.\n\n#### Example\n\n    import { Component, OnDestroy } from '@angular/core';\n    \n    @Component({\n      selector: 'app-example',\n      template: `\u003cp\u003eExample component\u003c/p\u003e`,\n    })\n    export class ExampleComponent implements OnDestroy {\n      constructor() { }\n    \n      ngOnDestroy(): void {\n        // Cleanup logic here\n        console.log('Component destroyed');\n      }\n    }\n\nIn this example, `ngOnDestroy` is called just before the component is destroyed, allowing you to clean up any resources or subscriptions.\n\n### Combined Example\n\nIt is common to use both `OnInit` and `OnDestroy` in a component to handle initialization and cleanup tasks.\n\n    import { Component, OnInit, OnDestroy } from '@angular/core';\n    \n    @Component({\n      selector: 'app-example',\n      template: `\u003cp\u003eExample component\u003c/p\u003e`,\n    })\n    export class ExampleComponent implements OnInit, OnDestroy {\n      constructor() { }\n    \n      ngOnInit(): void {\n        // Initialization logic here\n        console.log('Component initialized');\n      }\n    \n      ngOnDestroy(): void {\n        // Cleanup logic here\n        console.log('Component destroyed');\n      }\n    }\n\n### Summary\n\n* **`Lifecycle hooks`**: Special methods provided by Angular to hook into different stages of a component or directive's lifecycle.\n* **`OnInit`**: Used to perform initialization tasks after the component's properties have been set.\n* **`OnDestroy`**: Used to perform cleanup tasks before the component is destroyed to prevent memory leaks and release resources.\n\u003chr\u003e\n\n## Functionalities of Some Important Functions  \n\n### Finding Safe Squares \n```\nFUNCTION findSafeSquares(): Map of player available squares \n\nInitially \n\tdefine empty map for player available squares [new Map\u003cstring, Coords[]\u003e();] [key = x + \",\" + y]\n\nForeach square in chess board \n\tif square does not have piece or piece on square has difference color than current player: CONTINUE \n\t\n\tdefine list of coordinates for piece safe squares \n\n\tForeach direction of piece directions:\n\t\tdeclare newX and newY Coordinates \n\t\tif coordinates are out of range: CONTINUE\n\n\t\tdeclare piece on new coordinates as newPiece \n\t\tif newPiece is not null AND newPiece.color === piece.color: CONTINUE \n\n\t\tif (position is SAFE after move) THEN update piece safe squares list \n\n\tChecking if there is possibility for en passant and castling \n\n\tif piece have safe squares append it to the player map \n\nRETURN Map of player safe squares \n```\n### Determine if position is safe after move \n  - We need to simulate how position would look like after the move is played \n  - If player who just moved piece, creates position such that he is in check, position is then unsafe \n  - Restore position as it was before move is played\n  - Return safety of the simulate position\n\n### Conditions for En Passant\n  - Previous player moved pawn two squares\n  - Our pawn and the opponent's pawn are on the same rank\n  - The pawns are adjacent to each other\n  - Position must be safe after capture is completed\n\n### Insufficient Material Positions\n  - King vs King\n  - King and Minor Piece vs King\n  - Two Knights and King vs King\n  - Both Sides Have Exactly One Same Colored Bishop\n  - Multiple Bishops of Same Color and King vs King\n\n### To Determine if one side is in check\n```\nLoop through each piece of opposite color \n\n\tLoop through each of its attacking sqaure \n\t\tif one of the attacking square contains king with the \n\t\topposite color of piece that is attacking \n\tTHEN position is in check \n\nif no such a square exist there is no check \n\n```\n### Select Piece\n```\nFUNCTION selectingPiece(x: number, y: number): void\n\nIF game is over: RETURN\nDECLARE piece as the piece at (x, y)\nIF no piece or piece is not the player's piece: RETURN\n\nDECLARE isSameSquareClicked as boolean indicating if the same square was clicked again\nCALL unmarkingPreviouslySelectedAndSafeSquares()\nIF isSameSquareClicked: RETURN\n\nSET selectedSquare to the piece and its coordinates\nSET pieceSafeSquares to the list of safe squares for the selected piece from safeSquares map\n```\n\n### Place Piece\n```\nFUNCTION placingPiece(newX: number, newY: number): void\n\nIF no piece is selected: RETURN\nIF new coordinates are not safe for the selected piece: RETURN\n\nDECLARE isPawnSelected as boolean indicating if the selected piece is a pawn\nDECLARE isPawnOnLastRank as boolean indicating if the pawn is on the last rank\nDECLARE shouldOpenPromotionDialog as boolean indicating if the promotion dialog should be opened\n\nIF shouldOpenPromotionDialog:\n  CLEAR pieceSafeSquares\n  SET isPromotionActive to true\n  SET promotionCoords to the new coordinates\n  RETURN\n\nDECLARE prevX and prevY as the previous coordinates of the selected piece\nCALL updateBoard(prevX, prevY, newX, newY, promotedPiece)\n```\n\n### Update Board\n```\nFUNCTION updateBoard(prevX: number, prevY: number, newX: number, newY: number, promotedPiece: FENChar | null): void\n\nCALL chessBoard.move(prevX, prevY, newX, newY, promotedPiece)\nUPDATE chessBoardView with the new state of the board\nCALL markLastMoveAndCheckState(lastMove, checkState)\nCALL unmarkingPreviouslySelectedAndSafeSquares()\nUPDATE chessBoardState$ observable with the new board state\nINCREMENT gameHistoryPointer\n```\n\n### Promote Piece\n```\nFUNCTION promotePiece(piece: FENChar): void\n\nIF no promotion coordinates or no piece is selected: RETURN\n\nSET promotedPiece to the selected piece\nDECLARE newX and newY as the new coordinates from promotionCoords\nDECLARE prevX and prevY as the previous coordinates of the selected piece\nCALL updateBoard(prevX, prevY, newX, newY, promotedPiece)\n```\n\n### Mark Last Move and Check State\n```\nFUNCTION markLastMoveAndCheckState(lastMove: LastMove | undefined, checkState: CheckState): void\n\nSET lastMove to the provided lastMove\nSET checkState to the provided checkState\n\nIF lastMove exists: CALL moveSound(lastMove.moveType)\nELSE: CALL moveSound(new Set\u003cMoveType\u003e([MoveType.BasicMove]))\n```\n\n### Show Previous Position\n```\nFUNCTION showPreviousPosition(moveIndex: number): void\n\nDECLARE board, checkState, and lastMove from the game history at the provided index\nUPDATE chessBoardView with the board state\nCALL markLastMoveAndCheckState(lastMove, checkState)\nSET gameHistoryPointer to the provided move index\n```\n\n### Move Sound\n```\nFUNCTION moveSound(moveType: Set\u003cMoveType\u003e): void\n\nDECLARE moveSound as a new Audio object with the default move sound\n\nIF moveType contains MoveType.Promotion: SET moveSound source to promotion sound\nELSE IF moveType contains MoveType.Capture: SET moveSound source to capture sound\nELSE IF moveType contains MoveType.Castling: SET moveSound source to castling sound\nELSE IF moveType contains MoveType.CheckMate: SET moveSound source to checkmate sound\nELSE IF moveType contains MoveType.Check: SET moveSound source to check sound\n\nPLAY moveSound\n```\n\n### Flip Board\n```\nFUNCTION flipBoard(): void\n\nTOGGLE flipMode boolean\n```\n\n### Is Square Dark\n```\nFUNCTION isSquareDark(x: number, y: number): boolean\n\nRETURN ChessBoard.isSquareDark(x, y)\n```\n\n### Is Square Selected\n```\nFUNCTION isSquareSelected(x: number, y: number): boolean\n\nIF no piece is selected: RETURN false\nRETURN true if the selected square coordinates match (x, y)\n```\n\n### Is Square Safe For Selected Piece\n```\nFUNCTION isSquareSafeForSelectedPiece(x: number, y: number): boolean\n\nRETURN true if pieceSafeSquares contains coordinates (x, y)\n```\n\n### Is Square Last Move\n```\nFUNCTION isSquareLastMove(x: number, y: number): boolean\n\nIF no lastMove: RETURN false\nRETURN true if the square coordinates match either the previous or current coordinates of the lastMove\n```\n\n### Is Square Checked\n```\nFUNCTION isSquareChecked(x: number, y: number): boolean\n\nRETURN true if checkState is active and the coordinates match (x, y)\n```\n\n### Is Square Promotion Square\n```\nFUNCTION isSquarePromotionSquare(x: number, y: number): boolean\n\nIF no promotionCoords: RETURN false\nRETURN true if the coordinates match promotionCoords\n```\n\n### Unmarking Previously Selected and Safe Squares\n```\nFUNCTION unmarkingPreviouslySelectedAndSafeSquares(): void\n\nRESET selectedSquare to null\nCLEAR pieceSafeSquares\n\nIF isPromotionActive:\n  SET isPromotionActive to false\n  RESET promotedPiece and promotionCoords to null\n```\n\n### Close Pawn Promotion Dialog\n```\nFUNCTION closePawnPromotionDialog(): void\n\nCALL unmarkingPreviouslySelectedAndSafeSquares()\n```\n\u003chr\u003e\n\n## Stockfish API Endpoint\n\n### Endpoint\n`https://stockfish.online/api/s/v2.php`\n\n### HTTP Method\n`GET`\n\n### Parameters\n- `fen`: FEN string to analyze\n- `depth`: Depth for engine to go to (integer, maximum 16)\n\n### Response Format\n#### JSON\n\n#### Keys and Values\n\n- `success`: Boolean indicating if the request was completed successfully.\n  - If `false`, the `data` key will contain error information.\n- `bestmove`: String containing the best move in the given position. Example: `bestmove b1c3 ponder h7h6`.\n- `eval`: Contains the standard evaluation of the given position or `null` if there is a forced checkmate.\n- `mate`: `null` unless there is a forced checkmate in the given position. In such cases, it is the number of moves in which the forced checkmate is completed (positive for white checkmating, negative for black checkmating).\n- `continuation`: String containing the top engine line in the position. Example: `b1c3 h7h6 c3e2 c7c6 h2h3`.\n\n### Example Response\n```json\n{\n    \"success\": true,\n    \"evaluation\": 1.36,\n    \"mate\": null,\n    \"bestmove\": \"bestmove b7b6 ponder f3e5\",\n    \"continuation\": \"b7b6 f3e5 h7h6 g5f6 f8f6 d2f3\"\n}\n```\n\u003chr\u003e\n\n## How to Run it\n\n### Install Angular CLI and Node JS\n```\nInstall Node JS from their Official Site\nAngular CLI: npm install -g @angular/cli\n```\n### Create Angular Project through cli \n```\nng new my-project-name --no-standalone\n```\n### Add Angular Materials\n```\nng add @angular/material\nChoose Custom theme\nSet up global Angular Material typography styles: No\nDo not include animations\n```\n### Clone this Repo into a Different Folder\n```\ngit clone this_repo_url\n```\nCompare the strucuture of your Angular Project and the one you cloned. Add the missing folders and files.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaurav-van%2Fchess-game-using-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaurav-van%2Fchess-game-using-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaurav-van%2Fchess-game-using-typescript/lists"}