adjust style for doudizhu and leducholdem

This commit is contained in:
Songyi Huang 2020-02-25 12:03:05 -08:00
parent 9047c024df
commit 6c1de0ba3e
18 changed files with 2822 additions and 721 deletions

View File

@ -0,0 +1,735 @@
{
"initHands": [
"C3 H3 S3 C5 S5 S7 D8 C8 S8 S9 C9 CQ DQ HQ SK HK HA DA D2 RJ",
"D3 C4 D5 H6 H7 H8 D9 H9 HT DT HJ CK CA SA H2 C2 S2",
"D4 H4 S4 H5 C6 D6 S6 D7 C7 CT ST CJ SJ DJ SQ DK BJ"
],
"playerInfo": [
{
"id": 0,
"index": 0,
"role": "landlord"
},
{
"id": 1,
"index": 1,
"role": "peasant"
},
{
"id": 2,
"index": 2,
"role": "peasant"
}
],
"moveHistory": [
{
"playerIdx": 0,
"move": [
"D2"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "D2"
},
{
"probability": 0.003236245954692557,
"move": "S7"
},
{
"probability": 0.003236245954692557,
"move": "CQ DQ HQ"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [
"C5",
"S5",
"D8",
"C8",
"S8"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "C5 S5 D8 C8 S8"
},
{
"probability": 0.003236245954692557,
"move": "CQ DQ HQ"
},
{
"probability": 0.003236245954692557,
"move": "HA"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
},
{
"probability": 0.003236245954692557,
"move": "H2 C2 S2"
}
]
},
{
"playerIdx": 2,
"move": [
"D4",
"H4",
"S4"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "D4 H4 S4"
},
{
"probability": 0.003236245954692557,
"move": "C6 D6 S6"
},
{
"probability": 0.003236245954692557,
"move": "CJ SJ DJ"
}
]
},
{
"playerIdx": 0,
"move": [
"CQ",
"DQ",
"HQ"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "CQ DQ HQ"
},
{
"probability": 0.003236245954692557,
"move": "pass"
},
{
"probability": 0.003236245954692557,
"move": "D8 C8 S8"
}
]
},
{
"playerIdx": 1,
"move": [
"H2",
"C2",
"S2"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "H2 C2 S2"
},
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 1,
"move": [
"D3"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "D3"
},
{
"probability": 0.003236245954692557,
"move": "D9"
},
{
"probability": 0.003236245954692557,
"move": "H8"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 1,
"move": [
"D3"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "D3"
},
{
"probability": 0.003236245954692557,
"move": "CA SA"
},
{
"probability": 0.003236245954692557,
"move": "CA"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 1,
"move": [
"C4"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "C4"
},
{
"probability": 0.003236245954692557,
"move": "D3"
},
{
"probability": 0.003236245954692557,
"move": "DT"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
},
{
"probability": 0.003236245954692557,
"move": "BJ"
}
]
},
{
"playerIdx": 0,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [
"CJ"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "CJ"
},
{
"probability": 0.003236245954692557,
"move": "D7"
},
{
"probability": 0.003236245954692557,
"move": "H5 C6 D6 S6"
}
]
},
{
"playerIdx": 0,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [
"H5"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "H5"
},
{
"probability": 0.003236245954692557,
"move": "C6"
},
{
"probability": 0.003236245954692557,
"move": "CT ST"
}
]
},
{
"playerIdx": 0,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
},
{
"probability": 0.003236245954692557,
"move": "D8 C8 S8"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [
"CT",
"ST"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "CT ST"
},
{
"probability": 0.003236245954692557,
"move": "H5"
},
{
"probability": 0.003236245954692557,
"move": "SQ"
}
]
},
{
"playerIdx": 0,
"move": [
"DA"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "DA"
},
{
"probability": 0.003236245954692557,
"move": "pass"
},
{
"probability": 0.003236245954692557,
"move": "D2"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [
"D8"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "D8"
},
{
"probability": 0.003236245954692557,
"move": "SK HK"
},
{
"probability": 0.003236245954692557,
"move": "C5 S5 C8 S8 D8"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [
"S7"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "S7"
},
{
"probability": 0.003236245954692557,
"move": "C5 C8 S8 D8"
},
{
"probability": 0.003236245954692557,
"move": "C8"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [
"HA"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "HA"
},
{
"probability": 0.003236245954692557,
"move": "DA HA"
},
{
"probability": 0.003236245954692557,
"move": "S7"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [
"S5",
"C5"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "S5 C5"
},
{
"probability": 0.003236245954692557,
"move": "S5 S8 D8 C8"
},
{
"probability": 0.003236245954692557,
"move": "S8 D8"
}
]
},
{
"playerIdx": 1,
"move": [
"DT"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "DT"
},
{
"probability": 0.003236245954692557,
"move": "D9"
},
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [
"SQ"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "SQ"
},
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 0,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 1,
"move": [],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [
"CT",
"ST"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "CT ST"
},
{
"probability": 0.003236245954692557,
"move": "H5"
},
{
"probability": 0.003236245954692557,
"move": "CT"
}
]
},
{
"playerIdx": 0,
"move": [
"S9"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "S9"
},
{
"probability": 0.003236245954692557,
"move": "pass"
},
{
"probability": 0.003236245954692557,
"move": "C8"
}
]
},
{
"playerIdx": 1,
"move": [
"D9"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "D9"
},
{
"probability": 0.003236245954692557,
"move": "pass"
}
]
},
{
"playerIdx": 2,
"move": [
"ST"
],
"probabilities": [
{
"probability": 0.003236245954692557,
"move": "ST"
},
{
"probability": 0.003236245954692557,
"move": "CT ST"
}
]
}
]
}

