The User Interface is written using functional React components. There are components for:
- App - Root component
- BoardView - Displays the chessboard
- SquareView - Renders each square of the chessboard
Each component has respective styling under the file component_name-style.css.
Both Components and Stylesheets can be viewed in the components folder.
Note: index.tsx, which connects the React app to the browser DOM,
is held in the src folder
Originally, the logic was coded using Classes and Objects. These have now been reworked using Interfaces and JavaScript Objects as these work better with React's immutable state system.
Behind the UI is a hierarchy of objects based off interfaces which hold data and control the logic of the chess game. There are Interfaces for:
- Game - Controls the flow of the game - this is the highest-level interface
- Player - Acts as a controller for any moves made.
- Chessboard - Holds the array of chessboard squares
- Square - Holds information about each square (which piece is on it, has it been selected, etc.).
These can be viewed in the models folder.
As well as the pieces (which all implement Piece):
Pieces can be viewed in the models/pieces folder.
In the project directory, you can run:
npm start
which runs the app in the development mode.
Open http://localhost:3000 to view it in a browser.
The page will reload if you make edits.
You will also see any lint errors in the console.