guessing game settings

[alttp.git] / resources / js / components / twitch-bot / Controls.js

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index bdc89380fe75c07a4a1ad22e8dd2587661d1ac1b..822c201b8fde5504b97c5553dbd484fe6bc536d6 100644 (file)
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -5,12 +5,18 @@ import { useTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
 import ChatSettingsForm from './ChatSettingsForm';
+import CommandDialog from './CommandDialog';
+import Commands from './Commands';
+import GuessingSettingsForm from './GuessingSettingsForm';
 import ChannelSelect from '../common/ChannelSelect';
 import ToggleSwitch from '../common/ToggleSwitch';
 
 const Controls = () => {
        const [channel, setChannel] = React.useState(null);
        const [chatText, setChatText] = React.useState('');
+       const [editCommand, setEditCommand] = React.useState('');
+       const [editCommandSettings, setEditCommandSettings] = React.useState({});
+       const [showCommandDialog, setShowCommandDialog] = React.useState(false);
 
        const { t } = useTranslation();
 
@@ -56,6 +62,59 @@ const Controls = () => {
                }
        }, [channel, t]);
 
+       const onAddCommand = React.useCallback(() => {
+               setEditCommand('');
+               setEditCommandSettings({});
+               setShowCommandDialog(true);
+       }, [channel]);
+
+       const onEditCommand = React.useCallback((name, settings) => {
+               setEditCommand(name);
+               setEditCommandSettings(settings);
+               setShowCommandDialog(true);
+       }, [channel]);
+
+       const onRemoveCommand = React.useCallback(async (name) => {
+               try {
+                       const rsp = await axios.delete(`/api/channels/${channel.id}/commands/${name}`);
+                       setChannel(rsp.data);
+                       toastr.success(t('twitchBot.saveSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.saveError'));
+               }
+       }, [channel]);
+
+       const saveCommand = React.useCallback(async (values) => {
+               try {
+                       const rsp = await axios.put(
+                               `/api/channels/${channel.id}/commands/${values.name}`,
+                               values,
+                       );
+                       setChannel(rsp.data);
+                       setShowCommandDialog(false);
+                       setEditCommand('');
+                       setEditCommandSettings({});
+                       toastr.success(t('twitchBot.saveSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.saveError'));
+                       throw e;
+               }
+       }, [channel]);
+
+       const saveGuessingGame = React.useCallback(async (values) => {
+               try {
+                       const rsp = await axios.put(
+                               `/api/channels/${channel.id}/guessing-game/${values.name}`,
+                               values,
+                       );
+                       setChannel(rsp.data);
+                       toastr.success(t('twitchBot.saveSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.saveError'));
+                       throw e;
+               }
+       }, [channel]);
+
        return <>
                <Row className="mb-4">
                        <Form.Group as={Col} md={6}>
@@ -105,41 +164,76 @@ const Controls = () => {
                </Row>
                {channel ?
                        <Row>
-                               <Form.Group as={Col} md={6}>
-                                       <Form.Label>{t('twitchBot.chat')}</Form.Label>
-                                       <Form.Control
-                                               as="textarea"
-                                               onChange={({ target: { value } }) => {
-                                                       setChatText(value);
+                               <Col className="mt-5" md={6}>
+                                       <h3>{t('twitchBot.chat')}</h3>
+                                       <Form.Group>
+                                               <Form.Label>{t('twitchBot.chat')}</Form.Label>
+                                               <Form.Control
+                                                       as="textarea"
+                                                       onChange={({ target: { value } }) => {
+                                                               setChatText(value);
+                                                       }}
+                                                       value={chatText}
+                                               />
+                                               <div className="button-bar">
+                                                       <Button
+                                                               className="mt-2"
+                                                               disabled={!chatText || !channel.join}
+                                                               onClick={() => {
+                                                                       if (chatText) chat(chatText, 'localhorsttv');
+                                                               }}
+                                                               variant="twitch"
+                                                       >
+                                                               {t('twitchBot.sendApp')}
+                                                       </Button>
+                                                       <Button
+                                                               className="mt-2"
+                                                               disabled={!chatText || !channel.chat}
+                                                               onClick={() => {
+                                                                       if (chatText) chat(chatText, 'horstiebot');
+                                                               }}
+                                                               variant="twitch"
+                                                       >
+                                                               {t('twitchBot.sendChat')}
+                                                       </Button>
+                                               </div>
+                                       </Form.Group>
+                               </Col>
+                               <Col className="mt-5" md={6}>
+                                       <h3>{t('twitchBot.chatSettings')}</h3>
+                                       <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
+                               </Col>
+                               <Col className="mt-5" md={12}>
+                                       <h3>{t('twitchBot.commands')}</h3>
+                                       <Commands
+                                               channel={channel}
+                                               onEditCommand={onEditCommand}
+                                               onRemoveCommand={onRemoveCommand}
+                                       />
+                                       <CommandDialog
+                                               name={editCommand}
+                                               onHide={() => {
+                                                       setShowCommandDialog(false);
+                                                       setEditCommand('');
+                                                       setEditCommandSettings({});
                                                }}
-                                               value={chatText}
+                                               onSubmit={saveCommand}
+                                               settings={editCommandSettings}
+                                               show={showCommandDialog}
                                        />
-                                       <div className="button-bar">
-                                               <Button
-                                                       className="mt-2"
-                                                       disabled={!chatText || !channel.join}
-                                                       onClick={() => {
-                                                               if (chatText) chat(chatText, 'localhorsttv');
-                                                       }}
-                                                       variant="twitch"
-                                               >
-                                                       {t('twitchBot.sendApp')}
-                                               </Button>
-                                               <Button
-                                                       className="mt-2"
-                                                       disabled={!chatText || !channel.chat}
-                                                       onClick={() => {
-                                                               if (chatText) chat(chatText, 'horstiebot');
-                                                       }}
-                                                       variant="twitch"
-                                               >
-                                                       {t('twitchBot.sendChat')}
+                                       <div>
+                                               <Button onClick={onAddCommand} variant="primary">
+                                                       {t('twitchBot.addCommand')}
                                                </Button>
                                        </div>
-                               </Form.Group>
-                               <Col md={6}>
-                                       <h3>{t('twitchBot.chatSettings')}</h3>
-                                       <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
+                               </Col>
+                               <Col className="mt-5" md={12}>
+                                       <h3>{t('twitchBot.guessingGame.settings')}</h3>
+                                       <GuessingSettingsForm
+                                               name="gtbk"
+                                               onSubmit={saveGuessingGame}
+                                               settings={channel.guessing_settings?.gtbk || {}}
+                                       />
                                </Col>
                        </Row>
                :