almost done X users browsing this thread feature. there is one bug where anonymous users do not get disconnected from the room, so I'll have to figure that out later

public/css/style.less

@@ -260,3 +260,16 @@ footer.footer {
 		}
 	}
 }
+
+
+#thread_active_users {
+	float: right;
+	color: rgb(153,153,153);
+
+}
+
+#thread_active_users strong {
+	color: rgb(100,100,100);
+	font-weight: 600;
+	cursor: pointer;
+}

public/templates/topic.tpl

@@ -2,9 +2,8 @@
 	<ul class="breadcrumb">
 		<li><a href="/">Home</a> <span class="divider">/</span></li>
 		<li class="active">{topic_name}</li>
+		<div id="thread_active_users"></div>
 	</ul>
-
-	<div id="thread_active_users"></div><br />
 </div>
 
 <ul id="post-container" class="post-container container">
@@ -48,7 +47,24 @@ jQuery('document').ready(function() {
 
 ajaxify.register_events(['event:rep_up', 'event:rep_down', 'event:new_post', 'api:get_users_in_room']);
 socket.on('api:get_users_in_room', function(users) {
-	document.getElementById('thread_active_users').innerHTML = (users.uids.join(', ')) + ' are browsing this thread';
+	var anonymous = users.anonymous,
+		usernames = users.usernames,
+		usercount = usernames.length;
+
+	for (var i = 0, ii=usercount; i<ii; i++) {
+		usernames[i] = '<strong>' + usernames[i] + '</strong>';
+	}
+
+	// headexplosion.gif for fun, to see if I could do this in one line of code. feel free to refactor haha
+	var active =
+		((usercount === 1) ? usernames[0] : '')
+		+ ((usercount === 2 && anonymous === 0) ? usernames[0] + ' and ' + usernames[1] : '')
+		+ ((usercount > 2 && anonymous === 0) ? usernames.join(', ').replace(/,([^,]*)$/, ", and$1") : '')
+		+ (usercount > 1 && anonymous > 0 ? usernames.join(', ') : '')
+		+ ((anonymous > 0) ? (usercount > 0 ? ' and ': '') + anonymous + ' guest' + (anonymous.length > 1  ? 's are': ' is') : '')
+		+ (anonymous === 0 ? (usercount > 1 ? ' are' : ' is') : '') + ' browsing this thread';
+
+	document.getElementById('thread_active_users').innerHTML = active;
 });
 
 socket.on('event:rep_up', function(data) {

src/websockets.js

@@ -6,7 +6,10 @@ var	SocketIO = require('socket.io').listen(global.server,{log:false}),
 (function(io) {
 	var	modules = null,
 			users = {},
-			rooms = {};
+			rooms = {
+				'users' : {},
+				'anonymous' : {}
+			};
 
 	global.io = io;
 	module.exports.init = function() {
@@ -70,25 +73,39 @@ var	SocketIO = require('socket.io').listen(global.server,{log:false}),
 
 		
 
-		socket.on('event:enter_room', function(data) {			
+		socket.on('event:enter_room', function(data) {
 			if (data.leave !== null) socket.leave (data.leave);
 			socket.join(data.enter);
 
-			rooms[data.enter] = rooms[data.enter] || {};
+			rooms.users[data.enter] = rooms.users[data.enter] || {};
 			if (uid) {
-				rooms[data.enter][uid] = true;
-				if (rooms[data.leave]) {
-					delete rooms[data.leave][uid];
+				rooms.users[data.enter][uid] = true;
+				if (rooms.users[data.leave]) {
+					delete rooms.users[data.leave][uid];
 				}
 			} else {
-				rooms[data.enter].anonymous = rooms[data.enter].anonymous ? rooms[data.enter].anonymous + 1 : 1;
-				rooms[data.leave].anonymous = rooms[data.leave].anonymous ? rooms[data.enter].anonymous - 1 : 0;
+				rooms.anonymous[data.enter] = (rooms.anonymous[data.enter] || 0) + 1;
+				rooms.anonymous[data.leave] = rooms.anonymous[data.leave] || 0;
 			}
 
-			socket.emit('api:get_users_in_room', {
-				uids: Object.keys(rooms[data.enter] || {}),
-				anonymous: rooms[data.enter] ? rooms[data.enter].anonymous : 0
+			var uids = Object.keys(rooms.users[data.enter] || {});
+
+			if (uids.length == 0) {
+				socket.emit('api:get_users_in_room', {
+					usernames: [],
+					uids: [],
+					anonymous: rooms.anonymous[data.enter] || 0
+				});
+			}
+			modules.user.get_usernames_by_uids(uids, function(usernames) {
+				socket.emit('api:get_users_in_room', {
+					usernames: usernames,
+					uids: uids,
+					anonymous: rooms.anonymous[data.enter] || 0
+				});
 			});
+
+			
 		});
 
 		// BEGIN: API calls (todo: organize)