Marauroa Chat Tutorial/HTML5 Client: Difference between revisions
Content deleted Content added
imported>Hendrik Brummermann No edit summary |
imported>Hendrik Brummermann |
||
Line 129:
== Handling perceptions ==
Before we can put it all together, there is one remaining piece: We need to listen to perceptions sent by the server and display the chat in our log window.
In this tutorial the chat message are not just events, but objects. This allows us to store them to the database and allow late client to read the history. Normally we'd use an marauroa.rpobjectFactory to create those objects with the correct prototype ("Player", "Item", "Creature", ...) as they are transferred from the server. You can have a look at this [http://arianne.cvs.sf.net/viewvc/arianne/stendhal/srcjs/stendhal-entities.js?revision=1.14&view=markup file of the experimental Stendhal HTML5 client], to learn how the rpobjectFactory is used.
For this really simple chat client, we are only interested in chat objects. Therefore we skip this step for now and work directly on the perception event for new objects:
marauroa.perceptionListener.onAdded = function(object) {
if (object.has("text")) {
ui.chatLog.addLine("text", object.get("from") + "* : " + object.get("text"));
}
}
ui: {
chatLog: {
addLine: function(type, msg) {
var e = document.createElement('p');
e.className = "log" + ui.escapeHTML(type);
e.innerHTML = ui.escapeHTML(msg);
document.getElementById('chat').appendChild(e);
document.getElementById('chat').scrollTop = 1000000;
},
clear: function() {
document.getElementById("chat").innerHTML = "";
}
/** HTML code escaping */
escapeHTML: function(msg){
return msg.replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace("\n", "<br>");
}
}
}
== Deployment ==
| |||