From 376dd8c4eb32333ae64125743617a3745c4cb95a Mon Sep 17 00:00:00 2001
From: Songyi Huang <songyih1996@gmail.com>
Date: Fri, 17 Jan 2020 19:06:42 -0800
Subject: [PATCH] adjust css & add slider

---
 package.json                      |  1 +
 src/assets/doudizhu.scss          | 10 ++++++----
 src/components/GameBoard/index.js |  2 +-
 src/view/DoudizhuGameView.js      | 24 ++++++++++++++++++------
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index bb65569..246ca9d 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/doudizhu.scss b/src/assets/doudizhu.scss
index 45f281d..9b71d78 100644
--- a/src/assets/doudizhu.scss
+++ b/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 {
diff --git a/src/components/GameBoard/index.js b/src/components/GameBoard/index.js
index 4444162..802e577 100644
--- a/src/components/GameBoard/index.js
+++ b/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){
diff --git a/src/view/DoudizhuGameView.js b/src/view/DoudizhuGameView.js
index 72ab625..5ae5725 100644
--- a/src/view/DoudizhuGameView.js
+++ b/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">