Working connect/disconnect handlers and status indicator

app/client/controllers/bufferController.js

@@ -13,9 +13,4 @@ module.exports = function($scope, socket, buffer) {
   buffer.append('---');
   buffer.append('<br>');
 
-  // buffer errors when received
-  socket.on('bot:error', function(error) {
-    buffer.error(error);
-  });
-
 };

app/client/controllers/index.js

@@ -7,5 +7,6 @@ exports.register = function(app) {
   app.controller('connectController', require('./connectController'));
   app.controller('bufferController',  require('./bufferController'));
   app.controller('chatController',    require('./chatController'));
+  app.controller('navController',     require('./navController'));
 
 };

app/client/controllers/navController.js

@@ -0,0 +1,30 @@
+/**
+ * Connect Controller
+ */
+
+module.exports = function($scope, socket) {
+
+  $scope.connected = false;
+
+  socket.on('bot:connect', function(data) {
+    $scope.$apply(function() {
+      $scope.host      = data.host;
+      $scope.port      = data.port;
+      $scope.username  = data.username;
+      $scope.connected = true;
+    });
+  });
+
+  socket.on('bot:disconnect', function() {
+    $scope.$apply(function() {
+      $scope.connected = false;
+    });
+  })
+
+  socket.on('disconnect', function() {
+    $scope.$apply(function() {
+      $scope.connected = false;
+    });
+  });
+
+};

app/client/services/buffer.js

@@ -15,7 +15,7 @@ module.exports = function(socket) {
   });
 
   socket.on('buffer:error', function(string) {
-    $('#buffer').append('<span style="color:#D62D18;">[i] ' + error + '</span><br>')
+    $('#buffer').append('<span style="color:#D62D18;">[i] ' + string + '</span><br>')
     $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
   });
 

app/server/bot/events/index.js

@@ -30,7 +30,11 @@ module.exports = function(socket) {
   // 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')
+    socket.emit('bot:connect', {
+      host: socket.connectionParams.hostname,
+      port: socket.connectionParams.port,
+      username: socket.connectionParams.username
+    });
   });
 
   // spawn event
@@ -69,7 +73,7 @@ module.exports = function(socket) {
 
     // 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>';
+      return '<span class="color-'+color+'">'+msg.replace(' ', '&nbsp;')+'</span>';
     });
 
     // send line back to the client
@@ -77,4 +81,14 @@ module.exports = function(socket) {
 
   });
 
+  bot.on('end', function() {
+    socket.emit('buffer:error', 'Connection lost...');
+    socket.emit('bot:disconnect');
+  });
+
+  bot.on('kick', function(reason) {
+    console.log(reason);
+    socket.emit('buffer:error', 'Kicked for: ' + reason);
+  });
+
 };

app/server/sockets/events/connection.js

@@ -16,9 +16,13 @@ module.exports = function(socket) {
       password: data.password
     });
 
+    // store connection params in socket
+    socket.connectionParams = data;
+
     // prepare for errors
     socket.mcbot.on('error', function(error) {
       socket.emit('buffer:error', error);
+      socket.mcbot = null;
     });
 
     // bind bot events

public/templates/windows/nav.html

@@ -1,10 +1,11 @@
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="navController">
   <a class="navbar-brand" href="/">Minecraft Chat</a>
   <ul class="nav navbar-nav">
     <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>
+    <li ng-hide="connected"><a style="color:#9E0F06">Not Connected</a></li>
+    <li ng-show="connected"><a style="color:#6AC126">Connected to <i>{{host}}:{{port}}</i> as <b>{{username}}</b></a></li>
   </ul>
 </nav>