diff --git a/package.json b/package.json index 95e3a34..647d364 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "react-dom": "^16.12.0", "react-hot-loader": "^4.12.19", "react-router-dom": "^5.1.2", - "react-scripts": "3.3.0", + "react-scripts": "3.4.0", "socket.io-client": "^2.3.0" }, "scripts": { diff --git a/src/assets/gameview.scss b/src/assets/gameview.scss index 89fa983..741b43c 100644 --- a/src/assets/gameview.scss +++ b/src/assets/gameview.scss @@ -1,3 +1,6 @@ +.progress-bar { + margin: 5px; +} .game-controller { //width: calc(100% - 20px*2); //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 { display: table; border-collapse: collapse; diff --git a/src/view/DoudizhuGameView.js b/src/view/DoudizhuGameView.js index 415997f..5be4ebf 100644 --- a/src/view/DoudizhuGameView.js +++ b/src/view/DoudizhuGameView.js @@ -9,6 +9,7 @@ import Slider from '@material-ui/core/Slider'; import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; import Divider from '@material-ui/core/Divider'; +import LinearProgress from '@material-ui/core/LinearProgress'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded'; import PauseCircleOutlineRoundedIcon from '@material-ui/icons/PauseCircleOutlineRounded'; @@ -40,6 +41,7 @@ class DoudizhuGameView extends React.Component { currentPlayer: null, considerationTime: this.initConsiderationTime, + completedPercent: 0, }; this.state = { @@ -72,6 +74,7 @@ class DoudizhuGameView extends React.Component { console.log("Cannot find cards in move from player's hand"); } gameInfo.considerationTime = this.initConsiderationTime; + gameInfo.completedPercent = (this.state.gameInfo.turn + 1) * 100.0 / this.moveHistory.length; }else { console.log("Mismatched current player index"); } @@ -359,6 +362,9 @@ class DoudizhuGameView extends React.Component { +
+ +