import Icon from '../common/Icon';
import Box from '../users/Box';
-import { calculateScores } from '../../helpers/Tournament';
+import { comparePlacement } from '../../helpers/Participant';
+import { getRunners } from '../../helpers/Tournament';
import { withUser } from '../../helpers/UserContext';
import i18n from '../../i18n';
-const getRowClassName = (tournament, score, user) => {
+const getRowClassName = (tournament, participant, user) => {
const classNames = ['score'];
- if (score && user && score.participant && score.participant.user_id == user.id) {
+ if (participant && user && participant.user_id == user.id) {
classNames.push('is-self');
}
return classNames.join(' ');
};
-const getPlacementDisplay = score => {
- if (score.placement === 1) {
+const getPlacementDisplay = participant => {
+ if (participant.placement === 1) {
return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
}
- if (score.placement === 2) {
+ if (participant.placement === 2) {
return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
}
- if (score.placement === 3) {
+ if (participant.placement === 3) {
return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
}
- return score.placement;
+ return participant.placement;
};
const Scoreboard = ({ tournament, user }) =>
</tr>
</thead>
<tbody>
- {calculateScores(tournament).map(score =>
- <tr className={getRowClassName(tournament, score, user)} key={score.participant.id}>
+ {getRunners(tournament).sort(comparePlacement).map(participant =>
+ <tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
<td className="text-center">
- {getPlacementDisplay(score)}
+ {getPlacementDisplay(participant)}
</td>
<td>
<div className="d-flex align-items-center justify-content-between">
- <Box user={score.participant.user} />
- {score.participant.user.stream_link ?
+ <Box user={participant.user} />
+ {participant.user.stream_link ?
<Button
- href={score.participant.user.stream_link}
+ href={participant.user.stream_link}
size="sm"
target="_blank"
title={i18n.t('users.stream')}
: null}
</div>
</td>
- <td className="text-end">{score.score}</td>
+ <td className="text-end">{participant.score}</td>
</tr>
)}
</tbody>