sending afk to the server,

shwoing time left on the result screen

src/js/script.js

@@ -2810,6 +2810,7 @@ function showResult(difficultyFailed = false, mp_outOfTime = false) {
     invalid: testInvalid,
     failed: difficultyFailed,
     outOfTime: mp_outOfTime,
+    afk: afkDetected,
   });
 }
 

src/js/tribe.js

@@ -383,6 +383,18 @@ function fadeoutCountdown() {
     );
 }
 
+function showResultCountdown() {
+  $("#result .tribeResult .timer").animate({ opacity: 1 }, 125);
+}
+
+function hideResultCountdown() {
+  $("#result .tribeResult .timer").animate({ opacity: 0 }, 125);
+}
+
+function updateResultCountdown(text) {
+  $("#result .tribeResult .timer").text(text);
+}
+
 MP.socket.on("connect", (f) => {
   MP.state = 1;
   MP.reconnectionAttempts = 0;
@@ -592,11 +604,14 @@ MP.socket.on("mp_room_test_countdown", (data) => {
 });
 
 MP.socket.on("mp_room_finishTimer_countdown", (data) => {
+  showResultCountdown();
+  updateResultCountdown(`Time left for everyone to finish: ${data.val}s`);
   showCountdown();
   updateCountdown(data.val);
 });
 
 MP.socket.on("mp_room_finishTimer_over", (data) => {
+  hideResultCountdown();
   if (testActive) showResult(undefined, true);
 });
 
@@ -607,6 +622,7 @@ MP.socket.on("mp_room_test_init", (data) => {
   changePage("");
   restartTest(false, true, true);
   showCountdown();
+  hideResultCountdown();
 });
 
 MP.socket.on("mp_room_state_update", (data) => {
@@ -661,6 +677,9 @@ MP.socket.on("mp_room_user_finished", (data) => {
     data.result.acc + "%"
   );
   $(`.tribeResult table .player[socketId=${data.socketId}] .progress`).remove();
+  $(`.tribeResult table .player[socketId=${data.socketId}] .raw`).remove();
+  $(`.tribeResult table .player[socketId=${data.socketId}] .con`).remove();
+  $(`.tribeResult table .player[socketId=${data.socketId}] .char`).remove();
   $(`.tribeResult table .player[socketId=${data.socketId}] .acc`).after(`
     <td class="raw"></div>
     <td class="con"></div>
@@ -672,6 +691,8 @@ MP.socket.on("mp_room_user_finished", (data) => {
   let val = "";
   if (!data.result.invalid && !data.result.failed && !data.result.outOfTime) {
     val = data.result.char;
+  } else if (data.result.afk) {
+    val = "afk";
   } else if (data.result.invalid) {
     val = "invalid";
   } else if (data.result.failed) {
@@ -743,9 +764,9 @@ MP.socket.on("mp_room_back_to_lobby", (data) => {
 });
 
 $(".pageTribe #createPrivateRoom").click((f) => {
-  activateFunbox("none");
-  setLanguage("english");
-  setMode("quote");
+  // activateFunbox("none");
+  // setLanguage("english");
+  // setMode("quote");
   let mode2;
   if (config.mode === "time") {
     mode2 = config.time;

src/sass/style.scss

@@ -1567,27 +1567,40 @@ key {
   }
 
   .tribeResult {
+    display: grid;
+    gap: 1rem;
     grid-area: tribe;
-    thead {
-      color: var(--sub-color);
-      font-size: 0.75rem;
+    .timer {
+      text-align: center;
     }
-    tbody tr {
-      color: var(--text-color);
-      &.me {
-        color: var(--main-color);
+    table {
+      thead {
+        color: var(--sub-color);
+        font-size: 0.75rem;
       }
-      .crown {
-        width: 1px;
+      td {
+        text-align: right;
       }
-      .pos {
-        width: 1px;
-        .num {
-          margin-right: 0.5rem;
+      tr td:first-child {
+        text-align: left;
+      }
+      tbody tr {
+        color: var(--text-color);
+        &.me {
+          color: var(--main-color);
         }
-        .points {
-          opacity: 0.5;
-          font-size: 0.6rem;
+        .crown {
+          width: 1px;
+        }
+        .pos {
+          width: 1px;
+          .num {
+            margin-right: 0.5rem;
+          }
+          .points {
+            opacity: 0.5;
+            font-size: 0.6rem;
+          }
         }
       }
     }

static/index.html

@@ -1248,21 +1248,24 @@
               <div id="premidSecondsLeft" class="hidden"></div>
             </div>
             <div id="result" class="hidden">
-              <table class="tribeResult">
-                <thead>
-                  <tr>
-                    <td></td>
-                    <td>wpm</td>
-                    <td>acc</td>
-                    <td>raw</td>
-                    <td>consistency</td>
-                    <td>characters</td>
-                    <td>pos</td>
-                    <td></td>
-                  </tr>
-                </thead>
-                <tbody></tbody>
-              </table>
+              <div class="tribeResult">
+                <div class="timer" style="opacity: 0">Timer</div>
+                <table>
+                  <thead>
+                    <tr>
+                      <td></td>
+                      <td>wpm</td>
+                      <td>acc</td>
+                      <td>raw</td>
+                      <td>consistency</td>
+                      <td>characters</td>
+                      <td>pos</td>
+                      <td></td>
+                    </tr>
+                  </thead>
+                  <tbody></tbody>
+                </table>
+              </div>
               <div class="stats">
                 <!-- <div class="info">words 10<br>punctuation</div> -->