Added facebook friends to the ladder page.

app/styles/play/ladder.sass

@@ -29,6 +29,34 @@
   .ellipsis-row
     text-align: center
     
+  // friend column
+
+  .friends-header
+    margin-top: 0
+    margin-bottom: 5px
+
+  .connect-buttons
+    margin-bottom: 10px
+    .btn
+      margin-left: 5px
+  
+  .friend-entry img
+    float: left
+    margin-right: 10px
+    
+  .friend-entry
+    margin-bottom: 15px
+    
+  .connect-facebook
+    background-color: #4c66a4 !important
+    background-image: none
+    color: white
+    
+  .connect-google-plus
+    background-color: #CC3234 !important
+    background-image: none
+    color: white
+    
   td
     padding: 1px 2px
     

app/templates/play/ladder/ladder_tab.jade

@@ -1,6 +1,6 @@
 div#columns.row
   for team in teams
-    div.column.col-md-6
+    div.column.col-md-4
       table.table.table-bordered.table-condensed.table-hover
         tr
           th
@@ -15,8 +15,8 @@ div#columns.row
           th
 
         - var topSessions = team.leaderboard.topPlayers.models;
-        - var inTheTop = team.leaderboard.inTopSessions();
+        - var showJustTop = team.leaderboard.inTopSessions() || me.get('anonymous');
-        - if(!inTheTop) topSessions = topSessions.slice(0, 10);
+        - if(!showJustTop) topSessions = topSessions.slice(0, 10);
         for session, rank in topSessions
           - var myRow = session.get('creator') == me.id
           tr(class=myRow ? "success" : "")
@@ -27,7 +27,7 @@ div#columns.row
               a(href="/play/level/#{level.get('slug') || level.id}/?team=#{team.otherTeam}&opponent=#{session.id}")
                 span(data-i18n="ladder.fight") Fight!
                 
-        if !inTheTop
+        if !showJustTop
           tr(class="active")
             td(colspan=4).ellipsis-row ...
           for session in team.leaderboard.nearbySessions()
@@ -39,3 +39,39 @@ div#columns.row
               td.fight-cell
                 a(href="/play/level/#{level.get('slug') || level.id}/?team=#{team.otherTeam}&opponent=#{session.id}")
                   span(data-i18n="ladder.fight") Fight!
+                    
+  div.column.col-md-4
+    h4.friends-header Friends Playing
+    if me.get('anonymous')
+      div.alert.alert-info
+        a(data-toggle="coco-modal", data-target="modal/signup") Sign up to play with your friends!
+    
+    else
+      if !onFacebook
+        div.connect-buttons
+          | Connect:
+          if !onFacebook
+            button.btn.btn-sm.connect-facebook Facebook
+          //button.btn.btn-sm.connect-google-plus Google+
+      
+      if !!friends
+        
+        if friends.length
+          for friend in friends
+            p.friend-entry
+              img(src="http://graph.facebook.com/#{friend.facebookID}/picture").img-thumbnail
+              span= friend.creatorName + ' (' + friend.facebookName + ')'
+              br
+              span= Math.round(friend.totalScore * 100)
+              span : 
+              span= friend.team
+              br
+              a(href="/play/level/#{level.get('slug') || level.id}/?team=#{friend.otherTeam}&opponent=#{friend._id}")
+                span(data-i18n="ladder.fight") Fight!
+  
+  
+        else
+          p Invite your friends to join you in battle!
+            
+      else
+        p Connect to social networks to play with your friends!

app/views/play/ladder/ladder_tab.coffee

@@ -20,24 +20,67 @@ module.exports = class LadderTabView extends CocoView
   template: require 'templates/play/ladder/ladder_tab'
   startsLoading: true
   
+  events:
+    'click .connect-facebook': -> FB.login()
+    
+  subscriptions:
+    'facebook-logged-in': -> location.reload()
+
   constructor: (options, @level, @sessions) ->
     super(options)
     @teams = teamDataFromLevel @level
     @leaderboards = {}
     @refreshLadder()
+    @checkFriends()
+
+  checkFriends: ->
+    @loadingFriends = true
+    FB.getLoginStatus (response) =>
+      @facebookStatus = response.status
+      if @facebookStatus is 'connected'
+        @loadFriendSessions()
+      else
+        @loadingFriends = false
+        @renderMaybe()
+
+  loadFriendSessions: ->
+    FB.api '/me/friends', (response) =>
+      @facebookData = response.data
+      console.log 'got facebookData', @facebookData
+      levelFrag = "#{@level.get('original')}.#{@level.get('version').major}"
+      url = "/db/level/#{levelFrag}/leaderboard_friends"
+      $.ajax url, {
+        data: { friendIDs: (f.id for f in @facebookData) }
+        method: 'POST'
+        success: @facebookFriendsLoaded
+      }
+  
+  facebookFriendsLoaded: (result) =>
+    friendsMap = {}
+    friendsMap[friend.id] = friend.name for friend in @facebookData
+    for friend in result
+      friend.facebookName = friendsMap[friend.facebookID]
+      friend.otherTeam = if friend.team is 'humans' then 'ogres' else 'humans'
+    @friends = result
+    @loadingFriends = false
+    @renderMaybe()
 
   refreshLadder: ->
+    promises = []
     for team in @teams
       @leaderboards[team.id]?.off 'sync'
       teamSession = _.find @sessions.models, (session) -> session.get('team') is team.id
       @leaderboards[team.id] = new LeaderboardData(@level, team.id, teamSession)
-      @leaderboards[team.id].once 'sync', @onLeaderboardLoaded, @
+      promises.push @leaderboards[team.id].promise
+    @loadingLeaderboards = true
+    $.when(promises...).then(@leaderboardsLoaded)
 
-  onLeaderboardLoaded: -> @renderMaybe()
+  leaderboardsLoaded: =>
+    @loadingLeaderboards = false
+    @renderMaybe()
     
   renderMaybe: ->
-    leaderboardModels = _.values(@leaderboards)
+    return if @loadingFriends or @loadingLeaderboards
-    return unless _.every leaderboardModels, (loader) -> loader.loaded
     @startsLoading = false
     @render()
 
@@ -48,6 +91,8 @@ module.exports = class LadderTabView extends CocoView
     ctx.teams = @teams
     team.leaderboard = @leaderboards[team.id] for team in @teams
     ctx.levelID = @levelID
+    ctx.friends = @friends
+    ctx.onFacebook = @facebookStatus is 'connected'
     ctx
 
 class LeaderboardData
@@ -70,7 +115,9 @@ class LeaderboardData
       success = (@myRank) =>
       promises.push $.ajax "/db/level/#{level}/leaderboard_rank?scoreOffset=#{@session.get('totalScore')}&team=#{@team}", {success}
     
-    $.when(promises...).then @onLoad
+    @promise = $.when(promises...)
+    @promise.then @onLoad
+    @promise
 
   onLoad: =>
     @loaded = true
@@ -82,7 +129,7 @@ class LeaderboardData
     return me.id in (session.attributes.creator for session in @topPlayers.models)
     
   nearbySessions: ->
-    return unless @session
+    return [] unless @session
     l = []
     above = @playersAbove.models
     above.reverse()