Change Doudizhu message process from websocket to restful api

This commit is contained in:
songyih 2020-02-06 22:51:26 -08:00
parent 9de0847a1e
commit 19fafcb832
3 changed files with 53 additions and 126 deletions

View File

@ -9,53 +9,12 @@ const port = process.env.PORT || 10080;
app.use(cors());
app.use(express.json());
const server = app.listen(port, () => {
app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
});
const socket = require("socket.io");
const io = socket(server);
let testDoudizhuData = null, testLeducHoldemData = null;
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):
res = {
type: 0,
message: {
playerInfo: testDoudizhuData.playerInfo,
initHands: testDoudizhuData.initHands
}
};
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;
}
}
})
});
router.get('/replay/leduc_holdem/:id', (req, res)=>{
res.json(testLeducHoldemData);
});

View File

@ -1,8 +1,8 @@
import React from 'react';
import axios from 'axios';
import '../assets/gameview.scss';
import { DoudizhuGameBoard } from '../components/GameBoard';
import webSocket from "socket.io-client";
import { removeCards, doubleRaf, deepCopy, debounce } from "../utils";
import { removeCards, doubleRaf, deepCopy } from "../utils";
import { Layout } from 'element-react';
import Slider from '@material-ui/core/Slider';
@ -19,6 +19,8 @@ class DoudizhuGameView extends React.Component {
this.initConsiderationTime = 2000;
this.considerationTimeDeduction = 100;
this.gameStateTimeout = null;
this.apiUrl = window.g.apiUrl;
this.moveHistory = [];
this.initGameState = {
gameStatus: "ready", // "ready", "playing", "paused", "over"
@ -32,7 +34,6 @@ class DoudizhuGameView extends React.Component {
};
this.state = {
ws: null,
gameInfo: this.initGameState,
gameStateLoop: null,
gameSpeed: 0
@ -42,11 +43,6 @@ class DoudizhuGameView extends React.Component {
gameStateTimer() {
this.gameStateTimeout = setTimeout(()=>{
let currentConsiderationTime = this.state.gameInfo.considerationTime;
// for test use
// console.log(currentConsiderationTime);
// if(currentConsiderationTime === 1000){
// debugger;
// }
if(currentConsiderationTime > 0) {
currentConsiderationTime -= this.considerationTimeDeduction * Math.pow(2, this.state.gameSpeed);
currentConsiderationTime = currentConsiderationTime < 0 ? 0 : currentConsiderationTime;
@ -55,59 +51,8 @@ class DoudizhuGameView extends React.Component {
this.setState({gameInfo: gameInfo});
this.gameStateTimer();
}else{
const turn = this.state.gameInfo.turn;
const gameStateReq = {
type: 1,
message: {turn: turn}
};
let gameInfo = deepCopy(this.state.gameInfo);
this.setState({gameInfo: gameInfo});
this.state.ws.emit("getMessage", gameStateReq);
}
}, 100);
}
startReplay() {
if(this.state.ws !== null){
const replayReq = {type: 0};
this.state.ws.emit("getMessage", replayReq);
// init game state
let initGameState = deepCopy(this.initGameState);
// set game status to playing
initGameState.gameStatus = "playing";
this.setState({gameInfo: initGameState});
if(this.gameStateTimeout){
window.clearTimeout(this.gameStateTimeout);
this.gameStateTimeout = null;
}
// loop to update game state
this.gameStateTimer();
}else{
console.log("websocket not connected");
}
};
connectWebSocket() {
let ws = webSocket("http://localhost:10080");
ws.on("getMessage", message => {
if(message){
switch(message.type){
case 0:
// init replay info
let gameInfo = deepCopy(this.state.gameInfo);
gameInfo.playerInfo = message.message.playerInfo;
gameInfo.hands = message.message.initHands.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
let res = message.message;
if(res.turn === this.state.gameInfo.turn && res.playerIdx === this.state.gameInfo.currentPlayer){
let res = this.moveHistory[this.state.gameInfo.turn];
if(res.playerIdx === this.state.gameInfo.currentPlayer){
let gameInfo = deepCopy(this.state.gameInfo);
gameInfo.latestAction[res.playerIdx] = res.move === "P" ? "P" : res.move.split(" ");
gameInfo.turn++;
@ -122,16 +67,39 @@ class DoudizhuGameView extends React.Component {
gameInfo.considerationTime = this.initConsiderationTime;
this.setState({gameInfo: gameInfo});
}else{
console.log("Mismatched game turn or current player index", message);
}
break;
default:
console.log("Wrong message type ", message);
break;
console.log("Mismatched current player index");
}
}
}, 100);
}
startReplay() {
// for test use
const replayId = 0;
axios.get(`${this.apiUrl}/replay/doudizhu/${replayId}`)
.then(res => {
res = res.data;
// init replay info
this.moveHistory = res.moveHistory;
let gameInfo = deepCopy(this.initGameState);
gameInfo.gameStatus = "playing";
gameInfo.playerInfo = res.playerInfo;
gameInfo.hands = res.initHands.map(element => {
return element.split(" ");
});
this.setState({ws: ws});
// the first player should be landlord
gameInfo.currentPlayer = res.playerInfo.find(element=>{return element.role === "landlord"}).index;
this.setState({gameInfo: gameInfo}, ()=>{
if(this.gameStateTimeout){
window.clearTimeout(this.gameStateTimeout);
this.gameStateTimeout = null;
}
// loop to update game state
this.gameStateTimer();
});
});
};
runNewTurn(prevTurn){
@ -175,7 +143,6 @@ class DoudizhuGameView extends React.Component {
}
changeGameSpeed(newVal){
console.log('wdnmd');
this.setState({gameSpeed: newVal});
}
@ -188,11 +155,10 @@ class DoudizhuGameView extends React.Component {
case "paused":
return <Button variant={"contained"} startIcon={<PlayArrowRoundedIcon />} color="primary" onClick={()=>{this.resumeReplay()}}>Resume</Button>;
case "over":
return <Button variant={"contained"} startIcon={<ReplayRoundedIcon />} color="primary" onClick={()=>{this.startReplay()}}>Resume</Button>;
return <Button variant={"contained"} startIcon={<ReplayRoundedIcon />} color="primary" onClick={()=>{this.startReplay()}}>Restart</Button>;
default:
alert(`undefined game status: ${status}`);
}
return ;
}
render(){
@ -247,14 +213,14 @@ class DoudizhuGameView extends React.Component {
<div className="game-controller">
<Layout.Row>
<Layout.Col span="24">
<Button variant={"contained"} color="primary" onClick={()=>{this.connectWebSocket()}}>Connect</Button>
{/*<Button variant={"contained"} color="primary" onClick={()=>{this.connectWebSocket()}}>Connect</Button>*/}
{ this.gameStatusButton(this.state.gameInfo.gameStatus) }
</Layout.Col>
</Layout.Row>
<Layout.Row style={{height: "31px"}}>
<Layout.Col span="8" style={{height: "100%"}}>
<div style={{display: "table", height: "100%"}}>
<span style={{display: "table-cell", verticalAlign: "middle"}}>Consideration Time</span>
<span style={{display: "table-cell", verticalAlign: "middle"}}>Game Speed</span>
</div>
</Layout.Col>
<Layout.Col span="16">

View File

@ -2,7 +2,7 @@ import React from 'react';
import axios from 'axios';
import '../assets/gameview.scss';
import {LeducHoldemGameBoard} from '../components/GameBoard';
import {doubleRaf, deepCopy} from "../utils";
import {deepCopy} from "../utils";
import { Button, Layout } from 'element-react';
import Slider from '@material-ui/core/Slider';
@ -10,12 +10,14 @@ import Slider from '@material-ui/core/Slider';
class LeducHoldemGameView extends React.Component {
constructor(props) {
super(props);
const mainViewerId = 0; // Id of the player at the bottom of screen
this.initConsiderationTime = 2000;
this.considerationTimeDeduction = 100;
this.gameStateTimeout = null;
this.apiUrl = window.g.apiUrl;
this.moveHistory = [];
this.initGameState = {
playerInfo: [],
hands: [],