monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-05 06:54:36 +08:00
Code Issues Projects Releases Packages Wiki Activity

added personal bests to the account page

Browse source
This commit is contained in:
Jack 2020-09-13 22:48:32 +01:00
parent 3c956cbd54
commit 3e099e265e
3 changed files with 289 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
public/css/style.scss
View file

@ -2188,6 +2188,17 @@ key {
justify-self: center;
}
.doublegroup{
display: grid;
grid-auto-flow: column;
gap: 1rem;
.titleAndTable{
.title{
color: var(--sub-color);
}
}
}
.triplegroup {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@ -2292,7 +2303,7 @@ key {
color: var(--text-color);
td {
padding: 0.5rem 0.25rem;
padding: 0.5rem 0.5rem;
}
thead {

83
public/index.html
View file

@ -2473,6 +2473,89 @@
<div class="val">-</div>
</div>
</div>
<div class="group">
<div class="title">personal bests</div>
<div style="display: grid;
grid-auto-flow: column;
gap: 1rem;">
<div class="titleAndTable timePbTable">
<table width="100%">
<thead>
<tr>
<td>time</td>
<td>wpm</td>
<td>raw</td>
<td>accuracy</td>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>30</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>60</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>120</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<div class="titleAndTable wordsPbTable">
<table width="100%">
<thead>
<tr>
<td>words</td>
<td>wpm</td>
<td>raw</td>
<td>accuracy</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>25</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>50</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>100</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="group topFilters">
<!-- <div
class="button"

194
public/js/account.js
View file

@ -1433,6 +1433,199 @@ $(".pageAccount .filterButtons .buttonsAndTitle .buttons").click(
}
);
function fillPbTables() {
$(".pageAccount .timePbTable tbody").html(`
<tr>
<td>15</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>30</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>60</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>120</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
`);
$(".pageAccount .wordsPbTable tbody").html(`
<tr>
<td>10</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>25</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>50</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>100</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
`);
const pb = dbSnapshot.personalBests;
let pbData;
let text;
text = "";
try {
pbData = pb.time[15].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>15</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>15</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
try {
pbData = pb.time[30].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>30</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>30</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
try {
pbData = pb.time[60].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>60</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>60</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
try {
pbData = pb.time[120].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>120</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>120</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
$(".pageAccount .timePbTable tbody").html(text);
text = "";
try {
pbData = pb.words[10].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>10</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>10</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
try {
pbData = pb.words[25].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>25</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>25</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
try {
pbData = pb.words[50].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>50</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>50</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
try {
pbData = pb.words[100].sort((a, b) => b.wpm - a.wpm)[0];
text += `<tr>
<td>100</td>
<td>${pbData.wpm}</td>
<td>${pbData.raw === undefined ? '-' : pbData.raw}</td>
<td>${pbData.acc === undefined ? '-' : pbData.acc+"%"}</td>
</tr>`;
} catch (e) {
text += `<tr>
<td>100</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>`;
}
$(".pageAccount .wordsPbTable tbody").html(text);
}
let filteredResults = [];
let visibleTableLines = 0;
@ -1596,6 +1789,7 @@ function refreshAccountPage() {
function cont() {
refreshThemeColorObject();
refreshGlobalStats();
fillPbTables();
let chartData = [];
let wpmChartData = [];