MJM

MTG Deckbuilder

2019-03-07

#JS #UIKit #MTGAPI

mtg-deckbuilder

A simple and beautiful solution to building decks for Magic: the Gathering. Made using JavaScript and UIKit. Github

Creating a Deck

Cards can be searched for using the search bar on the top header. The application queries as you type, giving recommended results to what you currently have entered. Once the card is found, it can be added to the deck to the deck by selecting the “plus” button on the same header, this can be pressed multiple times to add multiple copies of the card. Additionally, above each card photo, there is the option to add or subtract the card from the deck. Furthermore, there is a down array button that can transfer cards from the mainboard to the sideboard. An up arrow button moves sideboard cards to the mainboard.

Deck Features

Decks can be exported in a JSON format which can be read by the website, uploading the deck with the exact quantities and order. The import button can upload decks only saved by the website, it does not support other applications. The print option lets users print out sheets of all the cards to proxy the deck before they purchase all the cards.

Example deck JSON:

{
  "mainboard": [
    {
      "count": 4,
      "card": "Monastery Swiftspear",
      "url": "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=386608&type=card",
      "id": "a5aabff6-7726-5565-87a3-2eec30464c29"
    },
    {
      "count": 20,
      "card": "Mountain",
      "url": "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=451257&type=card",
      "id": "bc39b166-a3ee-5282-a9e3-e7ee4bbd7896"
    },
    {
      "count": 2,
      "card": "Rift Bolt",
      "url": "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=108915&type=card",
      "id": "2b742de1-a9ac-54b7-9e34-438dc9e2d180"
    }
  ],
  "sideboard": [
      {
      "count": 2,
      "card": "Searing Blood",
      "url": "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=378483&type=card",
      "id": "3639b8cc-675a-58de-bbae-a929af918d9a"
    }
  ]
}

How the Application Works

The deck builder is very streamlined and simple. The whole process is broken up into three steps

  1. Querying the card from
  2. Parsing the JSON
  3. Adding the card to the deck object (exported as a JSON)

All of the data is directly from Wizards of the Coast, the creators of Magic: the Gathering and uses their API. Each query is done with cURL via https://api.magicthegathering.io/v1/cards?pageSize=20&name=. The API is used for adding cards and for the search autofill. Upon querying a card, the only information that is saved to the deck object is the quantity, card name, url of the image and the card ID. The card ID is the only way to guarentee the same card is uploaded every time a deck is imported, due to similar names such as “Goblin Bomb” and “Goblin Bombardment”. All the other features are based off of those core components, the deck object and the API. These two parts allow for cards to be moved around, quantities changed and cards added.

Planned Features

4x Lightning Bolt
3x Goblin Guide
20x Mountain
2x Rakdos Charm

Future Features