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 {
   7         hasActiveGuessing,
   8         isAcceptingGuesses,
   9 } from '../../helpers/Channel';
  10
  11 const GuessingGameControls = ({
  12         channel,
  13         onCancel,
  14         onSolve,
  15         onStart,
  16         onStop,
  17 }) => {
  18         const { t } = useTranslation();
  19
  20         const solutions = [
  21                 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
  22                 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
  23         ];
  24
  25         return <div>
  26                 <div className="button-bar mt-3">
  27                         <Button
  28                                 onClick={onStart}
  29                                 variant={hasActiveGuessing(channel) ? 'success' : 'outline-success'}
  30                         >
  31                                 {t('button.start')}
  32                         </Button>
  33                         <Button
  34                                 onClick={onStop}
  35                                 variant={
  36                                         hasActiveGuessing(channel) && isAcceptingGuesses(channel)
  37                                         ? 'danger' : 'outline-danger'
  38                                 }
  39                         >
  40                                 {t('button.stop')}
  41                         </Button>
  42                         <Button
  43                                 className="ms-3"
  44                                 onClick={onCancel}
  45                                 variant={hasActiveGuessing(channel) ? 'secondary' : 'outline-secondary'}
  46                         >
  47                                 {t('button.cancel')}
  48                         </Button>
  49                 </div>
  50                 {hasActiveGuessing(channel) ?
  51                         <div className="bkgg-buttons d-grid gap-3 my-3">
  52                                 {solutions.map(solution =>
  53                                         <Button
  54                                                 key={solution}
  55                                                 onClick={() => onSolve(solution)}
  56                                                 size="lg"
  57                                                 variant="outline-secondary"
  58                                         >
  59                                                 {solution}
  60                                         </Button>
  61                                 )}
  62                         </div>
  63                 : null}
  64         </div>;
  65 };
  66
  67 GuessingGameControls.propTypes = {
  68         channel: PropTypes.shape({
  69         }),
  70         onCancel: PropTypes.func,
  71         onSolve: PropTypes.func,
  72         onStart: PropTypes.func,
  73         onStop: PropTypes.func,
  74 };
  75
  76 export default GuessingGameControls;