import { Button } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
+import GuessingGameAutoTracking from './GuessingGameAutoTracking';
import {
hasActiveGuessing,
isAcceptingGuesses,
];
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">