Interface enthusiast
Interface enthusiast

Tapdown.me – Magic: The Gathering Life Counter

Tapdown is a free, open source, responsive Magic: The Gathering life counter web app.

Comparative Analysis

MTG is very popular, and a wide variety of electronic tools already exist. Why make another one?

Web App

There are a wide range of MTG life counters available on the App Store and Google Play, but no web applications. Web apps are device agnostic, lightweight, and require no upgrade procedures.

Single User

In my experience playing Magic, I noticed that people (including myself) like to keep their own life totals. Many of the life counters I’ve tested are meant for both players to use. This means your life count faces you, while your opponents life count is upside down, facing them. This resulted in me trying to read upside down numbers. Tapdown is meant for just you.

Design Centric

Magic: The Gathering is a beautiful card game. Why should your life counter not follow suit? Minimal, beautiful design with a great user experience was my goal.

Build Challenges

While building Tapdown I encountered a few hurdles that I wish to document here.

Making it Responsive

It was very important to me to make Tapdown work at every screen size and orientation. From mobile phone, to Kindle, iPad, desktop, Tapdown functions the same and still looks pretty. Given the simplicity of the interface, this wasn’t too hard to accomplish. There is not a single media query in my CSS. I had to refresh iScroll on window resize, but that’s it.

Fast Tapping

Some major mobile browsers (such as Android and Mobile Safari) impose a 300ms delay on the click event. This ruined my user experience, especially when having to tap down big chunks of life without a -5 or +5 button as some life counters provide. My solution was jQuery fastClick, a Jquery plugin by Dave Hulbert.

Deciding on a Feature Set

Figuring out what was necessary and what wasn’t was my biggest challenge. I kept asking myself the question, “What are the minimum amount of features needed to make this something people would actually use?” I think this served me well.

Features I decided to include:

  • Life counter
  • Poison counter
  • Incrementing by + or – 1
  • Reset button

Features I decided NOT to include:

  • Planeswalker counter
  • Incrementing by + or – 5
  • Inputting player names
  • Inputting deck color type
  • Keeping track of life gained or lost over time
  • Changing color schemes

Some of these features might find their way into the app later down the road. I think there is value to being able to look back at life total changes in the case of a dispute or mistake. I also don’t expect everyone to like my color choices and would love to offer alternatives.

Apr 19