From c838283c15be706f414aa5b888508faa42175b2e Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Wed, 20 Jan 2021 23:47:04 +0000
Subject: [PATCH] reworked tribe result table

---
 src/js/tribe.js     | 52 ++++++++++++++++++++++++++++-----------------
 src/sass/style.scss | 15 ++++++++++++-
 static/index.html   | 21 +++++++++++++-----
 3 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/src/js/tribe.js b/src/js/tribe.js
index 644df92fd..0610363bd 100644
--- a/src/js/tribe.js
+++ b/src/js/tribe.js
@@ -215,11 +215,14 @@ function mp_refreshTestUserList() {
     $(".tribeResult table tbody").append(`
     <tr class="player ${me}" socketId="${user.socketId}">
       <td class="name">${user.name}</td>
-      <td class="wpm">-</td>
-      <td class="acc">-</td>
-      <td class="progress" colspan="3">
-        <div class="barBg">
-          <div class="bar" style="width: 0%;"></div>
+      <td><div class="wpm">-</div><div class="acc">-</div></td>
+      <td><div class="raw">-</div><div class="con">-</div></td>
+      <td><div class="char">-</div><div class="other">-</div></td>
+      <td class="progressAndGraph">
+        <div class="progress">
+          <div class="barBg">
+            <div class="bar" style="width: 0%;"></div>
+          </div>
         </div>
       </td>
       <td class="pos"><span class="num">-</span><span class="points"></span></td>
@@ -676,22 +679,20 @@ MP.socket.on("mp_room_user_finished", (data) => {
   $(`.tribeResult table .player[socketId=${data.socketId}] .acc`).text(
     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>
-    <td class="char"></div>
-  `);
+  // $(`.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>
+  //   <td class="char"></div>
+  // `);
   $(`.tribeResult table .player[socketId=${data.socketId}] .raw`).text(
     data.result.raw
   );
-  let val = "";
-  if (!data.result.invalid && !data.result.failed && !data.result.outOfTime) {
-    val = data.result.char;
-  } else if (data.result.afk) {
+  let val = "-";
+  if (data.result.afk) {
     val = "afk";
   } else if (data.result.invalid) {
     val = "invalid";
@@ -700,12 +701,20 @@ MP.socket.on("mp_room_user_finished", (data) => {
   } else if (data.result.outOfTime) {
     val = "out of time";
   }
-  $(`.tribeResult table .player[socketId=${data.socketId}] .char`).text(val);
+  $(`.tribeResult table .player[socketId=${data.socketId}] .other`).text(val);
+  $(`.tribeResult table .player[socketId=${data.socketId}] .char`).text(
+    data.result.char
+  );
   $(`.tribeResult table .player[socketId=${data.socketId}] .con`).text(
     data.result.con + "%"
   );
 
-  if (config.mode !== "time") {
+  if (data.result.failed || data.result.invalid) {
+    $(`.tribePlayers .player[socketId=${data.socketId}]`).addClass("failed");
+    $(`.tribeResult .player[socketId=${data.socketId}]`).addClass("failed");
+  }
+
+  if (config.mode !== "time" && !data.result.failed) {
     $(`.tribePlayers .player[socketId=${data.socketId}] .bar`)
       .stop(true, false)
       .animate(
@@ -729,6 +738,9 @@ MP.socket.on("mp_room_user_finished", (data) => {
 
 MP.socket.on("mp_room_winner", (data) => {
   let pos = 1;
+  if (data.official) {
+    hideResultCountdown();
+  }
   data.sorted.forEach((sid) => {
     $(`.tribeResult table [socketId=${sid.sid}] .pos .num`).text(
       `${pos}${Misc.getNumberSuffix(pos)}`
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 473bb87c1..9fefb390a 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -1584,22 +1584,32 @@ key {
       tr td:first-child {
         text-align: left;
       }
+
       tbody tr {
         color: var(--text-color);
         &.me {
           color: var(--main-color);
         }
+        .progressAndGraph {
+          width: 25%;
+        }
+        .acc,
+        .con,
+        .other {
+          opacity: 0.5;
+        }
         .crown {
           width: 1px;
         }
         .pos {
-          width: 1px;
+          width: 5.6rem;
           .num {
             margin-right: 0.5rem;
           }
           .points {
             opacity: 0.5;
             font-size: 0.6rem;
+            vertical-align: super;
           }
         }
       }
@@ -2284,6 +2294,9 @@ key {
     .player.me .progress .barBg .bar {
       background: var(--main-color);
     }
+    .player.failed {
+      opacity: 0.25;
+    }
   }
 
   .tribePlayers {
diff --git a/static/index.html b/static/index.html
index b84f9083c..751bcb8a5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1254,11 +1254,22 @@
                   <thead>
                     <tr>
                       <td></td>
-                      <td>wpm</td>
-                      <td>acc</td>
-                      <td>raw</td>
-                      <td>consistency</td>
-                      <td>characters</td>
+                      <td>
+                        wpm
+                        <br />
+                        acc
+                      </td>
+                      <td>
+                        raw
+                        <br />
+                        consistency
+                      </td>
+                      <td>
+                        characters
+                        <br />
+                        other
+                      </td>
+                      <td></td>
                       <td>pos</td>
                       <td></td>
                     </tr>