A Chess Game Developed using TypeScript and Angular. Play with your friend in the same browser or against a computer which uses Stockfish API
- Play with your Friend in the same browser
- Play Against Computer which in this case is Stockfish
- On left we have Move Tracker which tracks every moves and gives you the ability to go back to prev stage
- On Right we have an option to choose Stockfish level. That pops up when user wants to play against computer.
- Functionality of Promotion
Project Deployed as a web app on firebase: https://chess-game-using-typescript.web.app/Chess-Game-Using-TypeScript/
This project is not top-tier or perfect, but it’s sufficient for its intended use.
Topics Covered |
---|
Demo of the Project |
Overview of the Project Model |
Some Basic Concepts of Angular used in this project |
Functionalities of Some Important Functions |
Stockfish API Endpoint |
How to Run it |
Play.Against.Friend.mp4
Play.Against.Computer.mp4
![](https://private-user-images.githubusercontent.com/50765800/334226876-abdf2a21-6822-4200-8717-4ff6e90f5518.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNzcwMDAsIm5iZiI6MTcyNTA3NjcwMCwicGF0aCI6Ii81MDc2NTgwMC8zMzQyMjY4NzYtYWJkZjJhMjEtNjgyMi00MjAwLTg3MTctNGZmNmU5MGY1NTE4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMxVDAzNTgyMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI4ZDExYmNmZWU2ZmY4MmQyN2Q3NzNmMmZjY2Q1NjdmZjU0ZmFjYWNjNGM1MTVkM2JlMjhlODk3M2Y0MDJkODMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.RYtvaaHwwaFqTXex1sKCkbwR-bMHIGFQiyZ8PmqGxYg)
Forsyth–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.
FEN 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.
A FEN string consists of six fields, each separated by a space:
- Piece Placement Data: Describes the position of all pieces on the board.
- Active Color: Indicates which player is to move next.
- Castling Availability: Shows if castling is available for either side.
- En Passant Target Square: Specifies the target square for en passant capture, if applicable.
- Halfmove Clock: Counts the number of halfmoves since the last capture or pawn move.
- Fullmove Number: Indicates the fullmove number in the game.
-
Piece Placement Data:
- The board is divided into ranks (rows) starting from rank 8 to rank 1.
- Each rank is separated by a slash ("/").
- Pieces are represented by letters: uppercase for White (P, N, B, R, Q, K) and lowercase for Black (p, n, b, r, q, k).
- Consecutive empty squares are denoted by digits 1 to 8.
-
Active Color:
- "w" indicates White to move.
- "b" indicates Black to move.
-
Castling Availability:
- "-" means no castling is available.
- "K" means White can castle kingside.
- "Q" means White can castle queenside.
- "k" means Black can castle kingside.
- "q" means Black can castle queenside.
-
En Passant Target Square:
- Specifies the square over which a pawn has moved two squares, making an en passant capture possible.
- If no en passant target exists, this is "-".
-
Halfmove Clock:
- Counts the number of halfmoves (plies) since the last pawn move or capture.
- Used for enforcing the fifty-move rule.
-
Fullmove Number:
- Starts at 1 and increments after each Black move.
rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1
rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1
rnbqkbnr/pp1ppppp/8/2p5/4P3/8/PPPP1PPP/RNBQKBNR w KQkq c6 0 2
rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R b KQkq - 1 2
Angular 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.
Component directives are the most common type, created with the @Component
decorator.
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: '<h1>Hello, World!</h1>'
})
export class ExampleComponent { }
- selector: Specifies the tag name for the component.
- template: Defines the HTML template for the component.
Structural directives change the DOM layout by adding or removing elements. Common structural directives are *ngIf
, *ngFor
, and *ngSwitch
.
Conditionally includes a template based on the value of an expression.
<div *ngIf="isVisible">Visible Content</div>
Repeats a template for each item in a list.
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
Switches between alternative views.
<div [ngSwitch]="value">
<p *ngSwitchCase="'A'">Case A</p>
<p *ngSwitchCase="'B'">Case B</p>
<p *ngSwitchDefault>Default Case</p>
</div>
Attribute directives change the appearance or behavior of an element, component, or another directive. Common attribute directives are ngClass
, ngStyle
, and custom attribute directives.
Dynamically adds or removes CSS classes.
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Styled Content</div>
Dynamically sets inline styles.
<div [ngStyle]="{'color': color, 'font-size': fontSize + 'px'}">Styled Content</div>
Custom directives are created using the @Directive
decorator.
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer2) {
renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
- ElementRef: Accesses the element the directive is applied to.
- Renderer2: Interacts with the DOM in a safe way.
- Component Directives: Define reusable UI components.
- Structural Directives: Alter the DOM layout (
*ngIf
,*ngFor
,*ngSwitch
). - Attribute Directives: Change the appearance or behavior of elements (
ngClass
,ngStyle
, custom directives).
Lifecycle 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.
Here are the main lifecycle hooks provided by Angular:
ngOnChanges
: Called beforengOnInit
and whenever one or more data-bound input properties change.ngOnInit
: Called once after the firstngOnChanges
.ngDoCheck
: Called during every change detection run, immediately afterngOnChanges
andngOnInit
.ngAfterContentInit
: Called once after Angular projects external content into the component's view.ngAfterContentChecked
: Called after every check of the projected content.ngAfterViewInit
: Called once after Angular initializes the component's views and child views.ngAfterViewChecked
: Called after every check of the component's views and child views.ngOnDestroy
: Called just before Angular destroys the component.
Optional: 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. This video from FCC helped in completion of this Game. Learned a lot about TypeScript, Angular and Logic Building through this video.
The 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.
- Perform initialization logic that requires component properties to be initialized.
- Fetch data from a service.
- Set up initial states or variables.
To use OnInit
:
- Import
OnInit
from@angular/core
. - Implement the
OnInit
interface in your component. - Define the
ngOnInit
method.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
template: `<p>Example component</p>`,
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit(): void {
// Initialization logic here
console.log('Component initialized');
}
}
In this example, ngOnInit
is called after the component has been initialized, allowing you to perform any necessary setup.
The OnDestroy
interface is used to define the ngOnDestroy
method, which is a lifecycle hook called by Angular just before the component is destroyed.
- Perform cleanup logic such as unsubscribing from observables, detaching event handlers, and releasing resources.
- Prevent memory leaks by cleaning up any lingering references or timers.
To use OnDestroy
:
- Import
OnDestroy
from@angular/core
. - Implement the
OnDestroy
interface in your component. - Define the
ngOnDestroy
method.
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'app-example',
template: `<p>Example component</p>`,
})
export class ExampleComponent implements OnDestroy {
constructor() { }
ngOnDestroy(): void {
// Cleanup logic here
console.log('Component destroyed');
}
}
In this example, ngOnDestroy
is called just before the component is destroyed, allowing you to clean up any resources or subscriptions.
It is common to use both OnInit
and OnDestroy
in a component to handle initialization and cleanup tasks.
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-example',
template: `<p>Example component</p>`,
})
export class ExampleComponent implements OnInit, OnDestroy {
constructor() { }
ngOnInit(): void {
// Initialization logic here
console.log('Component initialized');
}
ngOnDestroy(): void {
// Cleanup logic here
console.log('Component destroyed');
}
}
Lifecycle hooks
: Special methods provided by Angular to hook into different stages of a component or directive's lifecycle.OnInit
: Used to perform initialization tasks after the component's properties have been set.OnDestroy
: Used to perform cleanup tasks before the component is destroyed to prevent memory leaks and release resources.
FUNCTION findSafeSquares(): Map of player available squares
Initially
define empty map for player available squares [new Map<string, Coords[]>();] [key = x + "," + y]
Foreach square in chess board
if square does not have piece or piece on square has difference color than current player: CONTINUE
define list of coordinates for piece safe squares
Foreach direction of piece directions:
declare newX and newY Coordinates
if coordinates are out of range: CONTINUE
declare piece on new coordinates as newPiece
if newPiece is not null AND newPiece.color === piece.color: CONTINUE
if (position is SAFE after move) THEN update piece safe squares list
Checking if there is possibility for en passant and castling
if piece have safe squares append it to the player map
RETURN Map of player safe squares
- We need to simulate how position would look like after the move is played
- If player who just moved piece, creates position such that he is in check, position is then unsafe
- Restore position as it was before move is played
- Return safety of the simulate position
- Previous player moved pawn two squares
- Our pawn and the opponent's pawn are on the same rank
- The pawns are adjacent to each other
- Position must be safe after capture is completed
- King vs King
- King and Minor Piece vs King
- Two Knights and King vs King
- Both Sides Have Exactly One Same Colored Bishop
- Multiple Bishops of Same Color and King vs King
Loop through each piece of opposite color
Loop through each of its attacking sqaure
if one of the attacking square contains king with the
opposite color of piece that is attacking
THEN position is in check
if no such a square exist there is no check
FUNCTION selectingPiece(x: number, y: number): void
IF game is over: RETURN
DECLARE piece as the piece at (x, y)
IF no piece or piece is not the player's piece: RETURN
DECLARE isSameSquareClicked as boolean indicating if the same square was clicked again
CALL unmarkingPreviouslySelectedAndSafeSquares()
IF isSameSquareClicked: RETURN
SET selectedSquare to the piece and its coordinates
SET pieceSafeSquares to the list of safe squares for the selected piece from safeSquares map
FUNCTION placingPiece(newX: number, newY: number): void
IF no piece is selected: RETURN
IF new coordinates are not safe for the selected piece: RETURN
DECLARE isPawnSelected as boolean indicating if the selected piece is a pawn
DECLARE isPawnOnLastRank as boolean indicating if the pawn is on the last rank
DECLARE shouldOpenPromotionDialog as boolean indicating if the promotion dialog should be opened
IF shouldOpenPromotionDialog:
CLEAR pieceSafeSquares
SET isPromotionActive to true
SET promotionCoords to the new coordinates
RETURN
DECLARE prevX and prevY as the previous coordinates of the selected piece
CALL updateBoard(prevX, prevY, newX, newY, promotedPiece)
FUNCTION updateBoard(prevX: number, prevY: number, newX: number, newY: number, promotedPiece: FENChar | null): void
CALL chessBoard.move(prevX, prevY, newX, newY, promotedPiece)
UPDATE chessBoardView with the new state of the board
CALL markLastMoveAndCheckState(lastMove, checkState)
CALL unmarkingPreviouslySelectedAndSafeSquares()
UPDATE chessBoardState$ observable with the new board state
INCREMENT gameHistoryPointer
FUNCTION promotePiece(piece: FENChar): void
IF no promotion coordinates or no piece is selected: RETURN
SET promotedPiece to the selected piece
DECLARE newX and newY as the new coordinates from promotionCoords
DECLARE prevX and prevY as the previous coordinates of the selected piece
CALL updateBoard(prevX, prevY, newX, newY, promotedPiece)
FUNCTION markLastMoveAndCheckState(lastMove: LastMove | undefined, checkState: CheckState): void
SET lastMove to the provided lastMove
SET checkState to the provided checkState
IF lastMove exists: CALL moveSound(lastMove.moveType)
ELSE: CALL moveSound(new Set<MoveType>([MoveType.BasicMove]))
FUNCTION showPreviousPosition(moveIndex: number): void
DECLARE board, checkState, and lastMove from the game history at the provided index
UPDATE chessBoardView with the board state
CALL markLastMoveAndCheckState(lastMove, checkState)
SET gameHistoryPointer to the provided move index
FUNCTION moveSound(moveType: Set<MoveType>): void
DECLARE moveSound as a new Audio object with the default move sound
IF moveType contains MoveType.Promotion: SET moveSound source to promotion sound
ELSE IF moveType contains MoveType.Capture: SET moveSound source to capture sound
ELSE IF moveType contains MoveType.Castling: SET moveSound source to castling sound
ELSE IF moveType contains MoveType.CheckMate: SET moveSound source to checkmate sound
ELSE IF moveType contains MoveType.Check: SET moveSound source to check sound
PLAY moveSound
FUNCTION flipBoard(): void
TOGGLE flipMode boolean
FUNCTION isSquareDark(x: number, y: number): boolean
RETURN ChessBoard.isSquareDark(x, y)
FUNCTION isSquareSelected(x: number, y: number): boolean
IF no piece is selected: RETURN false
RETURN true if the selected square coordinates match (x, y)
FUNCTION isSquareSafeForSelectedPiece(x: number, y: number): boolean
RETURN true if pieceSafeSquares contains coordinates (x, y)
FUNCTION isSquareLastMove(x: number, y: number): boolean
IF no lastMove: RETURN false
RETURN true if the square coordinates match either the previous or current coordinates of the lastMove
FUNCTION isSquareChecked(x: number, y: number): boolean
RETURN true if checkState is active and the coordinates match (x, y)
FUNCTION isSquarePromotionSquare(x: number, y: number): boolean
IF no promotionCoords: RETURN false
RETURN true if the coordinates match promotionCoords
FUNCTION unmarkingPreviouslySelectedAndSafeSquares(): void
RESET selectedSquare to null
CLEAR pieceSafeSquares
IF isPromotionActive:
SET isPromotionActive to false
RESET promotedPiece and promotionCoords to null
FUNCTION closePawnPromotionDialog(): void
CALL unmarkingPreviouslySelectedAndSafeSquares()
https://stockfish.online/api/s/v2.php
GET
fen
: FEN string to analyzedepth
: Depth for engine to go to (integer, maximum 16)
success
: Boolean indicating if the request was completed successfully.- If
false
, thedata
key will contain error information.
- If
bestmove
: String containing the best move in the given position. Example:bestmove b1c3 ponder h7h6
.eval
: Contains the standard evaluation of the given position ornull
if there is a forced checkmate.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).continuation
: String containing the top engine line in the position. Example:b1c3 h7h6 c3e2 c7c6 h2h3
.
{
"success": true,
"evaluation": 1.36,
"mate": null,
"bestmove": "bestmove b7b6 ponder f3e5",
"continuation": "b7b6 f3e5 h7h6 g5f6 f8f6 d2f3"
}
Install Node JS from their Official Site
Angular CLI: npm install -g @angular/cli
ng new my-project-name --no-standalone
ng add @angular/material
Choose Custom theme
Set up global Angular Material typography styles: No
Do not include animations
git clone this_repo_url
Compare the strucuture of your Angular Project and the one you cloned. Add the missing folders and files.