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