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

added consistency to the leaderboard,

Browse source 
updated the layout of the leaderboard
This commit is contained in:
Miodec 2021-03-02 00:35:47 +00:00
parent efd8283467
commit d29526a3ff
4 changed files with 297 additions and 246 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
functions/index.js
View file

@ -866,7 +866,9 @@ function validateResult(result) {
}
}
if (result.wpm.filter((w) => w > 400).length > 0) return false;
if (result.chartData.wpm !== undefined) {
if (result.chartData.wpm.filter((w) => w > 400).length > 0) return false;
}
if (result.consistency < 25) return false;
@ -2041,6 +2043,9 @@ class Leaderboard {
wpm: parseFloat(entry.wpm),
raw: parseFloat(entry.raw),
acc: parseFloat(entry.acc),
consistency: isNaN(parseInt(entry.consistency))
? "-"
: parseInt(entry.consistency),
mode: entry.mode,
mode2: parseInt(entry.mode2),
timestamp: entry.timestamp,
@ -2117,6 +2122,9 @@ class Leaderboard {
wpm: parseFloat(a.wpm),
raw: parseFloat(a.rawWpm),
acc: parseFloat(a.acc),
consistency: isNaN(parseInt(a.consistency))
? "-"
: parseInt(a.consistency),
mode: a.mode,
mode2: parseInt(a.mode2),
timestamp: a.timestamp,
@ -2132,6 +2140,9 @@ class Leaderboard {
wpm: parseFloat(a.wpm),
raw: parseFloat(a.rawWpm),
acc: parseFloat(a.acc),
consistency: isNaN(parseInt(a.consistency))
? "-"
: parseInt(a.consistency),
mode: a.mode,
mode2: parseInt(a.mode2),
timestamp: a.timestamp,
@ -2148,6 +2159,9 @@ class Leaderboard {
wpm: parseFloat(a.wpm),
raw: parseFloat(a.rawWpm),
acc: parseFloat(a.acc),
consistency: isNaN(parseInt(a.consistency))
? "-"
: parseInt(a.consistency),
mode: a.mode,
mode2: parseInt(a.mode2),
timestamp: a.timestamp,
@ -2164,6 +2178,9 @@ class Leaderboard {
wpm: parseFloat(a.wpm),
raw: parseFloat(a.rawWpm),
acc: parseFloat(a.acc),
consistency: isNaN(parseInt(a.consistency))
? "-"
: parseInt(a.consistency),
mode: a.mode,
mode2: parseInt(a.mode2),
timestamp: a.timestamp,

106
src/js/leaderboards.js
View file

@ -95,7 +95,7 @@ function updateLeaderboards() {
$("#leaderboardsWrapper table.daily tfoot").html(`
<tr>
<td><br><br></td>
<td colspan="5" style="text-align:center;">Not qualified</>
<td colspan="4" style="text-align:center;">Not qualified</>
<td><br><br></td>
</tr>
`);
@ -112,11 +112,24 @@ function updateLeaderboards() {
<tr>
<td>${dindex + 1}</td>
<td>You</td>
<td>${entry.wpm.toFixed(2)}</td>
<td>${entry.raw.toFixed(2)}</td>
<td>${entry.acc.toFixed(2)}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
<td class="alignRight">${entry.wpm.toFixed(
2
)}<br><div class="sub">${entry.acc.toFixed(2)}%</div></td>
<td class="alignRight">${entry.raw.toFixed(
2
)}<br><div class="sub">${
entry.consistency === "-"
? "-"
: entry.consistency.toFixed(2) + "%"
}</div></td>
<td class="alignRight">${entry.mode}<br><div class="sub">${
entry.mode2
}</div></td>
<td class="alignRight">${moment(entry.timestamp).format(
"DD MMM YYYY"
)}<br><div class='sub'>${moment(entry.timestamp).format(
"HH:mm"
)}</div></td>
</tr>
`);
}
@ -126,11 +139,20 @@ function updateLeaderboards() {
dindex === 0 ? '<i class="fas fa-fw fa-crown"></i>' : dindex + 1
}</td>
<td ${meClassString}>${entry.name}</td>
<td>${entry.wpm.toFixed(2)}</td>
<td>${entry.raw.toFixed(2)}</td>
<td>${entry.acc.toFixed(2)}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
<td class="alignRight">${entry.wpm.toFixed(
2
)}<br><div class="sub">${entry.acc.toFixed(2)}%</div></td>
<td class="alignRight">${entry.raw.toFixed(2)}<br><div class="sub">${
entry.consistency === "-" ? "-" : entry.consistency.toFixed(2) + "%"
}</div></td>
<td class="alignRight">${entry.mode}<br><div class="sub">${
entry.mode2
}</div></td>
<td class="alignRight">${moment(entry.timestamp).format(
"DD MMM YYYY"
)}<br><div class='sub'>${moment(entry.timestamp).format(
"HH:mm"
)}</div></td>
</tr>
`);
dindex++;
@ -144,11 +166,10 @@ function updateLeaderboards() {
<tr>
<td>${i + 1}</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-<br>-</td>
</tr>
`);
}
@ -157,7 +178,7 @@ function updateLeaderboards() {
$("#leaderboardsWrapper table.global tfoot").html(`
<tr>
<td><br><br></td>
<td colspan="5" style="text-align:center;">Not qualified</>
<td colspan="4" style="text-align:center;">Not qualified</>
<td><br><br></td>
</tr>
`);
@ -174,11 +195,24 @@ function updateLeaderboards() {
<tr>
<td>${index + 1}</td>
<td>You</td>
<td>${entry.wpm.toFixed(2)}</td>
<td>${entry.raw.toFixed(2)}</td>
<td>${entry.acc.toFixed(2)}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
<td class="alignRight">${entry.wpm.toFixed(
2
)}<br><div class="sub">${entry.acc.toFixed(2)}%</div></td>
<td class="alignRight">${entry.raw.toFixed(
2
)}<br><div class="sub">${
entry.consistency === "-"
? "-"
: entry.consistency.toFixed(2) + "%"
}</div></td>
<td class="alignRight">${entry.mode}<br><div class="sub">${
entry.mode2
}</div></td>
<td class="alignRight">${moment(entry.timestamp).format(
"DD MMM YYYY"
)}<br><div class='sub'>${moment(entry.timestamp).format(
"HH:mm"
)}</div></td>
</tr>
`);
}
@ -188,11 +222,20 @@ function updateLeaderboards() {
index === 0 ? '<i class="fas fa-fw fa-crown"></i>' : index + 1
}</td>
<td ${meClassString}>${entry.name}</td>
<td>${entry.wpm.toFixed(2)}</td>
<td>${entry.raw.toFixed(2)}</td>
<td>${entry.acc.toFixed(2)}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
<td class="alignRight">${entry.wpm.toFixed(
2
)}<br><div class="sub">${entry.acc.toFixed(2)}%</td>
<td class="alignRight">${entry.raw.toFixed(2)}<br><div class="sub">${
entry.consistency === "-" ? "-" : entry.consistency.toFixed(2) + "%"
}</div></td>
<td class="alignRight">${entry.mode}<br><div class="sub">${
entry.mode2
}</div></td>
<td class="alignRight">${moment(entry.timestamp).format(
"DD MMM YYYY"
)}<br><div class='sub'>${moment(entry.timestamp).format(
"HH:mm"
)}</div></td>
</tr>
`);
index++;
@ -206,11 +249,10 @@ function updateLeaderboards() {
<tr>
<td>${i + 1}</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-<br>-</td>
</tr>
`);
}

20
src/sass/style.scss
View file

@ -254,6 +254,14 @@ a:hover {
margin-bottom: 2rem;
font-size: 0.8rem;
.sub {
opacity: 0.5;
}
.alignRight {
text-align: right;
}
.titleAndTable {
display: grid;
@ -287,7 +295,7 @@ a:hover {
}
td {
padding: 0.25rem 0.5rem;
padding: 0.5rem 0.5rem;
&.me {
color: var(--main-color);
@ -305,6 +313,7 @@ a:hover {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
}
@ -327,6 +336,15 @@ a:hover {
z-index: 4;
}
}
tr {
td:first-child {
padding-left: 1rem;
}
td:last-child {
padding-right: 1rem;
}
}
}
}

398
static/index.html
View file

@ -177,24 +177,30 @@
<table class="global">
<thead>
<tr>
<td>#</td>
<td width="1%">#</td>
<td>name</td>
<td>wpm</td>
<td>raw</td>
<td>acc</td>
<td>test</td>
<td>date</td>
<td class="alignRight" width="15%">
wpm
<br />
<div class="sub">accuracy</div>
</td>
<td class="alignRight" width="15%">
raw
<br />
<div class="sub">consistency</div>
</td>
<td class="alignRight" width="13%">test</td>
<td class="alignRight" width="22%">date</td>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -203,11 +209,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -216,11 +221,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -229,11 +233,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -242,11 +245,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -255,11 +257,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -268,11 +269,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -281,11 +281,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -294,11 +293,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -307,11 +305,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -320,11 +317,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -333,11 +329,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -346,11 +341,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -359,11 +353,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -372,11 +365,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -385,11 +377,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -398,11 +389,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -411,11 +401,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -424,11 +413,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -437,11 +425,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -473,24 +460,30 @@
<table class="daily">
<thead>
<tr>
<td>#</td>
<td width="1%">#</td>
<td>name</td>
<td>wpm</td>
<td>raw</td>
<td>acc</td>
<td>test</td>
<td>date</td>
<td class="alignRight" width="15%">
wpm
<br />
<div class="sub">accuracy</div>
</td>
<td class="alignRight" width="15%">
raw
<br />
<div class="sub">consistency</div>
</td>
<td class="alignRight" width="13%">test</td>
<td class="alignRight" width="22%">date</td>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -499,11 +492,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -512,11 +504,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -525,11 +516,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -538,11 +528,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -551,11 +540,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -564,11 +552,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -577,11 +564,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -590,11 +576,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -603,11 +588,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -616,11 +600,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -629,11 +612,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -642,11 +624,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -655,11 +636,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -668,11 +648,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -681,11 +660,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -694,11 +672,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -707,11 +684,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -720,11 +696,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-
@ -733,11 +708,10 @@
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">-</td>
<td class="alignRight">
-
<br />
-