From 1a38e4ef987c7d2a52bd09ffaf134ec42492e8f2 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Tue, 12 Jul 2016 23:15:42 +0200 Subject: [PATCH] Some web client UI fixes --- webclient/imgs/cockatrice.png | Bin 0 -> 3220 bytes webclient/index.html | 137 +++++++++++++++++++++++++++++----- webclient/style.css | 47 +++++++++++- webclient/webclient.js | 3 +- 4 files changed, 165 insertions(+), 22 deletions(-) create mode 100644 webclient/imgs/cockatrice.png diff --git a/webclient/imgs/cockatrice.png b/webclient/imgs/cockatrice.png new file mode 100644 index 0000000000000000000000000000000000000000..3816009b665a85ab6cab403b7266dabba235b8ac GIT binary patch literal 3220 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 - 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()