request game state update & send game state update

server/index.js

@@ -21,10 +21,11 @@ io.on("connection", socket => {
     console.log("successfully connected to rlcard showdown frontend");
     socket.emit("getMessage", "successfully connected to rlcard showdown node server");
     socket.on("getMessage", message => {
+        let res = null;
         if(message){
             switch(message.type){
                 case(0):
-                    const res = {
+                    res = {
                         type: 0,
                         message: {
                             playerInfo: testDoudizhuData.playerInfo,
@@ -33,6 +34,22 @@ io.on("connection", socket => {
                     };
                     socket.emit("getMessage", res);
                     break;
+                case(1):
+                    console.log(message);
+                    if(message.message.turn >= testDoudizhuData.moveHistory.length){
+                        // todo: process end of game
+                    }else{
+                        res = {
+                            type: 1,
+                            message: {
+                                turn: message.message.turn,
+                                playerIdx: testDoudizhuData.moveHistory[message.message.turn].playerIdx,
+                                move: testDoudizhuData.moveHistory[message.message.turn].move
+                            }
+                        };
+                    }
+                    socket.emit("getMessage", res);
+                    break;
             }
         }
     })

src/components/GameBoard/index.js

@@ -31,9 +31,9 @@ class DoudizhuGameBoard extends React.Component {
             suitClass = "joker";
             suitText = "Joker";
         }else{
-            rankClass = card.charAt(0) === "T" ? `10` : card.charAt(1).toLowerCase();
+            rankClass = card.charAt(1) === "T" ? `10` : card.charAt(1).toLowerCase();
             rankClass = `rank-${rankClass}`;
-            rankText = card.charAt(0) === "T" ? `10` : card.charAt(1);
+            rankText = card.charAt(1) === "T" ? `10` : card.charAt(1);
         }
         // translate suitClass
         if(card !== "RJ" && card !== "BJ"){
@@ -51,15 +51,20 @@ class DoudizhuGameBoard extends React.Component {
     }
 
     computeSingleLineHand(cards) {
-        return (
+        console.log(cards);
-            <div className="playingCards">
+        if(cards === "P"){
-                <ul className="hand">
+            return <div>Pass</div>
-                    {cards.map(card=>{
+        }else{
-                        return this.translateCardData(card);
+            return (
-                    })}
+                <div className="playingCards">
-                </ul>
+                    <ul className="hand">
-            </div>
+                        {cards.map(card=>{
-        )
+                            return this.translateCardData(card);
+                        })}
+                    </ul>
+                </div>
+            )
+        }
     }
 
     computeSideHand(cards) {
@@ -116,6 +121,7 @@ class DoudizhuGameBoard extends React.Component {
         }
         return (
             <div style={{width: "100%", height: "100%", backgroundColor: "#ffcc99", position: "relative"}}>
+                <div>{`Current Player: ${this.props.currentPlayer} , Consideration Time: ${this.props.considerationTime}`}</div>
                 <div id={"left-player"}>
                     <div className="player-main-area">
                         <div className="player-info">

src/components/GameBoard/index.scss

@@ -16,12 +16,11 @@
 }
 
 .player-info {
-
-    //line-height: 130px;
     font-size: 16px;
     width: 130px;
     height: 130px;
-    background-color: green;
+    border-radius: 25px;
+    border: 2px solid #73AD21;
     display: table;
 
     span {
@@ -37,25 +36,25 @@
 
 #left-player {
     position: absolute;
-    left: 0px;
+    left: 10px;
     top: 10px;
 
     .player-main-area {
-        width: 280px;
+        width: 300px;
         height: 130px;
         font-size: 10px;
 
         .player-hand-up {
             position: absolute;
             top: 0;
-            margin-left: 130px;
+            margin-left: 150px;
             width: 150px;
         }
 
         .player-hand-down {
             position: absolute;
             top: 50px;
-            margin-left: 130px;
+            margin-left: 150px;
             width: 150px;
         }
 
@@ -77,11 +76,11 @@
 
 #right-player {
     position: absolute;
-    right: 0px;
+    right: 10px;
     top: 10px;
 
     .player-main-area {
-        width: 280px;
+        width: 300px;
         height: 130px;
         font-size: 10px;
 
@@ -92,14 +91,14 @@
         .player-hand-up {
             position: absolute;
             top: 0;
-            margin-right: 130px;
+            margin-right: 150px;
             width: 150px;
         }
 
         .player-hand-down {
             position: absolute;
             top: 50px;
-            margin-right: 130px;
+            margin-right: 150px;
             width: 150px;
         }
 
@@ -121,7 +120,7 @@
 
 #bottom-player {
     position: absolute;
-    bottom: 0px;
+    bottom: 10px;
     left: 50%;
     margin-left: -290px;
 

src/view/DoudizhuGameView.js

@@ -7,6 +7,7 @@ class DoudizhuGameView extends React.Component {
         super(props);
 
         const mainViewerId = 0;     // Id of the player at the bottom of screen
+        this.initConsiderationTime = 2;
 
         this.state = {
             ws: null,
@@ -14,15 +15,44 @@ class DoudizhuGameView extends React.Component {
                 playerInfo: [],
                 hand: [],
                 latestAction: [[], [], []],
-                mainViewerId: mainViewerId
+                mainViewerId: mainViewerId,
-            }
+                turn: 0,
+                currentPlayer: null,
+                considerationTime: this.initConsiderationTime,
+            },
+            gameStateLoop: null
         };
     }
 
+    gameStateTimer() {
+        setTimeout(()=>{
+            let currentConsiderationTime = this.state.gameInfo.considerationTime;
+            if(currentConsiderationTime > 0) {
+                currentConsiderationTime--;
+                let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
+                gameInfo.considerationTime = currentConsiderationTime;
+                this.setState({gameInfo: gameInfo});
+                this.gameStateTimer();
+            }else{
+                const turn = this.state.gameInfo.turn;
+                const gameStateReq = {
+                    type: 1,
+                    message: {turn: turn}
+                };
+                let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
+                gameInfo.considerationTime = this.initConsiderationTime;
+                this.setState({gameInfo: gameInfo});
+                this.state.ws.emit("getMessage", gameStateReq);
+            }
+        }, 1000);
+    }
+
     startReplay() {
         if(this.state.ws !== null){
             const replayReq = {type: 0};
             this.state.ws.emit("getMessage", replayReq);
+            // loop to update game state
+            this.gameStateTimer();
         }else{
             console.log("websocket not connected");
         }
@@ -31,7 +61,6 @@ class DoudizhuGameView extends React.Component {
     connectWebSocket() {
         let ws = webSocket("http://localhost:10080");
         ws.on("getMessage", message => {
-            // console.log(message);
             if(message){
                 switch(message.type){
                     case 0:
@@ -41,8 +70,30 @@ class DoudizhuGameView extends React.Component {
                         gameInfo.hand = message.message.initHand.map(element => {
                             return element.split(" ");
                         });
+                        // the first player should be landlord
+                        gameInfo.currentPlayer = message.message.playerInfo.find(element=>{return element.role === "landlord"}).index;
                         this.setState({gameInfo: gameInfo});
                         break;
+                    case 1:
+                        // getting player actions
+                        console.log(message.message);
+                        let res = message.message;
+                        if(res.turn === this.state.gameInfo.turn && res.playerIdx === this.state.gameInfo.currentPlayer){
+                            let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
+                            gameInfo.latestAction[res.playerIdx] = res.move === "P" ? "P" : res.move.split(" ");
+                            gameInfo.turn++;
+                            gameInfo.currentPlayer = (gameInfo.currentPlayer+1)%3;
+                            // todo: take away played cards from player's hand
+
+                            this.setState({gameInfo: gameInfo});
+                            this.gameStateTimer();
+                        }else{
+                            console.log("Mismatched game turn or current player index", message);
+                        }
+                        break;
+                    default:
+                        console.log("Wrong message type ", message);
+                        break;
                 }
             }
         });
@@ -58,6 +109,8 @@ class DoudizhuGameView extends React.Component {
                         hand={this.state.gameInfo.hand}
                         latestAction={this.state.gameInfo.latestAction}
                         mainPlayerId={this.state.gameInfo.mainViewerId}
+                        currentPlayer={this.state.gameInfo.currentPlayer}
+                        considerationTime={this.state.gameInfo.considerationTime}
                     />
                 </div>
                 <div style={{marginTop: "10px"}}>