added chat to the result page

src/js/script.js

@@ -1876,6 +1876,7 @@ function showResult(difficultyFailed = false) {
     $(".pageTest #restartTestButtonWithSameWordset").addClass("hidden");
     $(".pageTest #goBackToLobbyButton").removeClass("hidden");
     $(".pageTest #practiseMissedWordsButton").addClass("hidden");
+    $(".pageTest #result .tribeResultChat").removeClass("hidden");
     if (MP.room.isLeader) {
       $(".pageTest #backToLobbyButton").removeClass("hidden");
       $(".pageTest #nextTestButton").removeClass("hidden");
@@ -1886,6 +1887,7 @@ function showResult(difficultyFailed = false) {
     $(".pageTest #restartTestButtonWithSameWordset").removeClass("hidden");
     $(".pageTest #goBackToLobbyButton").addClass("hidden");
     $(".pageTest #practiseMissedWordsButton").removeClass("hidden");
+    $(".pageTest #result .tribeResultChat").addClass("hidden");
   }
 
   $("#result #resultWordsHistory").addClass("hidden");
@@ -4949,8 +4951,6 @@ $(document).keyup(() => {
 });
 
 $(document).keydown(function (event) {
-  if (MP.state >= 10 && MP.state <= 20) return;
-
   if (!resultVisible) {
     let now = performance.now();
     let diff = Math.abs(keypressStats.spacing.current - now);
@@ -4981,6 +4981,11 @@ $(document).keydown(function (event) {
     if (config.showOutOfFocusWarning) return;
   }
 
+  if (MP.state == 20) {
+    event.preventDefault();
+    return;
+  }
+
   //tab
   if (
     (event.key == "Tab" && !config.swapEscAndTab) ||
@@ -5114,10 +5119,14 @@ function handleTab(event) {
     !config.quickTab &&
     textHasTab &&
     event.shiftKey &&
-    !resultVisible
+    !resultVisible &&
+    MP.state < 20
   ) {
     event.preventDefault();
     $("#restartTestButton").focus();
+  } else if (MP.state >= 20) {
+    event.preventDefault();
+    return;
   }
 }
 

src/js/tribe.js

@@ -50,6 +50,7 @@ function mp_changeActiveSubpage(newPage) {
 
 function mp_refreshUserList() {
   $(".pageTribe .lobby .userlist .list").empty();
+  $(".pageTest #result .tribeResultChat .userlist .list").empty();
   MP.room.users.forEach((user) => {
     let crown = "";
     if (user.isLeader) {
@@ -64,11 +65,18 @@ function mp_refreshUserList() {
       user.name
     } ${crown}</div>
     `);
+    $(".pageTest #result .tribeResultChat .userlist .list").append(`
+    <div class='user ${user.socketId === MP.id ? "me" : ""}'>${
+      user.name
+    } ${crown}</div>
+    `);
   });
 }
 
 function mp_resetLobby() {
   $(".pageTribe .lobby .userlist .list").empty();
+  $(".pageTest #result .tribeResultChat .chat .messages").empty();
+  $(".pageTest #result .tribeResultChat .userlist .list").empty();
   $(".pageTribe .lobby .chat .messages").empty();
   $(".pageTribe .lobby .inviteLink .code .text").text("");
   $(".pageTribe .lobby .inviteLink .link").text("");
@@ -199,8 +207,8 @@ function mp_refreshTestUserList() {
       <td class="wpm">-</td>
       <td class="acc">-</td>
       <td class="raw">-</td>
-      <td class="char">-</td>
       <td class="con">-</td>
+      <td class="char">-</td>
       <td class="pos">-</td>
     </tr>
     `);
@@ -500,6 +508,10 @@ MP.socket.on("mp_chat_message", (data) => {
   $(".pageTribe .lobby .chat .messages").append(`
     <div class="${cls}">${author}${data.message}</div>
   `);
+  $(".pageTest #result .tribeResultChat .chat .messages").append(`
+    <div class="${cls}">${author}${data.message}</div>
+  `);
+
   let chatEl = $(".pageTribe .lobby .chat .messages");
   chatEl.animate(
     {
@@ -510,6 +522,19 @@ MP.socket.on("mp_chat_message", (data) => {
     },
     0
   );
+
+  let chatEl2 = $(".pageTest #result .tribeResultChat .chat .messages");
+  chatEl2.animate(
+    {
+      scrollTop:
+        $(
+          $(".pageTest #result .tribeResultChat .chat .messages .message")[0]
+        ).outerHeight() *
+        2 *
+        $(".pageTest #result .tribeResultChat .chat .messages").length,
+    },
+    0
+  );
 });
 
 MP.socket.on("mp_system_message", (data) => {
@@ -558,13 +583,15 @@ MP.socket.on("mp_room_user_test_progress_update", (data) => {
   $(`.tribeResult [socketId=${data.socketId}] .acc`).text(
     Math.floor(data.stats.acc) + "%"
   );
-  $(`.tribePlayers [socketId=${data.socketId}] .bar`).animate(
-    {
-      width: data.stats.progress + "%",
-    },
-    1000,
-    "linear"
-  );
+  $(`.tribePlayers [socketId=${data.socketId}] .bar`)
+    .stop(true, true)
+    .animate(
+      {
+        width: data.stats.progress + "%",
+      },
+      1000,
+      "linear"
+    );
 });
 
 MP.socket.on("mp_room_user_finished", (data) => {
@@ -621,9 +648,26 @@ $(".pageTribe #createPrivateRoom").click((f) => {
   });
 });
 
+$(".pageTest #result .tribeResultChat .chat .input input").keyup((e) => {
+  if (e.keyCode === 13) {
+    let msg = $(".pageTest #result .tribeResultChat .chat .input input").val();
+    if (msg === "") return;
+    MP.socket.emit("mp_chat_message", {
+      isSystem: false,
+      message: msg,
+      from: {
+        id: MP.socket.id,
+        name: MP.name,
+      },
+    });
+    $(".pageTest #result .tribeResultChat .chat .input input").val("");
+  }
+});
+
 $(".pageTribe .lobby .chat .input input").keyup((e) => {
   if (e.keyCode === 13) {
     let msg = $(".pageTribe .lobby .chat .input input").val();
+    if (msg === "") return;
     MP.socket.emit("mp_chat_message", {
       isSystem: false,
       message: msg,

src/sass/style.scss

@@ -1504,7 +1504,9 @@ key {
   grid-template-areas:
     "tribe tribe"
     "stats chart"
-    "morestats morestats";
+    "morestats morestats"
+    "buttons buttons"
+    "tribe-chat tribe-chat";
   // "wordsHistory wordsHistory"
   // "buttons buttons"
   // "login login"
@@ -1513,6 +1515,7 @@ key {
   .buttons {
     display: grid;
     grid-auto-flow: column;
+    grid-area: buttons;
     gap: 1rem;
     justify-content: center;
     // grid-area: buttons;
@@ -1577,6 +1580,10 @@ key {
     }
   }
 
+  .tribeResultChat {
+    grid-area: tribe-chat;
+  }
+
   .stats {
     grid-area: stats;
     display: grid;
@@ -2762,6 +2769,50 @@ key {
   }
 }
 
+.pageTribe .lobby,
+.pageTest #result {
+  .tribeResultChat {
+    display: grid;
+    grid-template-areas: "chat userlist";
+    grid-template-columns: 3fr 1fr;
+    gap: 2rem;
+  }
+  .title {
+    color: var(--sub-color);
+  }
+  .chat {
+    grid-area: chat;
+    gap: 1rem;
+    .messages {
+      height: 200px;
+      overflow-y: scroll;
+      .systemMessage {
+        color: var(--sub-color);
+      }
+      .message {
+        display: flex;
+        gap: 0.5rem;
+        color: var(--text-color);
+        .author {
+          color: var(--main-color);
+        }
+      }
+    }
+    .input input {
+      width: 100%;
+    }
+  }
+  .userlist {
+    grid-area: userlist;
+    .user {
+      color: var(--text-color);
+      &.me {
+        color: var(--main-color);
+      }
+    }
+  }
+}
+
 .pageTribe {
   display: grid;
   gap: 1rem;
@@ -2884,28 +2935,6 @@ key {
         }
       }
     }
-    .chat {
-      grid-area: chat;
-      gap: 1rem;
-      .messages {
-        height: 200px;
-        overflow-y: scroll;
-        .systemMessage {
-          color: var(--sub-color);
-        }
-        .message {
-          display: flex;
-          gap: 0.5rem;
-          color: var(--text-color);
-          .author {
-            color: var(--main-color);
-          }
-        }
-      }
-      .input input {
-        width: 100%;
-      }
-    }
     .inviteLink {
       grid-area: inviteLink;
       text-align: center;
@@ -2925,15 +2954,6 @@ key {
         cursor: pointer;
       }
     }
-    .userlist {
-      grid-area: userlist;
-      .user {
-        color: var(--text-color);
-        &.me {
-          color: var(--main-color);
-        }
-      }
-    }
   }
 }
 

static/index.html

@@ -1255,8 +1255,8 @@
                     <td>wpm</td>
                     <td>acc</td>
                     <td>raw</td>
-                    <td>characters</td>
                     <td>consistency</td>
+                    <td>characters</td>
                     <td>pos</td>
                   </tr>
                 </thead>
@@ -1431,6 +1431,19 @@
                   <i class="far fa-fw fa-image"></i>
                 </div>
               </div>
+              <div class="tribeResultChat">
+                <div class="chat">
+                  <div class="title">chat</div>
+                  <div class="messages"></div>
+                  <div class="input">
+                    <input type="text" placeholder="Send a message" />
+                  </div>
+                </div>
+                <div class="userlist">
+                  <div class="title">users</div>
+                  <div class="list"></div>
+                </div>
+              </div>
             </div>
           </div>
           <div class="page pageAbout hidden">