Add current users list modal

src/js/main.js

@@ -29,6 +29,8 @@ $(function() {
 
   var $chatPage = $('.chat.page'); // The chatroom page
 
+  var users = [];
+
   // Prompt for setting a username
   var username;
   var connected = false;
@@ -273,6 +275,8 @@ $(function() {
     connected = true;
     addParticipantsMessage(data);
 
+    users = data.users;
+
     var key = (Math.random() * Math.random()).toString(36).substring(7);
 
     if (data.numUsers > 1) {
@@ -301,6 +305,9 @@ $(function() {
   socket.on('user joined', function (data) {
     log(data.username + ' joined');
     addParticipantsMessage(data);
+
+    users = data.users;  
+    renderParticipantsList();
   });
 
   // Whenever the server emits 'user left', log it in the chat body
@@ -308,6 +315,10 @@ $(function() {
     log(data.username + ' left');
     addParticipantsMessage(data);
     removeChatTyping(data);
+
+    users = data.users;
+
+    renderParticipantsList();
   });
 
   // Whenever the server emits 'typing', show the typing message
@@ -419,4 +430,24 @@ $(function() {
     });
   });
 
+  $('.navbar .participants').click(function() {
+    renderParticipantsList();
+    $('#participants-modal').modal('show');
+  });
+
+  function renderParticipantsList() {
+    $('#participants-modal ul.users').empty();
+    _.each(users, function(username) {
+      var li;
+      if (username === window.username) {
+        // User is me
+        li = $("<li>" + username + " <span class='you'>(you)</span></li>").css('color', getUsernameColor(username));
+      } else {
+        li = $("<li>" + username + "</li>").css('color', getUsernameColor(username));
+      }
+      $('#participants-modal ul.users')
+        .append(li);        
+    });    
+  }
+
 });

src/public/style.css

@@ -195,6 +195,8 @@ input {
   position: relative;
   top: 16px;
   text-align: center;
+  padding: 16px;
+  cursor: pointer;
 }
 
 .navbar {
@@ -207,4 +209,16 @@ input {
 
 .navbar-brand img {
   width: 40px;
+#participants-modal ul.users {
+  padding: 0px;
+}
+
+#participants-modal ul.users li {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+#participants-modal ul.users li .you {
+  color: #333;
+  font-weight: 400;
 }

src/room.js

@@ -6,6 +6,8 @@ class Room {
   constructor(io = {}, id = {}) {
     this._id = id;
     this.numUsers = 0;
+    this.users = [];
+
     EventEmitter.call(this);
 
     const thisIO = io.of(this._id);
@@ -28,17 +30,21 @@ class Room {
           socket.emit('first');
         }
 
+        this.users.push(username);
+
         // we store the username in the socket session for this client
         socket.username = username;
         ++this.numUsers;
         addedUser = true;
         socket.emit('login', {
-          numUsers: this.numUsers
+          numUsers: this.numUsers,
+          users: this.users
         });
         // echo globally (all clients) that a person has connected
         socket.broadcast.emit('user joined', {
           username: socket.username,
-          numUsers: this.numUsers
+          numUsers: this.numUsers,
+          users: this.users          
         });
       });
 
@@ -61,16 +67,21 @@ class Room {
         if (addedUser) {
           --this.numUsers;
 
+          this.users = _.without(this.users, socket.username);
+
           // echo globally that this client has left
           socket.broadcast.emit('user left', {
             username: socket.username,
-            numUsers: this.numUsers
+            numUsers: this.numUsers,
+            users: this.users
           });
 
           // remove room from rooms array
           if (this.numUsers === 0) {
             this.emit('empty');
           }
+
+          this.users = _.without(this.users, socket.username);
         }
       });
     });

src/views/index.mustache

@@ -169,6 +169,23 @@
     </div>
   </div>
 
+  <div class="modal fade" id="participants-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h3 class="modal-title">Current Participants</h3>
+        </div>
+        <div class="modal-body">
+          <ul class="users"></ul>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script src="https://cdn.socket.io/socket.io-1.4.3.js"></script>
   <script src="/favicon.js"></script>
@@ -178,6 +195,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
   <script type="text/javascript" src="vendor/jquery.noty.packaged.min.js"></script>
   <script type="text/javascript" src="vendor/autolinker.min.js"></script>
+  <script type="text/javascript" src="vendor/underscore.min.js"></script>
   <script src="/main.js"></script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){