resources/js/pages/GuessingGameControls.js

   1 import axios from 'axios';
   2 import React from 'react';
   3 import { Alert, Col, Container, Form, Navbar, Row } from 'react-bootstrap';
   4 import { Helmet } from 'react-helmet';
   5 import { useTranslation } from 'react-i18next';
   6 import toastr from 'toastr';
   7
   8 import User from '../app/User';
   9 import ChannelSelect from '../components/common/ChannelSelect';
  10 import GuessingGameControls from '../components/twitch-bot/GuessingGameControls';
  11 import GuessingGuess from '../components/twitch-bot/GuessingGuess';
  12 import GuessingWinner from '../components/twitch-bot/GuessingWinner';
  13 import { patchGuess, patchWinner } from '../helpers/Channel';
  14
  15 export const Component = () => {
  16         const [channel, setChannel] = React.useState(null);
  17         const [guesses, setGuesses] = React.useState([]);
  18         const [winners, setWinners] = React.useState([]);
  19
  20         const { t } = useTranslation();
  21
  22         React.useEffect(() => {
  23                 if (!channel) {
  24                         setGuesses([]);
  25                         setWinners([]);
  26                         return;
  27                 }
  28                 if (channel.guessing_type) {
  29                         axios.get(`/api/channels/${channel.id}/guessing-game/${channel.guessing_type}`)
  30                                 .then(res => {
  31                                         res.data.guesses.forEach(g => {
  32                                                 setGuesses(gs => patchGuess(gs, g));
  33                                         });
  34                                         res.data.winners.forEach(w => {
  35                                                 setWinners(ws => patchGuess(ws, w));
  36                                         });
  37                                 });
  38                 }
  39                 window.Echo.private(`Channel.${channel.id}`)
  40                         .listen('.GuessingGuessCreated', (e) => {
  41                                 setGuesses(gs => patchGuess(gs, e.model));
  42                         })
  43                         .listen('.GuessingWinnerCreated', (e) => {
  44                                 setWinners(ws => patchWinner(ws, e.model));
  45                         })
  46                         .listen('.ChannelUpdated', (e) => {
  47                                 setChannel(c => ({ ...c, ...e.model }));
  48                         });
  49                 return () => {
  50                         window.Echo.leave(`Channel.${channel.id}`);
  51                 };
  52         }, [channel && channel.id]);
  53
  54         React.useEffect(() => {
  55                 const cutoff = channel && channel.guessing_start;
  56                 if (cutoff) {
  57                         setGuesses(gs => gs.filter(g => g.created_at >= cutoff));
  58                         setWinners(ws => ws.filter(w => w.created_at >= cutoff));
  59                 }
  60         }, [channel && channel.guessing_start]);
  61
  62         const onCancel = React.useCallback(async () => {
  63                 try {
  64                         const rsp = await axios.post(
  65                                 `/api/channels/${channel.id}/guessing-game/gtbk`,
  66                                 { action: 'cancel' },
  67                         );
  68                         setChannel(rsp.data);
  69                 } catch (e) {
  70                         toastr.error(t('twitchBot.controlError'));
  71                 }
  72         }, [channel]);
  73
  74         const onSolve = React.useCallback(async (solution) => {
  75                 try {
  76                         const rsp = await axios.post(
  77                                 `/api/channels/${channel.id}/guessing-game/gtbk`,
  78                                 { action: 'solve', solution },
  79                         );
  80                         setChannel(rsp.data);
  81                 } catch (e) {
  82                         toastr.error(t('twitchBot.controlError'));
  83                 }
  84         }, [channel]);
  85
  86         const onStart = React.useCallback(async () => {
  87                 try {
  88                         const rsp = await axios.post(
  89                                 `/api/channels/${channel.id}/guessing-game/gtbk`,
  90                                 { action: 'start' },
  91                         );
  92                         setChannel(rsp.data);
  93                 } catch (e) {
  94                         toastr.error(t('twitchBot.controlError'));
  95                 }
  96         }, [channel]);
  97
  98         const onStop = React.useCallback(async () => {
  99                 try {
 100                         const rsp = await axios.post(
 101                                 `/api/channels/${channel.id}/guessing-game/gtbk`,
 102                                 { action: 'stop' },
 103                         );
 104                         setChannel(rsp.data);
 105                 } catch (e) {
 106                         toastr.error(t('twitchBot.controlError'));
 107                 }
 108         }, [channel]);
 109
 110         return <>
 111                 <Helmet>
 112                         <title>Guessing Game Controls</title>
 113                 </Helmet>
 114                 <Navbar id="header" bg="dark" variant="dark">
 115                         <Container fluid>
 116                                 <Form.Control
 117                                         as={ChannelSelect}
 118                                         autoSelect
 119                                         joinable
 120                                         manageable
 121                                         onChange={({ channel }) => { setChannel(channel); }}
 122                                         value={channel ? channel.id : ''}
 123                                 />
 124                                 <User />
 125                         </Container>
 126                 </Navbar>
 127                 <Container fluid>
 128                 {channel ? <Row>
 129                         <Col md={12} lg={6}>
 130                                 <GuessingGameControls
 131                                         channel={channel}
 132                                         onCancel={onCancel}
 133                                         onSolve={onSolve}
 134                                         onStart={onStart}
 135                                         onStop={onStop}
 136                                 />
 137                         </Col>
 138                         <Col md={6} lg={3}>
 139                                 <h3 className="mt-3">{t('twitchBot.guessingGame.winners')}</h3>
 140                                 {winners.map(winner =>
 141                                         <GuessingWinner key={winner.id} winner={winner} />
 142                                 )}
 143                         </Col>
 144                         <Col md={6} lg={3}>
 145                                 <h3 className="mt-3">{t('twitchBot.guessingGame.guesses')}</h3>
 146                                 {guesses.map(guess =>
 147                                         <GuessingGuess guess={guess} key={guess.id} />
 148                                 )}
 149                         </Col>
 150                 </Row> :
 151                         <Alert variant="info">
 152                                 {t('twitchBot.selectChannel')}
 153                         </Alert>
 154                 }
 155                 </Container>
 156         </>;
 157 };