Snakebot

The task

Snakebot is a game that Cygni uses as an event when they visit different universities around Sweden. The game is inspired by the classic snake game from 1978. The idea is that students can compete by themselves or in teams by coding their own snake. The snakes will then compete against each other to see who has written the best algorithm.

Snakebot was first created several years ago but since then, many parts of the original structure has been deprecated, changed or in other ways outdated. Our job was to update the code to current standards aswell as create a new and improved user interface. The team consisted of three people total.

The process

Developing Snakebot

Snakebot was built out of three different parts. The server was written in Java, the web-client that make up the frontend was written in React.js, and the javascript-client, where the user writes their code, was also written in React.js.

We started of by removing all errors in the server to make it runnable again. The server was built using Springboot, Gradle, and Maven which did have a lot of deprecated parts that had to be changed out to newer standards and somewhat rewritten.

After making the server runnable again we began to look at the web-client. Since snakebot was first created about the same time React.js was first released there was a lot to change in the web-client. After looking into the code, we decided that it was for best to start all over, trying to reuse only the parts concerning the logic. We used Redux for handling global states and changed out all animations using Konva. Everything was then dockerized to make it locally runnable.

The javascript-client was recently updated and did therefor not have a lot to fix. We did however decide to change rewrite it in TypeScript to make it easier for the user to find help functions.

CI/CD was used to automatically flag and push new versions to DockerHub and DigitalOcean, that was used for production.

Designing Snakebot

The design process started off by reviewing the structure of the page. I looked at what type of information was available at which page as well as what information that was not to be found at the page at all. After that I could easily make a new structure of the navigation, dividing all content on different pages.

When I had an idea of a structure that made sense, I started to looking into the appearance of the site. My initial thought was that I wanted to incorporate more of Cygni’s brand into the design since the original snakebot completely had it’s own appearance. I picked out a color palette based on Cygni’s brand colors with some touches of the original colors. I also completely changed all the typography to the correct brand font.

The hardest part was to create the home page. The original Snakebot did not have a home page that stood out from the other parts of the application. Therefor, I did want to create something that would get the users attention, clearly introduce them to Snakebot, but also leave them curious about Cygni as a organisation.

The final result

The result was not only a Snakebot with reniewd functionallity but also a new and improved interface. It had new features like modals announcing the winner after each game, as well as a completely new view for the game host to control the settings and players.