]> git.localhorst.tv Git - alttp.git/blobdiff - resources/js/components/twitch-bot/Controls.js
chat bot protocol ui
[alttp.git] / resources / js / components / twitch-bot / Controls.js
index 84742d8aed9bf6fedeaf5b4860d66fcd661392cc..51f0633a226bdc1f5626a47ee9778ba77d160ac2 100644 (file)
@@ -8,10 +8,13 @@ import ChatSettingsForm from './ChatSettingsForm';
 import CommandDialog from './CommandDialog';
 import Commands from './Commands';
 import GuessingSettingsForm from './GuessingSettingsForm';
+import ChatBotLog from '../chat-bot-logs/ChatBotLog';
 import ChannelSelect from '../common/ChannelSelect';
 import Icon from '../common/Icon';
 import ToggleSwitch from '../common/ToggleSwitch';
 
+const CHAT_CATEGORIES = ['unclassified', 'hi', 'gl', 'gg', 'lol', 'pog', 'hype', 'o7'];
+
 const Controls = () => {
        const [channel, setChannel] = React.useState(null);
        const [chatText, setChatText] = React.useState('');
@@ -33,6 +36,18 @@ const Controls = () => {
                }
        }, [channel, chatText, t]);
 
+       const randomChat = React.useCallback(async (category) => {
+               try {
+                       await axios.post(`/api/channels/${channel.id}/chat`, {
+                               bot_nick: 'horstiebot',
+                               category,
+                       });
+                       toastr.success(t('twitchBot.chatSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.chatError'));
+               }
+       }, [channel, chatText, t]);
+
        const join = React.useCallback(async (bot_nick) => {
                try {
                        const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
@@ -200,9 +215,26 @@ const Controls = () => {
                                                        </Button>
                                                </div>
                                        </Form.Group>
+                                       <h3 className="mt-3">{t('twitchBot.randomChat')}</h3>
+                                       <div className="button-bar">
+                                               {CHAT_CATEGORIES.map(category =>
+                                                       <Button
+                                                               key={category}
+                                                               onClick={() => { randomChat(category); }}
+                                                               variant="outline-secondary"
+                                                       >
+                                                               {t(`twitchBot.chatCategories.${category}`)}
+                                                       </Button>
+                                               )}
+                                       </div>
                                </Col>
                                <Col className="mt-5" md={6}>
-                                       <h3>{t('twitchBot.chatSettings')}</h3>
+                                       <div className="d-flex justify-content-between">
+                                               <h3>{t('twitchBot.chatSettings')}</h3>
+                                               <div className="button-bar">
+                                                       <ChatBotLog id={channel.id} />
+                                               </div>
+                                       </div>
                                        <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
                                </Col>
                                <Col className="mt-5" md={12}>
@@ -232,19 +264,31 @@ const Controls = () => {
                                <Col className="mt-5" md={12}>
                                        <div className="d-flex align-items-end justify-content-between">
                                                <h3>{t('twitchBot.guessingGame.settings')}</h3>
-                                               <Button
-                                                       onClick={() => {
-                                                               window.open(
-                                                                       '/guessing-game/controls',
-                                                                       '',
-                                                                       'width=640,height=800,titlebar=0,menubar=0,toolbar=0',
-                                                               );
-                                                       }}
-                                                       title={t('twitchBot.guessingGame.popoutControls')}
-                                                       variant="outline-secondary"
-                                               >
-                                                       <Icon.OPEN title="" />
-                                               </Button>
+                                               <div className="button-bar">
+                                                       {channel.access_key ?
+                                                               <Button
+                                                                       href={`/guessing-game/monitor/${channel.access_key}`}
+                                                                       target="_blank"
+                                                                       title={t('button.browserSource')}
+                                                                       variant="outline-secondary"
+                                                               >
+                                                                       <Icon.BROWSER_SOURCE title="" />
+                                                               </Button>
+                                                       : null}
+                                                       <Button
+                                                               onClick={() => {
+                                                                       window.open(
+                                                                               `/guessing-game/controls/${channel.id}`,
+                                                                               '',
+                                                                               'width=640,height=800,titlebar=0,menubar=0,toolbar=0',
+                                                                       );
+                                                               }}
+                                                               title={t('twitchBot.guessingGame.popoutControls')}
+                                                               variant="outline-secondary"
+                                                       >
+                                                               <Icon.OPEN title="" />
+                                                       </Button>
+                                               </div>
                                        </div>
                                        <GuessingSettingsForm
                                                name="gtbk"