monkeytype/public/js/leaderboards.js

281 lines
8.1 KiB
JavaScript
Raw Normal View History

let currentLeaderboard = "time_15";
2020-07-04 03:10:40 +08:00
2020-07-04 02:30:05 +08:00
function showLeaderboards() {
if ($("#leaderboardsWrapper").hasClass("hidden")) {
$("#leaderboardsWrapper")
.stop(true, true)
.css("opacity", 0)
.removeClass("hidden")
.animate(
{
opacity: 1,
},
2020-07-04 03:10:40 +08:00
125,
() => {
updateLeaderboards();
}
2020-07-04 02:30:05 +08:00
);
}
}
function hideLeaderboards() {
$("#leaderboardsWrapper")
.stop(true, true)
.css("opacity", 1)
.animate(
{
opacity: 0,
},
100,
() => {
$("#leaderboardsWrapper").addClass("hidden");
}
);
focusWords();
}
2020-07-04 03:10:40 +08:00
function updateLeaderboards() {
$("#leaderboardsWrapper .buttons .button").removeClass("active");
2020-07-04 03:10:40 +08:00
$(
`#leaderboardsWrapper .buttons .button[board=${currentLeaderboard}]`
2020-07-04 03:10:40 +08:00
).addClass("active");
// $(
// `#leaderboardsWrapper .leaderboardMode .button[mode=${currentLeaderboard.mode}]`
// ).addClass("active");
// $("#leaderboardsWrapper .leaderboardWords .button").removeClass("active");
// $(
// `#leaderboardsWrapper .leaderboardWords .button[words=${currentLeaderboard.words}]`
// ).addClass("active");
// $("#leaderboardsWrapper .leaderboardTime .button").removeClass("active");
// $(
// `#leaderboardsWrapper .leaderboardTime .button[time=${currentLeaderboard.time}]`
// ).addClass("active");
let boardinfo = currentLeaderboard.split("_");
// if (boardinfo[0] === "time") {
// $("#leaderboardsWrapper .leaderboardWords").addClass("hidden");
// $("#leaderboardsWrapper .leaderboardTime").removeClass("hidden");
// } else if (currentLeaderboard.mode === "words") {
// $("#leaderboardsWrapper .leaderboardWords").removeClass("hidden");
// $("#leaderboardsWrapper .leaderboardTime").addClass("hidden");
// }
// let mode2;
// if (currentLeaderboard.mode === "words") {
// mode2 = currentLeaderboard.words;
// } else if (currentLeaderboard.mode === "time") {
// mode2 = currentLeaderboard.time;
// }
2020-07-04 03:10:40 +08:00
2020-07-04 21:15:43 +08:00
let uid = null;
if (firebase.auth().currentUser !== null) {
uid = firebase.auth().currentUser.uid;
}
2020-07-04 03:10:40 +08:00
showBackgroundLoader();
2020-07-04 06:42:07 +08:00
Promise.all([
firebase.functions().httpsCallable("getLeaderboard")({
mode: boardinfo[0],
mode2: boardinfo[1],
2020-07-04 06:42:07 +08:00
type: "daily",
2020-07-04 21:15:43 +08:00
uid: uid,
2020-07-04 06:42:07 +08:00
}),
firebase.functions().httpsCallable("getLeaderboard")({
mode: boardinfo[0],
mode2: boardinfo[1],
2020-07-04 06:42:07 +08:00
type: "global",
2020-07-04 21:15:43 +08:00
uid: uid,
2020-07-04 06:42:07 +08:00
}),
])
.then((lbdata) => {
hideBackgroundLoader();
let dailyData = lbdata[0].data;
let globalData = lbdata[1].data;
//daily
2020-07-06 07:58:03 +08:00
let diffAsDate = new Date(dailyData.resetTime - Date.now());
2020-07-06 00:56:16 +08:00
let diffHours = diffAsDate.getUTCHours();
let diffMinutes = diffAsDate.getUTCMinutes();
let diffSeconds = diffAsDate.getUTCSeconds();
let resetString = "";
if (diffHours > 0) {
resetString = `resets in ${diffHours} ${
diffHours == 1 ? "hour" : "hours"
2020-07-06 00:56:16 +08:00
} ${diffMinutes} ${diffMinutes == 1 ? "minute" : "minutes"}
`;
} else if (diffMinutes > 0) {
resetString = `resets in ${diffMinutes} ${
diffMinutes == 1 ? "minute" : "minutes"
2020-07-06 07:05:26 +08:00
} ${diffSeconds} ${diffSeconds == 1 ? "second" : "seconds"}`;
} else if (diffSeconds > 0) {
resetString = `resets in ${diffSeconds} ${
diffSeconds == 1 ? "second" : "seconds"
}`;
}
$("#leaderboardsWrapper .subtitle").text(resetString);
$("#leaderboardsWrapper table.daily tfoot").html(`
<tr>
<td>-</td>
<td>You</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
</tr>
`);
//daily
$("#leaderboardsWrapper table.daily tbody").empty();
2020-07-20 22:18:37 +08:00
let dindex = 0;
if (dailyData.board !== undefined) {
2020-07-20 22:18:37 +08:00
dailyData.board.forEach((entry) => {
if (entry.hidden) return;
let meClassString = "";
if (entry.currentUser) {
meClassString = ' class="me"';
$("#leaderboardsWrapper table.daily tfoot").html(`
<tr>
2020-07-20 22:18:37 +08:00
<td>${dindex + 1}</td>
<td>You</td>
<td>${entry.wpm}</td>
<td>${entry.raw}</td>
<td>${entry.acc}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
</tr>
`);
}
$("#leaderboardsWrapper table.daily tbody").append(`
2020-07-04 06:42:07 +08:00
<tr>
<td>${
2020-07-20 22:18:37 +08:00
dindex === 0 ? '<i class="fas fa-fw fa-crown"></i>' : dindex + 1
}</td>
2020-07-04 21:15:43 +08:00
<td ${meClassString}>${entry.name}</td>
2020-07-04 06:42:07 +08:00
<td>${entry.wpm}</td>
<td>${entry.raw}</td>
<td>${entry.acc}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
</tr>
`);
2020-07-20 22:18:37 +08:00
dindex++;
});
}
let lenDaily = 0;
if (dailyData.board !== undefined) lenDaily = dailyData.board.length;
if (dailyData.length === 0 || lenDaily !== dailyData.size) {
for (let i = lenDaily; i < dailyData.size; i++) {
$("#leaderboardsWrapper table.daily tbody").append(`
2020-07-04 08:54:55 +08:00
<tr>
<td>${i + 1}</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
</tr>
`);
}
2020-07-04 08:54:55 +08:00
}
$("#leaderboardsWrapper table.global tfoot").html(`
<tr>
<td>-</td>
<td>You</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
</tr>
`);
//global
$("#leaderboardsWrapper table.global tbody").empty();
2020-07-20 22:18:37 +08:00
let index = 0;
if (globalData.board !== undefined) {
2020-07-20 22:18:37 +08:00
globalData.board.forEach((entry) => {
if (entry.hidden) return;
let meClassString = "";
if (entry.currentUser) {
meClassString = ' class="me"';
$("#leaderboardsWrapper table.global tfoot").html(`
<tr>
<td>${index + 1}</td>
<td>You</td>
<td>${entry.wpm}</td>
<td>${entry.raw}</td>
<td>${entry.acc}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
</tr>
`);
}
$("#leaderboardsWrapper table.global tbody").append(`
2020-07-04 06:42:07 +08:00
<tr>
<td>${
index === 0 ? '<i class="fas fa-fw fa-crown"></i>' : index + 1
}</td>
2020-07-04 21:15:43 +08:00
<td ${meClassString}>${entry.name}</td>
2020-07-04 06:42:07 +08:00
<td>${entry.wpm}</td>
<td>${entry.raw}</td>
<td>${entry.acc}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
</tr>
`);
2020-07-20 22:18:37 +08:00
index++;
});
}
let lenGlobal = 0;
if (globalData.board !== undefined) lenGlobal = globalData.board.length;
if (globalData.length === 0 || lenGlobal !== globalData.size) {
for (let i = lenGlobal; i < globalData.size; i++) {
$("#leaderboardsWrapper table.global tbody").append(`
2020-07-04 09:44:35 +08:00
<tr>
<td>${i + 1}</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
</tr>
`);
}
}
})
.catch((e) => {
showNotification("Something went wrong", 3000);
});
2020-07-04 03:10:40 +08:00
}
2020-07-04 02:30:05 +08:00
$("#leaderboardsWrapper").click((e) => {
if ($(e.target).attr("id") === "leaderboardsWrapper") {
hideLeaderboards();
}
});
2020-07-04 03:10:40 +08:00
$("#leaderboardsWrapper .buttons .button").click((e) => {
currentLeaderboard = $(e.target).attr("board");
2020-07-04 03:10:40 +08:00
updateLeaderboards();
});
// $("#leaderboardsWrapper .leaderboardWords .button").click((e) => {
// currentLeaderboard.words = $(e.target).attr("words");
// updateLeaderboards();
// });
2020-07-04 03:10:40 +08:00
// $("#leaderboardsWrapper .leaderboardTime .button").click((e) => {
// currentLeaderboard.time = $(e.target).attr("time");
// updateLeaderboards();
// });