X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fusers%2FParticipation.js;h=b12adff897fdd964b6fd4af36bd487709031845e;hb=ce0c2752445b1d0960e331a335f56001f3c521c6;hp=d0d5d689658dc9f69608d1cf7ab41cae79d1f94a;hpb=d611bc90eab94fbce54e9e5485f15c20abf1ad31;p=alttp.git

diff --git a/resources/js/components/users/Participation.js b/resources/js/components/users/Participation.js
index d0d5d68..b12adff 100644
--- 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}>