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 i18n from '../../i18n';
  10
  11 const Scoreboard = ({ tournament }) =>
  12 <Table striped className="scoreboard">
  13         <thead>
  14                 <tr>
  15                         <th>{i18n.t('participants.participant')}</th>
  16                         <th className="text-end">{i18n.t('participants.score')}</th>
  17                 </tr>
  18         </thead>
  19         <tbody>
  20         {calculateScores(tournament).map(score =>
  21                 <tr className="score" key={score.participant.id}>
  22                         <td>
  23                                 <div className="d-flex align-items-center justify-content-between">
  24                                         <Box user={score.participant.user} />
  25                                         {score.participant.user.stream_link ?
  26                                                 <Button
  27                                                         href={score.participant.user.stream_link}
  28                                                         size="sm"
  29                                                         target="_blank"
  30                                                         title={i18n.t('users.stream')}
  31                                                         variant="outline-twitch"
  32                                                 >
  33                                                         <Icon.STREAM title="" />
  34                                                 </Button>
  35                                         : null}
  36                                 </div>
  37                         </td>
  38                         <td className="text-end text-lg">{score.score}</td>
  39                 </tr>
  40         )}
  41         </tbody>
  42 </Table>;
  43
  44 Scoreboard.propTypes = {
  45         tournament: PropTypes.shape({
  46         }),
  47 };
  48
  49 export default withTranslation()(Scoreboard);