diff --git a/src/js/script.js b/src/js/script.js index 0d32820bb..e83e562e8 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -2912,7 +2912,8 @@ function startTest() { mp_sendTestProgress(wpmAndRaw.wpm, wpmAndRaw.raw, acc, progress); if ( - MP.state === 21 && + MP.state >= 21 && + MP.state <= 28 && time >= 5 && currentInput === "" && inputHistory.length === 0 @@ -3270,6 +3271,7 @@ function changePage(page) { $(".page").removeClass("active"); $("#wordsInput").focusout(); if (page == "test" || page == "") { + if (MP.state >= 20 && MP.state <= 29 && !MP.room.isTyping) return; pageTransition = true; swapElements(activePage, $(".page.pageTest"), 250, () => { pageTransition = false; diff --git a/src/js/tribe.js b/src/js/tribe.js index 2f9106ba9..908c11bd7 100644 --- a/src/js/tribe.js +++ b/src/js/tribe.js @@ -75,13 +75,16 @@ function mp_refreshUserList() { }); let sortedUsers = usersArray.sort((a, b) => b.points - a.points); sortedUsers.forEach((user) => { - let star = ""; + let icons = ""; if (user.isLeader) { if (user.sid === MP.socket.id) { MP.room.isLeader = true; } - star = ''; + icons += ''; + } + if (user.isReady) { + icons += ''; } let pointsString; if (user.points == undefined) { @@ -93,14 +96,14 @@ function mp_refreshUserList() {
${ user.name - } ${star}
${pointsString}
+ } ${icons}
${pointsString}
`); $(".pageTest #result .tribeResultChat .userlist .list").append(`
${ user.name - } ${star}
${pointsString}
+ } ${icons}
${pointsString}
`); }); @@ -122,6 +125,7 @@ function mp_resetLobby() { function mp_resetRace() { $(".pageTest .tribePlayers").empty().addClass("hidden"); + $(".pageTribe .lobby .tribePlayers").empty().addClass("hidden"); hideCountdown(); hideResultCountdown(); $(".pageTest #result .tribeResult").addClass("hidden"); @@ -249,25 +253,31 @@ function mp_sendTestProgress(wpm, raw, acc, progress) { function mp_refreshTestUserList() { $(".tribePlayers").empty(); Object.keys(MP.room.users).forEach((sid) => { - let user = MP.room.users[sid]; - let me = ""; - if (sid === MP.socket.id) { - me = " me"; + if ( + MP.room.users[sid].isTyping || + MP.room.users[sid].isReady || + MP.room.users[sid].isLeader + ) { + let user = MP.room.users[sid]; + let me = ""; + if (sid === MP.socket.id) { + me = " me"; + } + $(".tribePlayers").append(` + + ${user.name} + +
+
+
+ + +
-
+
-
+ + + `); } - $(".tribePlayers").append(` - - ${user.name} - -
-
-
- - -
-
-
-
- - - `); }); $(".tribePlayers").removeClass("hidden"); @@ -739,7 +749,11 @@ MP.socket.on("connect_error", (f) => { MP.socket.on("mp_room_joined", (data) => { mp_playSound("join"); - MP.room = data.room; + if (MP.room === undefined) { + MP.room = data.room; + } else { + MP.room.users[data.sid] = { sid: data.sid, name: data.name }; + } if (MP.room.users[MP.socket.id].isLeader) { MP.room.isLeader = true; } @@ -756,15 +770,20 @@ MP.socket.on("mp_room_joined", (data) => { ); $(".pageTribe .lobby .inviteLink .link").text(link); mp_changeActiveSubpage("lobby"); - MP.state = 10; + MP.state = data.room.state; + if (MP.state >= 20 && MP.state < 29) { + mp_refreshTestUserList(); + } // swapElements($(".pageTribe .prelobby"), $(".pageTribe .lobby"), 250, () => { // MP.state = 10; // // $(".pageTribe .prelobby").addClass('hidden'); // }); if (MP.room.isLeader) { $(".pageTribe .lobby .startTestButton").removeClass("hidden"); + $(".pageTribe .lobby .userReadyButton").addClass("hidden"); } else { $(".pageTribe .lobby .startTestButton").addClass("hidden"); + $(".pageTribe .lobby .userReadyButton").removeClass("hidden"); } } }); @@ -787,6 +806,7 @@ MP.socket.on("mp_room_user_left", (data) => { MP.room.isLeader = true; MP.room.users[MP.socket.id].isLeader = true; $(".pageTribe .lobby .lobbyButtons .startTestButton").removeClass("hidden"); + $(".pageTribe .lobby .userReadyButton").addClass("hidden"); $(".pageTest #result #backToLobbyButton").removeClass("hidden"); $(".pageTest #result #nextTestButton").removeClass("hidden"); } @@ -841,6 +861,7 @@ MP.socket.on("mp_system_message", (data) => { }); MP.socket.on("mp_room_test_start", (data) => { + if (!MP.room.isTyping) return; // changePage(''); // mp_testCountdown(); // startTest(); @@ -856,6 +877,7 @@ MP.socket.on("mp_room_test_start", (data) => { }); MP.socket.on("mp_room_test_countdown", (data) => { + if (!MP.room.isTyping) return; focusWords(); updateCountdown(data.val); if (data.val <= 3) mp_playSound("cd"); @@ -876,12 +898,13 @@ MP.socket.on("mp_room_finishTimer_over", (data) => { }); MP.socket.on("mp_room_test_init", (data) => { + mp_refreshTestUserList(); + if (!MP.room.isReady && !MP.room.isLeader) return; mp_playSound("start"); MP.room.userGraphs = {}; MP.room.userFinished = false; destroyAllGraphs(); seedrandom(data.seed, { global: true }); - mp_refreshTestUserList(); changePage(""); restartTest(false, true, true); showCountdown(); @@ -933,6 +956,7 @@ MP.socket.on("mp_room_user_test_progress_update", (data) => { let graphs = []; MP.socket.on("mp_room_user_finished", (data) => { + MP.room.users[data.sid].isFinished = true; $(`.tribeResult`).removeClass("hidden"); $(`.tribeResult table .player[sid=${data.sid}] .wpm .text`).text( data.result.wpm @@ -1124,6 +1148,16 @@ MP.socket.on("mp_room_back_to_lobby", (data) => { changePage("tribe"); }); +MP.socket.on("mp_room_user_info_update", (data) => { + Object.keys(data.values).forEach((bool) => { + MP.room.users[data.sid][bool] = data.values[bool]; + if (data.sid === MP.socket.id) { + MP.room[bool] = data.values[bool]; + } + }); + mp_refreshUserList(); +}); + $(".pageTribe #createPrivateRoom").click((f) => { // activateFunbox("none"); // setLanguage("english"); @@ -1300,6 +1334,11 @@ $(".pageTribe .lobby .lobbyButtons .startTestButton").click((e) => { mp_startTest(); }); +$(".pageTribe .lobby .lobbyButtons .userReadyButton").click((e) => { + $(".pageTribe .lobby .lobbyButtons .userReadyButton").addClass("hidden"); + MP.socket.emit("mp_user_ready"); +}); + $(".pageTest #result #backToLobbyButton").click((e) => { MP.socket.emit("mp_room_back_to_lobby"); }); diff --git a/src/sass/style.scss b/src/sass/style.scss index de9f2c978..82e7013f9 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -3034,6 +3034,7 @@ key { .lobby { display: grid; grid-template-areas: + "players players" "currentsettings lobbyButtons" "chat userlist" "inviteLink inviteLink"; @@ -3048,7 +3049,8 @@ key { flex-direction: column; gap: 1rem; justify-content: center; - .startTestButton { + .startTestButton, + .userReadyButton { background: var(--main-color); color: var(--bg-color); &:hover { @@ -3094,9 +3096,57 @@ key { cursor: pointer; } } + + .tribePlayers { + grid-area: players; + td { + padding: 0 0.5rem; + } + tr td:first-child { + padding-left: 0; + padding-right: 0.5rem; + } + tr td:last-child { + padding-left: 0.5rem; + padding-right: 0; + } + .player { + &.failed { + opacity: 0.25; + } + .name { + color: var(--sub-color); + } + .progress { + width: 100%; + .barBg { + width: 100%; + height: 0.25rem; + background: rgba(0, 0, 0, 0.1); + border-radius: var(--roundness); + .bar { + height: 0.25rem; + background: var(--sub-color); + left: 0; + border-radius: var(--roundness); + } + } + } + .stats { + text-align: right; + grid-template-columns: auto auto; + color: var(--sub-color); + display: flex; + justify-content: flex-end; + min-width: 90px; + .acc { + margin-left: 1rem; + } + } + } + } } } - .pageAccount { display: grid; gap: 1rem; diff --git a/static/index.html b/static/index.html index 9e3ed7c5a..3e0f7ba40 100644 --- a/static/index.html +++ b/static/index.html @@ -3704,6 +3704,7 @@