Your first load may take up to 10 seconds to load, as it fetches all the data for the first time. But it will cache and only then update the new data
EDIT:
The basic API plan is really limited on the amount of requests per second & at the same time, which is why the widget takes a long time to load the data the first time.
Updates:
If you are not seeing your gear changed, be sure to clear your cache or wait up too 15mins for your browser to clear the cache.
WHAT I WANT TO DO:
* Indexing, so its easy to find people.
* Show 2 and 4 sets with the characters
* Show the legendary rings
* Show missing enchants, gems
* Personalize the page with live armoury avatar updates
* Update & clean the code, still prototyping so the code is a bit messy for my liking.
* Do batch requests, to stop the loading time being large without cache. - IF possible under this API plan.
See Live & Start using:
http://thedanzorlabs.com/sunfall/
Preview:
See Live & Start using:
http://thedanzorlabs.com/sunfall/
The Code:
I am making the code entirely open, so others can play around with it. I HAVE REMOVED THE API KEY FROM THE CODE BELOW!!!!
AP.JS
Code: Select all
this.Sunfall = { "version": "0.1.0" };
with (Sunfall) {
(function() {
// NOTES ON THIS SIMPLE APP
// We using native javascript
// Not at the moment using ajax
// DESCRIPTION OF APP
// This is a simple and small app to load in character data and validae it before outputting it.
// Our global variables
var readyCheckMax = 10;
var characters = 'characters.json'; // Roster URL
var APIKey = 'REMOVED';
var body = document.querySelector("body");
var characterItemlevel = document.querySelector('.character-status-itemlevel');
var characterOverview = document.querySelector('.character-status-overview');
var characterStatus = document.querySelector('.guild-status-overview');
var container;
var blizzardAPI;
// We need a method to request in external configs
var loadJSON = function (path) {
var request = new XMLHttpRequest();
request.open("GET", path, false);
request.send();
return request.responseText;
};
// We want a method to format the json to an object
var jsonParse = function (data) {
return JSON.parse(data);
};
// This function will check the item level and output the correct styling
var gearquality = function (data, overview) {
var div;
if (data > 700 && data < 710) {
div = '<span class="good">' + data;
} else if (data > 709) {
div = '<span class="perfect">' + data;
} else {
div = '<span class="poor">' + data;
}
if (overview) {
div += '</span>';
}
return div;
};
// Simple method for counstructing the username
var buildUsername = function (name) {
return '<span class="username">' + name +'</span>';
}
// Simple method for counstructing the username
var buildItem = function (name) {
return '<span class="itemName">' + name +'</span>';
}
// More specific Gear info
var characterStatusGear = function (name, items) {
var check;
var item = items;
var user = buildUsername(name);
var gear;
var equiped;
// Cycle through all the item
for (var key in items) {
// We want to ignore these values from this list
if (key == 'averageItemLevel' || key == 'averageItemLevelEquipped') {
} else {
var item = buildItem(key);
// Hack solution to stop undefined from appearing
if (gear) {
gear = gear + '<div class="item">' + item;
} else {
gear = '<div class="item">' + item;
}
// We know the item, now we want to know its item level
if (items.hasOwnProperty(key)) {
var obj = items[key];
var equiped = gearquality(obj.itemLevel, false);
gear = gear + equiped + '</div>';
}
}
}
// Output what we can collected to the dom
var detialsHtml = '<div class="userProfile">' + user + gear + '</div>';
characterOverview.innerHTML += detialsHtml;
};
// This is a basic overview list
var characterStatusItemlevel = function (name, equiped) {
var overview = true;
var equiped = gearquality(equiped, overview);
var user = buildUsername(name);
var playerHTML = '<div class="userProfile">' + user + equiped + ' Equiped </span> </div>';
characterItemlevel.innerHTML += playerHTML;
};
// LaunchApp method - for when the document is ready for us
var launchApp = function (config) {
// Get the list of characters to use
if ( config.roster || config.roster.length ) {
var roster = config.roster;
var num = config.roster.length;
// Using for instead of foreach for compatibility
for (i = 0; i < num; i++) {
var player = roster[i].name;
var realm = roster[i].realm;
var APIRequest = 'https://eu.api.battle.net/wow/character/' + realm + '/' + player + '?fields=items&locale=en_GB&apikey=' + APIKey;
var characterData = getConfig(APIRequest);
// Parse only the basic information.
characterStatusItemlevel(characterData.name, characterData.items.averageItemLevelEquipped);
characterStatusGear(characterData.name, characterData.items);
if (i === num -1) {
document.querySelector('.helperFunctions').innerHTML = 'Data Fetched Successfully';
}
}
} else {
document.querySelector('.helperFunctions').innerHTML = 'Guild Roster Not Found';
}
};
// Simple method to loading an external config
var getConfig = function (path) {
var getData = loadJSON(path);
var data = jsonParse(getData);
return data;
};
// Method to check if the document is ready
var readyCheck = function () {
var documentReady = document.readyState == 'interactive' || document.readyState == 'complete' || window.self !== window.top;
if (documentReady || !readyCheckMax) {
launchApp(getConfig(characters));
} else {
setTimeout(readyCheck, 200);
--readyCheckMax;
}
};
// We will check if the document is ready for this app to be loaded.
readyCheck();
})();
}
Code: Select all
{ "roster" : [
{"name" : "holybarry", "realm" : "emerald-dream"},
{"name" : "scarmaker", "realm" : "emerald-dream"},
{"name" : "Morrána", "realm" : "emerald-dream"},
{"name" : "Menegroth", "realm" : "emerald-dream"},
{"name" : "Zails", "realm" : "emerald-dream"},
{"name" : "Seba", "realm" : "emerald-dream"},
{"name" : "Zofre", "realm" : "emerald-dream"},
{"name" : "Zivas", "realm" : "emerald-dream"},
{"name" : "Pumisha", "realm" : "emerald-dream"},
{"name" : "Alsu", "realm" : "emerald-dream"},
{"name" : "Drulgar", "realm" : "emerald-dream"},
{"name" : "Janhild", "realm" : "emerald-dream"},
{"name" : "Conchobhar", "realm" : "emerald-dream"},
{"name" : "Firewolf", "realm" : "emerald-dream"},
{"name" : "Whoosh", "realm" : "emerald-dream"},
{"name" : "Alushtasa", "realm" : "emerald-dream"},
{"name" : "Velandra", "realm" : "emerald-dream"},
{"name" : "Ynnus", "realm" : "emerald-dream"},
{"name" : "Zalanth", "realm" : "emerald-dream"},
{"name" : "Ressman", "realm" : "emerald-dream"},
{"name" : "Veline", "realm" : "emerald-dream"},
{"name" : "Dynamica", "realm" : "emerald-dream"},
{"name" : "Martiniussen", "realm" : "emerald-dream"},
{"name" : "Baughir", "realm" : "emerald-dream"},
{"name" : "Failadin", "realm" : "emerald-dream"},
{"name" : "Yetti", "realm" : "emerald-dream"},
{"name" : "Shalendra", "realm" : "emerald-dream"},
{"name" : "Liiloo", "realm" : "emerald-dream"},
{"name" : "Kreun", "realm" : "emerald-dream"},
{"name" : "Ohmer", "realm" : "emerald-dream"},
{"name" : "Tesek", "realm" : "emerald-dream"},
{"name" : "Dolittle", "realm" : "emerald-dream"},
{"name" : "Carlbooii", "realm" : "emerald-dream"},
{"name" : "Jirikii", "realm" : "emerald-dream"},
{"name" : "Maci", "realm" : "emerald-dream"},
{"name" : "Wylderlyn", "realm" : "emerald-dream"},
{"name" : "Belialdes", "realm" : "emerald-dream"},
{"name" : "Piam", "realm" : "emerald-dream"},
{"name" : "Fümski", "realm" : "emerald-dream"},
{"name" : "Empyrea", "realm" : "emerald-dream"},
{"name" : "Dandri", "realm" : "emerald-dream"},
{"name" : "Fümski", "realm" : "emerald-dream"},
{"name" : "Arcamoñ", "realm" : "emerald-dream"},
{"name" : "Whitlam", "realm" : "emerald-dream"},
{"name" : "Laucian", "realm" : "emerald-dream"}
]}
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sunfall Roster</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body,html {padding:0px; margin:0px; font-family: 'Open Sans', sans-serif;}
body {background:#080607 url('img/bg.jpg') top center repeat-x; color:#8c8d82;}
h1 {color:#a8b978;}
body > div {padding:20px 0px}
.character-status-itemlevel .userProfile {
float:left;
width:200px;
padding:10px;
margin:10px;
text-align:center;
background:rgba(000,000,000,0.7);
border-radius:3px;
font-size:12px;
font-weight: 600;
}
.good {color:#a3a3a3;}
.perfect {color:#3ee685;}
.poor {color:#e63e3e;}
.character-status-itemlevel,
.character-status-overview {
width:1000px; margin:0 auto;
}
.character-status-itemlevel {padding:300px 0px 100px;}
.character-status-itemlevel .userProfile span.username {font-size:19px; padding:0px 0px 5px; display:block; font-weight:bold}
.character-status-overview .userProfile span.username {
display:block;
font-size:25px;
font-weight:bold;
border-bottom:1px solid #5d683b;
border-bottom:1px solid rgba(255,255,255,0.1);
padding:0px 10px 8px;
}
.character-status-overview .item {
display:inline-block;
padding:10px;
}
.helperFunctions {
position:absolute;
top:200px;
left:50%;
width:300px;
padding:20px;
margin-left:-170px;
background:#000;
box-shadow:0px 0px 29px rgba(000,000,000,0.8);
}
span.itemName {display:block; font-weight:bold;}
.userProfile {padding:10px}
</style>
</head>
<body>
<div class="character-status-itemlevel">
<h1> Basic Gear Overview <h1>
</div>
<div style="clear:both"> </div>
<div class="character-status-overview">
<h1> Specific Gear Overview <h1>
</div>
<div class="helperFunctions">
Data is being fetched, please wait :)
</div>
<script src='app.js'></script>
</body>
</html>
who??