In the previous post I already mentioned how the implementation was coming along. The former state of the application can still be checked out in the video below.
Naturally, all of this didn’t come into existence in a couple of days. It’s the result of an effort over the last couple of months. Fortunately, I made sure to take some screenshots along the way to look back on the humble beginnings of the implementation and appreciate the progress I already made since those points in time more.
You can clearly see that I started really simple, tried to get the essential things right first and then added more and more of the digital prototype into it. At first, it seemed like an enormous task to fully implement the prototype. Chopping it up into finer pieces and taking care of each piece at a time (that’s what computer scientists do for a living) made it very manageable though. No things come for free in this world but with some power of will, progress will inevitably follow. It’s good to remember that Rome wasn’t built in a day either.
Technologies
Some of you may also question what technologies I used and how I handled things. I’ll try to go over the basic choices I made along the way and the accompanying argumentation here.
The most important choice to start off with is to decide how the web page is built and updated based on the provided data. So, who’s responsible for all this building and updating? We could host a web framework on some server and let it do all the heavy lifting but in the end, I’d rather have the clients do the work for me. This can be done by a language that the browser understands, i.e. client-side JavaScript. There are a LOT of different JavaScript frameworks available today for rendering content to a web page but a rather interesting and popular one is React, which is developed and used by Facebook. It’s especially efficient for rendering highly dynamic content because it maintains a virtual version of the DOM. With each update of the content, it determines which elements of the web page in particular need to be rerendered since this rerendering is a very costly operation for browsers. Considering the game data and consequently the content of the web page are updated about every second, the efficiency of the rerendering is quite important and to that end, I decided to implement the whole application in React.
Another important part of the application are the visualisations. The most eminent JavaScript framework for visualisations is D3. The basics are simple, yet it allows for extensive customisation. While there are some attempts to come up with a React implementation of everything that D3 offers, they have yet to mature. I found it to be easier to write out the SVG elements myself in React and use the D3 functionality for the scales, area paths, … . This also granted me the freedom to include whatever I wanted in the visualisations.
In the beginning, the styling of the application was quite hacky (plain old CSS and all the issues that come with it). That’s why I put off most of it until the very last. Eventually I realised that I needed a proper solution. I did some research and stumbled upon Glamorous. While inline CSS is usually frowned upon, I only included properties that determine the position and dimensions of elements since they don’t ever need to change while swapping styles. All pure style properties are referencing a centralized style module so that swapping styles or changing specific style properties is as simple as changing a single variable value.
Structure
While it may seem obvious to most people, I implemented the foundations of the application independent of the game I’m focusing on. This way, you can simply write a custom module for a new game and get it to work with the application as well. The module only serves as a proxy for the incoming data and defines which data is shown to the spectator in what kind of visualisations.
The implementation is compatible with different kinds of data providers and ways to play back this data. The data can come directly from a websocket, which is the case when you are using the application to watch a live competitive League of Legends game, or from a JSON file when the game is prerecorded. The data updates can be synchronised to a video, considering the start time of the game in the video is provided, or played back with a timer of desired pace.