React Front End - majo-z/ChessProject GitHub Wiki

We initially decided to use html, jQuery & css as the front end. This quickly became unmanageable. We looked into multiple more modern front end solutions such as Angular, Vue.js and React. We ended up settling on React to use as our front end framework.

Components Used.

1. <Header/> displays the title and an inspirational message.

2. <FormComponent/> Allows the user to enter username and password and sends login/register requests.

1. <LogoutButton/> This component updates the state of the application to log the user out.

2. <NewGameButton/> This component makes a GET request to the chess/v1/newgame endpoint and updates the current game id.

3. <PrivateGameButton/> This component makes a GET request to create a new private game and updates the current game id.

4. <BotButton/> This component makes a request to the chess/v1/computergame end point and prompts the server to run the python script to join the current game.

5. <InfoComponent/> This component displays information about the current game.

6. <CanvasWindow/> This component renders the HTML canvas and continually polls for game state, as well as allow the user to make POST requests to update the board on the server side.

7. <SurrenderButton/> This component sends a /chess/v1/surrender request.

8. <GameList/> This component displays all the ongoing games of the player that is logged in.

There is also a <ChessApp/> root component that holds all the other ones.