73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import * as React from "react";
|
|
|
|
import Table from "@material-ui/core/Table";
|
|
import TableHead from "@material-ui/core/TableHead";
|
|
import TableBody from "@material-ui/core/TableBody";
|
|
import TableRow from "@material-ui/core/TableRow";
|
|
import TableCell from "@material-ui/core/TableCell";
|
|
import Typography from "@material-ui/core/Typography";
|
|
|
|
import { TopTen } from "../models/learner";
|
|
|
|
interface IProps {
|
|
topTen: TopTen[];
|
|
}
|
|
|
|
export default class Scoreboard extends React.Component<IProps> {
|
|
private unique = 0;
|
|
|
|
constructor(props: any) {
|
|
super(props);
|
|
|
|
this.genId = this.genId.bind(this);
|
|
this.tableRow = this.tableRow.bind(this);
|
|
}
|
|
|
|
genId() {
|
|
return "SCOREBOARD" + this.unique++;
|
|
}
|
|
|
|
tableRow(learner: TopTen) {
|
|
return <TableRow key={this.genId()}>
|
|
<TableCell>
|
|
<Typography variant="title" component="b">
|
|
{learner.nr}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Typography component="b">{learner.username}</Typography>
|
|
</TableCell>
|
|
{/*<TableCell numeric>{learner.level}</TableCell>*/}
|
|
{/* To make this fit on both mobile and desktop, we don't use
|
|
numeric, as it would otherwise look weir otherwise look weird */}
|
|
<TableCell>{learner.score}</TableCell>
|
|
</TableRow>
|
|
}
|
|
|
|
render() {
|
|
const sortedLearners = this.props.topTen.sort((a, b) => {
|
|
if (a.score > b.score) {
|
|
return -1;
|
|
} else if (a.score < b.score) {
|
|
return 1;
|
|
}
|
|
|
|
return 0;
|
|
});
|
|
|
|
return <Table padding="none">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>#</TableCell>
|
|
<TableCell>User</TableCell>
|
|
{/*<TableCell>Level</TableCell>*/}
|
|
<TableCell>Punktzahl</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{sortedLearners.map(this.tableRow)}
|
|
</TableBody>
|
|
</Table>;
|
|
}
|
|
}
|