1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Table } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
6 import Icon from '../common/Icon';
7 import Box from '../users/Box';
8 import { comparePlacement } from '../../helpers/Participant';
9 import { getRunners } from '../../helpers/Tournament';
10 import { withUser } from '../../helpers/UserContext';
11 import i18n from '../../i18n';
13 const getRowClassName = (tournament, participant, user) => {
14 const classNames = ['score'];
15 if (participant && user && participant.user_id == user.id) {
16 classNames.push('is-self');
18 return classNames.join(' ');
21 const getPlacementDisplay = participant => {
22 if (participant.placement === 1) {
23 return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
25 if (participant.placement === 2) {
26 return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
28 if (participant.placement === 3) {
29 return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
31 return participant.placement;
34 const twitchReg = /^https?:\/\/(www\.)?twitch\.tv/;
35 const youtubeReg = /^https?:\/\/(www\.)?youtu(\.be|be\.)/;
37 const getStreamVariant = participant => {
38 if (!participant || !participant.user || !participant.user.stream_link) {
39 return 'outline-secondary';
41 if (twitchReg.test(participant.user.stream_link)) {
42 return 'outline-twitch';
44 if (youtubeReg.test(participant.user.stream_link)) {
45 return 'outline-youtube';
47 return 'outline-secondary';
50 const getStreamIcon = participant => {
51 const variant = getStreamVariant(participant);
52 if (variant === 'outline-twitch') {
53 return <Icon.TWITCH title="" />;
55 if (variant === 'outline-youtube') {
56 return <Icon.YOUTUBE title="" />;
58 return <Icon.VIDEO title="" />;
61 const Scoreboard = ({ tournament, user }) =>
62 <Table striped className="scoreboard align-middle">
65 <th className="text-center">{i18n.t('participants.placementShort')}</th>
66 <th>{i18n.t('participants.participant')}</th>
67 <th className="text-end">{i18n.t('participants.scoreShort')}</th>
71 {getRunners(tournament).sort(comparePlacement).map(participant =>
72 <tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
73 <td className="text-center">
74 {getPlacementDisplay(participant)}
77 <div className="d-flex align-items-center justify-content-between">
78 <Box user={participant.user} />
79 {participant.user.stream_link ?
81 href={participant.user.stream_link}
84 title={i18n.t('users.stream')}
85 variant={getStreamVariant(participant)}
87 {getStreamIcon(participant)}
92 <td className="text-end">{participant.score}</td>
98 Scoreboard.propTypes = {
99 tournament: PropTypes.shape({
101 user: PropTypes.shape({
105 export default withTranslation()(withUser(Scoreboard));