X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftournament%2FScoreboard.js;h=cbc73a32620db88204b5fa81f669a5db18c79702;hb=5dacd7900839a5e270de87de8c4f51dea385c1f0;hp=008974b7cc76ce1b8f362707f0dfb6fdcead4ee0;hpb=1c3b922ba7143a548c8a7526f5e4384f336e2f1e;p=alttp.git

diff --git a/resources/js/components/tournament/Scoreboard.js b/resources/js/components/tournament/Scoreboard.js
index 008974b..cbc73a3 100644
--- a/resources/js/components/tournament/Scoreboard.js
+++ b/resources/js/components/tournament/Scoreboard.js
@@ -1,25 +1,67 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Table } from 'react-bootstrap';
+import { Button, Table } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
+import Icon from '../common/Icon';
 import Box from '../users/Box';
 import { calculateScores } from '../../helpers/Tournament';
+import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
-const Scoreboard = ({ tournament }) =>
-<Table striped className="scoreboard">
+const getRowClassName = (tournament, score, user) => {
+	const classNames = ['score'];
+	if (score && user && score.participant && score.participant.user_id == user.id) {
+		classNames.push('is-self');
+	}
+	return classNames.join(' ');
+};
+
+const getPlacementDisplay = score => {
+	if (score.placement === 1) {
+		return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
+	}
+	if (score.placement === 2) {
+		return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
+	}
+	if (score.placement === 3) {
+		return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
+	}
+	return score.placement;
+};
+
+const Scoreboard = ({ tournament, user }) =>
+<Table striped className="scoreboard align-middle">
 	<thead>
 		<tr>
+			<th className="text-center">{i18n.t('participants.placementShort')}</th>
 			<th>{i18n.t('participants.participant')}</th>
-			<th className="text-end">{i18n.t('participants.score')}</th>
+			<th className="text-end">{i18n.t('participants.scoreShort')}</th>
 		</tr>
 	</thead>
 	<tbody>
 	{calculateScores(tournament).map(score =>
-		<tr className="score" key={score.participant.id}>
-			<td><Box user={score.participant.user} /></td>
-			<td className="text-end text-lg">{score.score}</td>
+		<tr className={getRowClassName(tournament, score, user)} key={score.participant.id}>
+			<td className="text-center">
+				{getPlacementDisplay(score)}
+			</td>
+			<td>
+				<div className="d-flex align-items-center justify-content-between">
+					<Box user={score.participant.user} />
+					{score.participant.user.stream_link ?
+						<Button
+							href={score.participant.user.stream_link}
+							size="sm"
+							target="_blank"
+							title={i18n.t('users.stream')}
+							variant="outline-twitch"
+						>
+							<Icon.STREAM title="" />
+						</Button>
+					: null}
+				</div>
+			</td>
+			<td className="text-end">{score.score}</td>
 		</tr>
 	)}
 	</tbody>
@@ -28,6 +70,8 @@ const Scoreboard = ({ tournament }) =>
 Scoreboard.propTypes = {
 	tournament: PropTypes.shape({
 	}),
+	user: PropTypes.shape({
+	}),
 };
 
-export default withTranslation()(Scoreboard);
+export default withTranslation()(withUser(Scoreboard));