]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/rounds/Item.js
tracker medallion controler
[alttp.git] / resources / js / components / rounds / Item.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { useTranslation } from 'react-i18next';
4
5 import EditButton from './EditButton';
6 import LockButton from './LockButton';
7 import SeedButton from './SeedButton';
8 import SeedCode from './SeedCode';
9 import SeedRolledBy from './SeedRolledBy';
10 import List from '../results/List';
11 import ReportButton from '../results/ReportButton';
12 import { mayEditRound, mayReportResult, isRunner } from '../../helpers/permissions';
13 import { isComplete } from '../../helpers/Round';
14 import { hasFinishedRound } from '../../helpers/User';
15 import { useUser } from '../../hooks/user';
16
17 const getClassName = (round, tournament, user) => {
18         const classNames = ['round'];
19         if (round.locked) {
20                 classNames.push('is-locked');
21         } else {
22                 classNames.push('is-unlocked');
23         }
24         if (isComplete(tournament, round)) {
25                 classNames.push('is-complete');
26         } else {
27                 classNames.push('is-incomplete');
28         }
29         if (hasFinishedRound(user, round)) {
30                 classNames.push('has-finished');
31         } else if (isRunner(user, tournament)) {
32                 classNames.push('has-not-finished');
33         }
34         return classNames.join(' ');
35 };
36
37 const Item = ({
38         round,
39         tournament,
40 }) => {
41         const { t } = useTranslation();
42         const { user } = useUser();
43
44 return <li className={getClassName(round, tournament, user)}>
45                 {round.title ?
46                         <h3>{round.title}</h3>
47                 : null}
48                 <div className="d-flex">
49                         <div className="info">
50                                 <p className="date">
51                                         {tournament.show_numbers && round.number ? `#${round.number} ` : ''}
52                                         {t('rounds.date', { date: new Date(round.created_at) })}
53                                 </p>
54                                 <p className="seed">
55                                         {round.code && round.code.length ?
56                                                 <>
57                                                         <SeedCode code={round.code} game={round.game || 'alttpr'} />
58                                                         <br />
59                                                 </>
60                                         : null}
61                                         <SeedButton
62                                                 round={round}
63                                                 tournament={tournament}
64                                         />
65                                         {' '}
66                                         <SeedRolledBy round={round} />
67                                 </p>
68                                 {mayReportResult(user, tournament) ?
69                                         <p className="report">
70                                                 <ReportButton
71                                                         round={round}
72                                                         tournament={tournament}
73                                                         user={user}
74                                                 />
75                                         </p>
76                                 : null}
77                                 {tournament.type === 'open-async' && round.results && round.results.length ?
78                                         <p>{t('rounds.numberOfResults', { count: round.results.length })}</p>
79                                 : null}
80                                 <div className="button-bar">
81                                         <LockButton round={round} tournament={tournament} />
82                                         {mayEditRound(user, tournament, round) ?
83                                                 <EditButton round={round} tournament={tournament} />
84                                         : null}
85                                 </div>
86                         </div>
87                         <List round={round} tournament={tournament} />
88                 </div>
89         </li>;
90 };
91
92 Item.propTypes = {
93         round: PropTypes.shape({
94                 code: PropTypes.arrayOf(PropTypes.string),
95                 created_at: PropTypes.string,
96                 game: PropTypes.string,
97                 locked: PropTypes.bool,
98                 number: PropTypes.number,
99                 results: PropTypes.arrayOf(PropTypes.shape({
100                 })),
101                 seed: PropTypes.string,
102                 title: PropTypes.string,
103         }),
104         tournament: PropTypes.shape({
105                 participants: PropTypes.arrayOf(PropTypes.shape({
106                 })),
107                 show_numbers: PropTypes.bool,
108                 type: PropTypes.string,
109         }),
110 };
111
112 export default Item;