in-line display of online outfit members

Athan · 2013-05-28, 07:57 PM

I put this together for use on an enjin.com-hosted site, but it should work on anything you can place the HTML in, so long as you have a jQuery version loaded already.

Note the YOUR_OUTFIT_ID_HERE that you need to edit in the query.

Also the CSS will need tweaking for your own use, as I borrow various bits of the enjin theme we use.

It auto-refreshes every 5 minutes, or there's a Refresh button you can use.

Code:

<div id="ps2-ingame">
 <div class="element_smalltitle">
  <div class="left"><!-- --></div>
  <div class="right"><!-- --></div>
  <div id="in-game-members-header" class="title">In-Game Currently:</div>
 </div>
 <div id="in-game-members" class="m_shoutbox" style="height: 150px; overflow-y: scroll;"></div>
 <div id="ps2-ingame-as-of" style="text-align: center"></div>
 <div style="text-align: center;">
  <div class="element_smallbutton">
   <div class="l"><!-- --></div>
   <div class="r"><!-- --></div>
   <input id="ps2-ingame-refresh" type="button" value="Refresh">
  </div>
 </div>
</div>

<script type="text/javascript">
  var refreshTimer = null;
  window.jQuery(document).ready(function($) {

    $('#ps2-ingame-refresh').click(refreshIngameStatus);
    doIngameStatus();
  });

  function doIngameStatus() {
    $.ajax({
      url: 'http://census.soe.com/s:miggyorg/get/ps2-beta/outfit/YOUR_OUTFIT_ID_HERE/?c:resolve=member,member_online_status,member_character%28name%29',
      type: 'GET',
      timeout: 20000,
      dataType: 'jsonp',
      success: onMembersReceived,
      complete: onMembersComplete
    });
  }

  function onMembersReceived(json) {
    var now = new Date();

    var ingame_members = countOnlineMembers(json.outfit_list[0]);
    $('#in-game-members-header').html('In-Game Currently (' + ingame_members.length + '):');
    $('#in-game-members').html('');
    for (var x = 0 ; x < ingame_members.length ; x++) {
      $('#in-game-members').append('<div class="shout">' + ingame_members[x] + '</div>');
    }
    $('#ps2-ingame-as-of').html('<div class="shout">As of: ' + now.toTimeString() + '</div>');

  }

  function countOnlineMembers(outfit_list) {
    var ingame = new Array();
    for (var m = 0 ; m < outfit_list.members.length ; m++) {
      if (outfit_list.members[m].online_status > 0) {
        ingame.push(outfit_list.members[m].name.first);
      }
    }
    ingame.sort(caseiCompare);
    return ingame;
  }

        function caseiCompare(a, b) {
                var ai = a.toLowerCase();
                var bi = b.toLowerCase();

                if (ai > bi) {
                        return 1;
                } else if (ai < bi) {
                        return -1;
                } else {
                        return 0;
                }
        }

  function refreshIngameStatus() {
    refreshTimer = null;
    doIngameStatus();
  }

  function onMembersComplete(jqQuery, jqStatus) {
    refreshTimer = setTimeout(refreshIngameStatus, 5 * 60 * 1000);
  }
</script>

Razzun · 2013-05-30, 12:42 PM

I must be doing something wrong.....

Code:

<html>

<div id="ps2-ingame">
 <div class="element_smalltitle">
  <div class="left"><!-- --></div>
  <div class="right"><!-- --></div>
  <div id="in-game-members-header" class="title">In-Game Currently:</div>
 </div>
 <div id="in-game-members" class="m_shoutbox" style="height: 150px; overflow-y: scroll;"></div>
 <div id="ps2-ingame-as-of" style="text-align: center"></div>
 <div style="text-align: center;">
  <div class="element_smallbutton">
   <div class="l"><!-- --></div>
   <div class="r"><!-- --></div>
   <input id="ps2-ingame-refresh" type="button" value="Refresh">
  </div>
 </div>
</div>

