adjust css & add slider

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.8.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

src/assets/doudizhu.scss

@@ -2,6 +2,7 @@
 
 .played-card-area {
     font-size: 12px;
+    width: 300px;
     display: flex;
     justify-content: center;
     .non-card {
@@ -97,10 +98,6 @@
         height: 130px;
         font-size: 10px;
 
-        .player-info {
-            float: right;
-        }
-
         .player-hand-up {
             position: absolute;
             top: 0;
@@ -122,6 +119,10 @@
             top: 0;
             margin-right: 130px;
         }
+
+        .player-info {
+            float: right;
+        }
     }
 
     .played-card-area {
@@ -161,6 +162,7 @@
     }
 
     .played-card-area {
+        width: 100%;
         position: relative;
         transform: translateY(25px);
         .non-card {

src/components/GameBoard/index.js

@@ -102,7 +102,7 @@ class DoudizhuGameBoard extends React.Component {
     }
 
     millisecond2Second(t){
-        return Math.round(t/1000);
+        return Math.ceil(t/1000);
     }
 
     playerDecisionArea(playerIdx){

src/view/DoudizhuGameView.js

@@ -4,7 +4,8 @@ import DoudizhuGameBoard from '../components/GameBoard';
 import webSocket from "socket.io-client";
 import {removeCards, doubleRaf} from "../utils";
 
-import { Button, Layout, Slider } from 'element-react';
+import { Button, Layout, Slider as elSlider } from 'element-react';
+import Slider from '@material-ui/core/Slider';
 
 class DoudizhuGameView extends React.Component {
     constructor(props) {
@@ -160,13 +161,24 @@ class DoudizhuGameView extends React.Component {
                             <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})}} />
+                    <Layout.Row style={{height: "31px"}}>
+                        <Layout.Col span="8" style={{height: "100%"}}>
+                            <div style={{display: "table", height: "100%"}}>
+                                <span style={{display: "table-cell", verticalAlign: "middle"}}>Consideration Time</span>
                             </div>
                         </Layout.Col>
+                        <Layout.Col span="16">
+                            <Slider
+                                value={this.state.considerationTime}
+                                onChange={(e, newVal)=>{console.log('slider val', newVal);this.setState({considerationTime: newVal})}}
+                                aria-labelledby="discrete-slider"
+                                valueLabelDisplay="auto"
+                                step={1000}
+                                marks
+                                min={0}
+                                max={10000}
+                            />
+                        </Layout.Col>
                     </Layout.Row>
                     <Layout.Row>
                         <Layout.Col span="24">