Annikka/evennia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes webclient spacing issues in lists. Patches created by user "61924.00". Still issues with some line breaks, as per issue 121.

Browse source
This commit is contained in:
Griatch 2011-02-06 17:06:29 +00:00
parent 2c66f039fd
commit ecbd36c5a8
3 changed files with 164 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

182
src/web/media/css/webclient.css
View file

@ -1,87 +1,103 @@
/* /* ---
Style sheet for Evennia's web client.
This should possibly somehow be incoorporated with the Style sheet for Evennia's web client.
overall website theme in the future?
*/
/*Overall element look */ This should possibly somehow be incoorporated with the
body{ overall website theme in the future?
background:#000;
color:#fff; --- */
font-size:.9em;
} /* Overall element look */
a:link{ html, body { height: 100% }
color:#fff; body {
} margin: 0;
a:visited{ padding: 0;
color:#ccc; background: #000;
} color: #ccc;
font-size: .9em;
font-family: 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace;
line-height: 1.6em }
a:link, a:visited { color: #fff }
a:hover, a:active { color: #ccc }
/* Base style for new messages in the main message area */
.msg {
white-space: pre-wrap;
word-break: break-all;
padding: .5em .9em;}
/*border-bottom: 1px dotted #222 } /*optional line between messages */
/* Utility messages (green) */
.sys { color: #0f0 }
/* Messages echoed back after input */
.inp { color: #555 }
/* Messages returned from the server (most messages) */
.out { color: #aaa }
/* Error messages (red) */
.err { color: #f00 }
/* Container surrounding entire chat */
#wrapper {
position: relative;
height: 100% }
/* Main scrolling message area */
#messagewindow {
height: 93%;
overflow: auto }
/* Input area containing input field and button */
#inputform {
position: absolute;
width: 100%;
padding: .8em 0;
bottom: 0 }
#inputcontrol {
padding: 0 .8em;
overflow: auto }
/* Input field */
#inputfield {
float: left;
width: 87%;}
#inputfield:focus {
outline: 0 }
/* Input 'send' button */
#inputsend {
float: left;
width: 8% }
#inputfield { margin-right: .5em }
#inputfield, #inputsend {
border: 1px solid #555;
background: #000;
color: #fff;
padding: .4em .45em;
font-size: 1.1em;
font-family: 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace }
/* No javascript warning */
#connecting {
padding: .5em .9em }
/*Base style for new messages in the main message area.*/
.msg{
background:#000;
padding:.2em;
border-bottom:1px #000 solid
}
/*Utility messages (green)*/
.sys{
color:#0f0;
}
/*Messages echoed back after input*/
.inp{
color:#555;
}
/*Messages returned from the server (most messages) */
.out{
color:#aaa;
}
/*Error messages (red)*/
.err{
color:#f00;
}
/*Container surrounding entire chat*/
#wrapper{
margin-left:10px;
}
/*Main scrolling message area*/
#messagewindow{
overflow:auto;
height:400px;
bottom:10px
}
/*Input area containing input field and button*/
#inputform{
position:fixed;
bottom:0px;
}
/*Input field */
#inputfield{
background:#000;
color:#fff;
font-size:.9em;
width:120ex;
border:1px solid;
padding:4px;
border-color:#555;
outline-style:none;
margin-left:10px;
}
/*Input 'send' button*/
#inputsend{
background:#000;
color:#fff;
font-size:.9em;
border:1px solid;
padding: 3px;
border-color:#555;
}
/*No javascript warning*/
#noscript{
color:f00;
}
/*Example player count display */ /*Example player count display */
#playercount{ #playercount { margin-left: .8em }
margin-left:10px;
color: #555; /* Testing */
} /*#inputform {
outline: 1px dotted blue }
#messagewindow {
outline: 1px dotted red }
#wrapper {
outline: 1px dotted green }*/

90
src/web/media/javascript/evennia_webclient.js
View file

