monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-31 12:28:50 +08:00
Code Issues Projects Releases Packages Wiki Activity

added ready button to the result screen

Browse source
This commit is contained in:
Miodec 2021-01-27 18:42:31 +00:00
parent 9f814bb89b
commit 85a8ad8217
4 changed files with 91 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/js/script.js
View file

@ -1875,6 +1875,7 @@ function showResult(difficultyFailed = false, mp_outOfTime = false) {
if (MP.state >= 10) {
$(".pageTest #nextTestButton").addClass("hidden");
$(".pageTest #backToLobbyButton").addClass("hidden");
$(".pageTest #readyButton").removeClass("hidden");
$(".pageTest #restartTestButtonWithSameWordset").addClass("hidden");
$(".pageTest #goBackToLobbyButton").removeClass("hidden");
$(".pageTest #practiseMissedWordsButton").addClass("hidden");
@ -1882,10 +1883,12 @@ function showResult(difficultyFailed = false, mp_outOfTime = false) {
if (MP.room.isLeader) {
$(".pageTest #backToLobbyButton").removeClass("hidden");
$(".pageTest #nextTestButton").removeClass("hidden");
$(".pageTest #readyButton").addClass("hidden");
}
} else {
$(".pageTest #nextTestButton").removeClass("hidden");
$(".pageTest #backToLobbyButton").addClass("hidden");
$(".pageTest #readyButton").addClass("hidden");
$(".pageTest #restartTestButtonWithSameWordset").removeClass("hidden");
$(".pageTest #goBackToLobbyButton").addClass("hidden");
$(".pageTest #practiseMissedWordsButton").removeClass("hidden");
@ -3271,7 +3274,13 @@ function changePage(page) {
$(".page").removeClass("active");
$("#wordsInput").focusout();
if (page == "test" || page == "") {
if (MP.state >= 20 && MP.state <= 29 && !MP.room.isTyping) return;
if (
MP.state >= 20 &&
MP.state <= 29 &&
!MP.room.isTyping &&
!MP.room.isReady
)
return;
pageTransition = true;
swapElements(activePage, $(".page.pageTest"), 250, () => {
pageTransition = false;

116
src/js/tribe.js
View file

@ -58,6 +58,9 @@ function mp_changeActiveSubpage(newPage) {
$(`.pageTribe .${newPage}`),
250,
() => {
if (newPage === "lobby") {
$(".pageTribe .lobby .chat .input input").focus();
}
MP.pageTransition = false;
MP.activePage = newPage;
}
@ -283,52 +286,58 @@ function mp_refreshTestUserList() {
$(".tribeResult table tbody").empty();
Object.keys(MP.room.users).forEach((sid) => {
let user = MP.room.users[sid];
let me = "";
if (sid === MP.socket.id) {
me = " me";
}
$(".tribeResult table tbody").append(`
<tr class="player ${me}" sid="${sid}">
<td class="name">${user.name}</td>
<td class="pos"><span class="num">-</span><span class="points"></span></td>
<td class="crown"><i class="fas fa-crown" style="opacity:0"></i></td>
<td>
<div class="wpm">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</div>
<div class="acc">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</div>
</td>
<td>
<div class="raw">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</div>
<div class="con">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</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>
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";
}
$(".tribeResult table tbody").append(`
<tr class="player ${me}" sid="${sid}">
<td class="name">${user.name}</td>
<td class="pos"><span class="num">-</span><span class="points"></span></td>
<td class="crown"><i class="fas fa-crown" style="opacity:0"></i></td>
<td>
<div class="wpm">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</div>
</div>
<div class="graph hidden" style="height: 50px">
<canvas></canvas>
</div>
</td>
</tr>
`);
<div class="acc">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</div>
</td>
<td>
<div class="raw">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</div>
<div class="con">
<div class="text">-</div>
<div class="miniCrown"><i class="fas fa-crown"></i></div>
</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>
<div class="graph hidden" style="height: 50px">
<canvas></canvas>
</div>
</td>
</tr>
`);
}
});
$(".tribeResult").removeClass("hidden");
}
@ -808,6 +817,7 @@ MP.socket.on("mp_room_user_left", (data) => {
$(".pageTribe .lobby .lobbyButtons .startTestButton").removeClass("hidden");
$(".pageTribe .lobby .userReadyButton").addClass("hidden");
$(".pageTest #result #backToLobbyButton").removeClass("hidden");
$(".pageTest #result #readyButton").addClass("hidden");
$(".pageTest #result #nextTestButton").removeClass("hidden");
}
mp_refreshUserList();
@ -899,7 +909,11 @@ 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;
if (!MP.room.isReady && !MP.room.isLeader) {
changePage("tribe");
mp_changeActiveSubpage("lobby");
return;
}
mp_playSound("start");
MP.room.userGraphs = {};
MP.room.userFinished = false;
@ -1145,6 +1159,7 @@ MP.socket.on("mp_room_points", (data) => {
});
MP.socket.on("mp_room_back_to_lobby", (data) => {
$(".tribePlayers").addClass("hidden");
changePage("tribe");
});
@ -1152,6 +1167,11 @@ 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) {
if (bool === "isReady" && !data.values[bool] && !MP.room.isLeader) {
$(".pageTribe .lobby .lobbyButtons .userReadyButton").removeClass(
"hidden"
);
}
MP.room[bool] = data.values[bool];
}
});
@ -1334,7 +1354,9 @@ $(".pageTribe .lobby .lobbyButtons .startTestButton").click((e) => {
mp_startTest();
});
$(".pageTribe .lobby .lobbyButtons .userReadyButton").click((e) => {
$(
".pageTribe .lobby .lobbyButtons .userReadyButton, .pageTest #result #readyButton"
).click((e) => {
$(".pageTribe .lobby .lobbyButtons .userReadyButton").addClass("hidden");
MP.socket.emit("mp_user_ready");
});

2
src/sass/style.scss
View file

@ -717,6 +717,7 @@ a:hover {
gap: 1rem;
}
.notif {
user-select: none;
.icon {
color: var(--bg-color);
opacity: 0.5;
@ -2027,6 +2028,7 @@ key {
#restartTestButtonWithSameWordset,
#nextTestButton,
#backToLobbyButton,
#readyButton,
#practiseMissedWordsButton,
#goBackToLobbyButton {
position: relative;

10
static/index.html
View file

@ -1402,6 +1402,16 @@
</div>
<div class="ssWatermark hidden">monkeytype.com</div>
<div class="buttons">
<div
id="readyButton"
class="hidden"
aria-label="Ready"
data-balloon-pos="down"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-fw fa-check"></i>
</div>
<div
id="nextTestButton"
aria-label="Next test"