Merge remote-tracking branch 'origin/master'
# Conflicts: # src/assets/leducholdem.scss # src/components/GameBoard/LeducHoldemGameBoard.js # src/view/LeducHoldemGameView.js
This commit is contained in:
Songyi Huang
commit
9047c024df
|
|
@ -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: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
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,16 +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: 100%;
|
||||
width: 40%;
|
||||
margin-left: 65%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -76,18 +77,51 @@
|
|||
white-space: pre;
|
||||
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;
|
||||
}
|
||||
.token-container{
|
||||
position: relative;
|
||||
top: -115px;
|
||||
left: 120px;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.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;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.pile-placeholder > :first-child { margin-top: 0 !important;}
|
||||
}
|
||||
}
|
||||
|
||||
.player-main-area {
|
||||
background-color: initial;
|
||||
width: 380px;
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
|
||||
.player-hand {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 56px;
|
||||
left: 65px;
|
||||
padding-left: 20px;
|
||||
margin-left: 130px;
|
||||
width: 75px;
|
||||
|
|
@ -107,14 +141,14 @@
|
|||
#top-player {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
left: 40%;
|
||||
margin-left: -190px;
|
||||
}
|
||||
|
||||
#bottom-player {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
left: 40%;
|
||||
margin-left: -190px;
|
||||
}
|
||||
|
||||
|
|
@ -131,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);
|
||||
|
|
|
|||
|
|
@ -49,13 +49,45 @@ class LeducHoldemGameBoard extends React.Component {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
computeActionImage(action) {
|
||||
if (action.length > 0) {
|
||||
return <img src={require('../../assets/images/Actions/' + action + '.png')} alt={action} height="80%" width="100%" />
|
||||
}
|
||||
}
|
||||
|
||||
computeTokenImage(bet) {
|
||||
const values = [100, 25, 10, 5, 1];
|
||||
let tokens = {
|
||||
100: 0,
|
||||
25: 0,
|
||||
10: 0,
|
||||
5: 0,
|
||||
1: 0,
|
||||
}
|
||||
let i = 0;
|
||||
while (bet !== 0 && i < values.length) {
|
||||
if (bet >= values[i]) {
|
||||
bet -= values[i];
|
||||
tokens[values[i]]++;
|
||||
} else {
|
||||
i++;
|
||||
}
|
||||
}
|
||||
let child = [];
|
||||
for (let [key, value] of Object.entries(tokens)) {
|
||||
if (value !== 0) {
|
||||
let grandChild = [];
|
||||
for (let j = 0; j < value; j++) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
return React.createElement("div", { className: "token-container" }, child);
|
||||
}
|
||||
|
||||
computeHand(card) {
|
||||
const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
|
||||
return (
|
||||
|
|
@ -125,18 +157,20 @@ class LeducHoldemGameBoard extends React.Component {
|
|||
<div className="player-main-area">
|
||||
<div className="player-info">
|
||||
{this.computePlayerPortrait(bottomId, bottomIdx)}
|
||||
<span>{`Bet: ${this.props.pot[bottomIdx]}`}</span>
|
||||
<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"}>
|
||||
<div className="player-main-area">
|
||||
<div className="player-info">
|
||||
{this.computePlayerPortrait(topId, topIdx)}
|
||||
<span>{`Bet: ${this.props.pot[topIdx]}`}</span>
|
||||
<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) : ""}
|
||||
|
|
@ -144,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