Show player list when connected to a server

app/client/controllers/index.js

@@ -9,5 +9,6 @@ exports.register = function(app) {
   app.controller('chatController',    require('./chatController'));
   app.controller('navController',     require('./navController'));
   app.controller('serversController', require('./serversController'));
+  app.controller('playersController', require('./playersController'));
 
 };

app/client/controllers/playersController.js

@@ -0,0 +1,30 @@
+module.exports = function($scope, socket) {
+
+  $scope.players = [];
+
+  socket.on('bot:players', function(data) {
+    var players = [];
+
+    for (var player in data) {
+      players.push(player);
+    }
+
+    $scope.$apply(function() {
+      $scope.players = players;
+    });
+
+  });
+
+  socket.on('disconnect', function() {
+    $scope.$apply(function() {
+      $scope.players = [];
+    });
+  });
+
+  socket.on('bot:disconnect', function() {
+    $scope.$apply(function() {
+      $scope.players = [];
+    });
+  });
+
+};

app/server/bot/events/players.js

@@ -0,0 +1,32 @@
+module.exports = function(socket) {
+
+  var interval;
+
+  // send the player list as soon as the bot spawns
+  socket.mcbot.on('spawn', function() {
+    socket.emit('bot:players', socket.mcbot.players);
+
+    // update the client with the player list every 5 seconds
+    interval = setInterval(function() {
+      if (socket.mcbot && socket.mcbot.entity) {
+        socket.emit('bot:players', socket.mcbot.players);
+      } else {
+        console.error('leaked interval!');
+      }
+    }, 5000);
+
+  });
+
+  socket.mcbot.on('end', function() {
+    if (interval) {
+      clearInterval(interval);
+    }
+  });
+
+  socket.on('disconnect', function() {
+    if (interval) {
+      clearInterval(interval);
+    }
+  });
+
+};

app/server/bot/index.js

@@ -4,6 +4,7 @@ module.exports = function(socket) {
   require('./events/login')(socket);
   require('./events/spawn')(socket);
   require('./events/message')(socket);
+  require('./events/players')(socket);
   // require('./events/chat')(socket);
   require('./events/end')(socket);
 

public/css/style.css

@@ -61,6 +61,31 @@ body {
   outline: none;
 }
 
+#players {
+  position: fixed;
+  top: 70px;
+  right: 20px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.1);
+}
+
+#players .header {
+  padding: 10px;
+  background-color: rgba(0,0,0,0.3);
+}
+
+#players .body {
+  max-height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+#players ul {
+  list-style: none;
+  padding: 10px;
+  margin: 0;
+}
+
 .color-a { color: #50FF38; }
 .color-b { color: #5BFFFF; }
 .color-c { color: #EA3A3F; }

public/templates/windows/chat.html

@@ -1,4 +1,18 @@
-<div id="buffer" ng-controller="bufferController"></div>
+<div id="buffer" ng-controller="bufferController">
+
+  <div id="players" ng-controller="playersController" ng-show="players.length">
+    <div class="header">Players</div>
+    <div class="body">
+      <ul>
+        <li ng-repeat="player in players">
+          <img src="//cravatar.eu/helmavatar/{{player}}/18" width="18px">
+          {{player}}
+        </li>
+      </ul>
+    </div>
+  </div>
+
+</div>
 
 <form ng-submit="send()" ng-controller="chatController">
   <div id="chat">