- <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}
+ />