more lobby stuff

client/js/client.js

@@ -843,7 +843,10 @@ let Lobby = Backbone.View.extend({
   initialize: function(options){
     this.user = options.user;
     this.app = options.app;
-    this.listenTo(this.app.user, "change", this.render);
+
+    this.app.receive("update:playerOnline", this.renderStatus.bind(this));
+
+    this.listenTo(this.app.user, "change:serverOffline", this.render);
     $(".gwent-battle").html(this.el);
     this.render();
   },
@@ -863,6 +866,7 @@ let Lobby = Backbone.View.extend({
     return this;
   },
   startMatchmaking: function(){
+    this.$el.find(".image-gif-loader").show();
     this.app.trigger("startMatchmaking");
   },
   joinRoom: function(){
@@ -876,6 +880,9 @@ let Lobby = Backbone.View.extend({
   changeName: function(e){
     let name = $(e.target).val();
     this.app.trigger("setName", name);
+  },
+  renderStatus: function(n) {
+    this.$el.find(".nr-player-online").html(n);
   }
 });
 

client/templates/lobby.handlebars

@@ -4,12 +4,12 @@
       {{#if serverOffline}}
         <span class="pull-right">Server Status: <span class="label label-danger">Offline</span></span>
       {{else}}
-        <span class="pull-right">Server Status: <span class="label label-success">Online</span></span>
+        <span class="pull-right">Player online: <span class="nr-player-online">0</span> | Server Status: <span class="label label-success">Online</span></span>
       {{/if}}
     </div>
     <div class="panel-body">
       <div class="row">
-        <div class="col-xs-12">
+          <div class="col-xs-12">
           <input type="text" class="name-input" value="{{name}}">
           <select id="deckChoice">
             <option value="random">Deck: Random</option>
@@ -25,9 +25,9 @@
         <div class="col-xs-12">
           <button type="button" class="btn btn-primary startMatchmaking"{{#if inMatchmakerQueue}} disabled{{/if}}>
             Search Opponent
-            {{#if inMatchmakerQueue}}
-              <i class="image-gif-loader pull-right"></i>
-            {{/if}}
+            {{!#if inMatchmakerQueue}}
+              <i class="image-gif-loader pull-right" style="display: none"></i>
+            {{!/if}}
           </button>
           <!--<button type="button" class="btn btn-success note">debug note</button>-->
         </div>