fix: ui of page show winnner

src/actions/tomoAction.js

@@ -563,7 +563,13 @@ export const getAliasBalance = () => async (dispatch, getState) => {
   if (aliasBalance.includes('.')) {
     let interger = aliasBalance.split('.', 2)[0];
     let fractional = aliasBalance.split('.', 2)[1].substr(0, 4);
-    aliasBalance = interger.concat('.', fractional, ' ');
+    if (interger === '0' && fractional === '0000') {
+      aliasBalance = '0 ';
+    } else if (fractional === '0000') {
+      aliasBalance = interger + ' ';
+    } else {
+      aliasBalance = interger.concat('.', fractional, ' ');
+    }
   }
 
   dispatch({

src/component/ModalDeposit.js

@@ -83,7 +83,7 @@ class ModalDeposit extends React.Component {
               </ModalBody>
             </FormGroup>
             <ModalFooter>
-              <Button color='primary' type='submit'>
+              <Button color='primary' type='submit' onClick={this.toggle}>
                 Send
               </Button>
               <Button color='secondary' onClick={this.toggle}>

src/component/PlayerLayout/PlayerLayout.js

@@ -82,7 +82,13 @@ class PlayerLayout extends Component {
                 <Row className='set_height'>
                   <Col className='box_color' xs='12' md='8'>
                     <div className='margin_box '>
-                      <span> The winner is youuuuu</span>
+                      <br />
+                      <p className='congrat'>Congratulation! You are winner</p>
+                      <div>
+                        <strong>Game Balance:</strong> {this.props.aliasBalance}
+                        <img width='35' src='https://i.imgur.com/VZgib3M.png' alt='tomoCoin' />
+                      </div>
+
                       <Button
                         color='none'
                         className='withdraw'
@@ -96,9 +102,9 @@ class PlayerLayout extends Component {
                       <ToastContainer position='top-center' autoClose={2000} />
                       <img
                         alt=''
-                        src='https://media.giphy.com/media/2A0JSxcE0eQfrQrjAZ/giphy.gif'
-                        className='gif-load'
-                        width='60%'
+                        src='https://media.giphy.com/media/fxsqOYnIMEefC/giphy.gif'
+                        className='gif-congrat mt-3'
+                        width='80%'
                       />
                     </div>
                   </Col>
@@ -116,6 +122,22 @@ class PlayerLayout extends Component {
                   <Col className='box_color' xs='12' md='8'>
                     <div className='margin_box '>
                       <span> Waiting a new game...</span>
+                      <div>
+                        <strong>Game Balance:</strong> {this.props.aliasBalance}
+                        <img width='35' src='https://i.imgur.com/VZgib3M.png' alt='tomoCoin' />
+                      </div>
+
+                      <Button
+                        color='none'
+                        className='withdraw'
+                        onClick={(e) => {
+                          this.getMoneyBack();
+                          this.notifyInfo('Withdrawing...');
+                        }}
+                      >
+                        Withdraw
+                      </Button>
+                      <ToastContainer position='top-center' autoClose={2000} />
                       <img
                         alt=''
                         src='https://media.giphy.com/media/2A0JSxcE0eQfrQrjAZ/giphy.gif'
@@ -196,7 +218,8 @@ const mapStatetoProps = (state) => {
     ranking: state.tomo.ranking,
     wincount: state.tomo.winCount,
     questionCount: state.tomo.questionCount,
-    tomo: state.tomo
+    tomo: state.tomo,
+    aliasBalance: state.tomo.aliasBalance
   };
 };
 

src/component/PlayerLayout/QuesArea.js

@@ -31,7 +31,9 @@ class QuesArea extends Component {
 
   // auto scroll name='fixedScrol' when loading page
   componentDidMount() {
-    Scroll.scroller.scrollTo('fixedScroll');
+    if (this.props.winCount < 10) {
+      Scroll.scroller.scrollTo('fixedScroll');
+    }
   }
 
   shouldComponentUpdate(nextProps) {
@@ -245,7 +247,8 @@ const mapStatetoProps = (state) => {
     aliasBalance: state.tomo.aliasBalance,
     aliasAddress: state.tomo.aliasAccount.address,
     account: state.tomo.account,
-    questionCount: state.tomo.questionCount
+    questionCount: state.tomo.questionCount,
+    winCount: state.tomo.winCount
   };
 };
 

src/style/App.css

@@ -380,3 +380,11 @@ canvas {
 .font-number-question {
   font-weight: 600 !important;
 }
+
+.congrat {
+  background: linear-gradient(to left, violet, indigo, blue, green, orange, red);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: bold;
+  font-size: 20px;
+}

src/style/button.css

@@ -84,6 +84,13 @@ button.answer_box:focus {
   padding-right: 4%;
 }
 
+@media only screen and (min-width: 768px) {
+  .button-start,
+  .button-withdraw {
+    width: 14%;
+  }
+}
+
 @media only screen and (max-width: 700px) {
   .switchSmall {
     position: absolute;