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 Scoreboard = ({ tournament, user }) =>
  35 <Table striped className="scoreboard align-middle">
  36         <thead>
  37                 <tr>
  38                         <th className="text-center">{i18n.t('participants.placementShort')}</th>
  39                         <th>{i18n.t('participants.participant')}</th>
  40                         <th className="text-end">{i18n.t('participants.scoreShort')}</th>
  41                 </tr>
  42         </thead>
  43         <tbody>
  44         {getRunners(tournament).sort(comparePlacement).map(participant =>
  45                 <tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
  46                         <td className="text-center">
  47                                 {getPlacementDisplay(participant)}
  48                         </td>
  49                         <td>
  50                                 <div className="d-flex align-items-center justify-content-between">
  51                                         <Box user={participant.user} />
  52                                         {participant.user.stream_link ?
  53                                                 <Button
  54                                                         href={participant.user.stream_link}
  55                                                         size="sm"
  56                                                         target="_blank"
  57                                                         title={i18n.t('users.stream')}
  58                                                         variant="outline-twitch"
  59                                                 >
  60                                                         <Icon.STREAM title="" />
  61                                                 </Button>
  62                                         : null}
  63                                 </div>
  64                         </td>
  65                         <td className="text-end">{participant.score}</td>
  66                 </tr>
  67         )}
  68         </tbody>
  69 </Table>;
  70
  71 Scoreboard.propTypes = {
  72         tournament: PropTypes.shape({
  73         }),
  74         user: PropTypes.shape({
  75         }),
  76 };
  77
  78 export default withTranslation()(withUser(Scoreboard));