Champion Mastery - Riot API Challenge

Description

This website was created for the Riot Api Challenge, April 2016 on Champion Mastery data. Gaming is all about fun, luck and having a good strategy, so we decided to combine them into one website. We hope it will be a fun experience for everyone that wishes to learn more about League of Legends, themselves and their friends. As far as luck goes, we went on and got council from Lady Luck herself upon choosing the category, and as summoners (imnubcake and psycho), we were happy that faith has given us the opportunity to work on our creativity/originality skills, and in our arsenal of spells and code creating magic, we used PHP/HTML/JQuery to bring chaos, light and awe to the eyes and minds of any who dare enter our website, engulfing them better in the world of League of Legends.

We have divided the site in two main parts:

1. Homepage with mutiple summoner searches

Demo URL

Here you can view for you and 4 other friends:

• Champion mastery points
• Summoner summary
• Most played role
• Ranked summary

2. Champion list

Champions List

With:

• filters by role
• champion information viewer

Installation:

1. Install PHP and Apache
2. Set your API key from Riot Development in include/api.php in variable $apiKey
3. Run the app. You should be able to view the website on your http://localhost/.
4. Have fun.(If you find some bugs please contact us)

Technical Info:

We tried to keep the project simple and fast, so we only used the following tehnlogies:

• PHP
• jQuery & Ajax
• HTML/CSS3 (created unique design in Photoshop)

jQuery Plugins:

• Circle progress: https://github.com/kottenator/jquery-circle-progress
• Isotope Filter: https://github.com/metafizzy/isotope

We tried to make the site more user friendly by using Ajax instead of post methods in PHP to reduce the waiting time on refresh. For displaying and viewing champion data we created our custom Css3 modal. We made the project entirely with Api requests but in the future we can add a MySQL database to reduce request time for static api data.

What we learned from this

We learned about Riot Api and how to use Ajax to handle multiple server requests time.

Tutorial http://championmastery.redcrin.com/about.php

URL DEMO: http://championmastery.redcrin.com

We hope you will love it! Thanks!