Klask Standings
Klask is a table-top game akin to air hockey that we play in the office at Esri. The goal is simple: hit the ball in the opponent’s goal using a piece on the table controlled by magnets under the table.
We play a lot of Klask in the office and had no way to keep track of our wins and losses. We needed the ability to report games and keep track of player statistics over time. Justin Velgos and Joel Whitney designed and developed an iOS app. This was a great start, but not particularly convenient for everyone. A (very small) number of us are Android users. Additionally, it can be faster to report a game on your computer, which is nearby since we're at work. Aaron Pulver and I wanted to experiment with Progressive Web Apps for fun.
Solutions
We built a PWA using EmberJS, Ember Paper (Material Design components via Ember), and Firebase to host the app and store data. Our web developers use EmberJS, so this was a good opportunity to understand their development environment.
- sign in
- leaderboard standings (home screen after signing in)
- submitting/reporting the outcome of a game
- viewing a user's profile
- removing a game
- viewing different statistics on the standings screen
- viewing a game's timestamp
Aaron wired up the more complex, data-related functionality: keeping track of games, storing user info, calculating standings. I was responsible for design and implementing most of the front end.
The game board and packaging use a font that looks handwritten.. by a child. It’s silly and indicative of the game’s younger target audience. (Oddly enough, this Danish game is very popular in pubs.) Justin and I wanted to keep that same fun, lighthearted experience when using the app. We achieved this by using a silly font we’d never get to use at work and a vibrant color palette.
There’s still a lot more to do!