Twice a year, gamers from all over the world come together to “speedrun” both new and old games alike. Games from every platform and every era. Even better, it’s a week-long marathon to raise money for charity, and it’s streamed live on Twitch for millions to follow along. Although I’m not a big gamer, I’ve been watching both Awesome Games Done Quick(AGDQ) and Summer Games Done Quick(SGDQ) for about five years now.
Each marathon gets better. More games, larger sponsors, more money raised, and, finally, better production quality. The SGDQ that just finished raised over $3 Million for Doctors Without Borders, and the production and organization is top-notch.1If you can’t watch the whole SGDQ 2019, at least watch the last few hours. The grand finale run of Chrono Trigger ended up smashing the total-money-raised record for any GDQ and was just insane. Specifically, I was impressed with the donation tracker.
Donation Totals
Several years ago, GDQ stream production was very haphazard. Notepad would be used to convey notes to the viewers, and donation totals were manually updated. The production quality has vastly improved, and they’ve begun to automate more and more.
This year, they appear to have some sort of server that pushes live donation data to the tracker in-stream using OBS. As each donation comes in, it’s shown as a game-like “bubble” that pops up near the grand totals for a few seconds while the grand total is incremented by the respective value. It’s a relevant and engaging way of showing both the running total as well as the frequency and magnitude of individual donations.2There is a live interview where one of the GDQ techs interviewed a dev with OBS. If you have a few minutes, it’s neat to gain some perspective on what actually goes on behinds the scenes.
Re-creating For The Web
The animations and styling for the tracker really caught my attention, and I decided to attempt to re-create it using HTML/CSS/vanilla JavaScript.
Before going any further and in case you’re unfamiliar with my work, I want to clarify that design isn’t a strength of mine. Ergo, the look and feel of the re-created donation tracker isn’t exactly the same as the inspiration from SGDQ. The font is certainly different. The font I’m using in my example is PressStart2P, so props to the author.
A couple of hours of tinkering, and I’ve come up with a tracker that functions very similar to its inspiration. I have made the code available on GitHub for any and all to use/improve. Here’s what it looks like:
$1,153,492
The code is pretty simple, and it utilizes all of the latest techniques, including: CSS Flexbox, Semantic HTML, and ES6 JavaScript.3No jQuery is used, and rightfully so! For simplicity, I used Parcel for both development and the final build. For styling, I tried to emulate the donation animations as closely as possible using transforms.
Be sure to mark the next AGDQ on your calendar for January 5-12, 2020. I love watching games I used to play in the 80s and 90s get destroyed and all for a great cause!
Web Developer