Dota2 vs. League of Legends – API war

Dota2 vs. League of Legends – Which do you prefer?

Here at Mashape we love online games, most Mashapers are avid online gamers, we all have our favorite style and secret strategies to beat our enemies online.

Of course we love to take sides, we love joking around about Marco’s camping skills on Counter Strike, and Nijiko’s pride in last hitting creeps.

var games = ["Quake3","WoW","Dota2","LoL","CS1.6","UT"];

function wePlayedIt(gamesArray){
  for(i = 0; i < gamesArray.length; i++) {
    var p = document.createElement("p");
    p.innerHTML = "We played " + gamesArray[i];
    document.body.appendChild(p); 
  }
}

(wePlayedIt(games));

Whether FPS, RTS, MOBA or MMO, we’ve probably played it at some point or another!

Today I would like to talk about MOBAs, and more specifically League of Legends (LoL) and Defense of the Ancients 2 (DoTA2), two similar, yet very different, but both extremely popular online games.

Dota2 vs. League of Legends APIs

League of Legends and DoTA2 have been rising to popularity over the years. Some important factors that helped LoL and DoTA2 become popular are the highly rewarding tournaments (with a huge cash prize), large sponsors such as Coca-Cola and Intel, and most importantly, the amount of time and resources each producing company has spent in making its game eSports compatible! Raise your hand if you used to trash talk World of Warcraft and the original DoTA and then moved to the same DoTA2 or LoL!

A lot of websites that host competitive game footage are built using statistics and internal API. These websites provide graphs that quickly visualizes valuable game highlights, with options for additional information through dropdowns.

Dota2 vs. League of Legends

Player stats graph for games like LoL and DoTA2

APIs to gain competitive advantage or to improve experience

Player communities have spent a great amount of time to process game related data and statistics in order to invent new builds and discover the best combination of items, strategies and team drafts. Guess what, there are APIs to extract these data, from which you can leverage and build amazing tools to gain competitive advantage over your online enemies! It’s not just for show, you can use the same data yourself!

Recently, I have been really into League of Legends, and I have been spending some quality time on it. However, I realised that it is really easy to lose focus on your objectives in game.
Depending on the type of hero I play, I alternate between having to deal lots of damage, or shielding the team from damage by tanking and not dying. However, it is not always obvious that I’ve improved my skills game after game, especially if the end result is always a victory (or loss).

For this reason I’m going to be building a way to track my performance over time. This blogpost will set the rough basis of what I am aiming to do. If there is further interest, I’ll write a follow up with a more tuned version of the prototype.

For this mashup, we’re going to capture data from Mashape in Python, then use Firebase to store data and retrieve it with Highcharts.JS, a JavaScript library to display graphs easily.

Explanation:

  • We’re downloading our match game data from the server through the API hosted on Mashape. We’ll then process it slightly with Python and load it on the remote database. Since this post is not focused on the setup and maintenance of data sets, we’ll do it in a quick, yet secure and efficient, way with Mashape, one of my favorite services!
  • After processing, we retrieve the data back on demand with Javascript.
  • The data is processed with the HighCharts library and is displayed and rendered in the browser for the viewer.

* I would not put this code on a public domain because the way it’s built it allows anyone to tamper your data.

import unirest,json,requests

#define constants

MY_REGION = 'na'
MY_NICKNAME = 'mashape'
MY_FIREBASE = 'shine-fire1384'


#Retrieve the data from the API
response = unirest.get("https://teemojson.p.mashape.com/player/"+MY_REGION+"/"+MY_NICKNAME+"/recent_games",  headers={"X-Mashape-Key": "MY-MASHAPE-KEY", "Content-Type": "application/x-www-form-urlencoded"})

#Load the response from the server into a nice json obj
jsonfile = json.loads(response.raw_body)


#chunk the huge data to only care about the statistics
all_games = jsonfile['data']['gameStatistics']['array']

#because the values returned are messed up we need to perform a cleanup to find the values needed
def findstat(index, typestat):
    statlist = jsonfile['data']['gameStatistics']['array'][index]['statistics']['array']
	for idx, stat in enumerate(statlist):
		if (statlist[idx]['statType'] == typestat):
			return statlist[idx]['value']

#We send the data to firebase that will hold our data and is easy as cake to set up
def pushdata():
	#Start a session to push data
	request_session = requests.Session()
	
	#We’ll push one of the many statistic to the server, you can pick one from the available ones, in this instance I am pushing the total damage done to enemy champions (champions only), then you can retrieve it to analyse historical data over time

	for idx, game in enumerate(all_games):
		dmg = findstat(idx,'TOTAL_DAMAGE_DEALT_TO_CHAMPIONS')
		payload = {'championId': jsonfile['data']['gameStatistics']['array'][idx]['championId'], 'damageDone': dmg }
		url = 'https://'+ MY_FIREBASE +'.firebaseio.com/data/' + str(jsonfile['data']['gameStatistics']['array'][idx]['gameId']) + '.json'

		request = request_session.put(url, data=json.dumps(payload))
		#Uncomment below to DEBUG
#print request.text

#Run the function to push the data to the server
pushdata()

The below will represent a rough graph of the damage dealt by you, the champion used is championId, this is just to get you started, you can come up with whatever graph you want with a little bit of tweaking the logic and the data stored.
Create a clean HTML file and set-up as explained below.

/*Add these to you head HTML tag 
<script src="https://cdn.firebase.com/js/client/1.0.19/firebase.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

Also add the below in the body of the page: This is where you will spawn the chart!

<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto">
*/

This is your Javascript file, name it whatever you want and then include it in the HTML with a script tag

<script src=myfile.js>
//DONT FORGET TO CHANGE THE BELOW
var db = new Firebase("https://YOUR-FIREBASE-ID.firebaseio.com/");

var data = 0;

db.child("data").on("value", function(obj) {
 cat = [];
 dmg = [];
 champId = [];
 data = obj.val();  
  
  for( var i in data) {
    cat.push(i);
    dmg.push(data[i].damageDone);
    champId.push(data[i].championId);
  }
var dmgObj = {
  name:'damage',
  data:dmg
};

   $(function () { 
     
     cat = champId;
    $('#container').highcharts({
        title: {
            text: 'Damage per game',
            x: -20
        },
        subtitle: {
            text: 'Built with: Mashape, Firebase, Highcharts',
            x: -20
        },
        xAxis: {
            categories: cat
        },
        yAxis: {
            title: {
                text: 'DAMAGE'
            }
        },
        tooltip: {
            valueSuffix: ' DMG'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [dmgObj]
    });
});
  
  
  
});
</script>

Start building your own API Mashup today! CONSUME API NOW