X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FGuessingGameControls.js;h=50a3c3a4b0bde6d0bf138dfa0e54fed07ba00399;hb=f0d1a566f5afd76ab7a56b295b71d5756dfd2bc3;hp=c3846c574e4fe3724155a81f7cd76779b5d5f972;hpb=c66d9d3c5eda563842c683827da1abf445b65483;p=alttp.git

diff --git a/resources/js/components/twitch-bot/GuessingGameControls.js b/resources/js/components/twitch-bot/GuessingGameControls.js
index c3846c5..50a3c3a 100644
--- 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">