show placements on user profile

[alttp.git] / resources / js / components / users / Participation.js

diff --git a/resources/js/components/users/Participation.js b/resources/js/components/users/Participation.js
index d0d5d689658dc9f69608d1cf7ab41cae79d1f94a..b12adff897fdd964b6fd4af36bd487709031845e 100644 (file)
--- a/resources/js/components/users/Participation.js
+++ b/resources/js/components/users/Participation.js
@@ -4,8 +4,26 @@ import { Alert, Button, Table } from 'react-bootstrap';
 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();
 
@@ -14,10 +32,11 @@ const Participation = ({ user }) => {
                        {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>
@@ -31,6 +50,12 @@ const Participation = ({ user }) => {
                                        {p.tournament.title}
                                </Button>
                        </td>
+                       <td>
+                               {getIcon(p)}
+                       {!p.tournament.locked && isRunner(p) ?
+                               <span title={i18n.t('participants.placementSubjectToChange')}> *</span>
+                       : null}
+                       </td>
                        <td>
                                {p.roles ? p.roles.map((role, index) =>
                                        <span key={role}>