A roulette game to help others do the bare minimum to stay (mildly) fit.
Program for the people
When it comes to games, a video is worth a thousand screenshots. Here's a Vimeo video of the whole game experience.
Getting started is always the hardest part of cultivating a new habit. We could all use a bit of help with gamification.
How it works: Spin the roulette, and whatever exercise you get, just hit the Start timer button. A timer will run for 45 seconds. Do the exercise for that amount of time.
When the timer is up, click the Spin again to do another exercise. Repeat as many time as you like. If you get burpees seven times in a row, do it anyway.
I'm inspired to make this roulette game after watching this video by fitness guru Casey Ho. It's an interesting, creative take on the same old workout routine.
I've heard a lot of great things about Digital Ocean in general and I always enjoy its community posts, but this hackathon is the first time that I tried its app-deployment platform. The user onboarding is excellent and everything was a breeze.
The list of new things and lessons I've learned during the making of this game is too many to name, but the most notable ones are:
- Drawing with CSS, namely creating gradient, highlight, triangle shapes etc. To be honest, next time, I would have used SVG to speed up the drawing process. (How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
- CSS animation for displaying the exercise name, and running the timer. Yes, the timer animation was done entirely with CSS.
- How to reset animation. The animation property on the timer only runs once. I need to figure out a way to trigger it again when users click Start timer for the umpteenth time.
- How to make flip card effect on button click.
- How to use custom data attribute to store the rotation degree for the roulette.
There's one aspect that was much more time-consuming than I thought: How to maintain a consistent design. This is such a one-page app, but I spent so much time on choosing color, font size, font weight to convey hierarchy.