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

adjust style for doudizhu and leduc holdem

This commit is contained in:
songyih 2020-02-24 23:53:13 -08:00
parent 3fb2273b84
commit da98395817
10 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/cards.css
View File

@ -73,10 +73,12 @@
.playingCards .card.back {
text-indent: -4000px;
background-color: #ccc;
background-repeat: repeat;
background-image: url(data:image/gif;base64,R0lGODlhJAAkAJEAAOjFsezdztOKbL5QKCH5BAAAAAAALAAAAAAkACQAAAL/HC4RAqm/mmLHyHmAbczB11Ea8ombJKSgKo6Z17pXFznmS1JptiX0z3vVhpEKDoUIkoa0olGIUeZUk1RI6Yn2mh/FDAt6frOrRRTqXPpsVLYugzxaVy+YcBdnoWPZOT0E4eckQtZFZBjWoHixQFWl6Nhol6R2p1Okt5TGaEWZA6fjiMdhZgPHeWrTWGVq+jTZg1HYyAEWKLYzmyiGKoUimilz+YYryyTlg5RcDJSAbNx0Q7lMcbIGEyzTK8zVdfVaImzs/QV+prYqWWW2ObkoOApM/Em/rUlIm7fijs8a2EEKEaZ3AsMUgneEU6RcpJbZ27aGHkAO2Ors8xQH1IR0Bn5YnOtVAAA7); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%);
background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030));
background-repeat: no-repeat;
background-image: url("./faces/pokerback.png"); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
background-size: 100% 100%;
background-position: bottom;
/*background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%);*/
/*background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030));*/
/* yes, it's intentional that Mozilla, Webkit, Opera and IE all will get different backgrounds ... why not? :) */
}

6
src/assets/doudizhu.scss
View File

