From 0551aeb7e97aac6e2b7e23071999c62407a97295 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 19 Jan 2021 02:07:50 +0000 Subject: [PATCH] added chat to the result page --- src/js/script.js | 15 ++++++-- src/js/tribe.js | 60 +++++++++++++++++++++++++++----- src/sass/style.scss | 84 ++++++++++++++++++++++++++++----------------- static/index.html | 15 +++++++- 4 files changed, 130 insertions(+), 44 deletions(-) diff --git a/src/js/script.js b/src/js/script.js index c16101c1c..3526f29d0 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -1876,6 +1876,7 @@ function showResult(difficultyFailed = false) { $(".pageTest #restartTestButtonWithSameWordset").addClass("hidden"); $(".pageTest #goBackToLobbyButton").removeClass("hidden"); $(".pageTest #practiseMissedWordsButton").addClass("hidden"); + $(".pageTest #result .tribeResultChat").removeClass("hidden"); if (MP.room.isLeader) { $(".pageTest #backToLobbyButton").removeClass("hidden"); $(".pageTest #nextTestButton").removeClass("hidden"); @@ -1886,6 +1887,7 @@ function showResult(difficultyFailed = false) { $(".pageTest #restartTestButtonWithSameWordset").removeClass("hidden"); $(".pageTest #goBackToLobbyButton").addClass("hidden"); $(".pageTest #practiseMissedWordsButton").removeClass("hidden"); + $(".pageTest #result .tribeResultChat").addClass("hidden"); } $("#result #resultWordsHistory").addClass("hidden"); @@ -4949,8 +4951,6 @@ $(document).keyup(() => { }); $(document).keydown(function (event) { - if (MP.state >= 10 && MP.state <= 20) return; - if (!resultVisible) { let now = performance.now(); let diff = Math.abs(keypressStats.spacing.current - now); @@ -4981,6 +4981,11 @@ $(document).keydown(function (event) { if (config.showOutOfFocusWarning) return; } + if (MP.state == 20) { + event.preventDefault(); + return; + } + //tab if ( (event.key == "Tab" && !config.swapEscAndTab) || @@ -5114,10 +5119,14 @@ function handleTab(event) { !config.quickTab && textHasTab && event.shiftKey && - !resultVisible + !resultVisible && + MP.state < 20 ) { event.preventDefault(); $("#restartTestButton").focus(); + } else if (MP.state >= 20) { + event.preventDefault(); + return; } } diff --git a/src/js/tribe.js b/src/js/tribe.js index 66a225b48..11a68539c 100644 --- a/src/js/tribe.js +++ b/src/js/tribe.js @@ -50,6 +50,7 @@ function mp_changeActiveSubpage(newPage) { function mp_refreshUserList() { $(".pageTribe .lobby .userlist .list").empty(); + $(".pageTest #result .tribeResultChat .userlist .list").empty(); MP.room.users.forEach((user) => { let crown = ""; if (user.isLeader) { @@ -64,11 +65,18 @@ function mp_refreshUserList() { user.name } ${crown} `); + $(".pageTest #result .tribeResultChat .userlist .list").append(` +
${ + user.name + } ${crown}
+ `); }); } function mp_resetLobby() { $(".pageTribe .lobby .userlist .list").empty(); + $(".pageTest #result .tribeResultChat .chat .messages").empty(); + $(".pageTest #result .tribeResultChat .userlist .list").empty(); $(".pageTribe .lobby .chat .messages").empty(); $(".pageTribe .lobby .inviteLink .code .text").text(""); $(".pageTribe .lobby .inviteLink .link").text(""); @@ -199,8 +207,8 @@ function mp_refreshTestUserList() { - - - - - - + - - `); @@ -500,6 +508,10 @@ MP.socket.on("mp_chat_message", (data) => { $(".pageTribe .lobby .chat .messages").append(`
${author}${data.message}
`); + $(".pageTest #result .tribeResultChat .chat .messages").append(` +
${author}${data.message}
+ `); + let chatEl = $(".pageTribe .lobby .chat .messages"); chatEl.animate( { @@ -510,6 +522,19 @@ MP.socket.on("mp_chat_message", (data) => { }, 0 ); + + let chatEl2 = $(".pageTest #result .tribeResultChat .chat .messages"); + chatEl2.animate( + { + scrollTop: + $( + $(".pageTest #result .tribeResultChat .chat .messages .message")[0] + ).outerHeight() * + 2 * + $(".pageTest #result .tribeResultChat .chat .messages").length, + }, + 0 + ); }); MP.socket.on("mp_system_message", (data) => { @@ -558,13 +583,15 @@ MP.socket.on("mp_room_user_test_progress_update", (data) => { $(`.tribeResult [socketId=${data.socketId}] .acc`).text( Math.floor(data.stats.acc) + "%" ); - $(`.tribePlayers [socketId=${data.socketId}] .bar`).animate( - { - width: data.stats.progress + "%", - }, - 1000, - "linear" - ); + $(`.tribePlayers [socketId=${data.socketId}] .bar`) + .stop(true, true) + .animate( + { + width: data.stats.progress + "%", + }, + 1000, + "linear" + ); }); MP.socket.on("mp_room_user_finished", (data) => { @@ -621,9 +648,26 @@ $(".pageTribe #createPrivateRoom").click((f) => { }); }); +$(".pageTest #result .tribeResultChat .chat .input input").keyup((e) => { + if (e.keyCode === 13) { + let msg = $(".pageTest #result .tribeResultChat .chat .input input").val(); + if (msg === "") return; + MP.socket.emit("mp_chat_message", { + isSystem: false, + message: msg, + from: { + id: MP.socket.id, + name: MP.name, + }, + }); + $(".pageTest #result .tribeResultChat .chat .input input").val(""); + } +}); + $(".pageTribe .lobby .chat .input input").keyup((e) => { if (e.keyCode === 13) { let msg = $(".pageTribe .lobby .chat .input input").val(); + if (msg === "") return; MP.socket.emit("mp_chat_message", { isSystem: false, message: msg, diff --git a/src/sass/style.scss b/src/sass/style.scss index aa1b48924..f3837731c 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -1504,7 +1504,9 @@ key { grid-template-areas: "tribe tribe" "stats chart" - "morestats morestats"; + "morestats morestats" + "buttons buttons" + "tribe-chat tribe-chat"; // "wordsHistory wordsHistory" // "buttons buttons" // "login login" @@ -1513,6 +1515,7 @@ key { .buttons { display: grid; grid-auto-flow: column; + grid-area: buttons; gap: 1rem; justify-content: center; // grid-area: buttons; @@ -1577,6 +1580,10 @@ key { } } + .tribeResultChat { + grid-area: tribe-chat; + } + .stats { grid-area: stats; display: grid; @@ -2762,6 +2769,50 @@ key { } } +.pageTribe .lobby, +.pageTest #result { + .tribeResultChat { + display: grid; + grid-template-areas: "chat userlist"; + grid-template-columns: 3fr 1fr; + gap: 2rem; + } + .title { + color: var(--sub-color); + } + .chat { + grid-area: chat; + gap: 1rem; + .messages { + height: 200px; + overflow-y: scroll; + .systemMessage { + color: var(--sub-color); + } + .message { + display: flex; + gap: 0.5rem; + color: var(--text-color); + .author { + color: var(--main-color); + } + } + } + .input input { + width: 100%; + } + } + .userlist { + grid-area: userlist; + .user { + color: var(--text-color); + &.me { + color: var(--main-color); + } + } + } +} + .pageTribe { display: grid; gap: 1rem; @@ -2884,28 +2935,6 @@ key { } } } - .chat { - grid-area: chat; - gap: 1rem; - .messages { - height: 200px; - overflow-y: scroll; - .systemMessage { - color: var(--sub-color); - } - .message { - display: flex; - gap: 0.5rem; - color: var(--text-color); - .author { - color: var(--main-color); - } - } - } - .input input { - width: 100%; - } - } .inviteLink { grid-area: inviteLink; text-align: center; @@ -2925,15 +2954,6 @@ key { cursor: pointer; } } - .userlist { - grid-area: userlist; - .user { - color: var(--text-color); - &.me { - color: var(--main-color); - } - } - } } } diff --git a/static/index.html b/static/index.html index 1157acb49..1169a1866 100644 --- a/static/index.html +++ b/static/index.html @@ -1255,8 +1255,8 @@ wpm acc raw - characters consistency + characters pos @@ -1431,6 +1431,19 @@ +
+
+
chat
+
+
+ +
+
+
+
users
+
+
+