Webclient: fix some bugs (#2742)

* Handle room join and leave events + case sensitive userlist sort; fix #2307

* Webclient: add autoscroll, but only if already at the bottom; fix #2306

webclient/index.html

@@ -199,6 +199,15 @@ Loading cockatrice web client...
           return "Unregistered user";
     }
 
+    function sortUserlist(list) {
+      var li = $(list + ' li');
+      li.sort(function(a, b) {
+        return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
+      });
+      $(list).empty().html(li);
+      $(list).selectable();
+    }
+
     $("#loginnow").click(connect);
     $("#port, #user, #pass").keydown(function(e) {
         if (e.keyCode == 13) { connect(); }
@@ -359,7 +368,7 @@ Loading cockatrice web client...
           $.each(room["userList"], function(key, value) {
             $("#tab-room-" + room["roomId"] + " .userlist").append('<li>' + value.name + '</li>');
           });
-          $("#tab-room-" + room["roomId"] + " .userlist").selectable();
+          sortUserlist("#tab-room-" + room["roomId"] + " .userlist");
 
           $("#tab-room-" + room["roomId"] + " .say").click(function() {
             var msg = $("#tab-room-" + room["roomId"] + " .input").val();
@@ -376,6 +385,8 @@ Loading cockatrice web client...
         },
         "roomMessageCallback" : function(roomId, message) {
           var text;
+          var out = $("#tab-room-" + roomId + " .output")[0];
+          var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
           switch(message["messageType"])
           {
             case WebClient.pb.Event_RoomSay.RoomMessageType.Welcome:
@@ -389,7 +400,23 @@ Loading cockatrice web client...
               break;
           }
           $("#tab-room-" + roomId + " .output").append(text + '<br/>');
+          if(isScrolledToBottom)
+            out.scrollTop = out.scrollHeight - out.clientHeight;
         },
+        "roomJoinCallback" : function(roomId, message) {
+          $("#tab-room-" + roomId + " .userlist").append('<li>' + message['userInfo'].name + '</li>');
+          sortUserlist("#tab-room-" + roomId + " .userlist");
+        },
+        "roomLeaveCallback" : function(roomId, message) {
+          var name = message['name'];
+          $("#tab-room-" + roomId + " .userlist li").filter(function() {
+            return $.text([this]) === name;
+          }).remove();
+          sortUserlist("#tab-room-" + roomId + " .userlist");
+        },
+        "roomListGamesCallback" : function(roomId, message) {
+          // TBD
+        }
       };
 
       $(this).prop("disabled", true);

webclient/webclient.js

@@ -46,17 +46,20 @@ var WebClient = {
     "pb/response_join_room.proto",
     "pb/room_event.proto",
     "pb/event_room_say.proto",
-    "pb/serverinfo_user.proto"
+    "pb/event_join_room.proto",
+    "pb/event_leave_room.proto",
+    "pb/event_list_games.proto",
+    "pb/serverinfo_user.proto",
+    "pb/serverinfo_game.proto"
   ],
 
   initialize : function()
   {
-    this.pb = new protobuf.Root({
+    this.pb = new protobuf.Root();
-        convertFieldsToCamelCase: true,
-    });
 
-    this.pb.load(this.pbfiles, {
+    this.pb.load(this.pbfiles, { keepCase: false }, function(err, root) {
-      keepCase: false
+    if (err)
+        throw err;
     });
 
     this.initialized=true;
@@ -340,12 +343,29 @@ var WebClient = {
 
   processRoomEvent : function (raw)
   {
+    if(raw[".Event_ListGames.ext"]) {
+      if(this.options.roomListGamesCallback)
+        this.options.roomListGamesCallback(raw["roomId"], raw[".Event_ListGames.ext"]);
+      return;
+    }
+
+    if(raw[".Event_JoinRoom.ext"]) {
+      if(this.options.roomJoinCallback)
+        this.options.roomJoinCallback(raw["roomId"], raw[".Event_JoinRoom.ext"]);
+      return;
+    }
+
+    if(raw[".Event_LeaveRoom.ext"]) {
+      if(this.options.roomLeaveCallback)
+        this.options.roomLeaveCallback(raw["roomId"], raw[".Event_LeaveRoom.ext"]);
+      return;
+    }
+
     if(raw[".Event_RoomSay.ext"]) {
       if(this.options.roomMessageCallback)
         this.options.roomMessageCallback(raw["roomId"], raw[".Event_RoomSay.ext"]);
       return;
     }
-
   },
 
   processJoinRoom : function(raw)