League of Legends Trivia Game

What do you get when you combine the world's two most addictive games. Wordle and League of Legends, together? The League of Legends Trivia Game! What better way to start the day than some LOL trivia!

Comment

Inspiration

We were inspired by the hit-game Wordle, as we were amazed at how such a simple game could be so addictive. Thus, we decided to have the game follow the daily new puzzle format. We also decided to make our Trivia game League of Legends related because we recognize that it's a really popular game with a dedicated fanbase.

What it does

The game is a website-based trivia guessing game where a new League of Legends related term is generated everyday. Players have three guesses to get the word correct, and after each guess a new clue is revealed about the term. There's three different categories of which the term could fall in: champion, ultimate ability, and item. The game also tracks various statistics about the player's performance, such as the player's win rate and longest win streak.

How we built it

We had a HTML/CSS (+ Bootstrap)/JS frontend, and a Node.JS/Express JS/Cockroach DB backend. We wanted a distinct front-end and back-end so that we can each work on a portion of the app at the same time without any conflicts. The backend is responsible for generating the daily word and clues. The clues are extracted from the Riot API and some are also web scraped from the League of Legends wiki using Puppeteer. The master list of the League of Legends terms are stored in the Cockroach DB, along with a field that keeps track of whether the term has been used for not. We were able to utilize this field to create fast queries to generate a new random word that has not been used before, while also utilizing the external nature of a database to prevent loading lots of data in the front end. We created an API endpoint in Node.JS using Express to allow the JS in our front end to request the information generated in the back end. The JS in our front end handled most of game logic, and utilized Bootstrap to make our game mobile responsive.

Challenges we ran into

Setting up the Cockroach DB was definitely a challenge for us, as we didn't have much experience with using databases. However, through looking at documentation examples and Youtube videos, we were able to set it up and utilize Sequelize to help us make queries with the database. Another difficulty we ran into was web scraping for some of the clues in the backend, as some of the information we needed didn't fit a obvious pattern we could utilize. We managed to solve this through using a series of interesting Jquery selectors.

Accomplishments that we're proud of

For one of us, it was his first time doing web development, so just being able to help in developing this whole website and working with software he has never worked with before was a huge accomplishment. We are also proud of just being able to develop a full stack app, as neither one of us had much experience in it.

What we learned

One of the things we learned was just what a general structure of a full stack app looked like and how the front-end and back-end are able to communicate with each other. We also got to experience using Cockroach DB, which was something new for both of us.

What's next for League of Legends Trivia Game

There's currently a small bug for the item words, so that would probably be our first priority. After that, we would want to refine it so that it is ready to be published live and played by anyone.

Share this project:

Updates