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.

Magic: The Gathering Encyclopedia

This is an offline Magic: The Gathering app I started writing for the Android OS.  I wanted to have all the card information stored offline in order to preserve the battery life of the phone and only go online to download an image of the card.  If no internet connection was present, it would still be possible to view the text of the card for informational purposes.

Background:

I thought about creating when hearing about my friend (who has an iPhone) say that when he uses the internet, it drastically shortens the battery life of his phone.  At the time, I didn’t have an internet-capable phone so I couldn’t test whether it was the iPhone that lost battery life quickly, or happens to all phones to some degree when accessing the internet.

Features:

  • Offline card information
  • Filterable card lists to find cards quickly
  • Select up to 6 sets to display at once (limited for scrollability, while being able to display most of Type 2 sets)
  • Fixed portrait orientation to maintain card-likeness
  • Cached loading/settings (prevents having to re-load sets when the app is closed/rotated)
  • Loading Notifications (notifies you if cards are still loading when in Database mode, and when cards have finished loading no matter what mode you’re in)

Development Status: Inactive

Download:

Magic-debug – Zipped android application (unable to upload direct APK file).