<script type="text/javascript">
  var refreshTimer = null;
  window.jQuery(document).ready(function($) {

    $('#ps2-ingame-refresh').click(refreshIngameStatus);
    doIngameStatus();
  });

  function doIngameStatus() {
    $.ajax({
      url: 'http://census.soe.com/s:miggyorg/get/ps2-beta/outfit/37511594860089202/?c:resolve=member,member_online_status,member_character%28name%29',
      type: 'GET',
      timeout: 20000,
      dataType: 'jsonp',
      success: onMembersReceived,
      complete: onMembersComplete
    });
  }

  function onMembersReceived(json) {
    var now = new Date();

    var ingame_members = countOnlineMembers(json.outfit_list[0]);
    $('#in-game-members-header').html('In-Game Currently (' + ingame_members.length + '):');
    $('#in-game-members').html('');
    for (var x = 0 ; x < ingame_members.length ; x++) {
      $('#in-game-members').append('<div class="shout">' + ingame_members[x] + '</div>');
    }
    $('#ps2-ingame-as-of').html('<div class="shout">As of: ' + now.toTimeString() + '</div>');

  }

  function countOnlineMembers(outfit_list) {
    var ingame = new Array();
    for (var m = 0 ; m < outfit_list.members.length ; m++) {
      if (outfit_list.members[m].online_status > 0) {
        ingame.push(outfit_list.members[m].name.first);
      }
    }
    ingame.sort(caseiCompare);
    return ingame;
  }

        function caseiCompare(a, b) {
                var ai = a.toLowerCase();
                var bi = b.toLowerCase();

                if (ai > bi) {
                        return 1;
                } else if (ai < bi) {
                        return -1;
                } else {
                        return 0;
                }
        }

  function refreshIngameStatus() {
    refreshTimer = null;
    doIngameStatus();
  }

  function onMembersComplete(jqQuery, jqStatus) {
    refreshTimer = setTimeout(refreshIngameStatus, 5 * 60 * 1000);
  }
</script>

</html>

http://projectxfire.com/russ_test/inline.html

Thoughts?

Houston · 2013-05-30, 04:22 PM

As Athan said in his post, you need to include the jQuery library.

http://jquery.com/

Code:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>

Razzun · 2013-05-30, 04:23 PM

I knew it was something stupid....

Thanks

Athan · 2013-05-30, 07:10 PM

Although even after you've added that I can see it's still not working, at least in my browser.

This is probably something to do with how enjin.com includes jquery 1.4.2 (yes, really that old a version) long before reaching my code.

Oh, d'oh, I totally forgot about NotScript for a moment, yeah, yours is working now

.

Razzun · 2013-05-30, 07:25 PM

Haha. Was going to say "working for me!"

Thanks!

Hypergrip · 2013-05-31, 06:59 AM

Thank you for this script, we'll use it in a modified form for our website/forum

Athan · 2013-05-31, 07:37 AM

If anyone else hadn't noticed, the census query it uses is rather inefficient, given all it actually wants is the character names of the online players.

Unfortunately I couldn't find any way to make it more efficient. Whilst you can do something like:

http://census.soe.com/get/ps2-beta/o...haracter_id%29

To get only the 'character_id' field from the basic outfit members resolve, as soon as you add more to the resolve that field-limiting no longer works:

http://census.soe.com/get/ps2-beta/o..._online_status

