What is it?
Manaculator is a simple, mobile-first interface for calculating ratios to help with land type distribution when drafting a Magic: The Gathering deck. By entering how many symbols of a given type are present in your deck, the manaculator will give a recommendation of how to distribute lands in your deck based on how many total lands you want in the deck!
Try out Manaculator at http://manaculator.surge.sh/ or view the repository below!
#MTG-Mana-Calculator
This ReactJS app is just a project to help my friends calculate their mana ratios faster for drafted decks!
To modify this app, do the following:
- Fork this repo and clone
- Navigate to the directory for the project and
npm install - Once changes are ready to be deployed,
npm run predeployand thennpm run deployto create an optimized build, and then publish the changes onto the gh-pages branch, updating the Github Pages-hosted website
How I built it (what's the stack? did I run into issues or discover something new along the way?)
The Manaculator was built using React, CSS and some simple Javascript functionality.
One main issue along the way was dealing with an equal distribution of mana symbols present in the deck, but an odd number of total lands required. Lands in a deck must be dealt with in whole numbers, so at first I used rounding to deal with the messy math resulting in decimal values. This lead to incorrect land totals however, because if a 50-50 ratio occurred and we round up both 0.5 values, we have created a "required" land that didn't exist in our total number of lands!
To deal with this I opted to provide more accurate, decimal values for users, but this proved to be more complicated to interpret from a user perspective. Eventually I was able to add in some more complex logic in the ratio calculator that would only allow one value to be rounded up, and the other to be rounded down. While the ratio itself may not be 100% accurate, this is much more user-friendly and more useful when drafting a deck.
Congrats to all the new grads out there!
Top comments (0)