Warcraft Realm Status Block

06
Nov
2014

Warcraft Realm Status Block

This is something that I've had working in the past on previous sites but recently I had to build it up all over again using the new Battle.net API. To be honest I was a bit intimidated by this. You see I am not exactly the worlds greatest expert on javascript, jquery, and json. My scripting language knowledge base is very limited in that regard. Nevertheless I did finally figure out how to build it and I am making this post as both a reminder for myself (and to other people who may stumble along) so I don't forget how to do it. 

Here is my basic objective. I want to make a web-app that displays the realm status for a particular server. This is for the purpose of a guild website so people can check the status quickly from home and on mobile devices like tablets and phones. 

Here is what I am going to make:

Now before we start you should go ahead and make an account on the Battle.net Developer Website and get yourself an API key.  Trust me you want to do it, I tried doing it without the key and it just didn't work very well (or very long). Get a key, it's free and it works great.

So how exactly do I go about building this app? Well first let us look at the code that we are going to be using.

<div id="realms"></div>

<script type="text/javascript">

 

$.getJSON("https://us.api.battle.net/wow/realm/status?realm=[YOUR REALM]&locale=[YOUR_REGION]&apikey=[YOUR_API_KEY]w&jsonp=?", function (data) {

$.each(data.realms, function (i,item) {

var Rstatus = item.status;

if(Rstatus) {

Rstatus = 'Online';

} else {

Rstatus = 'Offline';

}

var $StatusString = "<div class=\"realm " + Rstatus + " \"><p>" + item.name + " is " + Rstatus + "</p></div>";

$($StatusString).appendTo("#realms");

});

});

 

</script>

I know this looks like a jumbled mess but let me go about trying to explain how this is supposed to work.

First off we have the container for the app. That being <div id="realms"></div>

Next we have the $.getJSON function. 

What this function does is call up the url of the API that we are using and assigns it to a data value that is more easily usable by our app.

Next we have the Blizzard API for the realm status. You need to understand what this means if you want to make any sense out of this.

The first part of the string is straight forward in telling us what we are trying to do.

https://us.api.battle.net/wow/realm/status?

This is saying that we are inquiring about the realm status of World of Warcraft. Next we Specify our server and region.

realm=[YOUR REALM]&locale=[YOUR_REGION]

Note the & between each variable. Don't forget about it! So for instance if I was looking for my server which is on Duskwood in the US I would put.

realm=Duskwood&locale=en_US

Next it is time to input your api key.

&apikey=12345678910abcdefghijklmnopqrstu

And finally you put in that you are requesting the data from blizzard to your website.

&jsonp=?

So if you put this entire string together your API url will look something like this

https://us.api.battle.net/wow/realm/status?realm=Duskwood&locale=en_US&apikey=12345678910abcdefghijklmnopqrstu&jsonp=?

Now the ,function (data) at the end if your $.getJSON string defines the data you just pulled as a string with a defined value of data.

Now what $.each(data.realms, function (i,item) { is saying is that it wants to define each variable in the data string as a item.[value] variable. I know this isn't a 100% accurate definition of what is going on here but like I said before, I'm a novice. I assume the people reading this are novices as well. For this tutorial this will work as a quick explanation. 

This next part isn't REALLY necessary for the layout that I'm using but I thought I leave it in here for flexibility purposes. You see if I were to print out the server status directly by calling up the item.status value it would print true or false. This isn't as straight forward as simply saying Online or Offline. Thus the following if else statement is used.

var Rstatus = item.status;

if(Rstatus) {

     Rstatus = 'Online';

} else {

     Rstatus = 'Offline';

}

First this defines a value, Rstatus, as having the same value of the item.status (realm status). If Rstatus is true the value of Rstatus is changed to Online, else the value is changed to Offline. Simple eh?

So now up at this point we have pulled our data from battle.net, we have it arranged in a string with defined values and we renamed the realm status to be either Online or Offline. Let is print this array out. We use this code.

var $StatusString = "<div class=\"realm " + Rstatus + " \"><p>" + item.name + " is " + Rstatus + "</p></div>";

Can you see how this is working now?

The way this prints out is like this

<div class="realm Online "><p>Duskwood is Online</p></div>

I added a class to the div with the same value of the realm status, that being Online (Rstatus). Next I pulled the realm name of Duskwood (item.name) and said that it is Online (Rstatus).

Next we need to place the string that we just made. 

$($StatusString).appendTo("#realms");

This says that you are going to take the string that you just made and add it to the container with the ID of #realms

Now if we wee to write out all of this code and put it into a simple HTML page it owuld look something like this.

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

</head>

<body>

<div id="realms"></div>

<script type="text/javascript">

 

$.getJSON("https://us.api.battle.net/wow/realm/status?realm=Duskwood&locale=en_US&apikey=12345678910abcdefghijklmnopqrstu&jsonp=?", function (data) {

$.each(data.realms, function (i,item) {

var Rstatus = item.status;

if(Rstatus) {

Rstatus = 'Online';

} else {

Rstatus = 'Offline';

}

var $StatusString = "<div class=\"realm " + Rstatus + " \"><p>" + item.name + " is " + Rstatus + "</p></div>";

 

$($StatusString).appendTo("#realms");

});

});

 

</script>

</body>

</html> 

Note: The API key is a fake one, put in your real key.

When you open up the page you should get this as your result.

Yay it works! Now how do I make this look like the examples I showed off at the very start? I changed the var $StatusString slightly to this.

var $StatusString = "<div class=\"realm " + Rstatus + " \"></div>";

Next I used the following CSS to style the blocks.

#realms{

width: 200px;

height: 200px;

border-radius: 100px;

line-height: 200px;

background: url(../images/battlenetdown.png) 50% 50% no-repeat;

background-color: #666;

}

.realm{

width: 200px;

height: 200px;

border-radius: 100px;

line-height: 200px;

background: url(../images/alliance-trans.png) 50% 50% no-repeat;

}

.Online{background-color: #7AE860;}

.Offline{background-color: #E8290C;}

I also used the following 2 images alliance-trans.png and battlenetdown.png.

And that my friends is all there is to it! 

Note: If you are using Drupal as your CMS like I do be sure to amend your Javascript so it looks like this.

<div id="realms"></div>

<script type="text/javascript">

(function ($) {

$.getJSON("https://us.api.battle.net/wow/realm/status?realm=Duskwood&locale=en_US&apikey=12345678910abcdefghijklmnopqrstu&jsonp=?", function (data) {

$.each(data.realms, function (i,item) {

var Rstatus = item.status;

if(Rstatus) {

Rstatus = 'Online';

} else {

Rstatus = 'Offline';

}

var $StatusString = "<div class=\"realm " + Rstatus + " \"></div>";

if((i + 1) < data.realms.length){$StatusString += "<hr />"}

$($StatusString).appendTo("#realms");

});

});

})(jQuery);

</script>

You have to change the Javascript container to work with Drupal.

You can see a live demo of this web app on Bonis-guild.com