Working connections with chat event listener

app/client/services/buffer.js

@@ -2,15 +2,43 @@
  * Buffer Service
  */
 
-module.exports = function() {
+module.exports = function(socket) {
 
+  socket.on('buffer:info', function(string) {
+    $('#buffer').append('<span style="color:#2976A9;">&gt; ' + string + '</span><br>\n');
+    $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
+  });
+
+  socket.on('buffer:success', function(string) {
+    $('#buffer').append('<span style="color:#4AA937;">&gt; ' + string + '</span><br>\n');
+    $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
+  });
+
+  socket.on('buffer:error', function(string) {
+    $('#buffer').append('<span style="color:#D62D18;">&gt; ' + error + '</span><br>')
+    $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
+  });
+
+  socket.on('bot:message', function(string) {
+    $('#buffer').append(string + '<br>');
+    $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
+  });
+
+  socket.on('reconnect', function() {
+    $('#buffer').append('<span style="color:#4AA937;">&gt; Connected to chat server established</span><br>')
+    $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
+  });
+
+  socket.on('disconnect', function() {
+    $('#buffer').append('<span style="color:#D62D18;">&gt; Connection to chat server has been lost. Reconnecting...</span><br>')
+    $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
+  });
+
+  // service exposes this
   return {
     append: function(string) {
       $('#buffer').append(string + '<br>\n');
-    },
+      $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
-    error: function(error) {
-      $('#buffer').append('<span style="color:#D62D18;">' + error.errorMessage + '</span><br>')
     }
   }
-
 };

app/server/bot/events/index.js

@@ -0,0 +1,56 @@
+module.exports = function(socket) {
+
+  var bot = socket.mcbot;
+
+  // login event
+  bot.on('login', function() {
+    socket.emit('buffer:success', 'Successfully logged in as ' + bot.username + ' with entity id ' + bot.entity.id);
+    socket.emit('bot:login')
+  });
+
+  // spawn event
+  bot.on('spawn', function() {
+    var pos = bot.entity.position;
+    socket.emit('buffer:info', 'Spawned at X:' + pos.x + ', Y:' + pos.y + ', Z:' + pos.z);
+  });
+
+  // message event
+  bot.on('message', function(message) {
+
+    // empty buffer
+    var buffer = '';
+
+    if (message.extra) {
+
+      // for each piece of text
+      message.extra.forEach(function(data) {
+        var text = data.text;                 // get the text
+        if (text) {                           // if text is available
+          text = text.replace(/§k/ig, '');    // remove crazy format
+          text = text.replace(/§l/ig, '');    // remove bold format
+          buffer += text;                     // add the text to the buffer
+        }
+      });
+
+    } else if (message.text) {
+      buffer += message.text;
+    } else {
+      return;
+    }
+
+    if (buffer.length === 0) {
+      return;
+    }
+
+    // format the buffer with the correct coloring
+    buffer = buffer.replace(/§([0-9abcdef])([^§]*)/ig, function replace(regex, color, msg) {
+      return '<span class="color-'+color+'">'+msg+'</span>';
+    });
+
+    // send line back to the client
+    socket.emit('bot:message', buffer);
+    console.log(buffer);
+
+  });
+
+};

app/server/bot/index.js

@@ -0,0 +1,5 @@
+module.exports = function(socket) {
+
+  require('./events')(socket);
+
+};

app/server/index.js

@@ -34,5 +34,5 @@ app.use('/', express.static(path.join(__dirname, '../../public')));
 
 // initialize http and socket servers
 server.listen(3000, function() {
-  console.log('> Server running on port 3000')
+  console.log('\033c> Server running on port 3000\n');
 });

app/server/sockets/events/connection.js

@@ -0,0 +1,33 @@
+var mineflayer = require('mineflayer');
+
+module.exports = function(socket) {
+
+  socket.on('server:connect', function(data, response) {
+
+    if (socket.mcbot) {
+      socket.mcbot.end();
+    }
+
+    // create mineflayer bot
+    socket.mcbot = mineflayer.createBot({
+      host: data.hostname,
+      port: data.port,
+      username: data.username,
+      password: data.password
+    });
+
+    // prepare for errors
+    socket.mcbot.on('error', function(error) {
+      socket.emit('buffer:error', error);
+    });
+
+    // bind bot events
+    require('../../bot')(socket);
+
+    // debug
+    console.log('login > ' + data.hostname + ':' + data.port + ' - ' + ' Username: ' + data.username);
+    socket.emit('buffer:info', 'Connecting to server ' + data.hostname + ':' + data.port);
+
+  });
+
+};

app/server/sockets/events/disconnection.js

@@ -0,0 +1,9 @@
+module.exports = function(socket) {
+
+  socket.on('disconnect', function() {
+    if (socket.mcbot) {
+      socket.mcbot.end();
+    }
+  });
+
+};

app/server/sockets/index.js

@@ -5,22 +5,9 @@ module.exports = function(io) {
 
   io.on('connection', function(socket) {
 
-    socket.on('server:connect', function(data, response) {
+    // bind all events to the socket
-      socket.mcbot = mineflayer.createBot({
+    require('./events/connection')(socket);
-        host: data.hostname,
+    require('./events/disconnection')(socket);
-        port: data.port,
-        username: data.username,
-        password: data.password
-      });
-      socket.mcbot.on('error', function(error) {
-        console.log(error);
-        socket.emit('bot:error', error);
-      });
-    });
-
-    socket.on('disconnect', function() {
-      socket.mcbot = null;
-    });
 
   });
 

public/css/style.css

@@ -1,3 +1,10 @@
+body, html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
 body {
   padding-top: 80px;
 }
@@ -10,6 +17,8 @@ body {
   right: 0;
   color: #D6D6D6;
   padding: 0 20px;
+  overflow: scroll;
+  padding-bottom: 10px;
 }
 #chat {
   position: absolute;

public/templates/windows/nav.html

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <a class="navbar-brand" href="/">Minecraft Chat</a>
   <ul class="nav navbar-nav">
-    <li><a href="#" data-toggle="modal" data-target="#connectModal">Connect</a></li>
+    <li><a style="cursor:pointer" data-toggle="modal" data-target="#connectModal">Connect</a></li>
   </ul>
   <ul class="nav navbar-nav pull-right">
     <li><a style="color:#9E0F06">Not Connected</a></li>