added who is typing indicator, fixed name not changing correctly on login,

fixed chat scrolling

src/js/account.js

@@ -217,7 +217,7 @@ firebase.auth().onAuthStateChanged(function (user) {
     $("#menu .icon-button.account .text").text(displayName);
 
     try {
-      MP.name = displayName;
+      mp_setName(displayName);
     } catch {}
 
     showFavouriteThemesAtTheTop();

src/js/tribe.js

@@ -18,6 +18,8 @@ let MP = {
   expectedVersion: "0.8",
 };
 
+let scrollChat = true;
+
 let tribeSounds = {
   join: new Audio("../sound/tribe_ui/join.wav"),
   leave: new Audio("../sound/tribe_ui/leave.wav"),
@@ -629,29 +631,13 @@ function updateResultCountdown(text) {
 }
 
 function mp_scrollChat() {
-  let chatEl = $(".pageTribe .lobby .chat .messages");
-  chatEl.animate(
-    {
-      scrollTop:
-        $($(".pageTribe .lobby .chat .messages div")[0]).outerHeight() *
-        2 *
-        $(".pageTribe .lobby .chat .messages div").length,
-    },
-    0
-  );
+  let chatEl = $(".pageTribe .lobby .chat .messages")[0];
+  let chatEl2 = $(".pageTest #result .tribeResultChat .chat .messages")[0];
 
-  let chatEl2 = $(".pageTest #result .tribeResultChat .chat .messages");
-  chatEl2.animate(
-    {
-      scrollTop:
-        $(
-          $(".pageTest #result .tribeResultChat .chat .messages div")[0]
-        ).outerHeight() *
-        2 *
-        $(".pageTest #result .tribeResultChat .chat .messages div").length,
-    },
-    0
-  );
+  if (scrollChat) {
+    chatEl.scrollTop = chatEl.scrollHeight;
+    chatEl2.scrollTop = chatEl2.scrollHeight;
+  }
 }
 
 function updateAllGraphs(graphs, max) {
@@ -810,6 +796,51 @@ function updateTribeUserSettingsPopup(sid) {
   );
 }
 
+function mp_setName(name) {
+  MP.name = name;
+  MP.socket.emit("mp_system_name_set", { name: name });
+}
+
+function mp_sendIsTypingUpdate(truefalse) {
+  MP.socket.emit("mp_room_user_istypingupdate", {
+    sid: MP.socket.id,
+    typing: truefalse,
+    name: MP.name,
+  });
+}
+
+function mp_updateWhoIsTyping() {
+  let string = "";
+
+  let names = [];
+  Object.keys(MP.room.whoIsTyping).forEach((sid) => {
+    if (MP.room.whoIsTyping[sid].truefalse) {
+      names.push(MP.room.whoIsTyping[sid].name);
+    }
+  });
+  if (names.length > 0) {
+    for (let i = 0; i < names.length; i++) {
+      if (i === 0) {
+        string += `<span class="who">${names[i]}</span>`;
+      } else if (i === names.length - 1) {
+        string += ` and <span class="who">${names[i]}</span>`;
+      } else {
+        string += `, <span class="who">${names[i]}</span>`;
+      }
+    }
+    if (names.length == 1) {
+      string += " is typing...";
+    } else {
+      string += " are typing...";
+    }
+  } else {
+    string = " ";
+  }
+
+  $(".pageTribe .lobby .chat .whoIsTyping").html(string);
+  $(".pageTest #result .tribeResultChat .chat .whoIsTyping").html(string);
+}
+
 MP.socket.on("connect", (f) => {
   setTimerStyle("mini", true);
   MP.state = 1;
@@ -820,8 +851,7 @@ MP.socket.on("connect", (f) => {
     name = firebase.auth().currentUser.displayName;
   }
   MP.id = MP.socket.id;
-  MP.name = name;
-  MP.socket.emit("mp_system_name_set", { name: name });
+  mp_setName(name);
   mp_changeActiveSubpage("prelobby");
   setTimeout(() => {
     if (MP.autoJoin) {
@@ -834,6 +864,11 @@ MP.socket.on("connect", (f) => {
   }, 500);
 });
 
+MP.socket.on("mp_room_name_update", (data) => {
+  MP.room.users[data.sid].name = data.name;
+  mp_refreshUserList();
+});
+
 MP.socket.on("mp_update_online_stats", (data) => {
   $(".pageTribe .prelobby .welcome .stats").empty();
   $(".pageTribe .prelobby .welcome .stats").append(
@@ -1044,6 +1079,13 @@ MP.socket.on("mp_chat_message", (data) => {
   mp_scrollChat();
 });
 
+MP.socket.on("mp_room_user_istypingupdate", (data) => {
+  if (MP.room.whoIsTyping === undefined) {
+    MP.room.whoIsTyping = {};
+  }
+  MP.room.whoIsTyping[data.sid] = { name: data.name, truefalse: data.typing };
+  mp_updateWhoIsTyping();
+});
 $(".pageTest #result .tribeResultChat .chat .input input").keypress(() => {
   setTimeout(() => {
     $(".pageTribe .lobby .chat .input input").val(
@@ -1482,6 +1524,7 @@ $(".pageTribe .lobby .chat .input input").keyup((e) => {
       Notifications.add("Message cannot be longer than 512 characters.", 0);
       return;
     }
+    mp_sendIsTypingUpdate(false);
     MP.socket.emit("mp_chat_message", {
       isSystem: false,
       isLeader: MP.room.isLeader,
@@ -1496,6 +1539,25 @@ $(".pageTribe .lobby .chat .input input").keyup((e) => {
   }
 });
 
+$(
+  ".pageTribe .lobby .chat .input input, .pageTest #result .tribeResultChat .chat .input input"
+).on("input", (e) => {
+  if (e.currentTarget.value.length === 1) {
+    //typing update
+    mp_sendIsTypingUpdate(true);
+  } else if (e.currentTarget.value == "") {
+    //not typing update
+    mp_sendIsTypingUpdate(false);
+  }
+});
+
+$(
+  ".pageTribe .lobby .chat .messages, .pageTest #result .tribeResultChat .chat .messages"
+).on("scroll", (e) => {
+  let chatEl = $(".pageTribe .lobby .chat .messages")[0];
+  scrollChat = chatEl.scrollHeight - chatEl.scrollTop === chatEl.clientHeight;
+});
+
 $(
   ".pageTribe .lobby .inviteLink .text, .pageTest .tribeResultChat .inviteLink .code .text"
 ).click(async (e) => {

src/sass/style.scss

@@ -3040,6 +3040,15 @@ key {
     .input input {
       width: 100%;
     }
+    .whoIsTyping {
+      .who {
+        font-weight: 900;
+      }
+      height: 0.75rem;
+      font-size: 0.75rem;
+      padding: 0.25rem;
+      color: var(--sub-color);
+    }
   }
   .userlist {
     grid-area: userlist;

static/index.html

@@ -1501,6 +1501,7 @@
                   <div class="input">
                     <input type="text" placeholder="Send a message" />
                   </div>
+                  <div class="whoIsTyping"></div>
                 </div>
                 <div class="userlist">
                   <div class="title">users</div>
@@ -3781,6 +3782,7 @@
                 <div class="input">
                   <input type="text" placeholder="Send a message" />
                 </div>
+                <div class="whoIsTyping"></div>
               </div>
               <div class="userlist">
                 <div class="title">users</div>