X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=394f5464c6369ec4049d342861a287396bb468f1;hb=f0d1a566f5afd76ab7a56b295b71d5756dfd2bc3;hp=822c201b8fde5504b97c5553dbd484fe6bc536d6;hpb=93f50820771a0333b169f76f74727239cf0cb286;p=alttp.git

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 822c201..394f546 100644
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -8,9 +8,33 @@ 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('');
@@ -32,6 +56,30 @@ 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 adlibChat = React.useCallback(async () => {
+		try {
+			await axios.post(`/api/channels/${channel.id}/chat`, {
+				bot_nick: 'horstiebot',
+				adlib: true,
+			});
+			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 });
@@ -121,6 +169,7 @@ const Controls = () => {
 				<Form.Label>{t('twitchBot.channel')}</Form.Label>
 				<Form.Control
 					as={ChannelSelect}
+					autoSelect
 					joinable
 					manageable
 					onChange={({ channel }) => { setChannel(channel); }}
@@ -198,9 +247,36 @@ 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>
+					<div className="mt-3">
+						<Button
+							onClick={() => { adlibChat(); }}
+							title={t('twitchBot.adlibChatDesc')}
+							variant="outline-secondary"
+						>
+							{t('twitchBot.adlibChat')}
+						</Button>
+						<p className="text-muted">{t('twitchBot.adlibChatNote')}</p>
+					</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}>
@@ -228,7 +304,34 @@ const Controls = () => {
 					</div>
 				</Col>
 				<Col className="mt-5" md={12}>
-					<h3>{t('twitchBot.guessingGame.settings')}</h3>
+					<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}