remove some useless svg groups

[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 e45fcf668e2fcc26c1bb0121ea6a77bc36a54e68..9b7228e7f2a34f46024645f323af82641fdac4f7 100644 (file)
--- a/resources/js/components/users/Participation.js
+++ b/resources/js/components/users/Participation.js
@@ -1,11 +1,29 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, Button } from 'react-bootstrap';
+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,16 +32,44 @@ const Participation = ({ user }) => {
                        {i18n.t('users.participationEmpty')}
                </Alert>;
        }
-       return <div className="participation">
-               {user.participation.map(p => <div key={p.id}>
-                       <Button
-                               onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
-                               variant="link"
-                       >
-                               {p.tournament.title}
-                       </Button>
-               </div>)}
-       </div>;
+       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>
+               <tbody>
+               {user.participation.map(p => <tr key={p.id}>
+                       <td>
+                               <Button
+                                       onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
+                                       variant="link"
+                               >
+                                       {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}>
+                                               {index === 0 ? '' : ', '}
+                                               {i18n.t(`participants.roleNames.${role}`)}
+                                       </span>
+                               ) : null}
+                       </td>
+               </tr>)}
+               </tbody>
+       </Table>;
 };
 
 Participation.propTypes = {