added progress bar

This commit is contained in:
lpan 2020-02-18 10:49:06 -08:00
parent 227863d393
commit ee0c08c224
3 changed files with 101 additions and 1 deletions

View File

@ -13,7 +13,7 @@
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-hot-loader": "^4.12.19", "react-hot-loader": "^4.12.19",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-scripts": "3.3.0", "react-scripts": "3.4.0",
"socket.io-client": "^2.3.0" "socket.io-client": "^2.3.0"
}, },
"scripts": { "scripts": {

View File

@ -1,3 +1,6 @@
.progress-bar {
margin: 5px;
}
.game-controller { .game-controller {
//width: calc(100% - 20px*2); //width: calc(100% - 20px*2);
//padding: 20px; //padding: 20px;
@ -52,6 +55,97 @@
} }
} }
.probability-table {
display: table;
border-collapse: collapse;
width: 100%;
height: calc(100% - 72px);
.probability-item {
display: table-row;
&:not(:first-child) {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.waiting {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.playing {
-webkit-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
display: table-cell;
height: 152px;
vertical-align: middle;
.playingCards ul.hand {
margin-bottom: 0;
}
.probability-move {
font-size: 10px;
width: 100%;
display: flex;
justify-content: center;
}
.non-card {
visibility: visible;
transition: visibility 0s, opacity 0.5s;
opacity: 1;
display: table;
width: 100%;
margin-top: 5%;
height: 25px;
span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 16px;
}
}
.non-card.hide {
visibility: hidden;
transition: visibility 0.2s, opacity 0.15s;
opacity: 0;
pointer-events:none;
}
}
}
}
}
}
.leduc-view-container {
width: 1000px;
margin-left: auto;
margin-right: auto;
.leduc-gameboard-paper {
height: calc(100% - 7px*2);
margin: 5px;
padding: 2px;
}
.leduc-probability-paper {
height: calc(100% - 5px*2);
margin: 5px;
.probability-player {
height: calc(72px - 16px*2);
padding: 16px;
span {
vertical-align: middle;
}
}
.probability-table { .probability-table {
display: table; display: table;
border-collapse: collapse; border-collapse: collapse;

View File

@ -9,6 +9,7 @@ import Slider from '@material-ui/core/Slider';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider'; import Divider from '@material-ui/core/Divider';
import LinearProgress from '@material-ui/core/LinearProgress';
import ButtonGroup from '@material-ui/core/ButtonGroup'; import ButtonGroup from '@material-ui/core/ButtonGroup';
import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded'; import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
import PauseCircleOutlineRoundedIcon from '@material-ui/icons/PauseCircleOutlineRounded'; import PauseCircleOutlineRoundedIcon from '@material-ui/icons/PauseCircleOutlineRounded';
@ -40,6 +41,7 @@ class DoudizhuGameView extends React.Component {
currentPlayer: null, currentPlayer: null,
considerationTime: this.initConsiderationTime, considerationTime: this.initConsiderationTime,
completedPercent: 0,
}; };
this.state = { this.state = {
@ -72,6 +74,7 @@ class DoudizhuGameView extends React.Component {
console.log("Cannot find cards in move from player's hand"); console.log("Cannot find cards in move from player's hand");
} }
gameInfo.considerationTime = this.initConsiderationTime; gameInfo.considerationTime = this.initConsiderationTime;
gameInfo.completedPercent = (this.state.gameInfo.turn + 1) * 100.0 / this.moveHistory.length;
}else { }else {
console.log("Mismatched current player index"); console.log("Mismatched current player index");
} }
@ -359,6 +362,9 @@ class DoudizhuGameView extends React.Component {
</Paper> </Paper>
</Layout.Col> </Layout.Col>
</Layout.Row> </Layout.Row>
<div className="progress-bar">
<LinearProgress variant="determinate" value={this.state.gameInfo.completedPercent} />
</div>
<div className="game-controller"> <div className="game-controller">
<Paper className={"game-controller-paper"} elevation={3}> <Paper className={"game-controller-paper"} elevation={3}>
<Layout.Row style={{"height": "51px"}}> <Layout.Row style={{"height": "51px"}}>