Magic: The Gathering Web App

Development Status: Stable – Beta

Click here for the Change Log.

Click here for a list of planned features / work remaining.

Click here to go to the web app.

Main Features:

  • Pure HTML5 / CSS3 / Javascript web application (compatible with computers and most smartphones)
  • Life, Poison, Commander Damage counters
  • Card Search
  • Deck builder and analyzer
  • Coin / Dice simulators
  • Commonly asked rules and comprehensive rules

Development Notes:

I decided to abandon my idea of an “offline” magic the gathering app because of the effort involved with updating the list of cards every expansion and re-compiling the app. It’s very time consuming for just one person to do, and that’s not even getting into managing two separate apps in two different languages (Android Java and Objective-C).
 
Instead I went with a web app because most smartphones have modern browsers that support HTML5 / CSS3 / Javascript, so I could write the app once and it’ll run on just about any computer / phone. The only thing I would need to change (once written) are the stylesheets for difference size screens.
 
I ended up using jQuery, jQuery Mobile, Underscore.js, and Backbone.js. I never used any of those before but luckily jQuery/jQuery Mobile is very well documented with examples. I was quickly able to build the structure of a multipage web app with basic transitions and headers / footers that behaved like drawers.
 
To make sure I didn’t bite off more than I could chew, I started with what I knew first: basic AJAX. I first implemented the card lookup with difficulty using jQuery Mobile’s Autocomplete widget (after realizing mtgapi.com wasn’t returning proper JSONP responses but instead text/html). Then I implemented the Comprehensive Rules search (with the help of a jQuery highlighting plugin). I optimized both to institute a delay before sending the AJAX requests (to minimize the total number of requests). Also implemented a swipe to reveal previous / next card in the card lookup page and added persistent highlights to easily see which card was selected in the list.
 
Then I implemented the random generators: coin flip, 6-sided die, 20-sided die and a custom range roll (-100 to 100).
 
Next I decided to tackle the Life Tracker portion using Underscore + Backbone. I used JSFiddle to prototype the Underscore Template and Backbone View, and when I had something I liked, I integrated it into my app. Both took longer than expected. I implemented persistence using HTML5’s Local Storage. I used JSFiddle again to develop a proof-of-concept for a method to assign damage (drag from one player to another, being able to determine the starting and ending points).

Magic: The Gathering Web App – Change Log

Change Log

    December 31, 2013
  • Added the ability to change the quantity of a card in a given deck.
  • Fixed the AJAX card retrieval issue from MTGAPI.com (author changed the structure of the response)
  • Bug: When viewing a card in a deck, if the scrolling threshold isn’t reached (in distance / time), the “Change Quantity” popup will appear.