diff --git a/src/js/script.js b/src/js/script.js
index e9a7516c3..8f0edb78b 100644
--- a/src/js/script.js
+++ b/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 &&
diff --git a/src/js/tribe.js b/src/js/tribe.js
index 50afa5b81..b49388f42 100644
--- a/src/js/tribe.js
+++ b/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(``);
@@ -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) + "%"
diff --git a/src/js/userconfig.js b/src/js/userconfig.js
index 9e3795695..89d4d2406 100644
--- a/src/js/userconfig.js
+++ b/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();
}
diff --git a/src/sass/style.scss b/src/sass/style.scss
index e13b6242b..ab6c0ad67 100644
--- a/src/sass/style.scss
+++ b/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%;
diff --git a/static/index.html b/static/index.html
index 80fa071b8..7bec76a79 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1051,10 +1051,13 @@
-