How and Why We Created WS-Stats

A deep dive into the technical challenges we faced while building the website, frequent plan revisions, and more.

Why bother?

During planning we found a popular site that provided game analysis from replay data created by Marko LV. However, comparing players required opening multiple browser tabs, which made it inconvenient. We decided to build our own solution tailored to our needs.

Initial thoughts

The WS-Stats team is primarily familiar with C# and .NET, so that was our first option. We quickly realized that the .NET-based approach demanded significant computing resources (more on that in another post). We then looked for a less resource-intensive solution and chose Node.js.

Challenges

Data parsing

The first major challenge was understanding the data returned by the API. Our first attempt was eye-opening: a one-hour game produced over 70,000 lines of output with almost no labels-just arrays of numbers. For example:

[
  [
    1910115,
    1410000,
    0,
    183114339,
    147157000,
    24459470,
    8591366,
    1768320,
    2348676
  ],
  [
    0,
    1320000,
    945000,
    112989935,
    134945372,
    57112000,
    17200021,
    6535501,
    18878965
  ],
  ...
]

We experimented with private games and carefully observed how the data changed. With help from Wouw, we identified patterns, which greatly accelerated development. Once the format was understood, we moved on to detailed project planning.

Tech stack

We had limited experience with Node.js and EJS, so creating a simple, extensible project template was a great first step. Our stack evolved like this:

• HTML, CSS, and JavaScript for the front end
• EJS templates to render pages on the server
• Tailwind CSS to improve the site's appearance