By: Autumn Wright
rEDH (short for random Elder Dragon Highlander) is an interactive website that allows users to generate entirely random, but legal, 100-card Magic: The Gathering™ Commander decks.
This project utilizes a number of web technologies. For the visual design, a combination of templated web components and the Bulma CSS Framework are implemented alongside CSS stylesheets to create a clean and consistent look.
On the functional side of things, this site employs chained fetch requests, JSON parsing/filtering, and both local and cloud based storage in its JavaScript code.
A number of complex steps are involved with the deck generation process. When the user first presses "Go", a random Commander card is selected by querying the Scryfall API with the provided color identity inputs.
Next, it uses the color identity of the selected Commander to filter down a list of every Magic card in existence to only those that can legally be included in that Commander's deck.
Then, it filters that list even further down to two lists: one with specified number of land cards, and the other of (99 - # of lands) nonland cards.
During the filtering process any duplicate non-basic cards are discarded. Finally, the two lists of card IDs are formatted into a JSON collection readable by the Scryfall API to pull in the data for each of the chosen cards.
A decklist web component and grid of cards are then constructed using the name, image, and Oracle URL data and displayed to the user.
Once a deck has been generated, the user has a number of options available to them.
Clicking the "Copy" button provides them with a browser prompt of the decklist, pre-formatted to be pasted into most common Magic: The Gathering stores or deck-sharing websites.
Clicking the "Publish" button will upload the deck data to a Google Firebase database, which will make the deck viewable by others in the "Community Decks" tab.
Lastly, clicking the "Save Decklist" button will save the deck to Localstorage, allowing it be viewed later in the "Saved Decks" tab.
Localstorage is also implemented as a rudimentary form of authentication, preventing users from liking a deck multiple times on the Community tab without requiring them to sign in to an account.
