Skip to content
This repository has been archived by the owner on Aug 18, 2022. It is now read-only.

Commit

Permalink
Working basic (and ugly) chat
Browse files Browse the repository at this point in the history
  • Loading branch information
@aymericbeaumet
aymericbeaumet committed Mar 29, 2014
1 parent b5b248c commit 6c2c58c
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 105 deletions.
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ module.exports = function(grunt) {
},
compiled_script: {
src: [
path.join(config.compiled_script.inputDir, "libs", "*.js"),
path.join(config.compiled_script.inputDir, "header.js"),
path.join(config.compiled_script.inputDir, "classes", "*.js"),
path.join(config.compiled_script.inputDir, "modules", "*.js"),
Expand Down
23 changes: 0 additions & 23 deletions sources/classes/JS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -628,29 +628,6 @@ var JS = (function() {
}
},

/**
* Load an external script and call the callback when it's done.
* @link http://stackoverflow.com/a/950146/1071486
* @param string url The script URL
* @param function callback The callback to called once it's done
*/
loadScript: function(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;

// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;

// Fire the loading
head.appendChild(script);
},

jsonToDOM: jsonToDOM

};
Expand Down
4 changes: 4 additions & 0 deletions sources/libs/socket.io-0.9.16.min.js
View file

Large diffs are not rendered by default.

195 changes: 113 additions & 82 deletions sources/modules/chatty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Module.register(function() {

var SERVER_URL = 'http://die2nite-chatty.herokuapp.com';

var socket_ = null;

/**
* Add the i18n strings for this module.
*/
Expand All @@ -29,6 +31,106 @@ Module.register(function() {
I18N.set(i18n);
}

/**************************************************************************/
// Read from the socket

function socket_wait_for_new_message()
{
socket_.on('newMessage', function(data) {
add_new_message(data.room, data.user, data.message);
});
}

function socket_wait_for_new_room()
{
socket_.on('newRoom', function(data) {
var m;
for (var i = data.messages.length - 1; i >= 0; i--) {
m = data.messages[i];
add_new_message(m.room, m.user, m.message);
}
});
}

/**************************************************************************/
// Write on the socket

function socket_emit_send_message(room, user, message)
{
socket_.emit('sendMessage', {
room: room,
user: user,
message: message
});
}

function socket_emit_leave_room(roomName)
{
socket_.emit('leaveRoom', {
room: roomName
});
}

function socket_emit_join_room(roomName)
{
socket_.emit('joinRoom', {
room: roomName
});
}

/**************************************************************************/

function add_new_message(room, user, message)
{
var li = JS.jsonToDOM(['li', {}, user + ': ' + message], document);
document.getElementById('d2ne_messages_list').appendChild(li);
}

function on_form_submit()
{
// Find the input
var input = document.querySelector('#d2ne_chatty .d2ne_input input[type="text"]');
if (!input) { return; }

// Ensure that the message is not empty
var message = input.value.trim();
if (!message || message.length === 0) { return; }

// Send the message
socket_emit_send_message(window.location.hostname + '|world', D2N.get_player_name(), message);

// Empty the input
input.value = '';

// Cancel form submit
return false;
}

function insert_chat_dom()
{
var json = ["div", { id: 'd2ne_chatty' },
["div", { class: 'd2ne_menu' },
I18N.get(MODULE_NAME + '_title'),
["div", { class: 'd2ne_notif' },
2
]
],
["div", { class: 'd2ne_messages' },
["ul", { id: 'd2ne_messages_list' }]
],
["div", { class: 'd2ne_input' },
["form", { action: 'javascript:void(0);', onsubmit: on_form_submit },
["input", { type: 'text', class: 'field' }],
["a", { class: 'button', onclick: on_form_submit }, I18N.get(MODULE_NAME + '_send_button')]
]
]
];

JS.wait_for_tag('body', function(nodes) {
nodes[0].appendChild(JS.jsonToDOM(json, document));
});
}

function insert_chat_style()
{
JS.injectCSS(
Expand Down Expand Up @@ -90,83 +192,6 @@ Module.register(function() {
);
}

function insert_chat_dom()
{
var json = ["div", { id: 'd2ne_chatty' },
["div", { class: 'd2ne_menu' },
I18N.get(MODULE_NAME + '_title'),
["div", { class: 'd2ne_notif' },
2
]
],
["div", { class: 'd2ne_messages' },
["ul", { id: 'd2ne_messages_list' }]
],
["div", { class: 'd2ne_input' },
["form", { action: 'javascript:void(0);', onsubmit: on_form_submit },
["input", { type: 'text', class: 'field' }],
["a", { class: 'button', onclick: on_form_submit }, I18N.get(MODULE_NAME + '_send_button')]
]
]
];

JS.wait_for_tag('body', function(nodes) {
nodes[0].appendChild(JS.jsonToDOM(json, document));
});
}

function sync_chat()
{
var cityName = encodeURIComponent(D2N.get_city_name());
var serverName = encodeURIComponent(D2N.get_server_name());

var url = SERVER_URL + '/message?serverName=' + serverName + '&cityName=' + cityName;

JS.network_request('GET', url, null, null, function on_success(data) {
data = JSON.parse(data);
var container = document.getElementById('d2ne_messages_list');
JS.delete_all_children(container);

for (var i = 0; i < data.length; i++) {
container.insertBefore(JS.jsonToDOM(["li", {}, data[i].playerName + ': ' + data[i].message], document), container.firstChild);
}

container.scrollTop = container.scrollHeight;
}, function on_failure() {
});
}

function send_message(message)
{
var serverName = encodeURIComponent(D2N.get_server_name());
var cityName = encodeURIComponent(D2N.get_city_name());
var playerName = encodeURIComponent(D2N.get_player_name());
message = encodeURIComponent(message);

var url = SERVER_URL + '/message';
var data = 'serverName=' + serverName + '&cityName=' + cityName + '&playerName=' + playerName + '&message=' + message;
var headers = { 'Content-Type': 'application/x-www-form-urlencoded' };

JS.network_request('POST', url, data, headers, function on_success() {
}, function on_failure() {
});
}

function on_form_submit()
{
var input = document.querySelector('#d2ne_chatty .d2ne_input input[type="text"]');
if (!input) { return; }

var message = input.value.trim();
if (!message || message.length === 0) { return; }

send_message(message);
input.value = '';

// Cancel form submit
return false;
}


/************************
* Module configuration *
Expand Down Expand Up @@ -203,11 +228,17 @@ Module.register(function() {
insert_chat_style();
insert_chat_dom();

// Load Socket.io from CloudFlare
JS.loadScript('//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js', function() {
// Sync chat once the connection is made
setInterval(function() { sync_chat(); }, 500);
});
// Only connect the chat module once the page is loaded
var onPageLoaded = function() {
document.removeEventListener('d2n_gamebody_reload', onPageLoaded, false);

socket_ = io.connect(SERVER_URL);
socket_emit_join_room(window.location.hostname + '|' + 'world');
socket_emit_join_room(window.location.hostname + '|' + D2N.get_city_name());
socket_wait_for_new_message();
socket_wait_for_new_room();
};
document.addEventListener('d2n_gamebody_reload', onPageLoaded, false);
}
}

Expand Down

0 comments on commit 6c2c58c

Please sign in to comment.