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

show consideration time in player decision area

This commit is contained in:
songyih 2020-01-15 13:08:59 -08:00
parent 3537e38dbb
commit cb4fa7b2b7
4 changed files with 62 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
server/sample_data/sample_doudizhu-test.json
View File

@ -24,15 +24,23 @@
"moveHistory": [
{
"playerIdx": 2,
"move": "P"
"move": "H3 S3 D3 D5"
},
{
"playerIdx": 0,
"move": "P"
"move": "S9 H9 D9 S3"
},
{
"playerIdx": 1,
"move": "P"
},
{
"playerIdx": 2,
"move": "SJ HJ DJ D7"
},
{
"playerIdx": 0,
"move": "P"
}
]
}

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

@ -53,11 +53,11 @@ class DoudizhuGameBoard extends React.Component {
computeSingleLineHand(cards) {
console.log(cards);
if(cards === "P"){
return <span>Pass</span>
return <div className="non-card"><span>Pass</span></div>
}else{
return (
<div className="playingCards">
<ul className="hand">
<ul className="hand" style={{width: this.computeHandCardsWidth(cards.length, 12)}}>
{cards.map(card=>{
return this.translateCardData(card);
})}
@ -96,6 +96,25 @@ class DoudizhuGameBoard extends React.Component {
)
}
computeHandCardsWidth(num, emWidth) {
if(num === 0)
return 0;
return (num-1)*1.1*emWidth + 4.3*emWidth*1.2 + 2;
}
millisecond2Second(t){
return Math.round(t/1000);
}
playerDecisionArea(playerIdx){
console.log(this.props.currentPlayer, playerIdx);
if(this.props.currentPlayer === playerIdx){
return <div className="non-card"><span>{`Consideration Time: ${this.millisecond2Second(this.props.considerationTime)}s`}</span></div>
}else{
return this.computeSingleLineHand(this.props.latestAction[playerIdx])
}
}
render() {
// compute the id as well as index in list for every player
const bottomId = this.props.mainPlayerId;
@ -130,7 +149,7 @@ class DoudizhuGameBoard extends React.Component {
{leftIdx >= 0 ? this.computeSideHand(this.props.hands[leftIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
</div>
<div className="played-card-area">
{leftIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[leftIdx]) : ""}
{leftIdx >= 0 ? this.playerDecisionArea(leftIdx) : ""}
</div>
</div>
<div id={"right-player"}>
@ -141,12 +160,12 @@ class DoudizhuGameBoard extends React.Component {
{rightIdx >= 0 ? this.computeSideHand(this.props.hands[rightIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
</div>
<div className="played-card-area">
{rightIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[rightIdx]) : ""}
{rightIdx >= 0 ? this.playerDecisionArea(rightIdx) : ""}
</div>
</div>
<div id={"bottom-player"}>
<div className="played-card-area">
{bottomIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[bottomIdx]) : ""}
{bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ""}
</div>
<div className="player-main-area">
<div className="player-info">

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

@ -2,15 +2,18 @@
.played-card-area {
font-size: 12px;
display: table;
width: 280px;
height: 70px;
span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 16px;
display: flex;
justify-content: center;
.non-card {
display: table;
width: 280px;
height: 80px;
span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 16px;
}
}
}
@ -159,11 +162,11 @@
.played-card-area {
position: relative;
transform: translateY(0px);
width: 280px;
margin-left: auto;
margin-right: auto;
text-align: center;
transform: translateY(25px);
.non-card {
height: 138px;
transform: translateY(-25px);
}
}
}

16
src/view/DoudizhuGameView.js
View File

@ -8,7 +8,9 @@ class DoudizhuGameView extends React.Component {
super(props);
const mainViewerId = 0; // Id of the player at the bottom of screen
this.initConsiderationTime = 0;
this.initConsiderationTime = 2000;
this.considerationTimeDeduction = 1000;
this.gameStateTimeout = null;
this.initGameState = {
playerInfo: [],
@ -28,10 +30,10 @@ class DoudizhuGameView extends React.Component {
}
gameStateTimer() {
setTimeout(()=>{
this.gameStateTimeout = setTimeout(()=>{
let currentConsiderationTime = this.state.gameInfo.considerationTime;
if(currentConsiderationTime > 0) {
currentConsiderationTime--;
currentConsiderationTime -= this.considerationTimeDeduction;
let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
gameInfo.considerationTime = currentConsiderationTime;
this.setState({gameInfo: gameInfo});
@ -43,11 +45,10 @@ class DoudizhuGameView extends React.Component {
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);
}, this.considerationTimeDeduction);
}
startReplay() {
@ -56,6 +57,10 @@ class DoudizhuGameView extends React.Component {
this.state.ws.emit("getMessage", replayReq);
// init game state
this.setState({gameInfo: this.initGameState});
if(this.gameStateTimeout){
window.clearTimeout(this.gameStateTimeout);
this.gameStateTimeout = null;
}
// loop to update game state
this.gameStateTimer();
}else{
@ -95,6 +100,7 @@ class DoudizhuGameView extends React.Component {
}else{
console.log("Cannot find cards in move from player's hand");
}
gameInfo.considerationTime = this.initConsiderationTime;
this.setState({gameInfo: gameInfo});
this.gameStateTimer();
}else{