(It doesn't work with the %28character_id%29 on the end either.) You've now got the member_since, rank, and rank_ordinal fields back. And of course it gets worse once you add in the member_character resolve as that pulls in a HUGE amount (c:limit on this one so it doesn't get silly):

Heck, I can't even get this to return anything, it keeps timing out!

http://census.soe.com/get/ps2-beta/o...cter&c:limit=5

This is why I've used:

http://census.soe.com/get/ps2-beta/o...cter%28name%29

So that the collection I limit is the one where it will make the most difference.

Ah although now I thought to try it, this returns the same data:

http://census.soe.com/get/ps2-beta/o...cter%28name%29

i.e. you don't actually have to have 'member' in the resolve, it seems to get pulled in automatically on performing the other two resolves, but I'm not sure I'd want to rely on that in the future. Putting character_id and/or online_status inside the () doesn't make any difference, you still get rank* and member_since.

I did also experiment with trying to limit things with c:show/hide, but again no effect. Nor could I limit to just the ones with online_status > 0 (the actual number is 0 for offline or the numeric ID of the relevant server if online) using anything like online_status>0 or member.online_status>0 or member_online_status.online_status>0. It seems you just can't do that type of filtering on resolved-in fields.

If anyone can figure out a query that literally just returns character name and online status, or even better just character names for those who ARE online, please post!

Stanis · 2013-05-31, 12:17 PM

Originally Posted by Athan

If anyone can figure out a query that literally just returns character name and online status, or even better just character names for those who ARE online, please post!

It's not very efficient.
You can't remove online_status because it's resolved.
Also you can't filter for online_status because you resolved it.
You have to include an ID it seems or doesn't show the record at all.

Without a limit clause it also doesn't seem to work.
Assuming it's for your own outfit I suggest setting c:limit to members+100 or something sensible.

Try this :

http://census.soe.com/get/ps2-beta/o...d&c:limit=1000

Athan · 2013-05-31, 12:22 PM

Aha! Thanks for that, I guess I never got around to checking what the outfit_member collection included, hence I was trying this against just 'outfit' and resolve'ing member stuff in.

Athan · 2013-05-31, 01:26 PM

Right, so that makes the more efficient version, standalone:

Code:

<!DOCTYPE HTML>
<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
<div id="ps2-ingame">
 <div class="element_smalltitle">
  <div class="left"><!-- --></div>
  <div class="right"><!-- --></div>
  <div id="in-game-members-header" class="title">In-Game Currently:</div>
 </div>

 <div id="in-game-members" class="m_shoutbox" style="height: 150px; overflow-y: scroll;"></div>
 <div id="ps2-ingame-as-of" style="text-align: center"></div>
 <div style="text-align: center;">
  <div class="element_smallbutton">
   <div class="l"><!-- --></div>
   <div class="r"><!-- --></div>
   <input id="ps2-ingame-refresh" type="button" value="Refresh">
  </div>
 </div>
</div>

<script type="text/javascript">
  var refreshTimer = null;
  window.jQuery(document).ready(function($) {
    $('#ps2-ingame-refresh').click(refreshIngameStatus);
    doIngameStatus();
  });

  function doIngameStatus() {
    $.ajax({
      url: 'http://census.soe.com/get/ps2-beta/outfit_member/37509507321444968?c:resolve=character%28name.first%29,online_status&c:show=character_id&c:limit=1000',
      type: 'GET',
      timeout: 20000,
      dataType: 'jsonp',
      success: onMembersReceived,
      complete: onMembersComplete
    });
  }

  function onMembersReceived(json) {
    var now = new Date();

                console.log('json: %o', json);
    var ingame_members = countOnlineMembers(json.outfit_member_list);
    $('#in-game-members-header').html('In-Game Currently (' + ingame_members.length + '):');
    $('#in-game-members').html('');
    for (var x = 0 ; x < ingame_members.length ; x++) {
      $('#in-game-members').append('<div class="shout">' + ingame_members[x] + '</div>');
    }
    $('#ps2-ingame-as-of').html('<div class="shout">As of: ' + now.toTimeString() + '</div>');
  }

  function countOnlineMembers(outfit_member_list) {
    var ingame = new Array();
    for (var m = 0 ; m < outfit_member_list.length ; m++) {
      if (outfit_member_list[m].online_status > 0) {
        ingame.push(outfit_member_list[m].character.name.first);
      }
    }
    ingame.sort(caseiCompare);
    return ingame;
  }

  function caseiCompare(a, b) {
    var ai = a.toLowerCase();
    var bi = b.toLowerCase();

    if (ai > bi) {
      return 1;
    } else if (ai < bi) {
      return -1;
    } else {
      return 0;
    }
  }

  function refreshIngameStatus() {
    refreshTimer = null;
    doIngameStatus();
  }

  function onMembersComplete(jqQuery, jqStatus) {
    refreshTimer = setTimeout(refreshIngameStatus, 5 * 60 * 1000);
  }
</script>
</body>
</html>

Edit for your Outfit ID, and increase the c:limit if yours actually has over 1000 members. To be explicity, if you don't have the c:limit it seems to default to only showing the first found character.

Athan · 2013-06-12, 08:52 AM

Just a quick note that this works without further changes if you edit the namespace from 'ps2-beta' to the newly announced 'ps2:v1' in the ajax url. You can use just 'ps2' if you want to, but might run into problems when that is equivalent to some later version.