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;