X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftournament%2FScoreboard.js;h=f13adacb61bbaa7a4465f88fb8b549ea535cca40;hb=237ebc69c5eb4fbfe226c4dcdc9711d7b18ddcd2;hp=ea6a6668727385e2165dcc44ab1d2f853e1940d0;hpb=6c3125ca01833f7cec3659353840dbe1ddfb0fc6;p=alttp.git

diff --git a/resources/js/components/tournament/Scoreboard.js b/resources/js/components/tournament/Scoreboard.js
index ea6a666..f13adac 100644
--- a/resources/js/components/tournament/Scoreboard.js
+++ b/resources/js/components/tournament/Scoreboard.js
@@ -5,63 +5,91 @@ import { withTranslation } from 'react-i18next';
 
 import Icon from '../common/Icon';
 import Box from '../users/Box';
-import { calculateScores } from '../../helpers/Tournament';
+import { comparePlacement } from '../../helpers/Participant';
+import { getRunners } from '../../helpers/Tournament';
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
-const getRowClassName = (tournament, score, user) => {
+const getRowClassName = (tournament, participant, user) => {
 	const classNames = ['score'];
-	if (score && user && score.participant && score.participant.user_id == user.id) {
+	if (participant && user && participant.user_id == user.id) {
 		classNames.push('is-self');
 	}
 	return classNames.join(' ');
 };
 
-const getPlacementDisplay = score => {
-	if (score.placement === 1) {
+const getPlacementDisplay = participant => {
+	if (participant.placement === 1) {
 		return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
 	}
-	if (score.placement === 2) {
+	if (participant.placement === 2) {
 		return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
 	}
-	if (score.placement === 3) {
+	if (participant.placement === 3) {
 		return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
 	}
-	return score.placement;
+	return participant.placement;
+};
+
+const twitchReg = /^https?:\/\/(www\.)?twitch\.tv/;
+const youtubeReg = /^https?:\/\/(www\.)?youtu(\.be|be\.)/;
+
+const getStreamVariant = participant => {
+	if (!participant || !participant.user || !participant.user.stream_link) {
+		return 'outline-secondary';
+	}
+	if (twitchReg.test(participant.user.stream_link)) {
+		return 'outline-twitch';
+	}
+	if (youtubeReg.test(participant.user.stream_link)) {
+		return 'outline-youtube';
+	}
+	return 'outline-secondary';
+};
+
+const getStreamIcon = participant => {
+	const variant = getStreamVariant(participant);
+	if (variant === 'outline-twitch') {
+		return <Icon.TWITCH title="" />;
+	}
+	if (variant === 'outline-youtube') {
+		return <Icon.YOUTUBE title="" />;
+	}
+	return <Icon.VIDEO title="" />;
 };
 
 const Scoreboard = ({ tournament, user }) =>
 <Table striped className="scoreboard align-middle">
 	<thead>
 		<tr>
-			<th>{i18n.t('participants.placementShort')}</th>
+			<th className="text-center">{i18n.t('participants.placementShort')}</th>
 			<th>{i18n.t('participants.participant')}</th>
 			<th className="text-end">{i18n.t('participants.scoreShort')}</th>
 		</tr>
 	</thead>
 	<tbody>
-	{calculateScores(tournament).map(score =>
-		<tr className={getRowClassName(tournament, score, user)} key={score.participant.id}>
+	{getRunners(tournament).sort(comparePlacement).map(participant =>
+		<tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
 			<td className="text-center">
-				{getPlacementDisplay(score)}
+				{getPlacementDisplay(participant)}
 			</td>
 			<td>
 				<div className="d-flex align-items-center justify-content-between">
-					<Box user={score.participant.user} />
-					{score.participant.user.stream_link ?
+					<Box user={participant.user} />
+					{participant.user.stream_link ?
 						<Button
-							href={score.participant.user.stream_link}
+							href={participant.user.stream_link}
 							size="sm"
 							target="_blank"
 							title={i18n.t('users.stream')}
-							variant="outline-twitch"
+							variant={getStreamVariant(participant)}
 						>
-							<Icon.STREAM title="" />
+							{getStreamIcon(participant)}
 						</Button>
 					: null}
 				</div>
 			</td>
-			<td className="text-end">{score.score}</td>
+			<td className="text-end">{participant.score}</td>
 		</tr>
 	)}
 	</tbody>