From 227863d3934b5eb951282016b653b3a3db0d34d3 Mon Sep 17 00:00:00 2001
From: Songyi Huang <songyih1996@gmail.com>
Date: Wed, 12 Feb 2020 21:13:05 -0800
Subject: [PATCH] changed layout for doudizhu

---
 src/assets/gameview.scss     | 26 ++++++++++--
 src/view/DoudizhuGameView.js | 82 +++++++++++++++++++++---------------
 2 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/src/assets/gameview.scss b/src/assets/gameview.scss
index c9b98f2..89fa983 100644
--- a/src/assets/gameview.scss
+++ b/src/assets/gameview.scss
@@ -1,8 +1,12 @@
 .game-controller {
-    width: 100%;
-    padding: 20px;
-    .el-row {
-        margin-bottom: 10px;
+    //width: calc(100% - 20px*2);
+    //padding: 20px;
+    //.el-row {
+    //    margin-bottom: 10px;
+    //}
+    .game-controller-paper {
+        margin: 5px;
+        padding: 2px 10px;
     }
 
     .status-button {
@@ -10,6 +14,16 @@
         margin-right: 5px;
         width: 125px;
     }
+
+    .form-label-left {
+        float: left;
+        text-align: right;
+        font-size: 14px;
+        line-height: 1;
+        padding: 11px 12px 11px 0;
+        box-sizing: border-box;
+        width: 80px;
+    }
 }
 
 .doudizhu-view-container {
@@ -32,6 +46,10 @@
         .probability-player {
             height: calc(72px - 16px*2);
             padding: 16px;
+
+            span {
+                vertical-align: middle;
+            }
         }
 
         .probability-table {
diff --git a/src/view/DoudizhuGameView.js b/src/view/DoudizhuGameView.js
index 877d862..415997f 100644
--- a/src/view/DoudizhuGameView.js
+++ b/src/view/DoudizhuGameView.js
@@ -336,7 +336,14 @@ class DoudizhuGameView extends React.Component {
                     </Layout.Col>
                     <Layout.Col span="7" style={{"height": "100%"}}>
                         <Paper className={"doudizhu-probability-paper"} elevation={3}>
-                            <div className={"probability-player"}>Current: 0</div>
+                            <div className={"probability-player"}>
+                                {
+                                    this.state.gameInfo.playerInfo.length > 0 ?
+                                    <span>Current Player: {this.state.gameInfo.currentPlayer}<br/>Role: {this.state.gameInfo.playerInfo[this.state.gameInfo.currentPlayer].role}</span>
+                                    :
+                                    <span>Waiting...</span>
+                                }
+                            </div>
                             <Divider />
                             <div className={"probability-table"}>
                                 <div className={"probability-item"}>
@@ -353,12 +360,10 @@ class DoudizhuGameView extends React.Component {
                     </Layout.Col>
                 </Layout.Row>
                 <div className="game-controller">
-                    <Layout.Row>
-                        <Layout.Col span="12">
-                            {/*<Button variant={"contained"} color="primary" onClick={()=>{this.connectWebSocket()}}>Connect</Button>*/}
-
-                        </Layout.Col>
-                        <Layout.Col span="12">
+                    <Paper className={"game-controller-paper"} elevation={3}>
+                        <Layout.Row style={{"height": "51px"}}>
+                            <Layout.Col span="7" style={{"height": "51px", "lineHeight": "48px"}}>
+                            <div>
                                 <Button
                                     variant="contained"
                                     color="primary"
@@ -376,34 +381,43 @@ class DoudizhuGameView extends React.Component {
                                 >
                                     <SkipNextIcon />
                                 </Button>
-                        </Layout.Col>
-                    </Layout.Row>
-                    <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"}}>Game Speed</span>
                             </div>
-                        </Layout.Col>
-                        <Layout.Col span="16">
-                            <Slider
-                                value={this.state.gameSpeed}
-                                getAriaValueText={sliderValueText}
-                                onChange={(e, newVal)=>{this.changeGameSpeed(newVal)}}
-                                aria-labelledby="discrete-slider-custom"
-                                step={1}
-                                min={-3}
-                                max={3}
-                                track={false}
-                                valueLabelDisplay="off"
-                                marks={gameSpeedMarks}
-                            />
-                        </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>
+                            </Layout.Col>
+                            <Layout.Col span="1" style={{"height": "100%", "width": "1px"}}>
+                                <Divider orientation="vertical" />
+                            </Layout.Col>
+                            <Layout.Col span="3" style={{"height": "51px", "lineHeight": "51px", "marginLeft": "-1px", "marginRight": "-1px"}}>
+                                <div style={{"textAlign": "center"}}>{`Turn: ${this.state.gameInfo.turn}`}</div>
+                            </Layout.Col>
+                            <Layout.Col span="1" style={{"height": "100%", "width": "1px"}}>
+                                <Divider orientation="vertical" />
+                            </Layout.Col>
+                            <Layout.Col span="14">
+                                <div>
+                                    <label className={"form-label-left"}>Game Speed</label>
+                                    <div style={{"marginLeft": "100px", "marginRight": "10px"}}>
+                                        <Slider
+                                            value={this.state.gameSpeed}
+                                            getAriaValueText={sliderValueText}
+                                            onChange={(e, newVal)=>{this.changeGameSpeed(newVal)}}
+                                            aria-labelledby="discrete-slider-custom"
+                                            step={1}
+                                            min={-3}
+                                            max={3}
+                                            track={false}
+                                            valueLabelDisplay="off"
+                                            marks={gameSpeedMarks}
+                                        />
+                                    </div>
+                                </div>
+                            </Layout.Col>
+                        </Layout.Row>
+                    </Paper>
+                    {/*<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>
         )