Marauroa Chat Tutorial/HTML5 Client
Marauroa Tutorial
HTML5 support in Marauroa is in development. We are looking for feedback to stabilize the API and improve the documentation on it.
The HTML 5 client works in a modern browser without requiring any plugins or other software to be installed locally. It is therefore not written in Java but JavaScript. While JavaScript has a similar name, it has some basic concepts that are very different from Java.
HTML Code
We start our HTML 5 client by creating a HTML page consisting of an output area for the chat log and a small input field to enter text. We use CSS rules to make the page look nicely. We are using a development version of Marauroa, which consists of several JS files. The final version will consists of one file to reduce startup time.
<source lang="html4strict"> <!doctype html> <html><head>
<title>Marautoa Chat Tutoral Client in HTML 5</title>
<style type="text/css">
body {font-family: "Arial"}
#chat {border: 1px solid #000; padding:0.5em; overflow-y: scroll}
#chat p {margin: 0}
p.logclient {color: #888}
p.logerror {color: #F00}
</style>
<script src="json.js"></script> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript" src="marauroa.js"></script> <script type="text/javascript" src="client-framework.js"></script> <script type="text/javascript" src="message-factory.js"></script> <script type="text/javascript" src="perception.js"></script> <script type="text/javascript" src="rpfactory.js"></script> <script type="text/javascript" src="chatclient.js"></script>
</head>
<body>
Marautoa Chat Tutoral Client in HTML 5
<form id="form" onsubmit="stendhal.ui.chatBar.send(); return false">
<input type="text" name="chatbar" id="chatbar" style="width:90%">
<input type="submit" value="Send">
</form>
<noscript>JavaScript is required by the Web Client.</noscript>
</body></html> </source>
Implementing the client Framework
As the first step, we want to connect to the server using the marauroa.clientFramework. Note that we use "null" for host and post which means that we connect to the same server from which the client has been downloaded from. Connecting to the server may take a second or two, therefore we give some feedback to the user.
<source lang="javascript"> function startClient() { ui.chatLog.addLine("client", "Client loaded. Connecting..."); var body = document.getElementById("body") body.style.cursor = "wait"; marauroa.clientFramework.connect(null, null); } </source>
Now as we are able to connect to the server, we want to receive and handle events. In the Java word, we implemented a subclass of ClientFramework. In JavaScript, however, we can just redefine the methods, we are interested in: <source lang="javascript">
/** display a message to the chat window on disconnect. */ marauroa.clientFramework.onDisconnect = function(reason, error){ ui.chatLog.addLine("error", "Disconnected: " + error); }
/** on failed login, open a message box and disable the user interface */ marauroa.clientFramework.onLoginFailed = function(reason, text) { alert("Login failed. Please check your password and try again."); marauroa.clientFramework.close(); document.getElementById("chatbar").disabled = true; document.getElementById("chat").style.backgroundColor = "#AAA"; }
/** Automatically pick the first character associated with this account and enable the chat controls */
marauroa.clientFramework.onAvailableCharacterDetails = function(characters) { marauroa.clientFramework.chooseCharacter(marauroa.util.first(characters).a.name);
var body = document.getElementById("body") body.style.cursor = "auto"; ui.chatLog.addLine("client", "Ready..."); } </source>
Handling actions
TODO: Complete this section
Handling perceptions
TODO: Complete this section
document.onkeydown=stendhal.ui.chatBar.keydown;