added users list on bottom

BinaryDad.Coding/wwwroot/css/site.css

@@ -21,3 +21,14 @@ textarea, .navbar-brand {
     padding: 4px 10px 0;
     line-height: 18px;
 }
+
+#your-color-text {
+    width: 90px;
+    text-align: center;
+}
+
+#users-list {
+    color: #777;
+    font-size: 12px;
+    margin-top: 10px;
+}

BinaryDad.Coding/wwwroot/js/hub.js

@@ -1,7 +1,12 @@
 $(function () {
 
+    var connection = new signalR.HubConnectionBuilder().withUrl('/codeHub').build();
+
     let $liveModeLink = $('#live-mode-link');
     let $liveModeStatus = $('#live-mode-status');
+    let $usersList = $('#users-list');
+    let $yourNameText = $('#your-name-text');
+    let $yourColorText = $('#your-color-text');
 
     let isLive = false;
 
@@ -16,16 +21,24 @@
         isLive ? $liveModeStatus.fadeIn() : $liveModeStatus.fadeOut();
     };
 
+    let sendName = function (e) {
+
+        let color = $yourColorText.val();
+
+        $yourNameText.css('color', `${color}`);
+
+        connection.invoke('SaveName', $yourNameText.val(), color);
+    };
+
     isLiveMode();
 
+    // events
     $(window).on('hashchange', isLiveMode);
-
-    var connection = new signalR.HubConnectionBuilder().withUrl("/codeHub").build();
+    $('#your-name-text, #your-color-text').on('blur', sendName);
 
     let isTeacher = window.location.hash === '#4ELQcUq7UnFGghAZCVr4Chr9JmtncigfkGu5WSf9';
 
     if (isTeacher) {
-        //window.location.hash = '#';
         $liveModeLink.hide();
         $liveModeStatus.hide();
     }
@@ -43,14 +56,14 @@
                 let user = 'ryan';
                 let code = editor.getValue();
 
-                connection.invoke("UpdateCode", user, i, code).catch(function (err) {
+                connection.invoke('UpdateCode', user, i, code).catch(function (err) {
                     return console.error(err.toString());
                 });
             });
         });
     }
 
-    connection.on("ReceiveCode", function (user, index, code) {
+    connection.on('ReceiveCode', function (user, index, code) {
 
         if (!isTeacher && isLive) {
 
@@ -60,8 +73,19 @@
         }
     });
 
+    connection.on('UsersList', function (users) {
+
+        let usersList = Object.values(users)
+            .filter(u => u.name !== '')
+            .map(u => `<span style='color: ${u.color};'>${u.name}</span>`);
+
+        $usersList.html(`<strong>${usersList.length} users online:</strong> ${usersList.join(', ')}`);
+    });
+
     connection.start().then(function () {
-        //$('#send').prop('disabled', false);
+
+        sendName();
+
     }).catch(function (err) {
         return console.error(err.toString());
     });