diff --git a/webclient/imgs/cockatrice.png b/webclient/imgs/cockatrice.png new file mode 100644 index 00000000..3816009b Binary files /dev/null and b/webclient/imgs/cockatrice.png differ diff --git a/webclient/index.html b/webclient/index.html index 487de2dd..b781684f 100755 --- a/webclient/index.html +++ b/webclient/index.html @@ -1,16 +1,21 @@ - Servatrice web client + Cockatrice web client +
+

Cockatrice web client

+
-Loading servatrice web client... +Loading cockatrice web client...
+ +
+

Server messages

-

User info

- -

Buddies

- -

Ignores

- -

Missing features

- +
+

Buddies

+ +
+
+

Ignores

+ +
+
+

User info

+ +
+
+

Missing features

+ +
+
@@ -86,6 +102,63 @@ Loading servatrice web client... return $("
").text(msg).html(); } + function timeAgoToInterval(secs) + { + var days = Math.floor(secs / 86400); + var years = Math.floor(days / 365); + days -= years * 365; + var txt = ''; + + switch(years) + { + case 0: + break + case 1: + txt += '1 year '; + break; + default: + txt += years + ' years '; + break; + } + + switch(days) + { + case 0: + txt += '0 days '; + case 1: + txt += '1 day '; + break; + default: + txt += days + ' days '; + break; + } + + return txt; + } + + function decodeUserLevel(id) { + var levels = WebClient.pb.ServerInfo_User.UserLevelFlag; + if (id & levels.IsAdmin) + return "Administrator"; + else if (id & levels.IsModerator) + return "Moderator"; + else if (id & levels.IsRegistered) + return "Registered user"; + else + return "Unregistered user"; + } + + function decodeGender(id) { + var genders = WebClient.pb.ServerInfo_User.Gender; + for(var key in genders) + { + if(id == genders[key]) + return key; + } + + return "Unknown"; + } + $("#loginnow").click(connect); $("#host, #port, #user, #pass").keydown(function(e) { if (e.keyCode == 13) { connect(); } @@ -138,8 +211,31 @@ Loading servatrice web client... $("#userinfo").empty(); $.each(data.userInfo, function(key, value) { // filter out inherited properties - if (data.userInfo.hasOwnProperty(key)) - $('#userinfo').append(key + ': ' + value + '
'); + if (!data.userInfo.hasOwnProperty(key)) + return true; + + // filter out empty values + if(value === null) + return true; + + switch(key) + { + case 'avatarBmp': + $('#userinfo').prepend("
"); + break; + case 'accountageSecs': + $('#userinfo').append('Registered since: ' + timeAgoToInterval(value) + '
'); + break; + case 'userLevel': + $('#userinfo').append('User level: ' + decodeUserLevel(value) + '
'); + break; + case 'gender': + $('#userinfo').append('Gender: ' + decodeGender(value) + '
'); + break; + default: + $('#userinfo').append(key + ': ' + value + '
'); + break; + } }); $('#buddies').empty(); @@ -152,27 +248,34 @@ Loading servatrice web client... $('#ignores').append(''); }); - $("#features").text(JSON.stringify(data.missingFeatures, null, 4)); + $("#features").empty(); + $.each(data.missingFeatures, function(key, value) { + $('#features').append(value + '
'); + }); }, "listRoomsCallback" : function(rooms) { - $("#roomslist").text(JSON.stringify(rooms, null, 4)); + // hide + //$("#roomslist").text(JSON.stringify(rooms, null, 4)); }, "errorCallback" : function(id, desc) { - $("#roomslist").text(desc); + $("#error-dialog").text(desc); + $("#error-dialog").dialog(); }, "joinRoomCallback" : function(room) { $("div#tabs ul").append( "
  • " + room["name"] + "
    • " ); $("div#tabs").append( - "
    " + room["name"] + + "
    " + + "
    " + "

    Userlist

    " + "" + + "
    " + "

    Chat

    " + "
    " + "
    " + "" + - "
    " + "
    " ); $("div#tabs").tabs("refresh"); diff --git a/webclient/style.css b/webclient/style.css index b67fbb3c..51e77e21 100755 --- a/webclient/style.css +++ b/webclient/style.css @@ -1,7 +1,15 @@ +body { + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; +} + p { position: relative; } +h3 { + margin: 0 0 .5em 0; +} + #tab-login { padding: 1em; } @@ -25,7 +33,6 @@ p { } .output, #servermessages { - width:100%; min-height: 400px; overflow-x: hidden; overflow-y: scroll; @@ -37,7 +44,11 @@ p { } .input { - width:95%; + width:93%; +} + +.say { + float: right; } .serverwelcome { @@ -49,6 +60,34 @@ p { color: #c0c0c0; } +.room-container { + position:relative; +} + +.chat-container { + width: 70%; +} + +.userlist-container { + float:right; + width: 28%; +} + #buddies, #ignores, .userlist { - width: 20em; -} \ No newline at end of file + width: 100%; + min-height: 470px; +} + +.buddies-container, .ignores-container, .userinfo-container, .missingfeatures-container { + float: left; + width: 30%; + margin: 1%; +} + +.clearfix:after { + content: " "; + visibility: hidden; + display: block; + height: 0; + clear: both; +} diff --git a/webclient/webclient.js b/webclient/webclient.js index 6c57b583..6777381c 100755 --- a/webclient/webclient.js +++ b/webclient/webclient.js @@ -43,7 +43,8 @@ var WebClient = { "pb/event_list_rooms.proto", "pb/response_join_room.proto", "pb/room_event.proto", - "pb/event_room_say.proto" + "pb/event_room_say.proto", + "pb/serverinfo_user.proto" ], initialize : function()