request game state update & send game state update
This commit is contained in:
songyih
parent
ec0489109b
commit
03971fb6d8
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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,6 +51,10 @@ class DoudizhuGameBoard extends React.Component {
|
|||
}
|
||||
|
||||
computeSingleLineHand(cards) {
|
||||
console.log(cards);
|
||||
if(cards === "P"){
|
||||
return <div>Pass</div>
|
||||
}else{
|
||||
return (
|
||||
<div className="playingCards">
|
||||
<ul className="hand">
|
||||
|
|
@ -61,6 +65,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
computeSideHand(cards) {
|
||||
let upCards = [];
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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"}}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue