Please note that this implementation is out of date. The Riot API has changed significantly since the development of this app, and so it's likely to not behave as expected.
HextechHunt is a web application that allows League of Legends players to keep track of their Hextech Chest rewards via Champion Mastery for the current season. Players can enter their Summoner name and select their Region to view a comprehensive list of Champions that they have played, and see whether or not they have been granted a Hextech Chest as a reward for Champion Mastery (by either themselves or a teammate). The list will also indicate which Champions hold significant potential to reward the player with a Chest if they have not been rewarded already.
The Technologies and Libraries
- AngularJS (1.5.5)
- Node.js (5.11.0)
- Npm (3.8.7)
- Express (4.13.1)
- jQuery (2.2.3)
- Normalize.css (4.1.1)
- Heartcode CanvasLoader (0.9.1)
- Ionicons (2.0.1)
Overview and Control Flow
Here is an overview of the application's bread and butter components at work:
Experiences and Challenges
Although I am very well aware that this application is simple, and that many Riot Games API Challenge entries demonstrate phenomenal skills in design, development, data analysis, etc., I took the development of this application as an opportunity to learn and grow. The majority of my development experience comes from back-end development both academically and professionally. Only recently did I start getting into front-end development and frameworks such as AngularJS and Node.js. Hence, I took all that I knew, learned and did what I could, and ended up with HextechHunt.
Some challenges I faced:
- I am a full-time employee, so time management was a big challenge.
- I had some issues with the Static Data, primarily with the Champion (square) images. I had to convert the names of some of the Champions with camel-case names; e.g. LeBlanc had to get converted to Leblanc. However, Rek'Sai only had to lose the apostrophe, and keep its camel-case name (?). Finally, there is Wukong, who had to get converted to MonkeyKing. Figured that out thanks to this forum discussion. Should I have extra time, I will implement a request to the API to get the correct Champion keys.
If I Had Extra Time, I Would Have Liked To...
- Learn and utilize a web framework to simplify my implementation.
- Allow sorting the results in the Results view.
- Come up with a more sophisticated way of predicting which Champions hold significant potential to reward the player with a Chest, if they have not been rewarded already.
- Implement end to end testing with Protractor.
- Do more testing.
- Make the application more responsive for better mobile viewing.
- Generally improve styling.
How to Set Up and Run Locally
Make sure Git is installed and configured on your machine.
Obtain an API key from the Riot Games Developers site.
Create an environment variable called RIOT_API_KEY to reflect this key. Example,
Install Node.js and Npm. I believe the Node.js installer for Windows and Mac will also install Npm for you, while Linux users will be required to install them separately via package manager. Please double check though! You can check your installation of Node.js with
nodejs --version. The same can be done for Npm with
Install http-server globally with
npm install http-server -g.
Clone this repository to a location of your choosing with
git clone https://github.com/abaran30/hextechhunt.git
Inside the project folder will be two additional folders: hextechhunt-client and hextechhunt-server. Run
npm installin both folders.
After you verify a successful installation of dependencies (a node_modules folder will appear in both hextechhunt-client and hextechhunt-server), you will now need to run two processes. I recommend having two terminal instances open for this; one for each process. For the first process, in hextech-client, run
http-server. If successful, you should see output like the following:
Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.1.2:8080 Hit CTRL-C to stop the server
- For the second process, in hextech-server, run
npm start. If successful, you should see output like the following:
> firstname.lastname@example.org start /home/some/path/hextechhunt/hextechhunt-server > node index.js $HOST HextechHunt (Server) started at http://localhost:3030
- At this point, the application is running locally! Open up your favorite browser (Google Chrome or Firefox recommended) and navigate to http://localhost:8080. If all went well, you will be in HextechHunt!
Notes for Development
When the project is running locally, keep in mind of the following:
- Changes made to the code/markup in hextech-client should be reflected in the application immediately upon browser refresh. If for some reason you are not seeing your changes in the application, check to make sure the
http-serveris still running and clear your browser's cache.
- Changes made to the code in hextech-server will require a server restart. Simply kill the server process (Ctrl + C) and re-run
npm startin hextech-server.
Special thanks to Riot Games for giving us the opportunity to create these awesome, game-data-driven applications. Win or lose the April 2016 API Challenge, it has been a most pleasurable experience to create my own application featuring Riot Games data and League of Legends. Developing this application helped me learn more about the aforementioned technologies and API-driven development in general, and for that I am very grateful.
HextechHunt isn’t endorsed by Riot Games and doesn’t reflect the views or opinions of Riot Games or anyone officially involved in producing or managing League of Legends. League of Legends and Riot Games are trademarks or registered trademarks of Riot Games, Inc. League of Legends © Riot Games, Inc.