mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-26 00:37:37 +08:00
updated layout of account page pb tables
This commit is contained in:
Jack
parent
46b467eaa4
commit
541d77836f
3 changed files with 157 additions and 92 deletions
|
|
@ -71,80 +71,96 @@ export function update() {
|
|||
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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>15</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>30</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>30</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>60</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>120</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
</tr>`;
|
||||
}
|
||||
$(".pageAccount .timePbTable tbody").html(text);
|
||||
|
|
@ -154,80 +170,96 @@ export function update() {
|
|||
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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>10</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>25</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>50</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></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>
|
||||
<td>
|
||||
${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
|
||||
</td>
|
||||
<td>${pbData.wpm}<br><span class="sub">${
|
||||
pbData.acc === undefined ? "-" : pbData.acc + "%"
|
||||
}</span></td>
|
||||
<td>${pbData.raw}<br><span class="sub">${
|
||||
pbData.consistency === undefined ? "-" : pbData.consistency + "%"
|
||||
}</span></td>
|
||||
<td>${moment(pbData.timestamp).format(
|
||||
"DD MMM YYYY"
|
||||
)}<br><div class='sub'>${moment(pbData.timestamp).format(
|
||||
"HH:mm"
|
||||
)}</div></td>
|
||||
</tr>`;
|
||||
} catch (e) {
|
||||
text += `<tr>
|
||||
<td>100</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
<td>-<br><span class="sub">-</span></td>
|
||||
</tr>`;
|
||||
}
|
||||
$(".pageAccount .wordsPbTable tbody").html(text);
|
||||
|
|
|
|||
|
|
@ -3490,6 +3490,19 @@ key {
|
|||
gap: 2rem;
|
||||
}
|
||||
|
||||
.timePbTable,
|
||||
.wordsPbTable {
|
||||
.sub {
|
||||
opacity: 0.5;
|
||||
}
|
||||
td {
|
||||
text-align: right;
|
||||
}
|
||||
tbody td:nth-child(1) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.topFilters .buttons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
|
|
|||
|
|
@ -3752,16 +3752,29 @@
|
|||
<div class="group createdDate">Account created on -</div>
|
||||
<div class="group">
|
||||
<div class="title">personal bests</div>
|
||||
<div style="display: grid; grid-auto-flow: column; gap: 1rem">
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
"
|
||||
>
|
||||
<div class="titleAndTable timePbTable">
|
||||
<table width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>time</td>
|
||||
<td>wpm</td>
|
||||
<td>raw</td>
|
||||
<td>accuracy</td>
|
||||
<td>consistency</td>
|
||||
<td width="1%">time</td>
|
||||
<td width="33%">
|
||||
wpm
|
||||
<br />
|
||||
<span class="sub">accuracy</span>
|
||||
</td>
|
||||
<td width="33%">
|
||||
raw
|
||||
<br />
|
||||
<span class="sub">consistency</span>
|
||||
</td>
|
||||
<td width="33%">date</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -3796,11 +3809,18 @@
|
|||
<table width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>words</td>
|
||||
<td>wpm</td>
|
||||
<td>raw</td>
|
||||
<td>accuracy</td>
|
||||
<td>consistency</td>
|
||||
<td width="1%">words</td>
|
||||
<td width="33%">
|
||||
wpm
|
||||
<br />
|
||||
<span class="sub">accuracy</span>
|
||||
</td>
|
||||
<td width="33%">
|
||||
raw
|
||||
<br />
|
||||
<span class="sub">consistency</span>
|
||||
</td>
|
||||
<td width="33%">date</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue