Updated the game template, renaming subdir typeclasses rather than types since the latter collides with the python library module of the same name.

game_template/web/static/webclient/css/webclient.css

@@ -0,0 +1,150 @@
+/* ---
+
+  Style sheet for Evennia's web client.
+
+  This should possibly somehow be incoorporated with the
+  overall website theme in the future?
+
+--- */
+
+/* Overall element look */
+html, body { height: 100% }
+body {
+  margin: 0;
+  padding: 0;
+  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 }
+
+/* Set this to e.g. bolder if wanting to have ansi-highlights bolden
+ * stand-alone text.*/
+strong {font-weight:normal;}
+
+div {margin:0px;}
+/* Base style for new messages in the main message area */
+/*.msg {
+  white-space: pre-wrap; }
+  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 }
+
+/* Prompt base (white) */
+.prompt {color: #fff }
+
+/* Style specific classes corresponding to formatted, narative text. */
+.red { color: red; }
+.maroon { color: maroon; }
+.lime { color: lime; }
+.green { color: green; }
+.yellow { color: yellow; }
+.olive { color: olive; }
+.blue { color: blue; }
+.navy { color: navy; }
+.magenta { color: #FF00FF; }
+.purple { color: purple; }
+.cyan { color: #00FFFF; }
+.teal { color: teal; }
+.white { color: white; }
+.gray { color: gray; }
+.dimgray {color: #696969;}
+.black {color: black;}
+.underline { text-decoration: underline; }
+
+.bgred { background-color: red;}
+.bgmaroon { background-color: maroon;}
+.bglime { background-color: lime;}
+.bggreen { background-color: green;}
+.bgyellow { background-color: yellow;}
+.bgolive { background-color: olive;}
+.bgblue { background-color: blue;}
+.bgnavy { background-color: navy;}
+.bgmagenta { background-color: #FF00FF;}
+.bgpurple { background-color: purple;}
+.bgcyan { background-color: #00FFFF;}
+.bgteal { background-color: teal;}
+.bgwhite { background-color: white;}
+.bggray { background-color: gray;}
+.bgdimgray { background-color: #696969;}
+.bgblack { background-color: black;}
+
+/* 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 }
+
+/* prompt area above input field */
+#prompt {
+  margin-top: .8em;}
+
+/* No javascript warning */
+#connecting {
+  padding: .5em .9em }
+
+/*Example player count display */
+#playercount { margin-left: .8em }
+
+/* Testing */
+/*#inputform {
+  outline: 1px dotted blue }
+
+#messagewindow {
+  outline: 1px dotted red }
+
+#wrapper {
+  outline: 1px dotted green }*/

game_template/web/static/webclient/js/evennia_ajax_webclient.js

@@ -0,0 +1,298 @@
+/*
+
+Evennia ajax webclient (javascript component)
+
+The client is composed of several parts:
+ templates/webclient.html - the main page
+ webclient/views.py - the django view serving the template (based on urls.py pattern)
+ src/server/webclient.py - the server component receiving requests from the client
+ this file - the javascript component handling dynamic ajax content
+
+This implements an ajax mud client for use with Evennia, using jQuery
+for simplicity. It communicates with the Twisted server on the address
+/webclientdata through POST requests. Each request must at least
+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
+                  long-polling (comet-style) request since the server
+                  will not reply until it actually has data available.
+                  The returned data object has two variables 'msg' and 'data'
+                  where msg should be output and 'data' is an arbitrary piece
+                  of data the server and client understands (not used in default
+                  client).
+ mode 'input' - the user has input data on some form. The POST request
+                should also contain variables 'msg' and 'data' where
+                the 'msg' is a string and 'data' is an arbitrary piece
+                of data from the client that the server knows how to
+                deal with (not used in this example client).
+ mode 'init' -  starts the connection. All setup the server is requered to do
+                should happen at this point. The server returns a data object
+                with the 'msg' property containing the server address.
+
+ mode 'close' - closes the connection. The server closes the session and does
+                cleanup at this point.
+*/
+
+// jQuery must be imported by the calling html page before this script
+// There are plenty of help on using the jQuery library on http://jquery.com/
+
+
+$.fn.appendCaret = function() {
+    /* jQuery extension that will forward the caret to the end of the input, and
+       won't harm other elements (although calling this on multiple inputs might
+       not have the expected consequences).
+
+       Thanks to
+       http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
+       for the good starting point.  */
+    return this.each(function() {
+        var range,
+            // Index at where to place the caret.
+            end,
+            self = this;
+
+        if (self.setSelectionRange) {
+            // other browsers
+            end = self.value.length;
+            self.focus();
+            // NOTE: Need to delay the caret movement until after the callstack.
+            setTimeout(function() {
+                self.setSelectionRange(end, end);
+            }, 0);
+        }
+        else if (self.createTextRange) {
+            // IE
+            end = self.value.length - 1;
+            range = self.createTextRange();
+            range.collapse(true);
+            range.moveEnd('character', end);
+            range.moveStart('character', end);
+            // NOTE: I haven't tested to see if IE has the same problem as
+            // W3C browsers seem to have in this context (needing to fire
+            // select after callstack).
+            range.select();
+        }
+    });
+};
+
+
+// Server communications
+
+var CLIENT_HASH = '0'; // variable holding the client id
+
+function webclient_receive(){
+    // This starts an asynchronous long-polling request. It will either timeout
+    // or receive data from the 'webclientdata' url. In both cases a new request will
+    // immediately be started.
+
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: true,             // Turns off browser loading indicator
+        cache: false,            // Forces browser reload independent of cache
+        timeout:30000,           // Timeout in ms. After this time a new long-poll will be started.
+        dataType:"json",
+        data: {mode:'receive', 'suid':CLIENT_HASH},
+
+        // callback methods
+
+        success: function(data){       // called when request to waitreceive completes
+            msg_display("out", data.msg);  // Add response to the message area
+            webclient_receive();              // immediately start a new request
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            webclient_receive();              // A possible timeout. Resend request immediately
+        },
+    });
+};
+
+function webclient_input(arg, no_update){
+    // Send an input from the player to the server
+    // no_update is used for sending idle messages behind the scenes.
+
+    var outmsg = typeof(arg) != 'undefined' ? arg : $("#inputfield").val();
+
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: true,
+        cache: false,
+        timeout: 30000,
+        data: {mode:'input', msg:outmsg, data:'NoData', 'suid':CLIENT_HASH},
+
+        //callback methods
+
+        success: function(data){
+            //if (outmsg.length > 0 ) msg_display("inp", outmsg) // echo input on command line
+            if (no_update == undefined) {
+                history_add(outmsg);
+                HISTORY_POS = 0;
+                $('#inputform')[0].reset();                     // clear input field
+            }
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            msg_display("err", "Error: Server returned an error or timed out. Try resending or reloading the page.");
+        },
+    })
+}
+
+function webclient_init(){
+    // Start the connection by making sure the server is ready
+
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: true,
+        cache: false,
+        timeout: 50000,
+        dataType:"json",
+        data: {mode:'init', 'suid':CLIENT_HASH},
+
+        // callback methods
+
+        success: function(data){  // called when request to initdata completes
+            $("#connecting").remove() // remove the "connecting ..." message.
+            CLIENT_HASH = data.suid // unique id hash given from server
+
+            // A small timeout to stop 'loading' indicator in Chrome
+            setTimeout(function () {
+                $("#playercount").fadeOut('slow', webclient_set_sizes);
+            }, 10000);
+
+            // Report success
+            msg_display('sys',"Connected to " + data.msg + ".");
+
+            // Wait for input
+            webclient_receive();
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            msg_display("err", "Connection error ..." + " (" + errorThrown + ")");
+            setTimeout('webclient_receive()', 15000); // try again after 15 seconds
+        },
+    });
+}
+
+function webclient_close(){
+    // Kill the connection and do house cleaning on the server.
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: false,
+        cache: false,
+        timeout: 50000,
+        dataType: "json",
+        data: {mode: 'close', 'suid': CLIENT_HASH},
+
+        success: function(data){
+            CLIENT_HASH = '0';
+            alert("Mud client connection was closed cleanly.");
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            CLIENT_HASH = '0';
+        }
+
+    });
+}
+
+// Display messages
+
+function msg_display(type, msg){
+    // Add a div to the message window.
+    // type gives the class of div to use.
+    $("#messagewindow").append(
+        "<div class='msg "+ type +"'>"+ msg +"</div>");
+    // scroll message window to bottom
+    $('#messagewindow').animate({scrollTop: $('#messagewindow')[0].scrollHeight});
+}
+
+// Input history mechanism
+
+var HISTORY_MAX_LENGTH = 21
+var HISTORY = new Array();
+HISTORY[0] = '';
+var HISTORY_POS = 0;
+
+function history_step_back() {
+    // step backwards in history stack
+    HISTORY_POS = Math.min(++HISTORY_POS, HISTORY.length-1);
+    return HISTORY[HISTORY.length-1 - HISTORY_POS];
+}
+function history_step_fwd() {
+    // step forward in history stack
+    HISTORY_POS = Math.max(--HISTORY_POS, 0);
+    return HISTORY[HISTORY.length-1 - HISTORY_POS];
+}
+function history_add(input) {
+    // add an entry to history
+    if (input != HISTORY[HISTORY.length-1]) {
+        if (HISTORY.length >= HISTORY_MAX_LENGTH) {
+            HISTORY.shift(); // kill oldest history entry
+        }
+        HISTORY[HISTORY.length-1] = input;
+        HISTORY[HISTORY.length] = '';
+    }
+}
+
+// Catching keyboard shortcuts
+
+$(document).keydown( function(event) {
+    // Get the pressed key (normalized by jQuery)
+    var code = event.which,
+        inputField = $("#inputfield");
+
+    // always focus input field no matter which key is pressed
+    inputField.focus();
+
+    // Special keys recognized by client
+
+    //msg_display("out", "key code pressed: " + code); // debug
+
+    if (code == 13) { // Enter Key
+        webclient_input();
+        event.preventDefault();
+    }
+    else {
+        if (code == 38) { // arrow up 38
+            inputField.val(history_step_back()).appendCaret();
+        }
+        else if (code == 40) { // arrow down 40
+            inputField.val(history_step_fwd()).appendCaret();
+        }
+    }
+});
+
+// handler to avoid double-clicks until the ajax request finishes
+$("#inputsend").one("click", webclient_input)
+
+function webclient_set_sizes() {
+    // Sets the size of the message window
+    var win_h = $(document).height();
+    //var win_w = $('#wrapper').width();
+    var inp_h = $('#inputform').outerHeight(true);
+    //var inp_w = $('#inputsend').outerWidth(true);
+
+    $("#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)
+$(document).ready(function(){
+    // remove the "no javascript" warning, since we obviously have javascript
+    $('#noscript').remove();
+    // set sizes of elements and reposition them
+    webclient_set_sizes();
+    // a small timeout to stop 'loading' indicator in Chrome
+    setTimeout(function () {
+        webclient_init();
+    }, 500);
+    // set an idle timer to avoid proxy servers to time out on us (every 3 minutes)
+    setInterval(function() {
+        webclient_input("idle", true);
+    }, 60000*3);
+});
+
+// Callback function - called when the browser window resizes
+$(window).resize(webclient_set_sizes);
+
+// Callback function - called when page is closed or moved away from.
+$(window).bind("beforeunload", webclient_close);

game_template/web/static/webclient/js/evennia_webclient.js

@@ -0,0 +1,298 @@
+/*
+
+Evennia ajax webclient (javascript component)
+
+The client is composed of several parts:
+ templates/webclient.html - the main page
+ webclient/views.py - the django view serving the template (based on urls.py pattern)
+ src/server/webclient.py - the server component receiving requests from the client
+ this file - the javascript component handling dynamic ajax content
+
+This implements an ajax mud client for use with Evennia, using jQuery
+for simplicity. It communicates with the Twisted server on the address
+/webclientdata through POST requests. Each request must at least
+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
+                  long-polling (comet-style) request since the server
+                  will not reply until it actually has data available.
+                  The returned data object has two variables 'msg' and 'data'
+                  where msg should be output and 'data' is an arbitrary piece
+                  of data the server and client understands (not used in default
+                  client).
+ mode 'input' - the user has input data on some form. The POST request
+                should also contain variables 'msg' and 'data' where
+                the 'msg' is a string and 'data' is an arbitrary piece
+                of data from the client that the server knows how to
+                deal with (not used in this example client).
+ mode 'init' -  starts the connection. All setup the server is requered to do
+                should happen at this point. The server returns a data object
+                with the 'msg' property containing the server address.
+
+ mode 'close' - closes the connection. The server closes the session and does
+                cleanup at this point.
+*/
+
+// jQuery must be imported by the calling html page before this script
+// There are plenty of help on using the jQuery library on http://jquery.com/
+
+
+$.fn.appendCaret = function() {
+    /* jQuery extension that will forward the caret to the end of the input, and
+       won't harm other elements (although calling this on multiple inputs might
+       not have the expected consequences).
+
+       Thanks to
+       http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
+       for the good starting point.  */
+    return this.each(function() {
+        var range,
+            // Index at where to place the caret.
+            end,
+            self = this;
+
+        if (self.setSelectionRange) {
+            // other browsers
+            end = self.value.length;
+            self.focus();
+            // NOTE: Need to delay the caret movement until after the callstack.
+            setTimeout(function() {
+                self.setSelectionRange(end, end);
+            }, 0);
+        }
+        else if (self.createTextRange) {
+            // IE
+            end = self.value.length - 1;
+            range = self.createTextRange();
+            range.collapse(true);
+            range.moveEnd('character', end);
+            range.moveStart('character', end);
+            // NOTE: I haven't tested to see if IE has the same problem as
+            // W3C browsers seem to have in this context (needing to fire
+            // select after callstack).
+            range.select();
+        }
+    });
+};
+
+
+// Server communications
+
+var CLIENT_HASH = '0'; // variable holding the client id
+
+function webclient_receive(){
+    // This starts an asynchronous long-polling request. It will either timeout
+    // or receive data from the 'webclientdata' url. In both cases a new request will
+    // immediately be started.
+
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: true,             // Turns off browser loading indicator
+        cache: false,            // Forces browser reload independent of cache
+        timeout:30000,           // Timeout in ms. After this time a new long-poll will be started.
+        dataType:"json",
+        data: {mode:'receive', 'suid':CLIENT_HASH},
+
+        // callback methods
+
+        success: function(data){       // called when request to waitreceive completes
+            msg_display("out", data.msg);  // Add response to the message area
+            webclient_receive();              // immediately start a new request
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            webclient_receive();              // A possible timeout. Resend request immediately
+        },
+    });
+};
+
+function webclient_input(arg, no_update){
+    // Send an input from the player to the server
+    // no_update is used for sending idle messages behind the scenes.
+
+    var outmsg = typeof(arg) != 'undefined' ? arg : $("#inputfield").val();
+
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: true,
+        cache: false,
+        timeout: 30000,
+        data: {mode:'input', msg:outmsg, data:'NoData', 'suid':CLIENT_HASH},
+
+        //callback methods
+
+        success: function(data){
+            //if (outmsg.length > 0 ) msg_display("inp", outmsg) // echo input on command line
+            if (no_update == undefined) {
+                history_add(outmsg);
+                HISTORY_POS = 0;
+                $('#inputform')[0].reset();                     // clear input field
+            }
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            msg_display("err", "Error: Server returned an error or timed out. Try resending or reloading the page.");
+        },
+    })
+}
+
+function webclient_init(){
+    // Start the connection by making sure the server is ready
+
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: true,
+        cache: false,
+        timeout: 50000,
+        dataType:"json",
+        data: {mode:'init', 'suid':CLIENT_HASH},
+
+        // callback methods
+
+        success: function(data){  // called when request to initdata completes
+            $("#connecting").remove() // remove the "connecting ..." message.
+            CLIENT_HASH = data.suid // unique id hash given from server
+
+            // A small timeout to stop 'loading' indicator in Chrome
+            setTimeout(function () {
+                $("#playercount").fadeOut('slow', webclient_set_sizes);
+            }, 10000);
+
+            // Report success
+            msg_display('sys',"Connected to " + data.msg + ".");
+
+            // Wait for input
+            webclient_receive();
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            msg_display("err", "Connection error ..." + " (" + errorThrown + ")");
+            setTimeout('webclient_receive()', 15000); // try again after 15 seconds
+        },
+    });
+}
+
+function webclient_close(){
+    // Kill the connection and do house cleaning on the server.
+    $.ajax({
+        type: "POST",
+        url: "/webclientdata",
+        async: false,
+        cache: false,
+        timeout: 50000,
+        dataType: "json",
+        data: {mode: 'close', 'suid': CLIENT_HASH},
+
+        success: function(data){
+            CLIENT_HASH = '0';
+            alert("Mud client connection was closed cleanly.");
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            CLIENT_HASH = '0';
+        }
+
+    });
+}
+
+// Display messages
+
+function msg_display(type, msg){
+    // Add a div to the message window.
+    // type gives the class of div to use.
+    $("#messagewindow").append(
+        "<div class='msg "+ type +"'>"+ msg +"</div>");
+    // scroll message window to bottom
+    $('#messagewindow').animate({scrollTop: $('#messagewindow')[0].scrollHeight});
+}
+
+// Input history mechanism
+
+var HISTORY_MAX_LENGTH = 21
+var HISTORY = new Array();
+HISTORY[0] = '';
+var HISTORY_POS = 0;
+
+function history_step_back() {
+    // step backwards in history stack
+    HISTORY_POS = Math.min(++HISTORY_POS, HISTORY.length-1);
+    return HISTORY[HISTORY.length-1 - HISTORY_POS];
+}
+function history_step_fwd() {
+    // step forward in history stack
+    HISTORY_POS = Math.max(--HISTORY_POS, 0);
+    return HISTORY[HISTORY.length-1 - HISTORY_POS];
+}
+function history_add(input) {
+    // add an entry to history
+    if (input != HISTORY[HISTORY.length-1]) {
+        if (HISTORY.length >= HISTORY_MAX_LENGTH) {
+            HISTORY.shift(); // kill oldest history entry
+        }
+        HISTORY[HISTORY.length-1] = input;
+        HISTORY[HISTORY.length] = '';
+    }
+}
+
+// Catching keyboard shortcuts
+
+$(document).keydown( function(event) {
+    // Get the pressed key (normalized by jQuery)
+    var code = event.which,
+        inputField = $("#inputfield");
+
+    // always focus input field no matter which key is pressed
+    inputField.focus();
+
+    // Special keys recognized by client
+
+    //msg_display("out", "key code pressed: " + code); // debug
+
+    if (code == 13) { // Enter Key
+        webclient_input();
+        event.preventDefault();
+    }
+    else {
+        if (code == 38) { // arrow up 38
+            inputField.val(history_step_back()).appendCaret();
+        }
+        else if (code == 40) { // arrow down 40
+            inputField.val(history_step_fwd()).appendCaret();
+        }
+    }
+});
+
+// handler to avoid double-clicks until the ajax request finishes
+$("#inputsend").one("click", webclient_input)
+
+function webclient_set_sizes() {
+    // Sets the size of the message window
+    var win_h = $(document).height();
+    //var win_w = $('#wrapper').width();
+    var inp_h = $('#inputform').outerHeight(true);
+    //var inp_w = $('#inputsend').outerWidth(true);
+
+    $("#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)
+$(document).ready(function(){
+    // remove the "no javascript" warning, since we obviously have javascript
+    $('#noscript').remove();
+    // set sizes of elements and reposition them
+    webclient_set_sizes();
+    // a small timeout to stop 'loading' indicator in Chrome
+    setTimeout(function () {
+        webclient_init();
+    }, 500);
+    // set an idle timer to avoid proxy servers to time out on us (every 3 minutes)
+    setInterval(function() {
+        webclient_input("idle", true);
+    }, 60000*3);
+});
+
+// Callback function - called when the browser window resizes
+$(window).resize(webclient_set_sizes);
+
+// Callback function - called when page is closed or moved away from.
+$(window).bind("beforeunload", webclient_close);

game_template/web/static/webclient/js/evennia_websocket_webclient.js

@@ -0,0 +1,357 @@
+/*
+
+Evennia websocket webclient (javascript component)
+
+The client is composed of two parts:
+ src/server/portal/websocket_client.py - the portal-side component
+ this file - the javascript component handling dynamic content
+
+messages sent to the client is one of two modes:
+  OOB("func1",args, "func2",args, ...)  - OOB command executions, this will
+                                        call unique javascript functions
+                                        func1(args), func2(args) etc.
+  text - any other text is considered a normal text output in the main output window.
+
+*/
+
+// If on, allows client user to send OOB messages to server by
+// prepending with ##OOB{}, for example ##OOB{"echo":[1,2,3,4]}
+var OOB_debug = true
+
+//
+// Custom OOB functions
+// functions defined here can be called by name by the server. For
+// example input OOB{"echo":(args),{kwargs}} will trigger a function named
+// echo(args, kwargs). The commands the server understands is set by
+// settings.OOB_PLUGIN_MODULES
+
+
+function echo(args, kwargs) {
+    // example echo function.
+    doShow("out", "ECHO return: " + args) }
+
+function list (args, kwargs) {
+    // show in main window
+    doShow("out", args) }
+
+function send (args, kwargs) {
+    // show in main window. SEND returns kwargs {name:value}.
+    for (sendvalue in kwargs) {
+        doShow("out", sendvalue + " = " + kwargs[sendvalue]);}
+}
+
+function report (args, kwargs) {
+    // show in main window. REPORT returns kwargs
+    // {attrfieldname:value}
+    for (name in kwargs) {
+        doShow("out", name + " = " + kwargs[name]) }
+}
+
+function repeat (args, kwargs) {
+    // called by repeating oob funcs
+    doShow("out", args) }
+
+function err (args, kwargs) {
+    // display error
+    doShow("err", args) }
+
+
+//
+// Webclient code
+//
+
+function webclient_init(){
+    // called when client is just initializing
+    websocket = new WebSocket(wsurl);
+    websocket.onopen = function(evt) { onOpen(evt) };
+    websocket.onclose = function(evt) { onClose(evt) };
+    websocket.onmessage = function(evt) { onMessage(evt) };
+    websocket.onerror = function(evt) { onError(evt) };
+}
+
+function onOpen(evt) {
+    // called when client is first connecting
+    $("#connecting").remove(); // remove the "connecting ..." message
+    doShow("sys", "Using websockets - connected to " + wsurl + ".")
+
+    setTimeout(function () {
+        $("#numplayers").fadeOut('slow', doSetSizes);
+    }, 10000);
+}
+
+function onClose(evt) {
+    // called when client is closing
+    CLIENT_HASH = 0;
+    alert("Mud client connection was closed cleanly.");
+}
+
+function onMessage(evt) {
+    // called when the Evennia is sending data to client
+    var inmsg = evt.data
+    if (inmsg.length > 3 && inmsg.substr(0, 3) == "OOB") {
+        // dynamically call oob methods, if available
+        try {
+            var oobarray = JSON.parse(inmsg.slice(3));} // everything after OOB }
+        catch(err) {
+            // not JSON packed - a normal text
+            doShow('out', inmsg);
+            return;
+        }
+        if (typeof oobarray != "undefined") {
+            for (var ind in oobarray) {
+                try {
+                    window[oobarray[ind][0]](oobarray[ind][1], oobarray[ind][2]) }
+                catch(err) {
+                    doShow("err", "Could not execute js OOB function '" + oobarray[ind][0] + "(" + oobarray[ind][1] + oobarray[ind][2] + ")'") }
+            }
+        }
+    }
+    else if (inmsg.length >= 6 && inmsg.substr(0, 6) == "PROMPT") {
+        // handle prompt
+        var game_prompt = inmsg.slice(6);
+        doPrompt("prompt", game_prompt);
+    }
+    else {
+        // normal message
+        doShow('out', inmsg); }
+}
+
+function onError(evt) {
+    // called on a server error
+    doShow('err', "Connection error trying to access websocket on " + wsurl + ". " + "Contact the admin and/or check settings.WEBSOCKET_CLIENT_URL.");
+}
+
+function doSend(){
+    // relays data from client to Evennia.
+    // If OOB_debug is set, allows OOB test data on the
+    // form ##OOB{func:args}
+    outmsg = $("#inputfield").val();
+    history_add(outmsg);
+    HISTORY_POS = 0;
+    $('#inputform')[0].reset();                     // clear input field
+
+    if (OOB_debug && outmsg.length > 4 && outmsg.substr(0, 5) == "##OOB") {
+        if (outmsg == "##OOBUNITTEST") {
+           // unittest mode
+           doShow("out", "OOB testing mode ...");
+           doOOB(JSON.parse('{"ECHO":"Echo test"}'));
+           doOOB(JSON.parse('{"LIST":"COMMANDS"}'));
+           doOOB(JSON.parse('{"SEND":"CHARACTER_NAME"}'));
+           doOOB(JSON.parse('{"REPORT":"TEST"}'));
+           doOOB(JSON.parse('{"UNREPORT":"TEST"}'));
+           doOOB(JSON.parse('{"REPEAT": 1}'));
+           doOOB(JSON.parse('{"UNREPEAT": 1}'));
+           doShow("out", "... OOB testing mode done.");
+           return
+        }
+        // test OOB messaging
+        try {
+            doShow("out", "OOB input: " + outmsg.slice(5));
+            if (outmsg.length == 5) {
+                doShow("err", "OOB testing syntax: ##OOB{\"cmdname:args, ...}"); }
+            else {
+                doOOB(JSON.parse(outmsg.slice(5))); } }
+        catch(err) {
+            doShow("err", err) }
+    }
+    else {
+        // normal output
+        websocket.send(outmsg); }
+}
+
+function doOOB(oobdict){
+    // Send OOB data from client to Evennia.
+    // Takes input on form {funcname:[args], funcname: [args], ... }
+    var oobmsg = JSON.stringify(oobdict);
+    websocket.send("OOB" + oobmsg);
+}
+
+function doShow(type, msg){
+    // Add msg to the main output window.
+    // type gives the class of div to use.
+    // The default types are
+    // "out" (normal output) or "err" (red error message)
+    $("#messagewindow").append(
+        "<div class='msg "+ type +"'>"+ msg +"</div>");
+    // scroll message window to bottom
+    $('#messagewindow').animate({scrollTop: $('#messagewindow')[0].scrollHeight});
+}
+
+function doPrompt(type, msg){
+    // Display prompt
+    $('#prompt').replaceWith(
+            "<div id='prompt' class='msg "+ type +"'>" + msg + "</div>");
+}
+
+function doSetSizes() {
+    // Sets the size of the message window
+    var win_h = $(document).height();
+    //var win_w = $('#wrapper').width();
+    var inp_h = $('#inputform').outerHeight(true);
+    //var inp_w = $('#inputsend').outerWidth(true);
+    $("#messagewindow").css({'height': win_h - inp_h - 1});
+    //$("#inputfield").css({'width': win_w - inp_w - 20});
+}
+
+
+//
+// Input code
+//
+
+// Input history
+
+var HISTORY_MAX_LENGTH = 21
+var HISTORY = new Array();
+HISTORY[0] = '';
+var HISTORY_POS = 0;
+
+function history_step_back() {
+    // step backwards in history stack
+    HISTORY_POS = Math.min(++HISTORY_POS, HISTORY.length-1);
+    return HISTORY[HISTORY.length-1 - HISTORY_POS];
+}
+function history_step_fwd() {
+    // step forward in history stack
+    HISTORY_POS = Math.max(--HISTORY_POS, 0);
+    return HISTORY[HISTORY.length-1 - HISTORY_POS];
+}
+function history_add(input) {
+    // add an entry to history
+    if (input != HISTORY[HISTORY.length-1]) {
+        if (HISTORY.length >= HISTORY_MAX_LENGTH) {
+            HISTORY.shift(); // kill oldest history entry
+        }
+        HISTORY[HISTORY.length-1] = input;
+        HISTORY[HISTORY.length] = '';
+    }
+}
+
+// Catching keyboard shortcuts
+
+$.fn.appendCaret = function() {
+    /* jQuery extension that will forward the caret to the end of the input, and
+       won't harm other elements (although calling this on multiple inputs might
+       not have the expected consequences).
+
+       Thanks to
+       http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
+       for the good starting point.  */
+    return this.each(function() {
+        var range,
+            // Index at where to place the caret.
+            end,
+            self = this;
+
+        if (self.setSelectionRange) {
+            // other browsers
+            end = self.value.length;
+            self.focus();
+            // NOTE: Need to delay the caret movement until after the callstack.
+            setTimeout(function() {
+                self.setSelectionRange(end, end);
+            }, 0);
+        }
+        else if (self.createTextRange) {
+            // IE
+            end = self.value.length - 1;
+            range = self.createTextRange();
+            range.collapse(true);
+            range.moveEnd('character', end);
+            range.moveStart('character', end);
+            // NOTE: I haven't tested to see if IE has the same problem as
+            // W3C browsers seem to have in this context (needing to fire
+            // select after callstack).
+            range.select();
+        }
+    });
+};
+$.fn.appendCaret = function() {
+    /* jQuery extension that will forward the caret to the end of the input, and
+       won't harm other elements (although calling this on multiple inputs might
+       not have the expected consequences).
+
+       Thanks to
+       http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
+       for the good starting point.  */
+    return this.each(function() {
+        var range,
+            // Index at where to place the caret.
+            end,
+            self = this;
+
+        if (self.setSelectionRange) {
+            // other browsers
+            end = self.value.length;
+            self.focus();
+            // NOTE: Need to delay the caret movement until after the callstack.
+            setTimeout(function() {
+                self.setSelectionRange(end, end);
+            }, 0);
+        }
+        else if (self.createTextRange) {
+            // IE
+            end = self.value.length - 1;
+            range = self.createTextRange();
+            range.collapse(true);
+            range.moveEnd('character', end);
+            range.moveStart('character', end);
+            // NOTE: I haven't tested to see if IE has the same problem as
+            // W3C browsers seem to have in this context (needing to fire
+            // select after callstack).
+            range.select();
+        }
+    });
+};
+
+// Input jQuery callbacks
+
+$(document).keydown( function(event) {
+    // Get the pressed key (normalized by jQuery)
+    var code = event.which,
+        inputField = $("#inputfield");
+
+    // always focus input field no matter which key is pressed
+    inputField.focus();
+
+    // Special keys recognized by client
+
+    //doShow("out", "key code pressed: " + code); // debug
+
+    if (code == 13) { // Enter Key
+        doSend();
+        event.preventDefault();
+    }
+    else {
+        if (code == 38) { // arrow up 38
+            inputField.val(history_step_back()).appendCaret();
+        }
+        else if (code == 40) { // arrow down 40
+            inputField.val(history_step_fwd()).appendCaret();
+        }
+    }
+});
+
+// handler to avoid double-clicks until the ajax request finishes
+//$("#inputsend").one("click", webclient_input)
+
+// Callback function - called when the browser window resizes
+$(window).resize(doSetSizes);
+
+// Callback function - called when page is closed or moved away from.
+//$(window).bind("beforeunload", webclient_close);
+//
+// Callback function - called when page has finished loading (kicks the client into gear)
+$(document).ready(function(){
+    // remove the "no javascript" warning, since we obviously have javascript
+    $('#noscript').remove();
+    // set sizes of elements and reposition them
+    doSetSizes();
+    // a small timeout to stop 'loading' indicator in Chrome
+    setTimeout(function () {
+        webclient_init();
+    }, 500);
+    // set an idle timer to avoid proxy servers to time out on us (every 3 minutes)
+    setInterval(function() {
+        websocket.send("idle");
+    }, 60000*3);
+});