A very simple ReactJS-based chess game containing only a bishop and a horse knight.
This project serves as a code sample. The specifications are as follows:
- Game UI powered by ReactJS
- Game Logic powered by ES6
- Gameboard has two set pieces: A knight and a bishop.
- Each piece is individually selectable.
- Upon selection, user may click another valid tile to move piece
- Pieces may only make legal moves
- No chess-specific 3rd party libraries may be used
- Pieces cannot occupy the same tile
- Provide visual feedback for:
- Piece selected
- Valid move
- Invalid move
- CSS Grid for the chessboard
SCSS CSS PreprocessorBEM Methodologystyled-componentsfor CSS. BEM is useful, but the application wasn't right for this app.
Tested across any browser that has > 2% usage for target demo
Mobile browsing has overtaken desktops, and the trend isn't stopping. This app should work when viewed on any modern device.
Devs should be able to add new pieces easily as well as include the board using a separate configuration with the same codebase.
Spaghetti code is no fun. While opinions differ on specific implementations, the most important thing is that all code follows the same guidelines! This also means that when there are multiple ways of doing something with roughly the same performance, the most readable should be preferred.
For this project, all code is linted with eslint using the Airbnb base with the following modifications:
react/jsx-filename-extensionto allow .js to include JSX code (instead of .jsx)max-lenbecause I prefer a max-length of 120object-curly-newlinebecause stateless components look better on a single line
It's easy to tweak one area of a project and break another, which makes automated testing very important.
Tests are integrated into this project with Jest and Enzyme.
Start the test runner with:
The CSS Grid is nice and makes the code cleaner, but the styling is too specific, so different board sizes will cause the 'black' tiles to be misaligned. I fixed this by using a simple modulo operator to correctly colorize the tiles.
In addition, the width of the rows are set in the CSS, which is suboptimal. I fixed this by converting from BEM to styled-components which can take a JS variable as a CSS property. Works great!
The best solution would be to separate each row into a parent element, then you can :odd and :even on those to their children tiles to ensure a consistent grid. Will likely implement later.
For convenience, you can see the latest version online at:
To build locally, first clone the repo:
Then cd chess to get into the project directory.
In the project directory, you can start the project by running:
This should open a browser. If not, navigate to http://localhost:3000 to view it.
Icons courtesy of Those Icons CC 3.0 BY