@ -3,10 +3,10 @@
.doudizhu-wrapper {
width: 100%;
height: 100%;
background-color: #C3CDFF;
background-image: url("./images/table.png");
//background-color: #C3CDFF;
background-image: url("./images/gameboard.png");
background-repeat: no-repeat;
background-size: 100% 70%;
background-size: 100% 125%;
background-position: bottom;
position: relative;

BIN
src/assets/faces/pokerback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

3
src/assets/gameview.scss
View File

@ -170,6 +170,7 @@
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bolder;
}
}
.non-card.hide {
@ -262,6 +263,8 @@
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bolder;
color: #303133;
}
}
.non-card.hide {

BIN
src/assets/images/gameboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 697 KiB

7
src/assets/index.css
View File

@ -1,8 +1,9 @@
@import url('https://fonts.googleapis.com/css?family=Arvo&display=swap');
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
color: #606266;
font-family: 'Rockwell', 'Arvo', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

23
src/assets/leducholdem.scss
View File

@ -2,17 +2,17 @@
.leduc-holdem-wrapper {
width: 100%;
height: 100%;
background-color: #C3CDFF;
// background-image: url("./images/table.png");
// background-repeat: no-repeat;
// background-size: 100% 70%;
// background-position: bottom;
//background-color: #C3CDFF;
background-image: url("./images/gameboard.png");
background-repeat: no-repeat;
background-size: 100% 132%;
background-position: bottom;
position: relative;
.played-card-area {
font-size: 12px;
width: 40%;
margin-left: 90%;
margin-left: 65%;
position: relative;
display: flex;
justify-content: center;
@ -78,7 +78,9 @@
text-align: center;
}
.bet-value {
color: whitesmoke;
position: relative;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
top: -120px;
left: 120px;
font-weight: bold;
@ -94,6 +96,13 @@
.pile-placeholder{
width: 24px;
margin-top: 0;
.token-img {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
-o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
border-radius: 15px;
}
}
div {
position: relative;
@ -156,11 +165,13 @@
display: table-cell;
vertical-align: middle;
text-align: center;
span.round-number {
font-size: 20px;
font-weight: bold;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
color: #F2F6FC;
}
}
.playingCards {
transform: translate(3px, 10px);
}

8
src/components/GameBoard/LeducHoldemGameBoard.js
View File

@ -79,7 +79,7 @@ class LeducHoldemGameBoard extends React.Component {
if (value !== 0) {
let grandChild = [];
for (let j = 0; j < value; j++) {
grandChild.push(<div key={key + '_' + j}><img src={require('../../assets/images/Tokens/Token_' + key + '.png')} height="100%" width="100%" /></div>);
grandChild.push(<div key={key + '_' + j}><img className={"token-img"} src={require('../../assets/images/Tokens/Token_' + key + '.png')} height="100%" width="100%" alt={"taken"}/></div>);
}
let subElement = React.createElement("div", { className: "pile-placeholder", key: key+'_'+value}, grandChild);
child.push(subElement);
@ -160,7 +160,7 @@ class LeducHoldemGameBoard extends React.Component {
<span className="bet-value">{`Bet: ${this.props.pot[bottomIdx]}`}</span>
{this.computeTokenImage(this.props.pot[bottomIdx])}
</div>
{bottomIdx >= 0 ? <div className="player-hand">{this.computeHand(this.props.hands[bottomIdx])}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
{bottomIdx >= 0 ? <div className="player-hand">{this.computeHand(this.props.hands[bottomIdx])}</div> : <div className="player-hand-placeholder"><span style={{"color": "white"}}>Waiting...</span></div>}
</div>
</div>
<div id={"top-player"}>
@ -170,7 +170,7 @@ class LeducHoldemGameBoard extends React.Component {
<span className="bet-value">{`Bet: ${this.props.pot[topIdx]}`}</span>
{this.computeTokenImage(this.props.pot[topIdx])}
</div>
{topIdx >= 0 ? <div className="player-hand">{this.computeHand(this.props.hands[topIdx])}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
{topIdx >= 0 ? <div className="player-hand">{this.computeHand(this.props.hands[topIdx])}</div> : <div className="player-hand-placeholder"><span style={{"color": "white"}}>Waiting...</span></div>}
</div>
<div className="played-card-area">
{topIdx >= 0 ? this.playerDecisionArea(topIdx) : ""}
@ -178,7 +178,7 @@ class LeducHoldemGameBoard extends React.Component {
</div>
<div id={"public-card-area"}>
<div className={"info-area"}>
<span>{`Round: ${this.props.round+1}`}</span>
<span className={"round-number"}>{`Round: ${this.props.round+1}`}</span>
{this.displayPublicCard()}
</div>
</div>

6
src/view/DoudizhuGameView.js
View File

@ -272,7 +272,7 @@ class DoudizhuGameView extends React.Component {
computeProbabilityItem(idx){
if(this.state.gameInfo.gameStatus !== "ready" && this.state.gameInfo.turn < this.moveHistory.length){
let style = {};
style["backgroundColor"] = this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? `rgba(130, 151, 255 , ${this.moveHistory[this.state.gameInfo.turn].probabilities[idx].probability})` : "#bdbdbd";
style["backgroundColor"] = this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? `rgba(63, 81, 181, ${this.moveHistory[this.state.gameInfo.turn].probabilities[idx].probability})` : "#bdbdbd";
return (
<div className={"playing"} style={style}>
<div className="probability-move">
@ -284,7 +284,7 @@ class DoudizhuGameView extends React.Component {
</div>
{this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ?
<div className={"non-card"}>
<span>{this.moveHistory[this.state.gameInfo.turn].probabilities.length > idx ? `Probability: ${(this.moveHistory[this.state.gameInfo.turn].probabilities[idx].probability * 100).toFixed(2)}%` : ""}</span>
<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>
:
""
@ -426,7 +426,7 @@ class DoudizhuGameView extends React.Component {
<Divider orientation="vertical" />
</Layout.Col>
<Layout.Col span="3" style={{"height": "51px", "lineHeight": "51px", "marginLeft": "-1px", "marginRight": "-1px"}}>
<div style={{"textAlign": "center"}}>{`Turn: ${this.state.gameInfo.turn}`}</div>
<div style={{"textAlign": "center"}}>{`Turn ${this.state.gameInfo.turn}`}</div>
</Layout.Col>
<Layout.Col span="1" style={{"height": "100%", "width": "1px"}}>
<Divider orientation="vertical" />

4
src/view/LeducHoldemGameView.js
View File

@ -272,7 +272,7 @@ class LeducHoldemGameView extends React.Component {
</div>
{currentMove !== null ?
(<div className={"non-card"}>
<span>{`Probability: ${(currentMove.probabilities[idx].probability * 100).toFixed(2)}%`}</span>
<span>{`Probability ${(currentMove.probabilities[idx].probability * 100).toFixed(2)}%`}</span>
</div>) : ""}
</div>
)
@ -420,7 +420,7 @@ class LeducHoldemGameView extends React.Component {
<Divider orientation="vertical" />
</Layout.Col>
<Layout.Col span="3" style={{"height": "51px", "lineHeight": "51px", "marginLeft": "-1px", "marginRight": "-1px"}}>
<div style={{"textAlign": "center"}}>{`Turn: ${this.state.gameInfo.turn}`}</div>
<div style={{"textAlign": "center"}}>{`Turn ${this.state.gameInfo.turn}`}</div>
</Layout.Col>
<Layout.Col span="1" style={{"height": "100%", "width": "1px"}}>
<Divider orientation="vertical" />