MtgVue

Magic the Gathering within a browser

Project is still in construction!

Purpose

I want to synthesize the various technologies and methodologies that I have learned over the course of my professional and academic career. During my college days, I spent my breaks playing Magic the Gathering with friends and talked about the game. Due to its complexity, I figured I could use this game as my training grounds.

Target goals

• Provide a magic UI that is clean and simple regardless of the device you are using
• Play a game of magic with as many players as you would like
• Create/Save/Load magic decks
• Add users as friends to chat and share decks
• Provide out of the box rules that let's you play format-specific games (commander, popper, standard, etc...)
• Provide customizable game rules (make your own format)
• Simple game automation that keeps track and manages mana expenses and turn phases
• Advanced game automation that reads out cards and apply the required actions accordingly

Tools

• Frontend
  • VueJS - An awesome javascript framework!
  • Vuex - State manager made simpler for large scale projects
  • Vue Router - Library for page navigation
  • Vue CLI - An awesome tool to kickstart any project, regardless of the size
  • Axios - A library to execute promisified http requests
• Backend
  • NodeJs - Javascript Framework running in the backend as a server!
  • Express - HTTP utilities for the backend
  • Mongoose - ODM for my database
  • Cors - For simply making your life easier when testing locally
  • Nodemon - Tool for quick reloading upon file change on the backend
  • Nodemailer - Very easy library to send out emails
  • Body-Parser - A middleware to parse data from the request object to my server
• Database
  • MongoDB - NoSQL database
• Other
  • MTGJSON - JSON object of remotely anything involving MTG
  • Scryfall - Great MTG website with HD image assets for the cards
  • Gatherer - Offcial MTG card browser
  • BcryptJS - A library to encrypt user information
  • Socket.io - My favorite library for establishing a connection between multiple clients
  • JWT - Token passed down to the logged in user to interact with my app without logging-in each time

Run it locally

You will need to have MongoDB installed on your computer You will also need a copy of AllSets.json from MTGJSON Once you have the DB setup and you have downloaded the json file, open up a terminal and clone the repo Time to get all the node modules requried for the project so head over to the root of the project and run the following

$ cd mtgvue/api
$ npm install
$ cd ../app
$ npm install

Now, we will need to populate the database in order to get cards. I took the time to create some helper scripts in order to make the process a lot faster. For starters, open up MongoDB in a terminal or with Compass and create a new database (I named mine mtgdb). Also, Create a collection within mtgdb called cards (this is where all the cards of MTG will be stored)

Great, your DB is ready to be populated! In a terminal, head over to the root of the project and run the following ⚠ This command will take a lot of time since I am scraping scryfall to acquire all card images. Eventually, card image scraping should be done in a separate command

$ cd mtgvue/api/helper
$ node mtgjson_makecarddb.js <relative path to your AllSets.json>

With that last command executed, your DB is ready! this script also adds a few extra fields to the existing JSON data in order to make my life easier hahaha!

Finally, we can launch the app and the server. Head over to the root of the project and execute these last few commands

$ cd mtgvue/app
$ npm run serve

Open up a new terminal, and execute the following

$ cd mtgvue/api
$ node index.js

License

MIT