View File

@ -72,10 +72,10 @@
},
{
"playerIdx": 1,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
@ -111,27 +111,27 @@
"probability": 0.05
},
{
"move": "P",
"move": "pass",
"probability": 0.02
}
]
},
{
"playerIdx": 1,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
},
{
"playerIdx": 2,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
@ -177,7 +177,7 @@
"move": "SK CK",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 0.5
},
{
@ -195,7 +195,7 @@
"move": "S2 H2",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 0.5
},
{
@ -206,20 +206,20 @@
},
{
"playerIdx": 1,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
},
{
"playerIdx": 2,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
@ -244,10 +244,10 @@
},
{
"playerIdx": 1,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 0.8
},
{
@ -265,7 +265,7 @@
"move": "CT DT",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 0.5
},
{
@ -287,17 +287,17 @@
"probability": 0.9
},
{
"move": "P",
"move": "pass",
"probability": 0.1
}
]
},
{
"playerIdx": 1,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 0.9
},
{
@ -315,27 +315,27 @@
"probability": 0.9
},
{
"move": "P",
"move": "pass",
"probability": 0.1
}
]
},
{
"playerIdx": 0,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
},
{
"playerIdx": 1,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
@ -360,10 +360,10 @@
},
{
"playerIdx": 0,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
@ -377,7 +377,7 @@
"probability": 0.5
},
{
"move": "P",
"move": "pass",
"probability": 0.1
},
{
@ -388,20 +388,20 @@
},
{
"playerIdx": 2,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
},
{
"playerIdx": 0,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
@ -437,27 +437,27 @@
"probability": 0.3
},
{
"move": "P",
"move": "pass",
"probability": 0.2
}
]
},
{
"playerIdx": 0,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]
},
{
"playerIdx": 1,
"move": "P",
"move": "pass",
"probabilities": [
{
"move": "P",
"move": "pass",
"probability": 1
}
]

View File

@ -22,15 +22,15 @@
"probabilities": [
{
"move": "Check",
"probability": 0.9
"probability": 0.35
},
{
"move": "Raise",
"probability": 0.05
"probability": -1
},
{
"move": "Call",
"probability": 0.02
"probability": -1
},
{
"move": "Fold",
@ -52,7 +52,7 @@
},
{
"move": "Call",
"probability": 0.02
"probability": -1
},
{
"move": "Fold",

View File

@ -35,11 +35,11 @@
height: 60px;
.timer-text {
color: #303133;
margin-top: 3px;
margin-top: 5px;
font-size: 23px;
font-weight: bold;
text-shadow: 0 2px 2px #909399;
line-height: 57px;
line-height: 55px;
}
text-align: center;
background-image: url("./images/timer.png");
@ -59,10 +59,7 @@
font-size: 23px;
font-weight: bold;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
//letter-spacing: -4px;
color: #F2F6FC;
}
}
}
@ -72,6 +69,7 @@
display: table;
span {
color: whitesmoke;
display: table-cell;
vertical-align: middle;
text-align: center;
@ -196,6 +194,7 @@
padding-left: 20px;
margin-left: 130px;
width: 450px;
font-size: 14px;
}
.player-hand-placeholder {

View File

@ -2,10 +2,15 @@
margin: 5px;
}
.MuiAppBar-colorPrimary.header-bar-wrapper {
background-color: #373538;
}
.header-bar {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 65px;
padding: 5px;
display: flex;
.stretch {
@ -50,23 +55,28 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 600;
letter-spacing: 1px;
-ms-transform:scale(1, 1.1) translateY(-1px);
-webkit-transform:scale(1, 1.1) translateY(-1px);
-moz-transform:scale(1, 1.1) translateY(-1px);
-o-transform:scale(1, 1.1) translateY(-1px);
.title-text{
line-height: 65px;
font-size: 26px;
font-weight: 600;
letter-spacing: 1px;
transform: scale(1, 1.1) translateY(-1px);
-ms-transform:scale(1, 1.1) translateY(-1px);
-webkit-transform:scale(1, 1.1) translateY(1px);
-moz-transform:scale(1, 1.1) translateY(-1px);
-o-transform:scale(1, 1.1) translateY(-1px);
.subtitle {
color: #C0C4CC;
margin-left: 11px;
font-size: 16px;
-ms-transform: translateY(3px);
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-o-transform: translateY(3px);
.subtitle {
color: #C0C4CC;
margin-left: 11px;
font-size: 16px;
-ms-transform: translateY(3px);
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-o-transform: translateY(3px);
}
}
}
}
@ -171,6 +181,10 @@
text-align: center;
font-size: 16px;
font-weight: bolder;
text-shadow: -1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
}
.non-card.hide {
@ -265,6 +279,10 @@
font-size: 16px;
font-weight: bolder;
color: #303133;
text-shadow: -1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
}
.non-card.hide {

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

View File

@ -1,9 +1,10 @@
@import url('https://fonts.googleapis.com/css?family=Arvo&display=swap');
body {
background-color: rgb(241, 241, 241);
margin: 0;
color: #606266;
font-family: 'Rockwell', 'Arvo', monospace;
font-family: 'Arvo', 'Rockwell', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View File

@ -36,11 +36,11 @@
height: 60px;
.timer-text {
color: #303133;
margin-top: 3px;
margin-top: 5px;
font-size: 23px;
font-weight: bold;
text-shadow: 0 2px 2px #909399;
line-height: 57px;
line-height: 55px;
}
text-align: center;
background-image: url("./images/timer.png");
@ -51,7 +51,16 @@
.non-card {
display: table;
width: 80px;
height: 40px;
height: 60px;
.action-text {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 23px;
font-weight: bold;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
color: #F2F6FC;
}
}
}

View File

@ -52,7 +52,7 @@ class DoudizhuGameBoard extends React.Component {
}
computeSingleLineHand(cards, fadeClassName="") {
if(cards === "P"){
if(cards === "pass"){
return <div className="non-card"><span>PASS</span></div>
}else{
return (

View File

@ -50,9 +50,9 @@ class LeducHoldemGameBoard extends React.Component {
)
}
computeActionImage(action) {
computeActionText(action) {
if (action.length > 0) {
return <img src={require('../../assets/images/Actions/' + action + '.png')} alt={action} height="80%" width="100%" />
return <span className={"action-text"}>{action}</span>
}
}
@ -108,7 +108,7 @@ class LeducHoldemGameBoard extends React.Component {
</div>
)
}else{
return <div className="non-card">{this.computeActionImage(this.props.latestAction[playerIdx])}</div>
return <div className="non-card">{this.computeActionText(this.props.latestAction[playerIdx])}</div>
}
}

View File

@ -11,10 +11,10 @@ export function Navbar(props) {
setStars(res.data.stargazers_count);
});
return (
<AppBar position="static">
<AppBar position="static" className={"header-bar-wrapper"}>
<div className={"header-bar"}>
<img src={logo_white} alt={"Logo"} height="65px" />
<div className={"title unselectable"}>Showdown<span className={"subtitle"}>/ {props.gameName}</span></div>
<div className={"title unselectable"}><div className={"title-text"}>Showdown<span className={"subtitle"}>/ {props.gameName}</span></div></div>
<div className={"stretch"} />
<div className={"github-info"} onClick={()=>{window.location.href = 'https://github.com/datamllab/rlcard'}}>
<div className={"github-icon"}><GitHubIcon /></div>

View File

@ -11,7 +11,7 @@ const suitMapSymbol = new Map(
export function removeCards(cards, hands){ // remove cards from hands, return the remained hands
let remainedHands = deepCopy(hands);
// if the player's action is pass then return the copy of original hands
if(cards === "P"){
if(cards === "pass"){
return remainedHands;
}
let misMatch = false;

View File

@ -52,7 +52,7 @@ class DoudizhuGameView extends React.Component {
}
cardStr2Arr(cardStr){
return cardStr === "P" ? cardStr : cardStr.split(" ");
return cardStr === "pass" || cardStr === "" ? "pass" : cardStr.split(" ");
}
generateNewState(){
@ -64,7 +64,7 @@ class DoudizhuGameView extends React.Component {
}else{
let newMove = this.moveHistory[this.state.gameInfo.turn];
if(newMove.playerIdx === this.state.gameInfo.currentPlayer) {
gameInfo.latestAction[newMove.playerIdx] = this.cardStr2Arr(newMove.move);
gameInfo.latestAction[newMove.playerIdx] = this.cardStr2Arr(Array.isArray(newMove.move) ? newMove.move.join(" ") : newMove.move);
gameInfo.turn++;
gameInfo.currentPlayer = (gameInfo.currentPlayer + 1) % 3;
// take away played cards from player's hands
@ -246,7 +246,7 @@ class DoudizhuGameView extends React.Component {
}
computeSingleLineHand(cards) {
if(cards === "P"){
if(cards === "pass"){
return <div className={"non-card "+this.state.gameInfo.toggleFade}><span>Pass</span></div>
}else{
return (

View File

@ -261,18 +261,23 @@ class LeducHoldemGameView extends React.Component {
currentMove = this.moveHistory[this.state.gameInfo.round][this.state.gameInfo.turn];
}
let style = {};
style["backgroundColor"] = currentMove !== null ? `rgba(130, 151, 255, ${currentMove.probabilities[idx].probability})` : "#bdbdbd";
style["backgroundColor"] = currentMove !== null ? `rgba(63, 81, 181, ${currentMove.probabilities[idx].probability})` : "#bdbdbd";
return (
<div className={"playing"} style={style}>
<div className="probability-move">
{currentMove !== null ?
<img src={require('../assets/images/Actions/' + currentMove.probabilities[idx].move + '.png')} alt={currentMove.probabilities[idx].move} height="30%" width="30%" />
<img src={require('../assets/images/Actions/' + currentMove.probabilities[idx].move + (currentMove.probabilities[idx].probability < 0 ? "_u" : "") + '.png')} alt={currentMove.probabilities[idx].move} height="30%" width="30%" />
:
<NotInterestedIcon fontSize="large" />}
</div>
{currentMove !== null ?
(<div className={"non-card"}>
<span>{`Probability ${(currentMove.probabilities[idx].probability * 100).toFixed(2)}%`}</span>
{
currentMove.probabilities[idx].probability < 0 ?
<span>Illegal</span>
:
<span>{`Probability ${(currentMove.probabilities[idx].probability * 100).toFixed(2)}%`}</span>
}
</div>) : ""}
</div>
)

2622
yarn.lock

File diff suppressed because it is too large Load Diff