| EVENT | REQUEST(frontend) | RESPONSE(backend) |
|---|---|---|
| Connect | { socketId : id username : name } |
{ userList : { username : "string|username" } } |
| Create | { clientId : id } |
{ OtherPlayerId : id, gameId : id } |
| Join | { clientId : guid, gameId : guid, OtherPlayerId : guid } |
{ gameId : guid } |
| Move | { SourceSquare : "string", TargetSquare : "string", userTurn : "string", clientId : id } |
{ (Same Response) To Other Player } |
| Disconnect | { } | { disconnect : true } |
- Open both frontend and backend folder in a separate editor.
- open Command prompt and run npm install for both the folder to download the necessary modules.
- Run the backend first by opening the backend directory in the command prompt and type 'npm start'
- Now Run the frontend by oepning the frontend directory in the command prompt and type 'npm start'
- You can open localhost:3000 in many tabs as you can and play with yourself.
- React is used on frontend.
- chessboard is the frontend of the chess.
- chess.js is the main logic function to validate the moves.
- sweetalert2 is used for beautiful alert.
- socket.io-client is the socket module to connect with the server via socket connection.
- express is the webserver that serves as a backend.
- socket.io is the main module to handle client socket request and respond to it correspondingly.
- When user runs the application, He/she must enter his/her username and join.
- Upon joining, user is shown a list of other users connected to the server.
- User can play with other user via clicking the play button.
- When the player clicked the button, the other player will receive the alert in his machine to join. He presses join and both player can play.
- Each player gets an equal turn where white begins the game as seen in chess.