guessing game controls

[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 822c201b8fde5504b97c5553dbd484fe6bc536d6..84742d8aed9bf6fedeaf5b4860d66fcd661392cc 100644 (file)
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -9,6 +9,7 @@ import CommandDialog from './CommandDialog';
 import Commands from './Commands';
 import GuessingSettingsForm from './GuessingSettingsForm';
 import ChannelSelect from '../common/ChannelSelect';
+import Icon from '../common/Icon';
 import ToggleSwitch from '../common/ToggleSwitch';
 
 const Controls = () => {
@@ -121,6 +122,7 @@ const Controls = () => {
                                <Form.Label>{t('twitchBot.channel')}</Form.Label>
                                <Form.Control
                                        as={ChannelSelect}
+                                       autoSelect
                                        joinable
                                        manageable
                                        onChange={({ channel }) => { setChannel(channel); }}
@@ -228,7 +230,22 @@ 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>
+                                               <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>
                                        <GuessingSettingsForm
                                                name="gtbk"
                                                onSubmit={saveGuessingGame}