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