resources/js/components/tournament/Scoreboard.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Table } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   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';
  12
  13 const getRowClassName = (tournament, participant, user) => {
  14         const classNames = ['score'];
  15         if (participant && user && participant.user_id == user.id) {
  16                 classNames.push('is-self');
  17         }
  18         return classNames.join(' ');
  19 };
  20
  21 const getPlacementDisplay = participant => {
  22         if (participant.placement === 1) {
  23                 return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
  24         }
  25         if (participant.placement === 2) {
  26                 return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
  27         }
  28         if (participant.placement === 3) {
  29                 return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
  30         }
  31         return participant.placement;
  32 };
  33
  34 const twitchReg = /^https?:\/\/(www\.)?twitch\.tv/;
  35 const youtubeReg = /^https?:\/\/(www\.)?youtu(\.be|be\.)/;
  36
  37 const getStreamVariant = participant => {
  38         if (!participant || !participant.user || !participant.user.stream_link) {
  39                 return 'outline-secondary';
  40         }
  41         if (twitchReg.test(participant.user.stream_link)) {
  42                 return 'outline-twitch';
  43         }
  44         if (youtubeReg.test(participant.user.stream_link)) {
  45                 return 'outline-youtube';
  46         }
  47         return 'outline-secondary';
  48 };
  49
  50 const getStreamIcon = participant => {
  51         const variant = getStreamVariant(participant);
  52         if (variant === 'outline-twitch') {
  53                 return <Icon.TWITCH title="" />;
  54         }
  55         if (variant === 'outline-youtube') {
  56                 return <Icon.YOUTUBE title="" />;
  57         }
  58         return <Icon.VIDEO title="" />;
  59 };
  60
  61 const Scoreboard = ({ tournament, user }) =>
  62 <Table striped className="scoreboard align-middle">
  63         <thead>
  64                 <tr>
  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>
  68                 </tr>
  69         </thead>
  70         <tbody>
  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)}
  75                         </td>
  76                         <td>
  77                                 <div className="d-flex align-items-center justify-content-between">
  78                                         <Box user={participant.user} />
  79                                         {participant.user.stream_link ?
  80                                                 <Button
  81                                                         href={participant.user.stream_link}
  82                                                         size="sm"
  83                                                         target="_blank"
  84                                                         title={i18n.t('users.stream')}
  85                                                         variant={getStreamVariant(participant)}
  86                                                 >
  87                                                         {getStreamIcon(participant)}
  88                                                 </Button>
  89                                         : null}
  90                                 </div>
  91                         </td>
  92                         <td className="text-end">{participant.score}</td>
  93                 </tr>
  94         )}
  95         </tbody>
  96 </Table>;
  97
  98 Scoreboard.propTypes = {
  99         tournament: PropTypes.shape({
 100         }),
 101         user: PropTypes.shape({
 102         }),
 103 };
 104
 105 export default withTranslation()(withUser(Scoreboard));