From 03971fb6d8e72a07ff8217ebe1860f9c3fc0e791 Mon Sep 17 00:00:00 2001 From: songyih Date: Mon, 13 Jan 2020 23:18:36 -0800 Subject: [PATCH] request game state update & send game state update --- server/index.js | 19 +++++++++- src/components/GameBoard/index.js | 28 ++++++++------ src/components/GameBoard/index.scss | 23 ++++++----- src/view/DoudizhuGameView.js | 59 +++++++++++++++++++++++++++-- 4 files changed, 102 insertions(+), 27 deletions(-) diff --git a/server/index.js b/server/index.js index 9b015ca..bfce01a 100644 --- a/server/index.js +++ b/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; } } }) diff --git a/src/components/GameBoard/index.js b/src/components/GameBoard/index.js index c915cd0..8530a21 100644 --- a/src/components/GameBoard/index.js +++ b/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); + if(cards === "P"){ + return
Pass
+ }else{ + return ( +
+ +
+ ) + } } computeSideHand(cards) { @@ -116,6 +121,7 @@ class DoudizhuGameBoard extends React.Component { } return (
+
{`Current Player: ${this.props.currentPlayer} , Consideration Time: ${this.props.considerationTime}`}
diff --git a/src/components/GameBoard/index.scss b/src/components/GameBoard/index.scss index 1484e52..3af6e4f 100644 --- a/src/components/GameBoard/index.scss +++ b/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; diff --git a/src/view/DoudizhuGameView.js b/src/view/DoudizhuGameView.js index 09760e4..19e67b7 100644 --- a/src/view/DoudizhuGameView.js +++ b/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} />