46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
import React from "react"
|
|
import './index.css';
|
|
|
|
export default function Leaderboard({ leaderboard }) {
|
|
|
|
if (leaderboard == null)
|
|
return <p>Loading...</p>
|
|
|
|
// var listItems = Object.keys(data).map(playerName => {
|
|
// var rank = data[playerName];
|
|
//
|
|
// return <li key={playerName}>
|
|
// {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
|
|
// </li>
|
|
// });
|
|
// return <ul>{listItems}</ul>;
|
|
|
|
const tableRows = Object.keys(leaderboard).map(playerName => {
|
|
var rank = leaderboard[playerName];
|
|
|
|
// TODO tr: className={data.isCurrentUser(playerName) && 'username'}
|
|
return <tr key={playerName} >
|
|
<td>{playerName}</td>
|
|
<td>{rank.gamesPlayed}</td>
|
|
<td>{rank.gamesWon}</td>
|
|
<td>{rank.gamesDraw}</td>
|
|
</tr>
|
|
});
|
|
|
|
return <div className="Leaderboard">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Played</th>
|
|
<th>Won</th>
|
|
<th>Draw</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{tableRows}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
};
|