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

add icon & change color for probability area in doudizhu

This commit is contained in:
songyih 2020-02-09 22:33:21 -08:00
parent c47eac7e5a
commit 6a2bbe1112
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/view/DoudizhuGameView.js
View File

@ -12,6 +12,7 @@ import Divider from '@material-ui/core/Divider';
import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded'; import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
import PauseCircleOutlineRoundedIcon from '@material-ui/icons/PauseCircleOutlineRounded'; import PauseCircleOutlineRoundedIcon from '@material-ui/icons/PauseCircleOutlineRounded';
import ReplayRoundedIcon from '@material-ui/icons/ReplayRounded'; import ReplayRoundedIcon from '@material-ui/icons/ReplayRounded';
import NotInterestedIcon from '@material-ui/icons/NotInterested';
class DoudizhuGameView extends React.Component { class DoudizhuGameView extends React.Component {
constructor(props) { constructor(props) {
@ -210,19 +211,23 @@ class DoudizhuGameView extends React.Component {
computeProbabilityItem(idx){ computeProbabilityItem(idx){
if(this.state.gameInfo.gameStatus !== "ready" && this.state.gameInfo.turn < this.moveHistory.length){ if(this.state.gameInfo.gameStatus !== "ready" && this.state.gameInfo.turn < this.moveHistory.length){
let style = {}; let style = {};
style["backgroundColor"] = this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? `rgba(255, 193, 7,${this.moveHistory[this.state.gameInfo.turn].probabilities[idx].probability})` : "#bdbdbd"; style["backgroundColor"] = this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? `rgba(189,183,107,${this.moveHistory[this.state.gameInfo.turn].probabilities[idx].probability})` : "#bdbdbd";
return ( return (
<div className={"playing"} style={style}> <div className={"playing"} style={style}>
<div className="probability-move"> <div className="probability-move">
{this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? {this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ?
this.computeSingleLineHand(this.cardStr2Arr(this.moveHistory[this.state.gameInfo.turn].probabilities[idx].move)) this.computeSingleLineHand(this.cardStr2Arr(this.moveHistory[this.state.gameInfo.turn].probabilities[idx].move))
: :
'\u00A0' <NotInterestedIcon fontSize="large" />
} }
</div> </div>
<div className={"non-card"}> {this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ?
<span>{ this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? `Probability: ${(this.moveHistory[this.state.gameInfo.turn].probabilities[idx].probability*100).toFixed(2)}%` : ""}</span> <div className={"non-card"}>
</div> <span>{this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? `Probability: ${(this.moveHistory[this.state.gameInfo.turn].probabilities[idx].probability * 100).toFixed(2)}%` : ""}</span>
</div>
:
""
}
</div> </div>
) )
}else { }else {