Q3Stats is a Web application that allows you to import and analyze stats generated by CPMA mod for Quake 3: Arena.
From time to time, I play some Quake 3 online with my friends. At one point I thought it’d be cool to be able to visualize results of the games. It turns out that CPMA (the mod we use) creates XML file for every match. When I discovered that, it became obvious what I needed to do. And this is how Q3Stats was born.
Actually, the project is much older than its git history suggests. It dates back to early 2015. I didn’t touch it until a couple weeks ago. I needed an app to experiment with various frontend development techniques so I decided to rewrite it from HTML rendered on the backend with some jQuery on top to a full-blown single-page app. The result is good enough for me to open it to the world.
The backend is a lightweight Flask app that uses PostgreSQL to store data imported from CPMA stats. It does most of number crunching, provides mechanisms for importing the stats and exposes API for the frontend. That’s pretty much it when it comes to backend.
The frontend uses React, Redux and other “modern” technologies to visualize the data. While it may seems like an overkill for an app that consists of four “large” views, I needed to get a hang of couple of libraries (most notably Redux and React Router) before I went on with building larger apps with them. Once I grasped basic concepts, Redux allowed me to quickly iterate and separate business logic from React views. The most difficult part of the process was designing the Redux store. I’m not 100% sure I did it right but I think I came close. Overall, I’m quite satisfied with the end result.
Take a look below for some screenshots.
The Dashboard screen displays stats of the last session and some aggregated stats for the current month.
The Session screen displays detailed session stats.
The Player Game screen displays detailed stats of a player’s performance in a single game.
The Player Stats screen displays aggregated player stats for sessions and maps.
The project’s code is available via public Git repository: Link
Q3Stats uses Highcharts so if you decide to host your own istance, make sure you understand the licesing terms of this library and purchase license if needed.
Due to licensing issues around Highcharts and CPMA assets (item icons, etc.) I decided not to release the app via PyPI.
I’d like to end this post by greeting my fragging buddies: Eliminator, kapitan, kraju, mcvsama, Szeryf Bydgoszczy and unnamedDzwiedziu. See you on the Arena!
