Chess-focused web application using Spring Boot framework with Thymeleaf front-end.

FEATURES:

1. You may register to the Website with your e-mail and a password (passwords are hashed). Users may play out opening positions on the board and submit them as part of their personal opening repertoire.

2. A user may improve opening preparation and memorization by playing against a computer which will only play moves from their opening repertoire.

3. (In progress) Featured Grandmaster repertoires may be added to your profile so that you may play against the computer to practice the opening lines, learning to utilize the style your favorite GM.

4. (In progress) Users may share each others opening repertoires with each other, with commentary.

DATABASE

There are three tables: a User table, an Opening table, and a Move table. The User table has a one-to-many relationship with the Opening table; the Opening table has a one-to-many relationship with the Move table. For example, User with user_id 1 has three openings in the database, the openings with opening_id 1, 2, and 3. The opening with id 1 contains three moves with move_id 1, 2, and 3:

The Opening Java class, for instance, is matched to the opening table and its one-to-many relationship with the move class, as well as its many-to-one relationship with the User class, are denoted with Spring annotations so that Hibernate can properly transfer information to and from the MySQL database:

POST: SAVING MOVES

Let’s take a look at one of the controllers for the MVC architecture. Below we can see the PostMapping for the /save endpoint. The Opening form, which contains a list of initially empty moves, is sent to the Thymeleaf front-end where it is filled out when a player plays moves on the chess board and submits the form. A new opening is created and the moves and opening are added to the Moves table by the MoveService class, moveService.addnewmove. The openingService creates a new opening for the corresponding moves and corresponding user, after checking which user is logged into the session.

“Form.getMoves” returns a list of moves from the opening. The moveService loops through form and adds one move at a time to the table. The player is then redirected to the List page, a view where the player can see their updated repertoire. Below we can see how the addNewMove function loops and each move is added to the table by the moveRepository:

THYMELEAF FORM/ FRONT-END

Now that we understand how the MVC architecture deals with the model data it receives from the front-end, lets investigage the front-end.

A Thymeleaf template receives a list of empty moves, the form, to be parameterized by the player before the player them saves the moves with a post request.

<form action=”#” id = “form” th:action=”@{/save}” th:object=”${form}”
method=”post”>

Each empty new move row is filled in when the player makes a move on the board. I utilized javascript in handling played board moves and binding Spring form input data to the opening object model. Each move has a unique itemStat index. The idea is that when we move a piece on the board twice, we know a move has passed and that the next move played on the board is represented by the next row of fields on the form.

Displaying A Stored Opening

Showing all the moves in the database or all the openings was not particularly difficult, but showing the openings and the moves belonging to each opening was more challenging. I realized that I could send a hashmap to Thymeleaf that mapped the key Opening to the value list of moves. Each time we iterate, openingService.getFirstOpening() is called for index i; we iterate through all openings and for each Opening key we get a value that is a list of moves, and put the opening id and its corresponding list of moves in the “movesperopening” hashmap.

The moveService.findMovesByOpeningId invokes a Query I manually wrote in the repository to get all moves that share an opening_id: this is actually an inner join statement:

It is easy to then loop through movesperopening on the front-end and display the openings and moves in an organized fashion.

Closing Thoughts:

This project combines a lot of what I have learned about databases and web-development. It is a challenging project with multiple Controller, Service, and Repository classes for Move, Opening, Security, and User hierarchy. I hope to release it when it is production ready!