X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=f64ee62712a658da228c4ebacbc895d55931bf35;hb=1b9629ce7f600b4aa9c9d51a281e514031871828;hp=0aea916cf04d698a879bc6bed886a88ebb426e08;hpb=e10222af705e3475fcea6e0b17d1c9984a62db26;p=alttp.git

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 0aea916..f64ee62 100644
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -1,20 +1,76 @@
 import axios from 'axios';
 import React from 'react';
-import { Alert, Col, Form, Row } from 'react-bootstrap';
+import { Alert, Button, Col, Form, Row } from 'react-bootstrap';
 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 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',
+	'eyes',
+	'love',
+	'lol',
+	'yes',
+	'no',
+	'rage',
+	'sad',
+	'sweat',
+	'wtf',
+	'pog',
+	'hype',
+	'kappa',
+	'o7',
+	'question',
+	'thx',
+];
+
 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();
 
-	const join = React.useCallback(async () => {
+	const chat = React.useCallback(async (text, bot_nick) => {
 		try {
-			const rsp = await axios.post(`/api/channels/${channel.id}/join`);
+			await axios.post(`/api/channels/${channel.id}/chat`, {
+				text,
+				bot_nick,
+			});
+			toastr.success(t('twitchBot.chatSuccess'));
+		} catch (e) {
+			toastr.error(t('twitchBot.chatError'));
+		}
+	}, [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 });
 			setChannel(rsp.data);
 			toastr.success(t('twitchBot.joinSuccess'));
 		} catch (e) {
@@ -22,9 +78,9 @@ const Controls = () => {
 		}
 	}, [channel, t]);
 
-	const part = React.useCallback(async () => {
+	const part = React.useCallback(async (bot_nick) => {
 		try {
-			const rsp = await axios.post(`/api/channels/${channel.id}/part`);
+			const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
 			setChannel(rsp.data);
 			toastr.success(t('twitchBot.partSuccess'));
 		} catch (e) {
@@ -32,39 +88,235 @@ const Controls = () => {
 		}
 	}, [channel, t]);
 
+	const saveChatSettings = React.useCallback(async (values) => {
+		try {
+			const rsp = await axios.post(`/api/channels/${channel.id}/chat-settings`, values);
+			setChannel(rsp.data);
+			toastr.success(t('twitchBot.saveSuccess'));
+		} catch (e) {
+			toastr.error(t('twitchBot.saveError'));
+		}
+	}, [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}>
 				<Form.Label>{t('twitchBot.channel')}</Form.Label>
 				<Form.Control
 					as={ChannelSelect}
+					autoSelect
 					joinable
 					manageable
 					onChange={({ channel }) => { setChannel(channel); }}
 					value={channel ? channel.id : ''}
 				/>
 			</Form.Group>
-			{channel ?
-				<Form.Group as={Col} md={6}>
-					<Form.Label>{t('twitchBot.join')}</Form.Label>
+			{channel ? <>
+				<Form.Group as={Col} md={3}>
+					<Form.Label>{t('twitchBot.joinApp')}</Form.Label>
 					<div>
 						<Form.Control
 							as={ToggleSwitch}
 							onChange={({ target: { value } }) => {
 								if (value) {
-									join();
+									join('localhorsttv');
 								} else {
-									part();
+									part('localhorsttv');
 								}
 							}}
 							value={channel.join}
 						/>
 					</div>
 				</Form.Group>
-			: null}
+				<Form.Group as={Col} md={3}>
+					<Form.Label>{t('twitchBot.joinChat')}</Form.Label>
+					<div>
+						<Form.Control
+							as={ToggleSwitch}
+							onChange={({ target: { value } }) => {
+								if (value) {
+									join('horstiebot');
+								} else {
+									part('horstiebot');
+								}
+							}}
+							value={channel.chat}
+						/>
+					</div>
+				</Form.Group>
+			</> : null}
 		</Row>
 		{channel ?
-			<div />
+			<Row>
+				<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>
+					<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}>
+					<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}>
+					<h3>{t('twitchBot.commands')}</h3>
+					<Commands
+						channel={channel}
+						onEditCommand={onEditCommand}
+						onRemoveCommand={onRemoveCommand}
+					/>
+					<CommandDialog
+						name={editCommand}
+						onHide={() => {
+							setShowCommandDialog(false);
+							setEditCommand('');
+							setEditCommandSettings({});
+						}}
+						onSubmit={saveCommand}
+						settings={editCommandSettings}
+						show={showCommandDialog}
+					/>
+					<div>
+						<Button onClick={onAddCommand} variant="primary">
+							{t('twitchBot.addCommand')}
+						</Button>
+					</div>
+				</Col>
+				<Col className="mt-5" md={12}>
+					<div className="d-flex align-items-end justify-content-between">
+						<h3>{t('twitchBot.guessingGame.settings')}</h3>
+						<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"
+						onSubmit={saveGuessingGame}
+						settings={channel.guessing_settings?.gtbk || {}}
+					/>
+				</Col>
+			</Row>
 		:
 			<Alert variant="info">
 				{t('twitchBot.selectChannel')}