Final Project - Trading Card

The Project:
The project we chose to work on was to create trading cards that display multiple statistics pertaining to each card and for the user to have the ability to create their own card from a template. In order for the user to be able to create their own card, we needed to implement HAX so the elements were able to be manipulated. The card had to look similar to an asset looking like this:

Progress So Far:
So far, we have made solid progress as a group and the cards are starting to come together. As of right now, the cards look like this:

We still may change some of the properties around and make overall improvements towards the card. The card does work with HAX in the demo, and users are able to customize and create their own trading card.

The array called 'cardData' is where we pull most of the information from like the name, image, age, power, and speed.

'cardData' also is where the formatting for the statistics and image rendering is done. The CSS in 'cardData' is done in a way to make the images look more like conventional trading cards.

Arrays are then rendered via mapping to be updated and printed according to our specifications. The mapping was somewhat tricky to figure out, but we are glad we did because it makes the rest of the project easier to work with. HAX was also pretty cool to work with and giving users the ability to change elements to accommodate their preferences is an interesting and forward-thinking concept.