DouZero
/
rlcard-showdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

request game state update & send game state update

This commit is contained in:
songyih 2020-01-13 23:18:36 -08:00
parent ec0489109b
commit 03971fb6d8
4 changed files with 102 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
server/index.js
View File

@ -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;
}
}
})

28
src/components/GameBoard/index.js
View File

@ -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 (
<div className="playingCards">
<ul className="hand">
{cards.map(card=>{
return this.translateCardData(card);
})}
</ul>
</div>
)
console.log(cards);
if(cards === "P"){
return <div>Pass</div>
}else{
return (
<div className="playingCards">
<ul className="hand">
{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">

23
src/components/GameBoard/index.scss
View File

@ -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;

59
src/view/DoudizhuGameView.js
View File

@ -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"}}>