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 { calculateScores } from '../../helpers/Tournament';
   9 import { withUser } from '../../helpers/UserContext';
  10 import i18n from '../../i18n';
  11
  12 const getRowClassName = (tournament, score, user) => {
  13         const classNames = ['score'];
  14         if (score && user && score.participant && score.participant.user_id == user.id) {
  15                 classNames.push('is-self');
  16         }
  17         return classNames.join(' ');
  18 };
  19
  20 const getPlacementDisplay = score => {
  21         if (score.placement === 1) {
  22                 return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
  23         }
  24         if (score.placement === 2) {
  25                 return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
  26         }
  27         if (score.placement === 3) {
  28                 return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
  29         }
  30         return score.placement;
  31 };
  32
  33 const Scoreboard = ({ tournament, user }) =>
  34 <Table striped className="scoreboard align-middle">
  35         <thead>
  36                 <tr>
  37                         <th>{i18n.t('participants.placementShort')}</th>
  38                         <th>{i18n.t('participants.participant')}</th>
  39                         <th className="text-end">{i18n.t('participants.scoreShort')}</th>
  40                 </tr>
  41         </thead>
  42         <tbody>
  43         {calculateScores(tournament).map(score =>
  44                 <tr className={getRowClassName(tournament, score, user)} key={score.participant.id}>
  45                         <td className="text-center">
  46                                 {getPlacementDisplay(score)}
  47                         </td>
  48                         <td>
  49                                 <div className="d-flex align-items-center justify-content-between">
  50                                         <Box user={score.participant.user} />
  51                                         {score.participant.user.stream_link ?
  52                                                 <Button
  53                                                         href={score.participant.user.stream_link}
  54                                                         size="sm"
  55                                                         target="_blank"
  56                                                         title={i18n.t('users.stream')}
  57                                                         variant="outline-twitch"
  58                                                 >
  59                                                         <Icon.STREAM title="" />
  60                                                 </Button>
  61                                         : null}
  62                                 </div>
  63                         </td>
  64                         <td className="text-end">{score.score}</td>
  65                 </tr>
  66         )}
  67         </tbody>
  68 </Table>;
  69
  70 Scoreboard.propTypes = {
  71         tournament: PropTypes.shape({
  72         }),
  73         user: PropTypes.shape({
  74         }),
  75 };
  76
  77 export default withTranslation()(withUser(Scoreboard));