aly/servatrice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Some web client UI fixes

Browse source
This commit is contained in:
Fabio Bas 2016-07-12 23:15:42 +02:00
parent 8cd5803556
commit 1a38e4ef98
4 changed files with 165 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
webclient/imgs/cockatrice.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

137
webclient/index.html
View file

@ -1,16 +1,21 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Servatrice web client</title> <title>Cockatrice web client</title>
<link rel="stylesheet" href="js/jquery-ui-1.11.4.css"> <link rel="stylesheet" href="js/jquery-ui-1.11.4.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header>
<h1><img src="imgs/cockatrice.png" align="absmiddle"/> Cockatrice web client</h1>
</header>
<div id="loading"> <div id="loading">
Loading servatrice web client... Loading cockatrice web client...
</div> </div>
<div id="error-dialog" title="Error" style="display:none"></div>
<div id="tabs" style="display:none"> <div id="tabs" style="display:none">
<ul> <ul>
<li><a href="#tab-login">Login</a></li> <li><a href="#tab-login">Login</a></li>
@ -38,21 +43,32 @@ Loading servatrice web client...
</div> </div>
<div id="tab-server"> <div id="tab-server">
<!--
<h3>Rooms</h3> <h3>Rooms</h3>
<span id="roomslist"></span> <span id="roomslist"></span>
-->
<h3>Server messages</h3> <h3>Server messages</h3>
<div id="servermessages"></div> <div id="servermessages"></div>
</div> </div>
<div id="tab-account"> <div id="tab-account">
<h3>User info</h3> <div class="buddies-container">
<span id="userinfo"></span> <h3>Buddies</h3>
<h3>Buddies</h3> <select id="buddies" size="10"></select>
<select id="buddies" size="10"></select> </div>
<h3>Ignores</h3> <div class="ignores-container">
<select id="ignores" size="10"></select> <h3>Ignores</h3>
<h3>Missing features</h3> <select id="ignores" size="10"></select>
<span id="features"></span> </div>
<div class="userinfo-container">
<h3>User info</h3>
<span id="userinfo"></span>
</div>
<div class="missingfeatures-container">
<h3>Missing features</h3>
<span id="features"></span>
</div>
<div class="clearfix"></div>
</div> </div>
</div> </div>
@ -86,6 +102,63 @@ Loading servatrice web client...
return $("<div>").text(msg).html(); return $("<div>").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); $("#loginnow").click(connect);
$("#host, #port, #user, #pass").keydown(function(e) { $("#host, #port, #user, #pass").keydown(function(e) {
if (e.keyCode == 13) { connect(); } if (e.keyCode == 13) { connect(); }
@ -138,8 +211,31 @@ Loading servatrice web client...
$("#userinfo").empty(); $("#userinfo").empty();
$.each(data.userInfo, function(key, value) { $.each(data.userInfo, function(key, value) {
// filter out inherited properties // filter out inherited properties
if (data.userInfo.hasOwnProperty(key)) if (!data.userInfo.hasOwnProperty(key))
$('#userinfo').append(key + ': ' + value + '<br/>'); return true;
// filter out empty values
if(value === null)
return true;
switch(key)
{
case 'avatarBmp':
$('#userinfo').prepend("<img id='avatar' src='data:image/JPEG;base64," + value.toBase64() + "' /><br/>");
break;
case 'accountageSecs':
$('#userinfo').append('Registered since: ' + timeAgoToInterval(value) + '<br/>');
break;
case 'userLevel':
$('#userinfo').append('User level: ' + decodeUserLevel(value) + '<br/>');
break;
case 'gender':
$('#userinfo').append('Gender: ' + decodeGender(value) + '<br/>');
break;
default:
$('#userinfo').append(key + ': ' + value + '<br/>');
break;
}
}); });
$('#buddies').empty(); $('#buddies').empty();
@ -152,27 +248,34 @@ Loading servatrice web client...
$('#ignores').append('<option>' + value.name + '</option>'); $('#ignores').append('<option>' + value.name + '</option>');
}); });
$("#features").text(JSON.stringify(data.missingFeatures, null, 4)); $("#features").empty();
$.each(data.missingFeatures, function(key, value) {
$('#features').append(value + '<br/>');
});
}, },
"listRoomsCallback" : function(rooms) { "listRoomsCallback" : function(rooms) {
$("#roomslist").text(JSON.stringify(rooms, null, 4)); // hide
//$("#roomslist").text(JSON.stringify(rooms, null, 4));
}, },
"errorCallback" : function(id, desc) { "errorCallback" : function(id, desc) {
$("#roomslist").text(desc); $("#error-dialog").text(desc);
$("#error-dialog").dialog();
}, },
"joinRoomCallback" : function(room) { "joinRoomCallback" : function(room) {
$("div#tabs ul").append( $("div#tabs ul").append(
"<li class='room-header'><a href='#tab-room-" + room["roomId"] + "'>" + room["name"] + "</a></li>" "<li class='room-header'><a href='#tab-room-" + room["roomId"] + "'>" + room["name"] + "</a></li>"
); );
$("div#tabs").append( $("div#tabs").append(
"<div class='room-div' id='tab-room-" + room["roomId"] + "'>" + room["name"] + "<div class='room-container' id='tab-room-" + room["roomId"] + "'>" +
"<div class='userlist-container'>" +
"<h3>Userlist</h3>" + "<h3>Userlist</h3>" +
"<select class=\"userlist\" size=\"10\"></select>" + "<select class=\"userlist\" size=\"10\"></select>" +
"</div><div class='chat-container'>" +
"<h3>Chat</h3>" + "<h3>Chat</h3>" +
"<div class=\"output\"></div>" + "<div class=\"output\"></div>" +
"<br/><input type=\"text\" class=\"input\" />" + "<br/><input type=\"text\" class=\"input\" />" +
"<button class=\"say\">say</button>" + "<button class=\"say\">say</button>" +
"</div>" "</div></div><div class='clearfix'></div>"
); );
$("div#tabs").tabs("refresh"); $("div#tabs").tabs("refresh");

47
webclient/style.css
View file

@ -1,7 +1,15 @@
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
p { p {
position: relative; position: relative;
} }
h3 {
margin: 0 0 .5em 0;
}
#tab-login { #tab-login {
padding: 1em; padding: 1em;
} }
@ -25,7 +33,6 @@ p {
} }
.output, #servermessages { .output, #servermessages {
width:100%;
min-height: 400px; min-height: 400px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
@ -37,7 +44,11 @@ p {
} }
.input { .input {
width:95%; width:93%;
}
.say {
float: right;
} }
.serverwelcome { .serverwelcome {
@ -49,6 +60,34 @@ p {
color: #c0c0c0; color: #c0c0c0;
} }
.room-container {
position:relative;
}
.chat-container {
width: 70%;
}
.userlist-container {
float:right;
width: 28%;
}
#buddies, #ignores, .userlist { #buddies, #ignores, .userlist {
width: 20em; 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;
}

3
webclient/webclient.js
View file

@ -43,7 +43,8 @@ var WebClient = {
"pb/event_list_rooms.proto", "pb/event_list_rooms.proto",
"pb/response_join_room.proto", "pb/response_join_room.proto",
"pb/room_event.proto", "pb/room_event.proto",
"pb/event_room_say.proto" "pb/event_room_say.proto",
"pb/serverinfo_user.proto"
], ],
initialize : function() initialize : function()