added tribe diff indicator

src/js/script.js

@@ -2913,6 +2913,7 @@ function startTest() {
       }
 
       mp_sendTestProgress(wpmAndRaw.wpm, wpmAndRaw.raw, acc, progress);
+      mp_updateTribeDiff(wpmAndRaw.wpm);
 
       if (
         MP.state >= 21 &&

src/js/tribe.js

@@ -844,6 +844,45 @@ function mp_updateWhoIsTyping() {
   $(".pageTest #result .tribeResultChat .chat .whoIsTyping").html(string);
 }
 
+function mp_updateTribeDiff(currentSpeed) {
+  if (MP.state >= 21 && MP.state <= 28 && testActive) {
+    let elem = $("#tribeDiff");
+    elem.removeClass("ahead");
+    elem.removeClass("behind");
+
+    let maxwpm = 0;
+    Object.keys(MP.room.userSpeeds).forEach((sid) => {
+      if (MP.room.userSpeeds[sid] > maxwpm) maxwpm = MP.room.userSpeeds[sid];
+    });
+
+    let diff = Math.round(maxwpm - currentSpeed);
+    if (diff == 0) {
+      elem.text("--");
+    } else if (diff > 0) {
+      elem.text("-" + diff);
+      elem.addClass("behind");
+    } else {
+      elem.addClass("ahead");
+      elem.text("+" + Math.abs(diff));
+    }
+  }
+}
+
+function mp_showHideTribeDiff(showhide) {
+  if (showhide) {
+    $("#tribeDiff").removeClass("hidden");
+  } else {
+    $("#tribeDiff").addClass("hidden");
+  }
+}
+
+function mp_resetTribeDiff() {
+  let elem = $("#tribeDiff");
+  elem.removeClass("ahead");
+  elem.removeClass("behind");
+  elem.text("--");
+}
+
 MP.socket.on("connect", (f) => {
   setTimerStyle("mini", true);
   MP.state = 1;
@@ -856,6 +895,7 @@ MP.socket.on("connect", (f) => {
   MP.id = MP.socket.id;
   mp_setName(name);
   mp_changeActiveSubpage("prelobby");
+  mp_showHideTribeDiff(true);
   setTimeout(() => {
     if (MP.autoJoin) {
       MP.socket.emit("mp_room_join", { roomId: MP.autoJoin });
@@ -903,6 +943,7 @@ MP.socket.on("disconnect", (f) => {
   mp_resetLobby();
   mp_resetRace();
   mp_changeActiveSubpage("preloader");
+  mp_showHideTribeDiff(false);
   // $(".pageTribe .preloader div").removeClass("hidden");
   // $(".pageTribe .preloader").removeClass("hidden").css("opacity", 1);
   // $(".pageTribe .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
@@ -1173,6 +1214,8 @@ MP.socket.on("mp_room_test_init", (data) => {
     return;
   }
   mp_playSound("start");
+  MP.room.userSpeeds = {};
+  mp_resetTribeDiff();
   MP.room.userGraphs = {};
   MP.room.userFinished = false;
   destroyAllGraphs();
@@ -1192,6 +1235,7 @@ MP.socket.on("mp_room_state_update", (data) => {
 });
 
 MP.socket.on("mp_room_user_test_progress_update", (data) => {
+  if (data.sid !== MP.socket.id) MP.room.userSpeeds[data.sid] = data.stats.wpm;
   $(`.tribePlayers .player[sid=${data.sid}] .wpm`).text(data.stats.wpm);
   $(`.tribePlayers .player[sid=${data.sid}] .acc`).text(
     Math.floor(data.stats.acc) + "%"

src/js/userconfig.js

@@ -1531,26 +1531,35 @@ function setFontSize(fontSize, nosave) {
   $("#typingTest .tribePlayers").removeClass("size2");
   $("#typingTest .tribePlayers").removeClass("size3");
 
+  $("#tribeDiff").removeClass("size125");
+  $("#tribeDiff").removeClass("size15");
+  $("#tribeDiff").removeClass("size2");
+  $("#tribeDiff").removeClass("size3");
+
   if (fontSize == 125) {
     $("#words").addClass("size125");
     $("#caret, #paceCaret").addClass("size125");
     $("#miniTimerAndLiveWpm").addClass("size125");
     $("#typingTest .tribePlayers").addClass("size125");
+    $("#tribeDiff").addClass("size125");
   } else if (fontSize == 15) {
     $("#words").addClass("size15");
     $("#caret, #paceCaret").addClass("size15");
     $("#miniTimerAndLiveWpm").addClass("size15");
     $("#typingTest .tribePlayers").addClass("size15");
+    $("#tribeDiff").addClass("size15");
   } else if (fontSize == 2) {
     $("#words").addClass("size2");
     $("#caret, #paceCaret").addClass("size2");
     $("#miniTimerAndLiveWpm").addClass("size2");
     $("#typingTest .tribePlayers").addClass("size2");
+    $("#tribeDiff").addClass("size2");
   } else if (fontSize == 3) {
     $("#words").addClass("size3");
     $("#caret, #paceCaret").addClass("size3");
     $("#miniTimerAndLiveWpm").addClass("size3");
     $("#typingTest .tribePlayers").addClass("size3");
+    $("#tribeDiff").addClass("size3");
   }
   if (!nosave) saveConfigToCookie();
 }

src/sass/style.scss

@@ -528,6 +528,40 @@ a:hover {
   }
 }
 
+#tribeDiff {
+  text-align: right;
+  font-size: 1rem;
+  line-height: 1rem;
+  margin-top: -1.5rem;
+  color: var(--sub-color);
+  &.ahead {
+    color: var(--main-color);
+  }
+  &.behind {
+    color: var(--error-color);
+  }
+  &.size125 {
+    margin-top: -1.75rem;
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+  }
+  &.size15 {
+    margin-top: -2rem;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+  &.size2 {
+    margin-top: -2.5rem;
+    font-size: 2rem;
+    line-height: 2rem;
+  }
+  &.size3 {
+    margin-top: -3.5rem;
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
 #tribeUserSettingsPopupWrapper {
   width: 100%;
   height: 100%;

static/index.html

@@ -1051,10 +1051,13 @@
               <div id="timerNumber">
                 <div>60</div>
               </div>
-              <div id="miniTimerAndLiveWpm">
-                <div class="time hidden">1:00</div>
-                <div class="wpm">60</div>
-                <div class="acc">100%</div>
+              <div style="display: grid">
+                <div id="miniTimerAndLiveWpm">
+                  <div class="time hidden">1:00</div>
+                  <div class="wpm">60</div>
+                  <div class="acc">100%</div>
+                </div>
+                <div id="tribeDiff" class="hidden">--</div>
               </div>
               <div class="outOfFocusWarning hidden">
                 <i class="fas fa-mouse-pointer"></i>