X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fusers%2FParticipation.js;h=9b7228e7f2a34f46024645f323af82641fdac4f7;hb=HEAD;hp=e45fcf668e2fcc26c1bb0121ea6a77bc36a54e68;hpb=beccf752aafd468c3753c6d48ae30bccd946c3b9;p=alttp.git

diff --git a/resources/js/components/users/Participation.js b/resources/js/components/users/Participation.js
index e45fcf6..9b7228e 100644
--- 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 = {