show player consideration status

server/sample_data/sample_doudizhu-test.json

@@ -0,0 +1,38 @@
+{
+  "initHands": [
+    "S2 H2 HK DK HQ CQ DQ CJ S9 H9 D9 C7 S6 H6 C4 D4 S3",
+    "C2 HA CA DA SQ ST HT D8 S7 H7 C6 D6 S5 H5 C5 S4 H4",
+    "RJ BJ D2 SA SK CK SJ HJ DJ CT DT C9 S8 H8 C8 D7 D5 H3 S3 D3"
+  ],
+  "playerInfo": [
+    {
+      "id": 0,
+      "index": 0,
+      "role": "peasant"
+    },
+    {
+      "id": 1,
+      "index": 1,
+      "role": "peasant"
+    },
+    {
+      "id": 2,
+      "index": 2,
+      "role": "landlord"
+    }
+  ],
+  "moveHistory": [
+    {
+      "playerIdx": 2,
+      "move": "P"
+    },
+    {
+      "playerIdx": 0,
+      "move": "P"
+    },
+    {
+      "playerIdx": 1,
+      "move": "P"
+    }
+  ]
+}

server/sample_data/sample_doudizhu.json

@@ -1,150 +0,0 @@
-{
-  "initHands": [
-    "S2 H2 HK DK HQ CQ DQ CJ S9 H9 D9 C7 S6 H6 C4 D4 S3",
-    "C2 HA CA DA SQ ST HT D8 S7 H7 C6 D6 S5 H5 C5 S4 H4",
-    "RJ BJ D2 SA SK CK SJ HJ DJ CT DT C9 S8 H8 C8 D7 D5 H3 S3 D3"
-  ],
-  "playerInfo": [
-    {
-      "id": 0,
-      "index": 0,
-      "role": "peasant"
-    },
-    {
-      "id": 1,
-      "index": 1,
-      "role": "peasant"
-    },
-    {
-      "id": 2,
-      "index": 2,
-      "role": "landlord"
-    }
-  ],
-  "moveHistory": [
-    {
-      "playerIdx": 2,
-      "move": "H3 S3 D3 D5"
-    },
-    {
-      "playerIdx": 0,
-      "move": "S9 H9 D9 S3"
-    },
-    {
-      "playerIdx": 1,
-      "move": "P"
-    },
-    {
-      "playerIdx": 2,
-      "move": "SJ HJ DJ D7"
-    },
-    {
-      "playerIdx": 0,
-      "move": "HQ CQ DQ C7"
-    },
-    {
-      "playerIdx": 1,
-      "move": "P"
-    },
-    {
-      "playerIdx": 2,
-      "move": "P"
-    },
-    {
-      "playerIdx": 0,
-      "move": "C4 D4"
-    },
-    {
-      "playerIdx": 1,
-      "move": "ST HT"
-    },
-    {
-      "playerIdx": 2,
-      "move": "SK CK"
-    },
-    {
-      "playerIdx": 0,
-      "move": "S2 H2"
-    },
-    {
-      "playerIdx": 1,
-      "move": "P"
-    },
-    {
-      "playerIdx": 2,
-      "move": "P"
-    },
-    {
-      "playerIdx": 0,
-      "move": "S6 H6"
-    },
-    {
-      "playerIdx": 1,
-      "move": "P"
-    },
-    {
-      "playerIdx": 2,
-      "move": "CT DT"
-    },
-    {
-      "playerIdx": 0,
-      "move": "HK DK"
-    },
-    {
-      "playerIdx": 1,
-      "move": "P"
-    },
-    {
-      "playerIdx": 2,
-      "move": "RJ BJ"
-    },
-    {
-      "playerIdx": 0,
-      "move": "P"
-    },
-    {
-      "playerIdx": 1,
-      "move": "P"
-    },
-    {
-      "playerIdx": 2,
-      "move": "S8 H8 C8 C9"
-    },
-    {
-      "playerIdx": 0,
-      "move": "P"
-    },
-    {
-      "playerIdx": 1,
-      "move": "HA CA DA H5"
-    },
-    {
-      "playerIdx": 2,
-      "move": "P"
-    },
-    {
-      "playerIdx": 0,
-      "move": "P"
-    },
-    {
-      "playerIdx": 1,
-      "move": "SQ"
-    },
-    {
-      "playerIdx": 2,
-      "move": "D2"
-    },
-    {
-      "playerIdx": 0,
-      "move": "P"
-    },
-    {
-      "playerIdx": 1,
-      "move": "P"
-    },
-    {
-      "playerIdx": 2,
-      "move": "SA"
-    }
-  ]
-}

src/components/GameBoard/index.js

@@ -53,7 +53,7 @@ class DoudizhuGameBoard extends React.Component {
     computeSingleLineHand(cards) {
         console.log(cards);
         if(cards === "P"){
-            return <div>Pass</div>
+            return <span>Pass</span>
         }else{
             return (
                 <div className="playingCards">

src/components/GameBoard/index.scss

@@ -2,6 +2,16 @@
 
 .played-card-area {
     font-size: 12px;
+    display: table;
+    width: 280px;
+    height: 70px;
+
+    span {
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        font-size: 16px;
+    }
 }
 
 .player-hand-placeholder {
@@ -149,7 +159,7 @@
 
     .played-card-area {
         position: relative;
-        transform: translateY(30px);
+        transform: translateY(0px);
         width: 280px;
         margin-left: auto;
         margin-right: auto;

src/view/DoudizhuGameView.js

@@ -8,11 +8,9 @@ class DoudizhuGameView extends React.Component {
         super(props);
 
         const mainViewerId = 0;     // Id of the player at the bottom of screen
-        this.initConsiderationTime = 2;
+        this.initConsiderationTime = 0;
 
-        this.state = {
+        this.initGameState = {
-            ws: null,
-            gameInfo: {
             playerInfo: [],
             hands: [],
             latestAction: [[], [], []],
@@ -20,7 +18,11 @@ class DoudizhuGameView extends React.Component {
             turn: 0,
             currentPlayer: null,
             considerationTime: this.initConsiderationTime,
-            },
+        }
+
+        this.state = {
+            ws: null,
+            gameInfo: this.initGameState,
             gameStateLoop: null
         };
     }
@@ -52,6 +54,8 @@ class DoudizhuGameView extends React.Component {
         if(this.state.ws !== null){
             const replayReq = {type: 0};
             this.state.ws.emit("getMessage", replayReq);
+            // init game state
+            this.setState({gameInfo: this.initGameState});
             // loop to update game state
             this.gameStateTimer();
         }else{