]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/twitch-bot/GuessingGameControls.js
remove some useless svg groups
[alttp.git] / resources / js / components / twitch-bot / GuessingGameControls.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import GuessingGameAutoTracking from './GuessingGameAutoTracking';
7 import {
8         hasActiveGuessing,
9         isAcceptingGuesses,
10 } from '../../helpers/Channel';
11
12 const GuessingGameControls = ({
13         channel,
14         onCancel,
15         onSolve,
16         onStart,
17         onStop,
18 }) => {
19         const { t } = useTranslation();
20
21         const solutions = [
22                 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
23                 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
24         ];
25
26         return <div>
27                 <div className="d-flex align-items-center justify-content-between mt-3">
28                         <div className="button-bar">
29                                 <Button
30                                         onClick={onStart}
31                                         variant={hasActiveGuessing(channel) ? 'success' : 'outline-success'}
32                                 >
33                                         {t('button.start')}
34                                 </Button>
35                                 <Button
36                                         onClick={onStop}
37                                         variant={
38                                                 hasActiveGuessing(channel) && isAcceptingGuesses(channel)
39                                                 ? 'danger' : 'outline-danger'
40                                         }
41                                 >
42                                         {t('button.stop')}
43                                 </Button>
44                                 <Button
45                                         className="ms-3"
46                                         onClick={onCancel}
47                                         variant={hasActiveGuessing(channel) ? 'secondary' : 'outline-secondary'}
48                                 >
49                                         {t('button.cancel')}
50                                 </Button>
51                         </div>
52                         <GuessingGameAutoTracking
53                                 onSolve={onSolve}
54                                 onStart={onStart}
55                                 onStop={onStop}
56                         />
57                 </div>
58                 {hasActiveGuessing(channel) ?
59                         <div className="bkgg-buttons d-grid gap-3 my-3">
60                                 {solutions.map(solution =>
61                                         <Button
62                                                 key={solution}
63                                                 onClick={() => onSolve(solution)}
64                                                 size="lg"
65                                                 variant="outline-secondary"
66                                         >
67                                                 {solution}
68                                         </Button>
69                                 )}
70                         </div>
71                 : null}
72         </div>;
73 };
74
75 GuessingGameControls.propTypes = {
76         channel: PropTypes.shape({
77         }),
78         onCancel: PropTypes.func,
79         onSolve: PropTypes.func,
80         onStart: PropTypes.func,
81         onStop: PropTypes.func,
82 };
83
84 export default GuessingGameControls;