Sunfall WoW Gear Widget

This is the place to put your ideas about what you want to see on the website
Post Reply
Holybarry
Posts: 138
Joined: Sat Jun 20, 2015 2:21 pm
Warcraft: holybarry

Sunfall WoW Gear Widget

Post by Holybarry » Wed Aug 12, 2015 2:03 pm

I was speaking with Mora and Scar last night and we talked about seeing what could be done with the WoW API to help the guild. So i have already started building a sunfall widget. (Which can be later integrated into our website). It will give live updates on gear as well as give basic indications on the state of your character.

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 :D

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:

Image
Image

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();

  })();
}
Characters.Json

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"}
]}
INDEX.HTML

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>
Last edited by Holybarry on Thu Aug 13, 2015 12:38 pm, edited 2 times in total.

Holybarry
Posts: 138
Joined: Sat Jun 20, 2015 2:21 pm
Warcraft: holybarry

Re: Sunfall WoW Gear Widget

Post by Holybarry » Wed Aug 12, 2015 5:08 pm

Change Log:

8/12/2015 - Allowed for items to render while others are being fetched, loading feedback now added.
8/13/2015 - Set Bonus Check, Legendary Ring Check, Basic Indexing.
Last edited by Holybarry on Thu Aug 13, 2015 12:41 pm, edited 1 time in total.

User avatar
Kaerathas
Posts: 5351
Joined: Thu Jan 26, 2006 12:00 am
Warcraft: Zalanth, Bledri, Kaerbear, Wischard
BattleTag: Zalanth#2795
Location: South Wales
WoW character race: Pandaren
WoW character class: Shaman
WoW character gender: Male
WoW character level: 110
WoW character guild: Sunfall

Re: Sunfall WoW Gear Widget

Post by Kaerathas » Wed Aug 12, 2015 5:59 pm

That's so fab! :)

User avatar
Whitlam333
Posts: 490
Joined: Tue Mar 26, 2013 8:36 pm
Warcraft: Whitlam, Birlesque, Safiri
Location: Yorkshire

Re: Sunfall WoW Gear Widget

Post by Whitlam333 » Wed Aug 12, 2015 9:32 pm

That's really good! Moonkins last though?! What's all that about eh?! ;)
You have enemies? Good. That means you've stood up for something, sometime in your life.

Holybarry
Posts: 138
Joined: Sat Jun 20, 2015 2:21 pm
Warcraft: holybarry

Re: Sunfall WoW Gear Widget

Post by Holybarry » Wed Aug 12, 2015 9:52 pm

Whitlam333 wrote:That's really good! Moonkins last though?! What's all that about eh?! ;)
I was payed, by you know who, to do this! :O

Scarmaker
Posts: 331
Joined: Fri Jun 05, 2015 6:31 am
Warcraft: Scarmaker, Kreun, Adventures, Chewyou, Steelchain, Wayami
BattleTag: kreun#2906

Re: Sunfall WoW Gear Widget

Post by Scarmaker » Wed Aug 12, 2015 9:58 pm

:P who?? :P

Holybarry
Posts: 138
Joined: Sat Jun 20, 2015 2:21 pm
Warcraft: holybarry

Re: Sunfall WoW Gear Widget

Post by Holybarry » Thu Aug 13, 2015 12:39 pm

Scarmaker wrote::P who?? :P
NDA ;) - Nah its just the order the users was added :D

Today i managed to get basic Tier Set checking, Legendary Ring Checking & Indexing.

If you click a name at the top of the application, you will be scrolled to the more detailed overview of that person. (Still a bit buggy)

Holybarry
Posts: 138
Joined: Sat Jun 20, 2015 2:21 pm
Warcraft: holybarry

Re: Sunfall WoW Gear Widget

Post by Holybarry » Thu Nov 19, 2015 9:03 am

Blizzard armory is buggy with the item upgrades, they don't reflect the upgraded items with (equipped) but does for (overall) item level.

So will update the widget this weekend to reflect the overall item level.

Holybarry
Posts: 138
Joined: Sat Jun 20, 2015 2:21 pm
Warcraft: holybarry

Re: Sunfall WoW Gear Widget

Post by Holybarry » Thu Nov 19, 2015 9:05 am

Also can someone update this list for me with our current raid team. I will try to build a backend for this so we can have both Signups and Rosters managed through a UI.



{ "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" : "Tsona", "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"}
]}

Post Reply