import { withTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
+import Icon from '../common/Icon';
+import { isRunner } from '../../helpers/Participant';
import i18n from '../../i18n';
+const getIcon = participant => {
+ if (!isRunner(participant)) {
+ return '—';
+ }
+ if (participant.placement === 1) {
+ return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
+ }
+ if (participant.placement === 2) {
+ return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
+ }
+ if (participant.placement === 3) {
+ return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
+ }
+ return participant.placement;
+};
+
const Participation = ({ user }) => {
const navigate = useNavigate();
{i18n.t('users.participationEmpty')}
</Alert>;
}
- return <Table className="participation">
+ return <Table className="participation align-middle">
<thead>
<tr>
<th>{i18n.t('participants.tournament')}</th>
+ <th>{i18n.t('participants.placement')}</th>
<th>{i18n.t('participants.roles')}</th>
</tr>
</thead>
{p.tournament.title}
</Button>
</td>
+ <td>
+ {getIcon(p)}
+ {!p.tournament.locked && isRunner(p) ?
+ <span title={i18n.t('participants.placementSubjectToChange')}> *</span>
+ : null}
+ {p.tournament.no_record ?
+ <span title={i18n.t('tournaments.noRecord')}> †</span>
+ : null}
+ </td>
<td>
{p.roles ? p.roles.map((role, index) =>
<span key={role}>