Legends of Runeterra Deckbuilder Project
I’m currently attending Digitalcrafts full-stack coding bootcamp and was given the assignment to create a front-end webpage. I decided to try to recreate a deck builder inspired by mobalytics.gg. The app uses html and vanilla Javascript, CSS, and even pushes cards to local storage so they can be viewed later in the deck editor. Legends of Runeterra is a CCG developed by RIOT Games that I have been enjoying recently during free time. So picking a topic that I enjoy to work on during school time was a no brainer.
The biggest feature is the card filter. Legends of Runeterra has over 1,000 cards to choose from so the user needs to be able to have a way to filter them down more specifically. There are 4 expansions, 9 regions, and 4 different card types to choose from. The hard part was displaying cards that can only be added to their deck in the game. In LoR some cards ‘create’ other cards so those shouldn’t be displayed in the card selector. This was achieved by setting many filters on all the cards in the JSON data.
The hardest part to figure out was getting the cards to display on another page since we were just using front-end. In comes local storage. We haven’t learned about local storage so my instructor helped me on this. Local data can only store strings so once the user selects the card it gets turned into a string and put into local data. When viewing the cards on the deck editor the cards are then parsed back into an array. A remove button was added to each card which will delete the actual item from local storage. And also a reset button to clear the local storage and start a new deck form scratch.
I enjoyed working on this project a lot and got to learn a lot more things to improve my JS and CSS skills. Next week we start learning more of the back-end for coding and I’m looking forward to it. Below is a link to the github page if you’d like to play around with it!
