mirror of
https://github.com/evennia/evennia.git
synced 2026-03-27 02:06:32 +01:00
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
|
||||
whatever client front end is used.
|
||||
|
||||
|
||||
* Evennia - library communication
|
||||
|
||||
The library will try to communicate with Evennia using websockets
|
||||
(evennia/server/portal/webclient.py). However, if the web browser is
|
||||
old and does not support websockets, it will instead fall back to a
|
||||
long-polling (AJAX/COMET) type of connection
|
||||
(using evennia/server/portal/webclient_ajax.py)
|
||||
long-polling (AJAX/COMET) type of connection (using
|
||||
evennia/server/portal/webclient_ajax.py)
|
||||
|
||||
All messages are valid JSON array on single form: ["funcname", arg, arg,, ...]
|
||||
This represents a JS function called as funcname(arg, arg, ...)
|
||||
|
||||
* Front-end interface
|
||||
|
||||
This library makes the "Evennia" object available. It has the following
|
||||
functions:
|
||||
All messages is a valid JSON array on single form: ["cmdname",
|
||||
kwargs], where kwargs is a JSON object that will be used as argument
|
||||
to call the cmdname function.
|
||||
|
||||
This library makes the "Evennia" object available. It has the
|
||||
following official functions:
|
||||
|
||||
- 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:
|
||||
'connection': This defaults to Evennia.WebsocketConnection but
|
||||
can also be set to Evennia.CometConnection for backwards
|
||||
compatibility with old browsers. Each connection must have
|
||||
a 'msg(data)' method that should handle the conversion to
|
||||
JSON before sending across the wire.
|
||||
'cmdhandler': An optional custom command handler for
|
||||
managing outgoing commands from the server. If not
|
||||
supplied, the default will be used. It must have an emit(data) function.
|
||||
compatibility. See below.
|
||||
'emitter': An optional custom command handler for distributing
|
||||
data from the server to suitable listeners. If not given,
|
||||
a default will be used.
|
||||
- Evennia.msg(funcname, [args,...], callback)
|
||||
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
|
||||
anything, like 'text' type commands).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
to call with the return of the call (note that commands will
|
||||
not return anything unless specified to do so server-side).
|
||||
|
||||
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() {
|
||||
|
|
@ -72,15 +61,16 @@ messages sent to the client is one of two modes:
|
|||
// emitter - custom emitter. If not given,
|
||||
// will use a default emitter. Must have
|
||||
// an "emit" function.
|
||||
// connection - This defaults to a WebsocketConnection,
|
||||
// but could also be the CometConnection or another
|
||||
// custom protocol. Must have a 'send' method and
|
||||
// make use of Evennia.emit to return data to Client.
|
||||
// connection - This defaults to using either
|
||||
// a WebsocketConnection or a CometConnection
|
||||
// depending on what the browser supports. If given
|
||||
// it must have a 'msg' method and make use of
|
||||
// Evennia.emit to return data to Client.
|
||||
//
|
||||
init: function(opts) {
|
||||
opts = opts || {};
|
||||
this.emitter = opts.emitter || new DefaultEmitter();
|
||||
this.connection = opts.connection || new WebsocketConnection();
|
||||
this.connection = opts.connection || window.Websocket ? new WebsocketConnection() : new AjaxConnection();
|
||||
},
|
||||
|
||||
// Client -> Evennia.
|
||||
|
|
@ -278,7 +268,6 @@ function log(msg) {
|
|||
|
||||
// Called when page has finished loading (kicks the client into gear)
|
||||
$(document).ready(function(){
|
||||
|
||||
|
||||
// a small timeout to stop 'loading' indicator in Chrome
|
||||
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>
|
||||
{% load staticfiles %}
|
||||
<html dir="ltr" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
{% extends base.html %}
|
||||
|
||||
<title>Evennia web MUD client</title>
|
||||
{% block connecting %}
|
||||
{% endblock %}
|
||||
|
||||
<!--CSS style sheet -->
|
||||
<link rel='stylesheet' type="text/css" media="screen" href="{% static "webclient/css/webclient.css" %}">
|
||||
{% block client %}
|
||||
|
||||
<!-- Importing the online jQuery javascript library -->
|
||||
<!--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>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue