mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-03-11 06:05:16 +08:00
added leaderboards skeleton
This commit is contained in:
Jack
parent
2b3eaf1696
commit
5f2dcecab3
4 changed files with 376 additions and 2 deletions
|
|
@ -154,6 +154,91 @@ a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
#leaderboardsWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5rem 0;
|
||||
|
||||
#leaderboards {
|
||||
width: 75vw;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness);
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-areas: "title buttons"
|
||||
"tables tables";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
.mainTitle {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.tables {
|
||||
grid-area: tables;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
td {
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
thead {
|
||||
color: var(--sub-color);
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
tbody {
|
||||
color: var(--text-color);
|
||||
|
||||
tr:nth-child(odd) td {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-area: buttons;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-self: center;
|
||||
|
||||
.buttonGroup {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 1rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#tagsWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -52,6 +52,249 @@
|
|||
<div class="button confirmButton"><i class="fas fa-check"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leaderboardsWrapper">
|
||||
<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>
|
||||
<div class="buttonGroup">
|
||||
<div class="button">10</div>
|
||||
<div class="button active">100</div>
|
||||
</div>
|
||||
<div class="buttonGroup hidden">
|
||||
<div class="button">15</div>
|
||||
<div class="button">60</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tables">
|
||||
<div class="titleAndTable">
|
||||
<div class="title">
|
||||
Overall
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>#</td>
|
||||
<td>name</td>
|
||||
<td>wpm</td>
|
||||
<td>raw</td>
|
||||
<td>acc</td>
|
||||
<td>test</td>
|
||||
<td>date</td>
|
||||
</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)
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>#</td>
|
||||
<td>name</td>
|
||||
<td>wpm</td>
|
||||
<td>raw</td>
|
||||
<td>acc</td>
|
||||
<td>test</td>
|
||||
<td>date</td>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="versionHistoryWrapper" class="hidden">
|
||||
<div id="versionHistory">
|
||||
<div class="tip">Click anywhere to dismiss</div>
|
||||
|
|
@ -97,6 +340,11 @@
|
|||
<i class="fas fa-fw fa-keyboard"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-button leaderboards" tabindex="2" onclick="this.blur();">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-list-ol"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-button" tabindex="2" href="/about" onclick="this.blur();">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-info"></i>
|
||||
|
|
@ -832,6 +1080,7 @@
|
|||
<script src="js/db.js?v=25"></script>
|
||||
<script src="js/userconfig.js?v=25"></script>
|
||||
<script src="js/commandline.js?v=25"></script>
|
||||
<script src="js/leaderboards.js?v=25"></script>
|
||||
<script src="js/settings.js?v=25"></script>
|
||||
<script src="js/account.js?v=25"></script>
|
||||
<script src="js/script.js?v=25"></script>
|
||||
|
|
|
|||
36
public/js/leaderboards.js
Normal file
36
public/js/leaderboards.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
function showLeaderboards() {
|
||||
if ($("#leaderboardsWrapper").hasClass("hidden")) {
|
||||
$("#leaderboardsWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function hideLeaderboards() {
|
||||
$("#leaderboardsWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
100,
|
||||
() => {
|
||||
$("#leaderboardsWrapper").addClass("hidden");
|
||||
}
|
||||
);
|
||||
focusWords();
|
||||
}
|
||||
|
||||
$("#leaderboardsWrapper").click((e) => {
|
||||
if ($(e.target).attr("id") === "leaderboardsWrapper") {
|
||||
hideLeaderboards();
|
||||
}
|
||||
});
|
||||
|
|
@ -1979,8 +1979,12 @@ $(document).on("click", "#top .config .mode .text-button", (e) => {
|
|||
|
||||
$(document).on("click", "#top #menu .icon-button", (e) => {
|
||||
if ($(e.currentTarget).hasClass("discord")) return;
|
||||
href = $(e.currentTarget).attr("href");
|
||||
changePage(href.replace("/", ""));
|
||||
if ($(e.currentTarget).hasClass("leaderboards")) {
|
||||
showLeaderboards();
|
||||
} else {
|
||||
href = $(e.currentTarget).attr("href");
|
||||
changePage(href.replace("/", ""));
|
||||
}
|
||||
});
|
||||
|
||||
$(window).on("popstate", (e) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue