Highlight friends in scoreboard - Better Battlelog Forums #115672

Sitemap
Post edited 1 x times, last by
Topicstarter
Hi guys,

I just wrote a small plugin that highlights your friends in the scoreboard of the full server details page. It's not particularly useful (although you can quickly see how your friends currently do on the server without searching through a scoreboard with 64 players), basically it's purpose is to get me started on bblog plugins :)

Here we go:
https://dl.dropboxusercontent.com/u/607872/bf-emblems/HighlightFriendsInScoreboard.js


Testing and feedback, especially from other plugin developers, is highly appreciated!
Post edited 1 x times, last by
Pretty nice coded. Just one requirement.
Don't add variables to global scope via "var plugin = {..." outside of the plugin itself, this override any previous declaration in the page, and especially a word like this could be used by battlelog itself in the global scope.
Add it in the recommended way directly with the "var plugin"

Like this

BBLog.handle( 'add.plugin', {...} );
Topicstarter
Whoops, you're right. I just did that for debugging purposes and forgot to change it, but it's fixed now. I also updated the link.

I tried to clone the "join"-button from the comcenter to the scoreboard, but adding the element triggers the domchange event and makes my plugin run in an infinite loop. My first attempt was to set a boolean isWorking property in the plugin object, like this:

name: 'Highlight friends in scoreboard',

isWorking: false,

/**
* @param instance
*/
domchange: function domchange( instance ) {
if ( !instance.isWorking && instance.hasScoreboardOnCurrentPage( instance ) && instance.hasActivePlayers( instance ) )
instance.highlightFriends( instance );
},
...
highlightFriends: function highlightFriends( instance ) {
var friendList = Surface.C.comcenter.getFriendsListFromLs(),
joinBtnList = $( 'button.join-friend' ),
l = friendList.length,
f, $tr, $joinBtn, $divInteract, $clone;

instance.log( 'Checking ' + l + ' friends...' );

instance.isWorking = true;

for ( var i = 0; i < l; i++ ) {
f = friendList[ i ];
$tr = $( 'tr[data-userid=' + f.userId + ']' );
if ( $tr.length > 0 ) {
instance.log( f.username + ' is playing on this server, highlighting...' );
$tr.find( 'td' ).css( 'background-color', 'rgba( 0, 128, 0, 0.4 )' );

// clone join button
}
}

instance.isWorking = false;

}

Unfortunately, that didn't work. Whenever the domchange event ocurred, my isWorking property was reset to false. Any suggestions?
Yes, you reset it after you execute the code "highlightFriends".
That means, after the highlight you start from scratch and your code runs again.

Check of the join button already exist before you add it again.
Than the next domchange update don't disturb you.
Topicstarter
BrainFooLong wrote:
Yes, you reset it after you execute the code "highlightFriends".

Of course, the purpose is to make my plugins domchange function not do anything only while the loop is adding objects to the DOM. I thought my "for"-loop runs while a domchange event gets fired and my plugin starts over (parallel), triggering more domchange events.

Check of the join button already exist before you add it again.
Than the next domchange update don't disturb you.

Alternative approach, gonna try that :) thanks.
A few more tips.

Don't use a lazy selector like $("tr"), it matches first every <tr> in the dom which is slow.
Search a anchor before with a id, for example most of containers in battlelog have a ID. A ID is unique per HTML definiation, therefore the selector is much faster.

Also you can avoid the problem with parellel runs of domchange with setting a class to a already processed <tr> and than check before you do something again if the class exists, if yes than skip the <tr>.
But in your case it doesn't matter, the complete run just require a few milliseconds at max, a domchange is only triggered 200 milleseconds after a change has done in the DOM.

The plugin domchange is a BBLog handler that fires not on every domchange, it fires just 200ms after the last real domchange has been done. To avoid such problem with too much calls.
Topicstarter
BrainFooLong wrote:
Don't use a lazy selector like $("tr")

Old habits die hard... I'll add that to my to-do list.

BrainFooLong wrote:
Also you can avoid the problem with parellel runs of domchange with setting a class to a already processed <tr>

That's pretty elegant, I will definetely give it a try.

BrainFooLong wrote:
The plugin domchange is a BBLog handler that fires not on every domchange, it fires just 200ms after the last real domchange has been done. To avoid such problem with too much calls.

Is there some sort of documentation for these things?

Nonetheless: updated. When players joined while the scoreboard was active, my selector won't work because these new elements don't get the class which I'm searching for.
Is there some sort of documentation for these things?

No, but all can be readed in the source code of BBLog itself.
In this special case, i'll update the documentation of the example plugin.
Post edited 1 x times, last by
Hey there,

your plugin isn't working anymore. When checking your link it says "Not Found - The resource could not be found."

Would be great if you can fix it, its a great plugin.

Thanks,
SgtChrischi