remove played cards from player's hands

server/index.js

@@ -29,7 +29,7 @@ io.on("connection", socket => {
                         type: 0,
                         message: {
                             playerInfo: testDoudizhuData.playerInfo,
-                            initHand: testDoudizhuData.initHand
+                            initHands: testDoudizhuData.initHands
                         }
                     };
                     socket.emit("getMessage", res);

server/sample_data/sample_doudizhu.json

@@ -1,5 +1,5 @@
 {
-  "initHand": [
+  "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"

src/components/GameBoard/index.js

@@ -127,7 +127,7 @@ class DoudizhuGameBoard extends React.Component {
                         <div className="player-info">
                             <span>{`Player Id ${leftId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[leftIdx].role : ""}`}</span>
                         </div>
-                        {leftIdx >= 0 ? this.computeSideHand(this.props.hand[leftIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
+                        {leftIdx >= 0 ? this.computeSideHand(this.props.hands[leftIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
                     </div>
                     <div className="played-card-area">
                         {leftIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[leftIdx]) : ""}
@@ -138,7 +138,7 @@ class DoudizhuGameBoard extends React.Component {
                         <div className="player-info">
                             <span>{`Player Id ${rightId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[rightIdx].role : ""}`}</span>
                         </div>
-                        {rightIdx >= 0 ? this.computeSideHand(this.props.hand[rightIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
+                        {rightIdx >= 0 ? this.computeSideHand(this.props.hands[rightIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
                     </div>
                     <div className="played-card-area">
                         {rightIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[rightIdx]) : ""}
@@ -152,7 +152,7 @@ class DoudizhuGameBoard extends React.Component {
                         <div className="player-info">
                             <span>{`Player Id ${bottomId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[bottomIdx].role : ""}`}</span>
                         </div>
-                        {bottomIdx >= 0 ? <div className="player-hand">{this.computeSingleLineHand(this.props.hand[bottomIdx])}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
+                        {bottomIdx >= 0 ? <div className="player-hand">{this.computeSingleLineHand(this.props.hands[bottomIdx])}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
                     </div>
                 </div>
             </div>

src/utils/index.js

@@ -0,0 +1,21 @@
+export function removeCards(cards, hands){     // remove cards from hands, return the remained hands
+    let remainedHands = JSON.parse(JSON.stringify(hands));
+    // if the player's action is pass then return the copy of original hands
+    if(cards === "P"){
+        return remainedHands;
+    }
+    let misMatch = false;
+    cards.forEach(card => {
+        let foundIdx = remainedHands.findIndex(element => {return element === card;});
+        if(foundIdx > -1){
+            remainedHands.splice(foundIdx, 1);
+        }else {
+            misMatch = true;
+        }
+    });
+    if(misMatch)
+        return false;
+    else
+        return remainedHands;
+}
+

src/view/DoudizhuGameView.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import DoudizhuGameBoard from '../components/GameBoard';
 import webSocket from "socket.io-client";
+import {removeCards} from "../utils";
 
 class DoudizhuGameView extends React.Component {
     constructor(props) {
@@ -13,7 +14,7 @@ class DoudizhuGameView extends React.Component {
             ws: null,
             gameInfo: {
                 playerInfo: [],
-                hand: [],
+                hands: [],
                 latestAction: [[], [], []],
                 mainViewerId: mainViewerId,
                 turn: 0,
@@ -67,7 +68,7 @@ class DoudizhuGameView extends React.Component {
                         // init replay info
                         let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
                         gameInfo.playerInfo = message.message.playerInfo;
-                        gameInfo.hand = message.message.initHand.map(element => {
+                        gameInfo.hands = message.message.initHands.map(element => {
                             return element.split(" ");
                         });
                         // the first player should be landlord
@@ -83,8 +84,13 @@ class DoudizhuGameView extends React.Component {
                             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
+                            // take away played cards from player's hands
-
+                            const remainedCards = removeCards(gameInfo.latestAction[res.playerIdx], gameInfo.hands[res.playerIdx]);
+                            if(remainedCards !== false){
+                                gameInfo.hands[res.playerIdx] = remainedCards;
+                            }else{
+                                console.log("Cannot find cards in move from player's hand");
+                            }
                             this.setState({gameInfo: gameInfo});
                             this.gameStateTimer();
                         }else{
@@ -106,7 +112,7 @@ class DoudizhuGameView extends React.Component {
                 <div style={{width: "960px", height: "540px"}}>
                     <DoudizhuGameBoard
                         playerInfo={this.state.gameInfo.playerInfo}
-                        hand={this.state.gameInfo.hand}
+                        hands={this.state.gameInfo.hands}
                         latestAction={this.state.gameInfo.latestAction}
                         mainPlayerId={this.state.gameInfo.mainViewerId}
                         currentPlayer={this.state.gameInfo.currentPlayer}