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 { comparePlacement } from '../../helpers/Participant';
+import { getRunners } from '../../helpers/Tournament';
+import { withUser } from '../../helpers/UserContext';
import i18n from '../../i18n';
-const Scoreboard = ({ tournament }) =>
-<Table striped className="scoreboard">
+const getRowClassName = (tournament, participant, user) => {
+ const classNames = ['score'];
+ if (participant && user && participant.user_id == user.id) {
+ classNames.push('is-self');
+ }
+ return classNames.join(' ');
+};
+
+const getPlacementDisplay = participant => {
+ 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 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 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>
+ {getRunners(tournament).sort(comparePlacement).map(participant =>
+ <tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
+ <td className="text-center">
+ {getPlacementDisplay(participant)}
+ </td>
+ <td>
+ <div className="d-flex align-items-center justify-content-between">
+ <Box user={participant.user} />
+ {participant.user.stream_link ?
+ <Button
+ href={participant.user.stream_link}
+ size="sm"
+ target="_blank"
+ title={i18n.t('users.stream')}
+ variant={getStreamVariant(participant)}
+ >
+ {getStreamIcon(participant)}
+ </Button>
+ : null}
+ </div>
+ </td>
+ <td className="text-end">{participant.score}</td>
</tr>
)}
</tbody>
Scoreboard.propTypes = {
tournament: PropTypes.shape({
}),
+ user: PropTypes.shape({
+ }),
};
-export default withTranslation()(Scoreboard);
+export default withTranslation()(withUser(Scoreboard));