Split out a base.html file for the client.
This commit is contained in:
Griatch
parent
da52380b0f
commit
0219c726dc
3 changed files with 104 additions and 109 deletions
|
|
@ -4,56 +4,45 @@ Evenna webclient library
|
||||||
This javascript library handles all communication between Evennia and
|
This javascript library handles all communication between Evennia and
|
||||||
whatever client front end is used.
|
whatever client front end is used.
|
||||||
|
|
||||||
|
|
||||||
* Evennia - library communication
|
|
||||||
|
|
||||||
The library will try to communicate with Evennia using websockets
|
The library will try to communicate with Evennia using websockets
|
||||||
(evennia/server/portal/webclient.py). However, if the web browser is
|
(evennia/server/portal/webclient.py). However, if the web browser is
|
||||||
old and does not support websockets, it will instead fall back to a
|
old and does not support websockets, it will instead fall back to a
|
||||||
long-polling (AJAX/COMET) type of connection
|
long-polling (AJAX/COMET) type of connection (using
|
||||||
(using evennia/server/portal/webclient_ajax.py)
|
evennia/server/portal/webclient_ajax.py)
|
||||||
|
|
||||||
All messages are valid JSON array on single form: ["funcname", arg, arg,, ...]
|
All messages is a valid JSON array on single form: ["cmdname",
|
||||||
This represents a JS function called as funcname(arg, arg, ...)
|
kwargs], where kwargs is a JSON object that will be used as argument
|
||||||
|
to call the cmdname function.
|
||||||
* Front-end interface
|
|
||||||
|
|
||||||
This library makes the "Evennia" object available. It has the following
|
|
||||||
functions:
|
|
||||||
|
|
||||||
|
This library makes the "Evennia" object available. It has the
|
||||||
|
following official functions:
|
||||||
|
|
||||||
- Evennia.init(options)
|
- Evennia.init(options)
|
||||||
This must be called by the frontend to intialize the library. The
|
This can be called by the frontend to intialize the library. The
|
||||||
argument is an js object with the following possible keys:
|
argument is an js object with the following possible keys:
|
||||||
'connection': This defaults to Evennia.WebsocketConnection but
|
'connection': This defaults to Evennia.WebsocketConnection but
|
||||||
can also be set to Evennia.CometConnection for backwards
|
can also be set to Evennia.CometConnection for backwards
|
||||||
compatibility with old browsers. Each connection must have
|
compatibility. See below.
|
||||||
a 'msg(data)' method that should handle the conversion to
|
'emitter': An optional custom command handler for distributing
|
||||||
JSON before sending across the wire.
|
data from the server to suitable listeners. If not given,
|
||||||
'cmdhandler': An optional custom command handler for
|
a default will be used.
|
||||||
managing outgoing commands from the server. If not
|
|
||||||
supplied, the default will be used. It must have an emit(data) function.
|
|
||||||
- Evennia.msg(funcname, [args,...], callback)
|
- Evennia.msg(funcname, [args,...], callback)
|
||||||
Send a command to the server. You can also provide a function
|
Send a command to the server. You can also provide a function
|
||||||
to call with the return of the call (not all commands will return
|
to call with the return of the call (note that commands will
|
||||||
anything, like 'text' type commands).
|
not return anything unless specified to do so server-side).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Evennia websocket webclient (javascript component)
|
|
||||||
|
|
||||||
The client is composed of two parts:
|
|
||||||
- /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.
|
|
||||||
|
|
||||||
|
A "connection" object must have the method
|
||||||
|
- msg(data) - this should relay data to the Server. This function should itself handle
|
||||||
|
the conversion to JSON before sending across the wire.
|
||||||
|
- When receiving data from the Server (always [cmdname, kwargs]), this must be
|
||||||
|
JSON-unpacked and the result redirected to Evennia.emit(data[0], data[1]).
|
||||||
|
An "emitter" object must have a function
|
||||||
|
- emit(cmdname, kwargs) - this will be called by the backend.
|
||||||
|
- The default emitter also has the following methods:
|
||||||
|
- on(cmdname, listener) - this ties a listener to the backend. This function
|
||||||
|
should be called as listener(kwargs) when the backend calls emit.
|
||||||
|
- off(cmdname) - remove the listener for this cmdname.
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
@ -72,15 +61,16 @@ messages sent to the client is one of two modes:
|
||||||
// emitter - custom emitter. If not given,
|
// emitter - custom emitter. If not given,
|
||||||
// will use a default emitter. Must have
|
// will use a default emitter. Must have
|
||||||
// an "emit" function.
|
// an "emit" function.
|
||||||
// connection - This defaults to a WebsocketConnection,
|
// connection - This defaults to using either
|
||||||
// but could also be the CometConnection or another
|
// a WebsocketConnection or a CometConnection
|
||||||
// custom protocol. Must have a 'send' method and
|
// depending on what the browser supports. If given
|
||||||
// make use of Evennia.emit to return data to Client.
|
// it must have a 'msg' method and make use of
|
||||||
|
// Evennia.emit to return data to Client.
|
||||||
//
|
//
|
||||||
init: function(opts) {
|
init: function(opts) {
|
||||||
opts = opts || {};
|
opts = opts || {};
|
||||||
this.emitter = opts.emitter || new DefaultEmitter();
|
this.emitter = opts.emitter || new DefaultEmitter();
|
||||||
this.connection = opts.connection || new WebsocketConnection();
|
this.connection = opts.connection || window.Websocket ? new WebsocketConnection() : new AjaxConnection();
|
||||||
},
|
},
|
||||||
|
|
||||||
// Client -> Evennia.
|
// Client -> Evennia.
|
||||||
|
|
@ -278,7 +268,6 @@ function log(msg) {
|
||||||
|
|
||||||
// Called when page has finished loading (kicks the client into gear)
|
// Called when page has finished loading (kicks the client into gear)
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
|
||||||
// a small timeout to stop 'loading' indicator in Chrome
|
// a small timeout to stop 'loading' indicator in Chrome
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
|
|
|
||||||
67
evennia/web/webclient/templates/base.html
Normal file
67
evennia/web/webclient/templates/base.html
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Extend the main webclient template with this file to get communication
|
||||||
|
with evennia set up automatically and get the Evennia JS lib and
|
||||||
|
JQuery available.
|
||||||
|
-->
|
||||||
|
|
||||||
|
{% load staticfiles %}
|
||||||
|
<html dir="ltr" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type", content="application/xhtml+xml; charset=UTF-8" />
|
||||||
|
<meta name="author" content="Evennia" />
|
||||||
|
<meta name="generator" content="Evennia" />
|
||||||
|
|
||||||
|
<link rel='stylesheet' type="text/css" media="screen" href="{% static "webclient/css/webclient.css" %}">
|
||||||
|
|
||||||
|
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<!--for offline testing, download the jquery library from jquery.com-->
|
||||||
|
<!--script src="/media/javascript/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script-->
|
||||||
|
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
if(!window.jQuery){document.write("<div class='err'>jQuery library not found or the online version could not be reached.</div>");}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Set up javascript url -->
|
||||||
|
<script language="javascript" type="text/javascript">
|
||||||
|
{% if websocket_url %}
|
||||||
|
var wsurl = "{{websocket_url}}:{{websocket_port}}";
|
||||||
|
{% else %}
|
||||||
|
var wsurl = "ws://" + this.location.hostname + ":{{websocket_port}}";
|
||||||
|
{% endif %}
|
||||||
|
document.write("\<script src=\"{% static "webclient/js/evennia.js" %}\" type=\"text/javascript\" charset=\"utf-8\"\>\</script\>")
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="connecting">
|
||||||
|
{% block Connecting %}
|
||||||
|
{% endblock %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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
|
||||||
|
browser supporting javascript.</p>
|
||||||
|
<p>For admins: The error could also be due to not being able
|
||||||
|
to access the online jQuery javascript library. If you are
|
||||||
|
testing the client without an internet connection, you have
|
||||||
|
to previously download the jQuery library from
|
||||||
|
http://code.jquery.com (it's just one file) and then edit
|
||||||
|
webclient.html to point to the local copy.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script language="javascript" type="text/javascript">
|
||||||
|
$('#noscript').remove();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id=client>
|
||||||
|
{% block client %}
|
||||||
|
{% endblock %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,69 +1,8 @@
|
||||||
<!DOCTYPE html>
|
{% extends base.html %}
|
||||||
{% load staticfiles %}
|
|
||||||
<html dir="ltr" lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
|
|
||||||
<title>Evennia web MUD client</title>
|
{% block connecting %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
<!--CSS style sheet -->
|
{% block client %}
|
||||||
<link rel='stylesheet' type="text/css" media="screen" href="{% static "webclient/css/webclient.css" %}">
|
|
||||||
|
|
||||||
<!-- Importing the online jQuery javascript library -->
|
{% endblock %}
|
||||||
<!--script src="http://code.jquery.com/jquery-1.6.1.js" type="text/javascript" charset="utf-8"></script-->
|
|
||||||
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<!--for offline testing, download the jquery library from jquery.com-->
|
|
||||||
<!--script src="/media/javascript/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script-->
|
|
||||||
|
|
||||||
<script type="text/javascript" charset="utf-8">
|
|
||||||
if(!window.jQuery){document.write("<div class='err'>jQuery library not found or the online version could not be reached.</div>");}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% if websocket_enabled %}
|
|
||||||
<script language="javascript" type="text/javascript">
|
|
||||||
if ("WebSocket" in window) {
|
|
||||||
<!-- Importing the Evennia websocket webclient component (requires jQuery) -->
|
|
||||||
{% if websocket_url %}
|
|
||||||
var wsurl = "{{websocket_url}}:{{websocket_port}}";
|
|
||||||
{% else %}
|
|
||||||
var wsurl = "ws://" + this.location.hostname + ":{{websocket_port}}";
|
|
||||||
{% endif %}
|
|
||||||
document.write("\<script src=\"{% static "webclient/js/evennia_websocket_webclient.js" %}\" type=\"text/javascript\" charset=\"utf-8\"\>\</script\>")}
|
|
||||||
else {
|
|
||||||
<!-- No websocket support in browser. Importing the Evennia ajax webclient component (requires jQuery) -->
|
|
||||||
document.write("\<script src=\"{% static "webclient/js/evennia_ajax_webclient.js" %}\" type=\"text/javascript\" charset=\"utf-8\"\>\</script\>")}
|
|
||||||
</script>
|
|
||||||
{% else %}
|
|
||||||
<!-- websocket not enabled; use ajax -->
|
|
||||||
<script src="{% static "webclient/js/evennia_ajax_webclient.js" %}" type="text/javascript" charset="utf-8"></script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="wrapper">
|
|
||||||
<div id="messagewindow">
|
|
||||||
<!--javascript kills this when page has finished loading: -->
|
|
||||||
<div id="connecting"> Connecting ...</div>
|
|
||||||
<!--this is supplied by django view - webclient/views.py: -->
|
|
||||||
<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
|
|
||||||
browser supporting javascript.</p><p>For admins: The error
|
|
||||||
could also be due to not being able to access the online
|
|
||||||
jQuery javascript library. If you are testing the client
|
|
||||||
without an internet connection, you have to previously
|
|
||||||
download the jQuery library from http://code.jquery.com
|
|
||||||
(it's just one file) and then edit webclient.html to point
|
|
||||||
to the local copy.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form id="inputform" action="javascript:void(0);">
|
|
||||||
<div id="prompt"></div>
|
|
||||||
<div id="numplayers">Logged in Players: {{num_players_connected}}</div>
|
|
||||||
<div id="inputcontrol"><input type="text" id="inputfield" autocomplete="off"><input id="inputsend" type="button" value="send" onClick="doSend()"/></div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue