DouZero
/
rlcard-showdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed layout for doudizhu

This commit is contained in:
Songyi Huang 2020-02-12 21:13:05 -08:00
parent 1468cf5e24
commit 227863d393
2 changed files with 70 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/assets/gameview.scss
View File

@ -1,8 +1,12 @@
.game-controller { .game-controller {
width: 100%; //width: calc(100% - 20px*2);
padding: 20px; //padding: 20px;
.el-row { //.el-row {
margin-bottom: 10px; // margin-bottom: 10px;
//}
.game-controller-paper {
margin: 5px;
padding: 2px 10px;
} }
.status-button { .status-button {
@ -10,6 +14,16 @@
margin-right: 5px; margin-right: 5px;
width: 125px; 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 { .doudizhu-view-container {
@ -32,6 +46,10 @@
.probability-player { .probability-player {
height: calc(72px - 16px*2); height: calc(72px - 16px*2);
padding: 16px; padding: 16px;
span {
vertical-align: middle;
}
} }
.probability-table { .probability-table {

82
src/view/DoudizhuGameView.js
View File

@ -336,7 +336,14 @@ class DoudizhuGameView extends React.Component {
</Layout.Col> </Layout.Col>
<Layout.Col span="7" style={{"height": "100%"}}> <Layout.Col span="7" style={{"height": "100%"}}>
<Paper className={"doudizhu-probability-paper"} elevation={3}> <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 /> <Divider />
<div className={"probability-table"}> <div className={"probability-table"}>
<div className={"probability-item"}> <div className={"probability-item"}>
@ -353,12 +360,10 @@ class DoudizhuGameView extends React.Component {
</Layout.Col> </Layout.Col>
</Layout.Row> </Layout.Row>
<div className="game-controller"> <div className="game-controller">
<Layout.Row> <Paper className={"game-controller-paper"} elevation={3}>
<Layout.Col span="12"> <Layout.Row style={{"height": "51px"}}>
{/*<Button variant={"contained"} color="primary" onClick={()=>{this.connectWebSocket()}}>Connect</Button>*/} <Layout.Col span="7" style={{"height": "51px", "lineHeight": "48px"}}>
<div>
</Layout.Col>
<Layout.Col span="12">
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
@ -376,34 +381,43 @@ class DoudizhuGameView extends React.Component {
> >
<SkipNextIcon /> <SkipNextIcon />
</Button> </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> </div>
</Layout.Col> </Layout.Col>
<Layout.Col span="16"> <Layout.Col span="1" style={{"height": "100%", "width": "1px"}}>
<Slider <Divider orientation="vertical" />
value={this.state.gameSpeed} </Layout.Col>
getAriaValueText={sliderValueText} <Layout.Col span="3" style={{"height": "51px", "lineHeight": "51px", "marginLeft": "-1px", "marginRight": "-1px"}}>
onChange={(e, newVal)=>{this.changeGameSpeed(newVal)}} <div style={{"textAlign": "center"}}>{`Turn: ${this.state.gameInfo.turn}`}</div>
aria-labelledby="discrete-slider-custom" </Layout.Col>
step={1} <Layout.Col span="1" style={{"height": "100%", "width": "1px"}}>
min={-3} <Divider orientation="vertical" />
max={3} </Layout.Col>
track={false} <Layout.Col span="14">
valueLabelDisplay="off" <div>
marks={gameSpeedMarks} <label className={"form-label-left"}>Game Speed</label>
/> <div style={{"marginLeft": "100px", "marginRight": "10px"}}>
</Layout.Col> <Slider
</Layout.Row> value={this.state.gameSpeed}
<Layout.Row> getAriaValueText={sliderValueText}
<Layout.Col span="24"> onChange={(e, newVal)=>{this.changeGameSpeed(newVal)}}
{`Current Player: ${this.state.gameInfo.currentPlayer} , Consideration Time: ${this.state.gameInfo.considerationTime}, Turn: ${this.state.gameInfo.turn}`} aria-labelledby="discrete-slider-custom"
</Layout.Col> step={1}
</Layout.Row> 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>
</div> </div>
) )