added progress bar

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": {

src/assets/gameview.scss

@@ -1,3 +1,6 @@
+.progress-bar {
+    margin: 5px;
+}
 .game-controller {
     //width: calc(100% - 20px*2);
     //padding: 20px;
@@ -116,3 +119,94 @@
         }
     }
 }
+
+.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;
+
+            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;
+                    }
+                }
+
+            }
+        }
+    }
+}

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 {
                         </Paper>
                     </Layout.Col>
                 </Layout.Row>
+                <div className="progress-bar">
+                    <LinearProgress variant="determinate" value={this.state.gameInfo.completedPercent} />
+                </div>
                 <div className="game-controller">
                     <Paper className={"game-controller-paper"} elevation={3}>
                         <Layout.Row style={{"height": "51px"}}>