basic auto tracking

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

diff --git a/resources/js/components/twitch-bot/GuessingGameControls.js b/resources/js/components/twitch-bot/GuessingGameControls.js
index c3846c574e4fe3724155a81f7cd76779b5d5f972..50a3c3a4b0bde6d0bf138dfa0e54fed07ba00399 100644 (file)
--- a/resources/js/components/twitch-bot/GuessingGameControls.js
+++ b/resources/js/components/twitch-bot/GuessingGameControls.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import GuessingGameAutoTracking from './GuessingGameAutoTracking';
 import {
        hasActiveGuessing,
        isAcceptingGuesses,
@@ -23,29 +24,36 @@ const GuessingGameControls = ({
        ];
 
        return <div>
-               <div className="button-bar mt-3">
-                       <Button
-                               onClick={onStart}
-                               variant={hasActiveGuessing(channel) ? 'success' : 'outline-success'}
-                       >
-                               {t('button.start')}
-                       </Button>
-                       <Button
-                               onClick={onStop}
-                               variant={
-                                       hasActiveGuessing(channel) && isAcceptingGuesses(channel)
-                                       ? 'danger' : 'outline-danger'
-                               }
-                       >
-                               {t('button.stop')}
-                       </Button>
-                       <Button
-                               className="ms-3"
-                               onClick={onCancel}
-                               variant={hasActiveGuessing(channel) ? 'secondary' : 'outline-secondary'}
-                       >
-                               {t('button.cancel')}
-                       </Button>
+               <div className="d-flex align-items-center justify-content-between mt-3">
+                       <div className="button-bar">
+                               <Button
+                                       onClick={onStart}
+                                       variant={hasActiveGuessing(channel) ? 'success' : 'outline-success'}
+                               >
+                                       {t('button.start')}
+                               </Button>
+                               <Button
+                                       onClick={onStop}
+                                       variant={
+                                               hasActiveGuessing(channel) && isAcceptingGuesses(channel)
+                                               ? 'danger' : 'outline-danger'
+                                       }
+                               >
+                                       {t('button.stop')}
+                               </Button>
+                               <Button
+                                       className="ms-3"
+                                       onClick={onCancel}
+                                       variant={hasActiveGuessing(channel) ? 'secondary' : 'outline-secondary'}
+                               >
+                                       {t('button.cancel')}
+                               </Button>
+                       </div>
+                       <GuessingGameAutoTracking
+                               onSolve={onSolve}
+                               onStart={onStart}
+                               onStop={onStop}
+                       />
                </div>
                {hasActiveGuessing(channel) ?
                        <div className="bkgg-buttons d-grid gap-3 my-3">