]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tournament/Scoreboard.js
ea6a6668727385e2165dcc44ab1d2f853e1940d0
[alttp.git] / 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));