adjust style for doudizhu and leduc holdem
This commit is contained in:
songyih
parent
3fb2273b84
commit
da98395817
|
|
@ -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? :) */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
|
|
@ -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 {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 697 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,10 +165,12 @@
|
|||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
|
||||
color: #F2F6FC;
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue