changed layout for doudizhu
This commit is contained in:
parent
1468cf5e24
commit
227863d393
|
@ -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 {
|
||||
|
|
|
@ -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,15 +381,21 @@ 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">
|
||||
<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}
|
||||
|
@ -397,13 +408,16 @@ class DoudizhuGameView extends React.Component {
|
|||
valueLabelDisplay="off"
|
||||
marks={gameSpeedMarks}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue