This blog details the process of creating a connect four game with Spring Boot. The frontend was mostly Thymeleaf with a few Javascript libraries to help connect to the websocket server. For styling I used Bulma and basic CSS. In the backend, I utilized a Redis server to store the state of the game and the active users playing said game.
Table of contents
Open Table of contents
Background on Why
A fatal flaw that has plagued many of my pet projects has been the unavoidable user accounts. While they are great for helping with sessions and keeping data persistent, I have found them to be greatly unnecessersary for what I want to accomplish which is showing off what I have created. It is hard enough to get a user to visit one’s website, let alone have them make an account.
One of the main themes I had for creating this was no user accounts. However if one wanted to add it, would not be very hard with spring’s security and user auth.
This project was mostly done to prove to myself that I could do it with all the knowledge I have gained from doing previous projects. While the original scope has grown to include more a few more features, I am very happy with how it turned out.
Processs
Creating the base of the Project with Spring Boot Initializer
When creating most of my projects I use the initializer to get a quick start to my project.
Dependenices in my pom.xml Maven file
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.session</groupId>
<artifactId>spring-session-data-redis</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity6</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
...These will provide all the bare necessities libraries needed for this application. Lombook is only neccesary if you don’t want to write boiler-plate code, however, I have found it to be a great help.
Another thing to note is that most of my development for this was done in IntelliJ IDEA.
Laying the foundation with the Front-end
Before trying to make any of the back-end for the communication I wanted to start on the key purpose of the project. The board.
I was tempted to use react for the board but decided against it because the complexity was not significant enought to warrant such a large dependency. I was able to quickly make a 7 x 6 board with flexbox containers that was interactive and could place the pieces and handle the turns.
Part of me wanted to implement the entire game right there, but I held off until I created at least a little bit of the back-end.
The Front of the Back-end
One of the key objectives for this project was to keep things “simple”. This meant not including the aforementioned frameworks like React out of it. For me, I also wanted to try ot utilize the MVC part of Spring that I have never had the chance to try. This would mean I would have to trade out one of those front-end frameworks for a good-old fashioned template engine. Thymeleaf was the first thing I saw when I googled spring template engine so I was on my way.
I found the need for some basic styling in the way of CSS classes since they would make developing with Thymeleaf much easier.I was tempted to use things like BootStrap or Tailwind, but yet again I found them to be a bit overkill for my needs. That is when I discovered Bulma.
This CSS library was easy to pick up and allowed me to quickly become productive with my project. It had good documentation with exmaples and was very easy to implement to the templates.
Controllers
For this project I had two main controllers. One for the creation of the games and one for the websocket connections.
At first my plan for creating the games was simple. POST /game would create a game in a LOBBY state and give the player a link to send to a friend.
When creating these pages,