try game speed controller

package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "element-react": "^1.4.34",
+    "element-theme-default": "^1.4.13",
     "node-sass": "^4.13.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-hot-loader": "^4.12.18",
     "react-scripts": "3.3.0",
     "socket.io-client": "^2.3.0"
   },

src/assets/gameview.scss

@@ -0,0 +1,7 @@
+.game-controller {
+    width: 500px;
+    padding: 20px;
+    .el-row {
+        margin-bottom: 10px;
+    }
+}

src/components/GameBoard/index.js

@@ -114,7 +114,7 @@ class DoudizhuGameBoard extends React.Component {
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        if(prevProps.turn !== this.props.turn){
+        if(prevProps.turn !== this.props.turn && this.props.turn !== 0){
             // new turn starts
             this.props.runNewTurn(prevProps);
         }

src/index.js

@@ -2,6 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './assets/index.css';
 import App from './App';
+
+// import element ui
+
+import 'element-theme-default';
+
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/view/DoudizhuGameView.js

@@ -1,14 +1,17 @@
 import React from 'react';
+import '../assets/gameview.scss';
 import DoudizhuGameBoard from '../components/GameBoard';
 import webSocket from "socket.io-client";
 import {removeCards, doubleRaf} from "../utils";
 
+import { Button, Layout, Slider } from 'element-react';
+
 class DoudizhuGameView extends React.Component {
     constructor(props) {
         super(props);
 
         const mainViewerId = 0;     // Id of the player at the bottom of screen
-        this.initConsiderationTime = 0;
+        this.initConsiderationTime = 1000;
         this.considerationTimeDeduction = 100;
         this.gameStateTimeout = null;
 
@@ -25,7 +28,8 @@ class DoudizhuGameView extends React.Component {
         this.state = {
             ws: null,
             gameInfo: this.initGameState,
-            gameStateLoop: null
+            gameStateLoop: null,
+            considerationTime: this.initConsiderationTime
         };
     }
 
@@ -99,10 +103,8 @@ class DoudizhuGameView extends React.Component {
                             }else{
                                 console.log("Cannot find cards in move from player's hand");
                             }
-                            gameInfo.considerationTime = this.initConsiderationTime;
-                            this.setState({gameInfo: gameInfo}, ()=>{
-
-                            });
+                            gameInfo.considerationTime = this.state.considerationTime;
+                            this.setState({gameInfo: gameInfo});
                         }else{
                             console.log("Mismatched game turn or current player index", message);
                         }
@@ -151,12 +153,26 @@ class DoudizhuGameView extends React.Component {
                         runNewTurn={(prevTurn)=>this.runNewTurn(prevTurn)}
                     />
                 </div>
-                <div style={{marginTop: "10px"}}>
-                    <input type='button' value='Connect' onClick={()=>{this.connectWebSocket()}} />
-                    <input style={{marginLeft: "10px"}} type='button' value='Start Replay' onClick={()=>{this.startReplay()}} />
+                <div className="game-controller">
+                    <Layout.Row>
+                        <Layout.Col span="24">
+                            <Button type="primary" onClick={()=>{this.connectWebSocket()}}>Connect</Button>
+                            <Button type="primary" onClick={()=>{this.startReplay()}}>Start Replay</Button>
+                        </Layout.Col>
+                    </Layout.Row>
+                    <Layout.Row>
+                        <Layout.Col span="24">
+                            <div className="block">
+                                <span className="demonstration">不显示间断点</span>
+                                <Slider value={this.state.considerationTime} step={100} min={0} max={10000} onChange={(newVal)=>{console.log('slider val', newVal);this.setState({considerationTime: newVal})}} />
                             </div>
-                <div style={{marginTop: "10px"}}>
+                        </Layout.Col>
+                    </Layout.Row>
+                    <Layout.Row>
+                        <Layout.Col span="24">
                             {`Current Player: ${this.state.gameInfo.currentPlayer} , Consideration Time: ${this.state.gameInfo.considerationTime}, Turn: ${this.state.gameInfo.turn}`}
+                        </Layout.Col>
+                    </Layout.Row>
                 </div>
             </div>
         )