mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-03-12 23:20:25 +08:00
reworked leaderboards:
requesting rank separately, loading 20 at once (will be 100 when live) loading more once scrolled to the botom
This commit is contained in:
Jack
parent
828e219e64
commit
0b1e7cd980
1 changed files with 161 additions and 140 deletions
|
|
@ -5,6 +5,21 @@ import axiosInstance from "./axios-instance";
|
|||
|
||||
let currentLeaderboard = "time_15";
|
||||
|
||||
let currentData = {
|
||||
15: [],
|
||||
60: [],
|
||||
};
|
||||
|
||||
let currentRank = {
|
||||
15: {},
|
||||
60: {},
|
||||
};
|
||||
|
||||
let currentlyShown = {
|
||||
15: 0,
|
||||
60: 0,
|
||||
};
|
||||
|
||||
export function hide() {
|
||||
$("#leaderboardsWrapper")
|
||||
.stop(true, true)
|
||||
|
|
@ -15,8 +30,9 @@ export function hide() {
|
|||
},
|
||||
100,
|
||||
() => {
|
||||
$("#leaderboardsWrapper table.left tbody").empty();
|
||||
$("#leaderboardsWrapper table.right tbody").empty();
|
||||
clearTable(15);
|
||||
clearTable(60);
|
||||
reset();
|
||||
$("#leaderboardsWrapper").addClass("hidden");
|
||||
}
|
||||
);
|
||||
|
|
@ -28,18 +44,30 @@ function update() {
|
|||
`#leaderboardsWrapper .buttons .button[board=${currentLeaderboard}]`
|
||||
).addClass("active");
|
||||
|
||||
let loggedInUserName = DB.getSnapshot()?.name;
|
||||
|
||||
Loader.show();
|
||||
Promise.all([
|
||||
axiosInstance.get(`/leaderboards`, {
|
||||
axiosInstance.get(`/leaderboard`, {
|
||||
params: {
|
||||
language: "english",
|
||||
mode: "time",
|
||||
mode2: "15",
|
||||
},
|
||||
}),
|
||||
axiosInstance.get(`/leaderboards`, {
|
||||
axiosInstance.get(`/leaderboard`, {
|
||||
params: {
|
||||
language: "english",
|
||||
mode: "time",
|
||||
mode2: "60",
|
||||
},
|
||||
}),
|
||||
axiosInstance.get(`/leaderboard/rank`, {
|
||||
params: {
|
||||
language: "english",
|
||||
mode: "time",
|
||||
mode2: "15",
|
||||
},
|
||||
}),
|
||||
axiosInstance.get(`/leaderboard/rank`, {
|
||||
params: {
|
||||
language: "english",
|
||||
mode: "time",
|
||||
|
|
@ -49,138 +77,17 @@ function update() {
|
|||
])
|
||||
.then((lbdata) => {
|
||||
Loader.hide();
|
||||
let time15data = lbdata[0].data;
|
||||
let time60data = lbdata[1].data;
|
||||
currentData[15] = lbdata[0].data;
|
||||
currentData[60] = lbdata[1].data;
|
||||
currentRank[15] = lbdata[2].data;
|
||||
currentRank[60] = lbdata[3].data;
|
||||
|
||||
$("#leaderboardsWrapper table.left tfoot").html(`
|
||||
<tr>
|
||||
<td><br><br></td>
|
||||
<td colspan="4" style="text-align:center;">Not qualified</>
|
||||
<td><br><br></td>
|
||||
</tr>
|
||||
`);
|
||||
//left
|
||||
$("#leaderboardsWrapper table.left tbody").empty();
|
||||
let dindex = 0;
|
||||
if (time15data !== undefined) {
|
||||
time15data.forEach((entry) => {
|
||||
if (entry.hidden) return;
|
||||
let meClassString = "";
|
||||
if (entry.name == loggedInUserName) {
|
||||
meClassString = ' class="me"';
|
||||
$("#leaderboardsWrapper table.left tfoot").html(`
|
||||
<tr>
|
||||
<td>${dindex + 1}</td>
|
||||
<td>You</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 === "-"
|
||||
? "-"
|
||||
: entry.consistency.toFixed(2) + "%"
|
||||
}</div></td>
|
||||
<td class="alignRight">time<br><div class="sub">15</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>
|
||||
`);
|
||||
}
|
||||
$("#leaderboardsWrapper table.left tbody").append(`
|
||||
<tr>
|
||||
<td>${
|
||||
dindex === 0 ? '<i class="fas fa-fw fa-crown"></i>' : dindex + 1
|
||||
}</td>
|
||||
<td ${meClassString}>${entry.name}</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 === "-"
|
||||
? "-"
|
||||
: entry.consistency.toFixed(2) + "%"
|
||||
}</div></td>
|
||||
<td class="alignRight">time<br><div class="sub">15</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++;
|
||||
});
|
||||
}
|
||||
|
||||
$("#leaderboardsWrapper table.right tfoot").html(`
|
||||
<tr>
|
||||
<td><br><br></td>
|
||||
<td colspan="4" style="text-align:center;">Not qualified</>
|
||||
<td><br><br></td>
|
||||
</tr>
|
||||
`);
|
||||
//global
|
||||
$("#leaderboardsWrapper table.right tbody").empty();
|
||||
let index = 0;
|
||||
if (time60data !== undefined) {
|
||||
time60data.forEach((entry) => {
|
||||
if (entry.hidden) return;
|
||||
let meClassString = "";
|
||||
if (entry.name == loggedInUserName) {
|
||||
meClassString = ' class="me"';
|
||||
$("#leaderboardsWrapper table.right tfoot").html(`
|
||||
<tr>
|
||||
<td>${index + 1}</td>
|
||||
<td>You</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 === "-"
|
||||
? "-"
|
||||
: entry.consistency.toFixed(2) + "%"
|
||||
}</div></td>
|
||||
<td class="alignRight">time<br><div class="sub">60</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>
|
||||
`);
|
||||
}
|
||||
$("#leaderboardsWrapper table.right tbody").append(`
|
||||
<tr>
|
||||
<td>${
|
||||
index === 0 ? '<i class="fas fa-fw fa-crown"></i>' : index + 1
|
||||
}</td>
|
||||
<td ${meClassString}>${entry.name}</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 === "-"
|
||||
? "-"
|
||||
: entry.consistency.toFixed(2) + "%"
|
||||
}</div></td>
|
||||
<td class="alignRight">time<br><div class="sub">60</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++;
|
||||
});
|
||||
}
|
||||
clearTable(15);
|
||||
clearTable(60);
|
||||
updateFooter(15);
|
||||
updateFooter(60);
|
||||
loadMore(15);
|
||||
loadMore(60);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
|
|
@ -191,6 +98,112 @@ function update() {
|
|||
});
|
||||
}
|
||||
|
||||
export function clearTable(lb) {
|
||||
if (lb === 15) {
|
||||
$("#leaderboardsWrapper table.left tbody").empty();
|
||||
} else if (lb === 60) {
|
||||
$("#leaderboardsWrapper table.right tbody").empty();
|
||||
}
|
||||
}
|
||||
|
||||
export function loadMore(lb) {
|
||||
let side;
|
||||
if (lb === 15) {
|
||||
side = "left";
|
||||
} else {
|
||||
side = "right";
|
||||
}
|
||||
let loggedInUserName = DB.getSnapshot()?.name;
|
||||
let loaded = 0;
|
||||
for (let i = currentlyShown[lb]; i < currentlyShown[lb] + 20; i++) {
|
||||
let entry = currentData[lb][i];
|
||||
if (!entry) {
|
||||
break;
|
||||
}
|
||||
if (entry.hidden) return;
|
||||
let meClassString = "";
|
||||
if (entry.name == loggedInUserName) {
|
||||
meClassString = ' class="me"';
|
||||
}
|
||||
$(`#leaderboardsWrapper table.${side} tbody`).append(`
|
||||
<tr>
|
||||
<td>${
|
||||
entry.rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : entry.rank
|
||||
}</td>
|
||||
<td ${meClassString}>${entry.name}</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 === "-"
|
||||
? "-"
|
||||
: entry.consistency.toFixed(2) + "%"
|
||||
}</div></td>
|
||||
<td class="alignRight">time<br><div class="sub">15</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>
|
||||
`);
|
||||
loaded++;
|
||||
}
|
||||
currentlyShown[lb] += loaded;
|
||||
}
|
||||
|
||||
export function updateFooter(lb) {
|
||||
let side;
|
||||
if (lb === 15) {
|
||||
side = "left";
|
||||
} else {
|
||||
side = "right";
|
||||
}
|
||||
$(`#leaderboardsWrapper table.${side} tfoot`).html(`
|
||||
<tr>
|
||||
<td><br><br></td>
|
||||
<td colspan="4" style="text-align:center;">Not qualified</>
|
||||
<td><br><br></td>
|
||||
</tr>
|
||||
`);
|
||||
if (currentRank[lb]) {
|
||||
let entry = currentRank[lb];
|
||||
$(`#leaderboardsWrapper table.${side} tfoot`).html(`
|
||||
<tr>
|
||||
<td>${entry.rank}</td>
|
||||
<td>You</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 === "-"
|
||||
? "-"
|
||||
: entry.consistency.toFixed(2) + "%"
|
||||
}</div></td>
|
||||
<td class="alignRight">time<br><div class="sub">15</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>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
currentData = {
|
||||
15: [],
|
||||
60: [],
|
||||
};
|
||||
|
||||
currentRank = {
|
||||
15: {},
|
||||
60: {},
|
||||
};
|
||||
|
||||
currentlyShown = {
|
||||
15: 0,
|
||||
60: 0,
|
||||
};
|
||||
}
|
||||
|
||||
export function show() {
|
||||
if ($("#leaderboardsWrapper").hasClass("hidden")) {
|
||||
$("#leaderboardsWrapper")
|
||||
|
|
@ -215,7 +228,15 @@ $("#leaderboardsWrapper").click((e) => {
|
|||
}
|
||||
});
|
||||
|
||||
$("#leaderboardsWrapper .buttons .button").click((e) => {
|
||||
currentLeaderboard = $(e.target).attr("board");
|
||||
update();
|
||||
// $("#leaderboardsWrapper .buttons .button").click((e) => {
|
||||
// currentLeaderboard = $(e.target).attr("board");
|
||||
// update();
|
||||
// });
|
||||
|
||||
$("#leaderboardsWrapper #leaderboards .leftTableWrapper").scroll((e) => {
|
||||
let elem = $(e.currentTarget);
|
||||
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
|
||||
loadMore(15);
|
||||
console.log("scrolled to the bottom");
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue