import Icon from '../common/Icon';
import Box from '../users/Box';
import { calculateScores } from '../../helpers/Tournament';
+import { withUser } from '../../helpers/UserContext';
import i18n from '../../i18n';
-const Scoreboard = ({ tournament }) =>
-<Table striped className="scoreboard">
+const getRowClassName = (tournament, score, user) => {
+ const classNames = ['score'];
+ if (score && user && score.participant && score.participant.user_id == user.id) {
+ classNames.push('is-self');
+ }
+ return classNames.join(' ');
+};
+
+const getPlacementDisplay = score => {
+ if (score.placement === 1) {
+ return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
+ }
+ if (score.placement === 2) {
+ return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
+ }
+ if (score.placement === 3) {
+ return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
+ }
+ return score.placement;
+};
+
+const Scoreboard = ({ tournament, user }) =>
+<Table striped className="scoreboard align-middle">
<thead>
<tr>
+ <th>{i18n.t('participants.placementShort')}</th>
<th>{i18n.t('participants.participant')}</th>
- <th className="text-end">{i18n.t('participants.score')}</th>
+ <th className="text-end">{i18n.t('participants.scoreShort')}</th>
</tr>
</thead>
<tbody>
{calculateScores(tournament).map(score =>
- <tr className="score" key={score.participant.id}>
+ <tr className={getRowClassName(tournament, score, user)} key={score.participant.id}>
+ <td className="text-center">
+ {getPlacementDisplay(score)}
+ </td>
<td>
<div className="d-flex align-items-center justify-content-between">
<Box user={score.participant.user} />
: null}
</div>
</td>
- <td className="text-end text-lg">{score.score}</td>
+ <td className="text-end">{score.score}</td>
</tr>
)}
</tbody>
Scoreboard.propTypes = {
tournament: PropTypes.shape({
}),
+ user: PropTypes.shape({
+ }),
};
-export default withTranslation()(Scoreboard);
+export default withTranslation()(withUser(Scoreboard));
}
}
});
- return scores.sort(compareScore).reverse();
+ const sorted = scores.sort(compareScore);
+ let placement = scores.length;
+ let skipped = 0;
+ let lastScore = sorted[0].score;
+ for (let i = 0; i < sorted.length; ++i) {
+ if (sorted[i].score > lastScore) {
+ placement -= skipped;
+ skipped = 1;
+ lastScore = sorted[i].score;
+ } else {
+ ++skipped;
+ }
+ sorted[i].placement = placement;
+ }
+ return sorted.reverse();
};
export const compareScore = (a, b) => {