monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-03-11 06:05:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

leaderboard now pull data from db

Browse source
This commit is contained in:
Jack 2020-07-03 20:10:40 +01:00
parent ee2a5436d5
commit 208a36e84a
3 changed files with 102 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/css/style.scss
View file

@ -135,6 +135,7 @@ a:hover {
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.38, 0.16, 0.57, 0.82);
z-index: 9999;
}
@keyframes loader {

211
public/index.html
View file

@ -52,31 +52,31 @@
<div class="button confirmButton"><i class="fas fa-check"></i></div>
</div>
</div>
<div id="leaderboardsWrapper">
<div id="leaderboardsWrapper" class="hidden">
<div id="leaderboards">
<div class="mainTitle">
Leaderboards
</div>
<div class="buttons">
<div class="buttonGroup">
<div class="button active">words</div>
<div class="button">time</div>
<div class="buttonGroup leaderboardMode">
<div class="button active" mode="words">words</div>
<div class="button" mode="time">time</div>
</div>
<div class="buttonGroup">
<div class="button">10</div>
<div class="button active">100</div>
<div class="buttonGroup leaderboardWords">
<div class="button active" words="10">10</div>
<div class="button" words="100">100</div>
</div>
<div class="buttonGroup hidden">
<div class="button">15</div>
<div class="button">60</div>
<div class="buttonGroup leaderboardTime hidden">
<div class="button" time="15">15</div>
<div class="button" time="60">60</div>
</div>
</div>
<div class="tables">
<div class="titleAndTable">
<div class="title">
Overall
Global
</div>
<table>
<table class="global">
<thead>
<tr>
<td>#</td>
@ -89,102 +89,13 @@
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
</tbody>
</table>
</div>
<div class="titleAndTable">
<div class="title">
Daily (30-05-2020)
Daily
</div>
<table>
<thead>
@ -199,98 +110,10 @@
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>100</td>
<td>110</td>
<td>95</td>
<td>words10</td>
<td>now</td>
</tr>
</tbody>
</table>
soon
</div>
</div>
</div>
@ -342,7 +165,7 @@
</div>
<div class="icon-button leaderboards" tabindex="2" onclick="this.blur();">
<div class="icon">
<i class="fas fa-fw fa-list-ol"></i>
<i class="fas fa-fw fa-crown"></i>
</div>
</div>
<div class="icon-button" tabindex="2" href="/about" onclick="this.blur();">

85
public/js/leaderboards.js
View file

@ -1,3 +1,9 @@
let currentLeaderboard = {
mode: "words",
words: "10",
time: "15",
};
function showLeaderboards() {
if ($("#leaderboardsWrapper").hasClass("hidden")) {
$("#leaderboardsWrapper")
@ -8,7 +14,10 @@ function showLeaderboards() {
{
opacity: 1,
},
125
125,
() => {
updateLeaderboards();
}
);
}
}
@ -29,8 +38,82 @@ function hideLeaderboards() {
focusWords();
}
function updateLeaderboards() {
$("#leaderboardsWrapper .leaderboardMode .button").removeClass("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");
if (currentLeaderboard.mode === "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;
}
showBackgroundLoader();
firebase
.functions()
.httpsCallable("getLeaderboard")({
mode: currentLeaderboard.mode,
mode2: mode2,
type: "global",
})
.then((data) => {
console.log(data);
hideBackgroundLoader();
$("#leaderboardsWrapper table.global tbody").empty();
data.data.board.forEach((entry, index) => {
$("#leaderboardsWrapper table.global tbody").append(`
<tr>
<td>${index + 1}</td>
<td>${entry.name}</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").click((e) => {
if ($(e.target).attr("id") === "leaderboardsWrapper") {
hideLeaderboards();
}
});
$("#leaderboardsWrapper .leaderboardMode .button").click((e) => {
currentLeaderboard.mode = $(e.target).attr("mode");
updateLeaderboards();
});
$("#leaderboardsWrapper .leaderboardWords .button").click((e) => {
currentLeaderboard.words = $(e.target).attr("words");
updateLeaderboards();
});
$("#leaderboardsWrapper .leaderboardTime .button").click((e) => {
currentLeaderboard.time = $(e.target).attr("time");
updateLeaderboards();
});