]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/twitch-bot/GuessingWinner.js
tracker medallion controler
[alttp.git] / resources / js / components / twitch-bot / GuessingWinner.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Col, Row } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 const GuessingWinner = ({ winner }) => {
7         const { t } = useTranslation();
8
9         const classNames = ['guessing-game-winner', 'my-2', 'p-2', 'border', 'rounded'];
10         if (!winner.score) {
11                 classNames.push('no-points');
12         }
13
14         return <div className={classNames.join(' ')}>
15                 <Row>
16                         <Col xs={6}>
17                                 <div>{winner.uname}</div>
18                                 <div>{t(
19                                         'twitchBot.guessingGame.winnerScore',
20                                         { count: winner.score, score: winner.score },
21                                 )}</div>
22                         </Col>
23                         <Col xs={6}>
24                                 <div className="fs-3 text-end">{winner.guess}</div>
25                         </Col>
26                 </Row>
27         </div>;
28 };
29
30 GuessingWinner.propTypes = {
31         winner: PropTypes.shape({
32                 guess: PropTypes.string,
33                 score: PropTypes.number,
34                 uname: PropTypes.string,
35         }),
36 };
37
38 export default GuessingWinner;