diff --git a/public/index.html b/public/index.html index aa069f2..d551564 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + RLcard Showdown diff --git a/server/index.js b/server/index.js index 3c3edc1..9b015ca 100644 --- a/server/index.js +++ b/server/index.js @@ -22,10 +22,8 @@ io.on("connection", socket => { socket.emit("getMessage", "successfully connected to rlcard showdown node server"); socket.on("getMessage", message => { if(message){ - console.log(message.type); switch(message.type){ case(0): - console.log("going"); const res = { type: 0, message: { diff --git a/server/sample_data/sample_doudizhu.json b/server/sample_data/sample_doudizhu.json index 2dd656d..060f28d 100644 --- a/server/sample_data/sample_doudizhu.json +++ b/server/sample_data/sample_doudizhu.json @@ -23,127 +23,127 @@ ], "moveHistory": [ { - "playerId": 2, + "playerIdx": 2, "move": "H3 S3 D3 D5" }, { - "playerId": 0, + "playerIdx": 0, "move": "S9 H9 D9 S3" }, { - "playerId": 1, + "playerIdx": 1, "move": "P" }, { - "playerId": 2, + "playerIdx": 2, "move": "SJ HJ DJ D7" }, { - "playerId": 0, + "playerIdx": 0, "move": "HQ CQ DQ C7" }, { - "playerId": 1, + "playerIdx": 1, "move": "P" }, { - "playerId": 2, + "playerIdx": 2, "move": "P" }, { - "playerId": 0, + "playerIdx": 0, "move": "C4 D4" }, { - "playerId": 1, + "playerIdx": 1, "move": "ST HT" }, { - "playerId": 2, + "playerIdx": 2, "move": "SK CK" }, { - "playerId": 0, + "playerIdx": 0, "move": "S2 H2" }, { - "playerId": 1, + "playerIdx": 1, "move": "P" }, { - "playerId": 2, + "playerIdx": 2, "move": "P" }, { - "playerId": 0, + "playerIdx": 0, "move": "S6 H6" }, { - "playerId": 1, + "playerIdx": 1, "move": "P" }, { - "playerId": 2, + "playerIdx": 2, "move": "CT DT" }, { - "playerId": 0, + "playerIdx": 0, "move": "HK DK" }, { - "playerId": 1, + "playerIdx": 1, "move": "P" }, { - "playerId": 2, + "playerIdx": 2, "move": "RJ BJ" }, { - "playerId": 0, + "playerIdx": 0, "move": "P" }, { - "playerId": 1, + "playerIdx": 1, "move": "P" }, { - "playerId": 2, + "playerIdx": 2, "move": "S8 H8 C8 C9" }, { - "playerId": 0, + "playerIdx": 0, "move": "P" }, { - "playerId": 1, + "playerIdx": 1, "move": "HA CA DA H5" }, { - "playerId": 2, + "playerIdx": 2, "move": "P" }, { - "playerId": 0, + "playerIdx": 0, "move": "P" }, { - "playerId": 1, + "playerIdx": 1, "move": "SQ" }, { - "playerId": 2, + "playerIdx": 2, "move": "D2" }, { - "playerId": 0, + "playerIdx": 0, "move": "P" }, { - "playerId": 1, + "playerIdx": 1, "move": "P" }, { - "playerId": 2, + "playerIdx": 2, "move": "SA" } ] diff --git a/src/components/GameBoard/index.js b/src/components/GameBoard/index.js index d8dbb94..c915cd0 100644 --- a/src/components/GameBoard/index.js +++ b/src/components/GameBoard/index.js @@ -9,6 +9,9 @@ class DoudizhuGameBoard extends React.Component { this.suitMap = new Map( [["H", "hearts"], ["D", "diams"], ["S", "spades"], ["C", "clubs"]] ); + this.suitMapSymbol = new Map( + [["H", "\u2665"], ["D", "\u2666"], ["S", "\u2660"], ["C", "\u2663"]] + ) } translateCardData(card) { @@ -28,17 +31,18 @@ class DoudizhuGameBoard extends React.Component { suitClass = "joker"; suitText = "Joker"; }else{ - rankClass = card.charAt(0) === "T" ? `10` : card.charAt(0).toLowerCase(); - rankText = card.charAt(0) === "T" ? `10` : card.charAt(0); + rankClass = card.charAt(0) === "T" ? `10` : card.charAt(1).toLowerCase(); + rankClass = `rank-${rankClass}`; + rankText = card.charAt(0) === "T" ? `10` : card.charAt(1); } // translate suitClass if(card !== "RJ" && card !== "BJ"){ - suitClass = this.suitMap.get(card.charAt(1)); - suitText = `&${this.suitMap.get(card.charAt(1))};`; + suitClass = this.suitMap.get(card.charAt(0)); + suitText = this.suitMapSymbol.get(card.charAt(0)); } return ( -
  • - +
  • + {rankText} {suitText} @@ -46,15 +50,42 @@ class DoudizhuGameBoard extends React.Component { ) } - computeBottomHand(cards) { + computeSingleLineHand(cards) { return ( -
    -
    -
      - {cards.split(" ").map(card=>{ - return this.translateCardData(card); - })} -
    +
    +
      + {cards.map(card=>{ + return this.translateCardData(card); + })} +
    +
    + ) + } + + computeSideHand(cards) { + let upCards = []; + let downCards = []; + if(cards.length > 10){ + upCards = cards.slice(0, 10); + downCards = cards.slice(10, ); + }else{ + upCards = cards; + } + return ( +
    +
    +
    +
      + {upCards.map(element => {return this.translateCardData(element)})} +
    +
    +
    +
    +
    +
      + {downCards.map(element => {return this.translateCardData(element)})} +
    +
    ) @@ -88,794 +119,35 @@ class DoudizhuGameBoard extends React.Component {
    - {`Player Id ${leftId}`} -
    - -
    - + {`Player Id ${leftId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[leftIdx].role : ""}`}
    + {leftIdx >= 0 ? this.computeSideHand(this.props.hand[leftIdx]) :
    Waiting...
    }
    - + {leftIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[leftIdx]) : ""}
    - {`Player Id ${rightId}`} -
    - -
    - + {`Player Id ${rightId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[rightIdx].role : ""}`}
    + {rightIdx >= 0 ? this.computeSideHand(this.props.hand[rightIdx]) :
    Waiting...
    }
    - + {rightIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[rightIdx]) : ""}
    - + {bottomIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[bottomIdx]) : ""}
    - {`Player Id ${bottomId}`} -
    -
    - + {`Player Id ${bottomId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[bottomIdx].role : ""}`}
    + {bottomIdx >= 0 ?
    {this.computeSingleLineHand(this.props.hand[bottomIdx])}
    :
    Waiting...
    }
    -
    ); diff --git a/src/components/GameBoard/index.scss b/src/components/GameBoard/index.scss index 4c1c20a..1484e52 100644 --- a/src/components/GameBoard/index.scss +++ b/src/components/GameBoard/index.scss @@ -4,19 +4,30 @@ font-size: 12px; } +.player-hand-placeholder { + font-size: 16px; + display: table; + + span { + display: table-cell; + vertical-align: middle; + text-align: center; + } +} + .player-info { - text-align: center; - line-height: 130px; + + //line-height: 130px; font-size: 16px; width: 130px; height: 130px; background-color: green; + display: table; span { + display: table-cell; vertical-align: middle; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + text-align: center; } } @@ -36,7 +47,7 @@ .player-hand-up { position: absolute; - top: 0px; + top: 0; margin-left: 130px; width: 150px; } @@ -47,6 +58,14 @@ margin-left: 130px; width: 150px; } + + .player-hand-placeholder { + width: 150px; + height: 130px; + position: absolute; + top: 0; + margin-left: 130px; + } } .played-card-area { @@ -72,7 +91,7 @@ .player-hand-up { position: absolute; - top: 0px; + top: 0; margin-right: 130px; width: 150px; } @@ -83,6 +102,14 @@ margin-right: 130px; width: 150px; } + + .player-hand-placeholder { + width: 150px; + height: 130px; + position: absolute; + top: 0; + margin-right: 130px; + } } .played-card-area { @@ -105,15 +132,29 @@ .player-hand { position: absolute; - top: 0px; + top: 0; + padding-left: 20px; margin-left: 130px; width: 450px; } + + .player-hand-placeholder { + width: 150px; + height: 130px; + position: absolute; + top: 0; + padding-left: 20px; + margin-left: 130px; + } } .played-card-area { position: relative; transform: translateY(30px); + width: 280px; + margin-left: auto; + margin-right: auto; + text-align: center; } } diff --git a/src/view/DoudizhuGameView.js b/src/view/DoudizhuGameView.js index ad73e09..09760e4 100644 --- a/src/view/DoudizhuGameView.js +++ b/src/view/DoudizhuGameView.js @@ -13,7 +13,7 @@ class DoudizhuGameView extends React.Component { gameInfo: { playerInfo: [], hand: [], - latestAction: [], + latestAction: [[], [], []], mainViewerId: mainViewerId } }; @@ -31,14 +31,16 @@ class DoudizhuGameView extends React.Component { connectWebSocket() { let ws = webSocket("http://localhost:10080"); ws.on("getMessage", message => { - console.log(message); + // console.log(message); if(message){ switch(message.type){ case 0: // init replay info let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo)); gameInfo.playerInfo = message.message.playerInfo; - gameInfo.hand = message.message.initHand; + gameInfo.hand = message.message.initHand.map(element => { + return element.split(" "); + }); this.setState({gameInfo: gameInfo}); break; }