TIL RXJchess and how it was built
POSTED ON:
TAGS: javascript chess
Found this React JS Chess game RXJchess
I built this site using React, Redux, RxJs (hence the name!) and a handful of other frontend technologies. I always enjoyed playing chess and over the years racked up a lot of hours on apps like chess.com and lichess. At some point during the pandemic, I decided it would be fun to build my own app with a little more visual flair than what these popular apps generally offer, and so this site was born.
I hope you enjoy RxJChess as much as I enjoyed building it. Please feel free to reach out with any questions, comments, or feedback. I'd especially love to discuss alternate approaches to building a chess engine.
Out of curiosity, I wanted to see how it works:
The Repo: https://github.com/prashanthselvam/rxjchess
Honestly, it's incredible.
I never really thought about how to break Chess into it's rules. So to see someone do it in Javascript/React is incredible.
The website #
Ah classic React Helmet.
Via https://github.com/prashanthselvam/rxjchess/blob/main/src/pages/index.js#L21
Drawing the chessboard:
via https://github.com/prashanthselvam/rxjchess/blob/main/src/components/chessboard/index.tsx#L16
Types and Consts #
Defining all the pieces.
via https://github.com/prashanthselvam/rxjchess/blob/main/src/pages/index.js#L21
BP1 = Black Pawn 1
BP8 = Black Pawn 8
BN1 = Black (k)Night 1
WB2 = White Bishop 2
I think PROMO_PIECES is when a a pawn gets promoted?
via https://github.com/prashanthselvam/rxjchess/blob/main/src/types/constants.ts#L3
Setting up the Game board:
via https://github.com/prashanthselvam/rxjchess/blob/main/src/types/constants.ts#L235
Game States:
via https://github.com/prashanthselvam/rxjchess/blob/main/src/types/types.d.ts#L6
How each piece moves #
This is wild:
export const rookMoves: MoveFunction = (
player,
tileId,
tileMap,
forAttackCalc = false
) => {
const board = _getBoard(player);
// @ts-ignore
const [x, y] = _getRelativePos(player, tileId);
const allLeftMoves = range(x - 1, -1, -1).map((n) => _getTile(board, n, y));
const allRightMoves = range(x + 1, 8).map((n) => _getTile(board, n, y));
const allUpMoves = range(y + 1, 8).map((n) => _getTile(board, x, n));
const allDownMoves = range(y - 1, -1, -1).map((n) => _getTile(board, x, n));
return [
..._getPossibleMoves(allLeftMoves, tileMap, player, forAttackCalc),
..._getPossibleMoves(allRightMoves, tileMap, player, forAttackCalc),
..._getPossibleMoves(allUpMoves, tileMap, player, forAttackCalc),
..._getPossibleMoves(allDownMoves, tileMap, player, forAttackCalc),
];
};
https://github.com/prashanthselvam/rxjchess/blob/main/src/store/moveFunctions.tsx
Determining how Checkmate works #
via https://github.com/prashanthselvam/rxjchess/blob/main/src/store/epics/gameEpics.tsx#L200
How the AI works #
It does all the AI calculations in a webworker, calls and returns an action
https://www.npmjs.com/package/js-chess-engine
Related TILs
Tagged: javascript