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';
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';
15 export const Component = () => {
16 const [channel, setChannel] = React.useState(null);
17 const [guesses, setGuesses] = React.useState([]);
18 const [winners, setWinners] = React.useState([]);
20 const { t } = useTranslation();
22 React.useEffect(() => {
28 if (channel.guessing_type) {
29 axios.get(`/api/channels/${channel.id}/guessing-game/${channel.guessing_type}`)
31 res.data.guesses.forEach(g => {
32 setGuesses(gs => patchGuess(gs, g));
34 res.data.winners.forEach(w => {
35 setWinners(ws => patchGuess(ws, w));
39 window.Echo.private(`Channel.${channel.id}`)
40 .listen('.GuessingGuessCreated', (e) => {
41 setGuesses(gs => patchGuess(gs, e.model));
43 .listen('.GuessingWinnerCreated', (e) => {
44 setWinners(ws => patchWinner(ws, e.model));
46 .listen('.ChannelUpdated', (e) => {
47 setChannel(c => ({ ...c, ...e.model }));
50 window.Echo.leave(`Channel.${channel.id}`);
52 }, [channel && channel.id]);
54 React.useEffect(() => {
55 const cutoff = channel && channel.guessing_start;
57 setGuesses(gs => gs.filter(g => g.created_at >= cutoff));
58 setWinners(ws => ws.filter(w => w.created_at >= cutoff));
60 }, [channel && channel.guessing_start]);
62 const onCancel = React.useCallback(async () => {
64 const rsp = await axios.post(
65 `/api/channels/${channel.id}/guessing-game/gtbk`,
70 toastr.error(t('twitchBot.controlError'));
74 const onSolve = React.useCallback(async (solution) => {
76 const rsp = await axios.post(
77 `/api/channels/${channel.id}/guessing-game/gtbk`,
78 { action: 'solve', solution },
82 toastr.error(t('twitchBot.controlError'));
86 const onStart = React.useCallback(async () => {
88 const rsp = await axios.post(
89 `/api/channels/${channel.id}/guessing-game/gtbk`,
94 toastr.error(t('twitchBot.controlError'));
98 const onStop = React.useCallback(async () => {
100 const rsp = await axios.post(
101 `/api/channels/${channel.id}/guessing-game/gtbk`,
104 setChannel(rsp.data);
106 toastr.error(t('twitchBot.controlError'));
112 <title>Guessing Game Controls</title>
114 <Navbar id="header" bg="dark" variant="dark">
121 onChange={({ channel }) => { setChannel(channel); }}
122 value={channel ? channel.id : ''}
130 <GuessingGameControls
139 <h3 className="mt-3">{t('twitchBot.guessingGame.winners')}</h3>
140 {winners.map(winner =>
141 <GuessingWinner key={winner.id} winner={winner} />
145 <h3 className="mt-3">{t('twitchBot.guessingGame.guesses')}</h3>
146 {guesses.map(guess =>
147 <GuessingGuess guess={guess} key={guess.id} />
151 <Alert variant="info">
152 {t('twitchBot.selectChannel')}