You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
6.0 KiB
JavaScript
172 lines
6.0 KiB
JavaScript
// Strict Mode
|
|
"use strict";
|
|
|
|
// Imports
|
|
import authentication from "../../authentication/authentication.js";
|
|
import database from "../../database/database.js";
|
|
import styles from "../../styles/leaderboards.module.css";
|
|
import Header from "../../components/header/header.jsx";
|
|
import Title from "../../components/title/title.jsx";
|
|
import Footer from "../../components/footer/footer.jsx";
|
|
|
|
// Get Server Side Props
|
|
export async function getServerSideProps ( ctx ) {
|
|
try {
|
|
await authentication.getUser(ctx.req, ctx.res);
|
|
const stats = await database.getAllStats();
|
|
const pageStats = [];
|
|
let previousPage = false;
|
|
let nextPage = false;
|
|
if (ctx.query.page != 1) {
|
|
previousPage = Number(ctx.query.page) - 1;
|
|
};
|
|
for (let stat = ((ctx.query.page - 1) * 4); stat < stats.length; stat++) {
|
|
if (stat <= ((ctx.query.page - 1) * 4) + 3) {
|
|
pageStats.push(stats[stat]);
|
|
} else {
|
|
nextPage = Number(ctx.query.page) + 1;
|
|
};
|
|
};
|
|
if (pageStats.length == 0) {
|
|
return {
|
|
redirect: {
|
|
permanent: false,
|
|
destination: "/leaderboards/1"
|
|
}
|
|
};
|
|
};
|
|
return {
|
|
props: {
|
|
pageStats: JSON.stringify(pageStats),
|
|
previousPage: previousPage,
|
|
nextPage: nextPage
|
|
}
|
|
};
|
|
} catch {
|
|
return {
|
|
redirect: {
|
|
permanent: false,
|
|
destination: "/leaderboards/1"
|
|
}
|
|
};
|
|
}
|
|
|
|
};
|
|
|
|
// Leaderboard
|
|
export default function Leaderboards ( props ) {
|
|
return (
|
|
<div>
|
|
<Header/>
|
|
<Title title = "Leaderboards"/>
|
|
<div className = { styles.leaderboards }>
|
|
<div>
|
|
<table>
|
|
<tr>
|
|
<th>
|
|
Username
|
|
</th>
|
|
<th>
|
|
Game Rank
|
|
</th>
|
|
<th>
|
|
Elo
|
|
</th>
|
|
<th>
|
|
Kills
|
|
</th>
|
|
<th>
|
|
Deaths
|
|
</th>
|
|
</tr>
|
|
{
|
|
JSON.parse(props.pageStats).map(stats => {
|
|
return (
|
|
<tr>
|
|
<td>
|
|
{ stats.username }
|
|
</td>
|
|
<td>
|
|
{ stats.gameRank }
|
|
</td>
|
|
<td>
|
|
{ stats.elo }
|
|
</td>
|
|
<td>
|
|
{ stats.kills }
|
|
</td>
|
|
<td>
|
|
{ stats.deaths }
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
}
|
|
</table>
|
|
<table>
|
|
<tr>
|
|
<th>
|
|
Rank
|
|
</th>
|
|
<th>
|
|
Elo
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Shitty Shooty
|
|
</td>
|
|
<td>
|
|
0
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Cutie Shooty
|
|
</td>
|
|
<td>
|
|
1000
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Beauty Shooty
|
|
</td>
|
|
<td>
|
|
2000
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Snooty Shooty
|
|
</td>
|
|
<td>
|
|
3000
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
{
|
|
props.previousPage != false && props.nextPage != false &&
|
|
<div>
|
|
<a href = { "/leaderboards/?".replace("?", props.previousPage) }>Previous Page</a>
|
|
<a href = { "/leaderboards/?".replace("?", props.nextPage) }>Next Page</a>
|
|
</div>
|
|
}
|
|
{
|
|
props.previousPage != false && props.nextPage == false &&
|
|
<div>
|
|
<a href = { "/leaderboards/?".replace("?", props.previousPage) } style = {{"text-align": "center"}}>Previous Page</a>
|
|
</div>
|
|
}
|
|
{
|
|
props.nextPage != false && props.previousPage == false &&
|
|
<div>
|
|
<a href = { "/leaderboards/?".replace("?", props.nextPage) } style = {{"text-align": "center"}}>Next Page</a>
|
|
</div>
|
|
}
|
|
</div>
|
|
<Footer/>
|
|
</div>
|
|
);
|
|
}; |