@ -12,13 +12,13 @@ This implements an ajax mud client for use with Evennia, using jQuery
for simplicity. It communicates with the Twisted server on the address for simplicity. It communicates with the Twisted server on the address
/webclientdata through POST requests. Each request must at least /webclientdata through POST requests. Each request must at least
contain the 'mode' of the request to be handled by the protocol: contain the 'mode' of the request to be handled by the protocol:
mode 'receive' - tell the server that we are ready to receive data. This is a mode 'receive' - tell the server that we are ready to receive data. This is a
long-polling (comet-style) request since the server long-polling (comet-style) request since the server
will not reply until it actually has data available. will not reply until it actually has data available.
The returned data object has two variables 'msg' and 'data' The returned data object has two variables 'msg' and 'data'
where msg should be output and 'data' is an arbitrary piece where msg should be output and 'data' is an arbitrary piece
of data the server and client understands (not used in default of data the server and client understands (not used in default
client). client).
mode 'input' - the user has input data on some form. The POST request mode 'input' - the user has input data on some form. The POST request
should also contain variables 'msg' and 'data' where should also contain variables 'msg' and 'data' where
the 'msg' is a string and 'data' is an arbitrary piece the 'msg' is a string and 'data' is an arbitrary piece
@ -26,10 +26,10 @@ contain the 'mode' of the request to be handled by the protocol:
deal with (not used in this example client). deal with (not used in this example client).
mode 'init' - starts the connection. All setup the server is requered to do mode 'init' - starts the connection. All setup the server is requered to do
should happen at this point. The server returns a data object should happen at this point. The server returns a data object
with the 'msg' property containing the server address. with the 'msg' property containing the server address.
mode 'close' - closes the connection. The server closes the session and does mode 'close' - closes the connection. The server closes the session and does
cleanup at this point. cleanup at this point.
*/ */
// jQuery must be imported by the calling html page before this script // jQuery must be imported by the calling html page before this script
@ -41,9 +41,9 @@ contain the 'mode' of the request to be handled by the protocol:
var CLIENT_HASH = '0'; // variable holding the client id var CLIENT_HASH = '0'; // variable holding the client id
function webclient_receive(){ function webclient_receive(){
// This starts an asynchronous long-polling request. It will either timeout // This starts an asynchronous long-polling request. It will either timeout
// or receive data from the 'receivedata' url. In both cases a new request will // or receive data from the 'receivedata' url. In both cases a new request will
// immediately be started. // immediately be started.
$.ajax({ $.ajax({
type: "POST", type: "POST",
@ -54,41 +54,41 @@ function webclient_receive(){
dataType:"json", dataType:"json",
data: {mode:'receive', 'suid':CLIENT_HASH}, data: {mode:'receive', 'suid':CLIENT_HASH},
// callback methods // callback methods
success: function(data){ // called when request to waitreceive completes success: function(data){ // called when request to waitreceive completes
msg_display("out", data.msg); // Add response to the message area msg_display("out", data.msg); // Add response to the message area
webclient_receive(); // immediately start a new request webclient_receive(); // immediately start a new request
}, },
error: function(XMLHttpRequest, textStatus, errorThrown){ error: function(XMLHttpRequest, textStatus, errorThrown){
webclient_receive(); // A possible timeout. Resend request immediately webclient_receive(); // A possible timeout. Resend request immediately
}, },
}); });
}; };
function webclient_input(){ function webclient_input(){
// Send an input from the player to the server // Send an input from the player to the server
var outmsg = $("#inputfield").val(); // get data from form var outmsg = $("#inputfield").val(); // get data from form
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "/webclientdata", url: "/webclientdata",
async: true, async: true,
cache: false, cache: false,
timeout: 30000, timeout: 30000,
data: {mode:'input', msg:outmsg, data:'NoData', 'suid':CLIENT_HASH}, data: {mode:'input', msg:outmsg, data:'NoData', 'suid':CLIENT_HASH},
//callback methods //callback methods
success: function(data){ success: function(data){
//if (outmsg.length > 0 ) msg_display("inp", outmsg) // echo input on command line //if (outmsg.length > 0 ) msg_display("inp", outmsg) // echo input on command line
history_add(outmsg); history_add(outmsg);
HISTORY_POS = 0; HISTORY_POS = 0;
$('#inputform')[0].reset(); // clear input field $('#inputform')[0].reset(); // clear input field
}, },
error: function(XMLHttpRequest, textStatus, errorThrown){ error: function(XMLHttpRequest, textStatus, errorThrown){
msg_display("err", "Error: Server returned an error or timed out. Try resending or reloading the page."); msg_display("err", "Error: Server returned an error or timed out. Try resending or reloading the page.");
}, },
}) })
} }
@ -99,22 +99,23 @@ function webclient_init(){
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "/webclientdata", url: "/webclientdata",
async: true, async: true,
cache: false, cache: false,
timeout: 50000, timeout: 50000,
dataType:"json", dataType:"json",
data: {mode:'init', 'suid':CLIENT_HASH}, data: {mode:'init', 'suid':CLIENT_HASH},
// callback methods // callback methods
success: function(data){ // called when request to initdata completes success: function(data){ // called when request to initdata completes
$("#connecting").remove() // remove the "connecting ..." message. $("#connecting").remove() // remove the "connecting ..." message.
CLIENT_HASH = data.suid // unique id hash given from server CLIENT_HASH = data.suid // unique id hash given from server
setTimeout(function () { // a small timeout to stop 'loading' indicator in Chrome // A small timeout to stop 'loading' indicator in Chrome
$("#playercount").fadeOut('slow'); setTimeout(function () {
}, 10000); $("#playercount").fadeOut('slow', webclient_set_sizes);
}, 10000);
// Report success // Report success
msg_display('sys',"Connected to " + data.msg + "."); msg_display('sys',"Connected to " + data.msg + ".");
@ -123,13 +124,13 @@ function webclient_init(){
}, },
error: function(XMLHttpRequest, textStatus, errorThrown){ error: function(XMLHttpRequest, textStatus, errorThrown){
msg_display("err", "Connection error ..." + " (" + errorThrown + ")"); msg_display("err", "Connection error ..." + " (" + errorThrown + ")");
setTimeout('webclient_receive()', 15000); // try again after 15 seconds setTimeout('webclient_receive()', 15000); // try again after 15 seconds
}, },
}); });
} }
function webclient_close(){ function webclient_close(){
// Kill the connection and do house cleaning on the server. // Kill the connection and do house cleaning on the server.
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: "/webclientdata", url: "/webclientdata",
@ -150,11 +151,11 @@ function webclient_close(){
}); });
} }
// Display messages // Display messages
function msg_display(type, msg){ function msg_display(type, msg){
// Add a div to the message window. // Add a div to the message window.
// type givews the class of div to use. // type givews the class of div to use.
$("#messagewindow").append( $("#messagewindow").append(
"<div class='msg "+ type +"'>"+ msg +"</div>"); "<div class='msg "+ type +"'>"+ msg +"</div>");
// scroll message window to bottom // scroll message window to bottom
@ -174,15 +175,15 @@ function history_step_back() {
return HISTORY[HISTORY.length-1 - HISTORY_POS]; return HISTORY[HISTORY.length-1 - HISTORY_POS];
} }
function history_step_fwd() { function history_step_fwd() {
// step forward in history stack // step forward in history stack
HISTORY_POS = Math.max(--HISTORY_POS, 0); HISTORY_POS = Math.max(--HISTORY_POS, 0);
return HISTORY[HISTORY.length-1 - HISTORY_POS]; return HISTORY[HISTORY.length-1 - HISTORY_POS];
} }
function history_add(input) { function history_add(input) {
// add an entry to history // add an entry to history
if (input != HISTORY[HISTORY.length-1]) { if (input != HISTORY[HISTORY.length-1]) {
if (HISTORY.length >= HISTORY_MAX_LENGTH) { if (HISTORY.length >= HISTORY_MAX_LENGTH) {
HISTORY.shift(); // kill oldest history entry HISTORY.shift(); // kill oldest history entry
} }
HISTORY[HISTORY.length-1] = input; HISTORY[HISTORY.length-1] = input;
HISTORY[HISTORY.length] = ''; HISTORY[HISTORY.length] = '';
@ -196,12 +197,12 @@ $(document).keypress( function(event) {
// always focus input field // always focus input field
$("#inputfield")[0].focus(); $("#inputfield")[0].focus();
if (code == 13) { // Enter key if (code == 13) { // Enter key
webclient_input(); webclient_input();
event.preventDefault(); event.preventDefault();
return false; return false;
} }
else { else {
if (code == 38) { // arrow up if (code == 38) { // arrow up
$("#inputfield").val(function(index, value){ $("#inputfield").val(function(index, value){
return history_step_back(); return history_step_back();
@ -212,7 +213,7 @@ $(document).keypress( function(event) {
return history_step_fwd(); return history_step_fwd();
}); });
} }
} }
}); });
// handler to avoid double-clicks until the ajax request finishes // handler to avoid double-clicks until the ajax request finishes
@ -221,11 +222,12 @@ $("#inputsend").one("click", webclient_input)
function webclient_set_sizes() { function webclient_set_sizes() {
// Sets the size of the message window // Sets the size of the message window
var win_h = $(document).height(); var win_h = $(document).height();
var win_w = $('#wrapper').width(); //var win_w = $('#wrapper').width();
var inp_h = $('#inputform').height(); var inp_h = $('#inputform').outerHeight(true);
var inp_w = $('#inputsend').width() //var inp_w = $('#inputsend').outerWidth(true);
$("#messagewindow").css({'height':win_h-inp_h - 20});
$("#inputfield").css({'width':win_w-inp_w - 20}); $("#messagewindow").css({'height': win_h - inp_h - 1});
//$("#inputfield").css({'width': win_w - inp_w - 20});
} }
// Callback function - called when page has finished loading (gets things going) // Callback function - called when page has finished loading (gets things going)
@ -234,10 +236,10 @@ $(document).ready(function(){
$('#noscript').remove(); $('#noscript').remove();
// set sizes of elements and reposition them // set sizes of elements and reposition them
webclient_set_sizes(); webclient_set_sizes();
// a small timeout to stop 'loading' indicator in Chrome // a small timeout to stop 'loading' indicator in Chrome
setTimeout(function () { setTimeout(function () {
webclient_init(); webclient_init();
}, 500); }, 500);
}); });
// Callback function - called when the browser window resizes // Callback function - called when the browser window resizes
@ -248,4 +250,4 @@ $(window).resize(function() {
// Callback function - called when page is closed or moved away from. // Callback function - called when page is closed or moved away from.
$(window).unload(function() { $(window).unload(function() {
webclient_close(); webclient_close();
}); });

37
src/web/templates/prosimii/webclient.html
View file

@ -1,37 +1,38 @@
<html> <!DOCTYPE html>
<html dir="ltr" lang="en">
<head> <head>
<meta charset="utf-8" />
<title>Evennia web MUD client</title> <title>Evennia web MUD client</title>
<!--CSS style sheet --> <!--CSS style sheet -->
<link rel='stylesheet' type="text/css" media="screen" href="/media/css/webclient.css"> <link rel='stylesheet' type="text/css" media="screen" href="/media/css/webclient.css">
<!-- Importing the jQuery javascript library --> <!-- Importing the jQuery javascript library -->
<!--script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript" charset="utf-8"></script--> <!--script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript" charset="utf-8"></script-->
<script src="/media/javascript/jquery-1.4.4.js" type="text/javascript" charset="utf-8"></script> <script src="/media/javascript/jquery-1.4.4.js" type="text/javascript" charset="utf-8"></script>
<!-- Importing the Evennia ajax webclient component (requires jQuery) --> <!-- Importing the Evennia ajax webclient component (requires jQuery) -->
<script src="/media/javascript/evennia_webclient.js" type="text/javascript" charset="utf-8"></script> <script src="/media/javascript/evennia_webclient.js" type="text/javascript" charset="utf-8"></script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<div id="messagewindow"> <div id="messagewindow">
<!--javascript kills this when page has finished loading: --> <!--javascript kills this when page has finished loading: -->
<span id="connecting"> Connecting ...</span> <div id="connecting"> Connecting ...</div>
<!--this is supplied by django view - webclient/views.py: --> <!--this is supplied by django view - webclient/views.py: -->
<span id="noscript"><h3>Javascript Error: The Evennia MUD client requires that you have Javascript activated.</h3> <div id="noscript"><h3>Javascript Error: The Evennia MUD client requires that you have Javascript activated.</h3>
<p>Turn off eventual script blockers and/or switch to a web <p>Turn off eventual script blockers and/or switch to a web
browser supporting javascript.</p> browser supporting javascript.</p>
</span> </div>
</div> </div>
<form id="inputform"> <form id="inputform">
<span id="playercount">Logged in Players: {{num_players_connected}}</span> <br> <div id="playercount">Logged in Players: {{num_players_connected}}</div>
<input type="text" id="inputfield" autocomplete='off'><input id="inputsend" type="button" value="send" onClick="sendMsg()"> <div id="inputcontrol"><input type="text" id="inputfield" autocomplete="off"><input id="inputsend" type="button" value="send" onClick="sendMsg()" /></div>
</form> </form>
</div> </div>
</body> </body>
</html> </html>