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.
- Life, Poison, Commander Damage counters
- Card Search
- Deck builder and analyzer
- Coin / Dice simulators
- Commonly asked rules and comprehensive rules
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).
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).