adjust style for doudizhu and leduc holdem

src/assets/cards.css

@@ -73,10 +73,12 @@
 .playingCards .card.back {
     text-indent: -4000px;
     background-color: #ccc;
-    background-repeat: repeat;
+    background-repeat: no-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: url("./faces/pokerback.png"); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
-    background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%);
+    background-size: 100% 100%;
-    background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030));
+    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? :) */
 }
 

src/assets/doudizhu.scss

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

src/assets/gameview.scss

@@ -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 {

src/assets/index.css

@@ -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',
+  color: #606266;
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: 'Rockwell', 'Arvo', monospace;
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/assets/leducholdem.scss

@@ -2,17 +2,17 @@
 .leduc-holdem-wrapper {
     width: 100%;
     height: 100%;
-    background-color: #C3CDFF;
+    //background-color: #C3CDFF;
-    // background-image: url("./images/table.png");
+     background-image: url("./images/gameboard.png");
-    // background-repeat: no-repeat;
+     background-repeat: no-repeat;
-    // background-size: 100% 70%;
+     background-size: 100% 132%;
-    // background-position: bottom;
+     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;
+            span.round-number {
-            font-weight: bold;
+                font-size: 20px;
-            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
+                font-weight: bold;
-            color: #F2F6FC;
+                text-shadow: 0 2px 2px rgba(0, 0, 0, 0.87);
+                color: #F2F6FC;
+            }
         }
         .playingCards {
             transform: translate(3px, 10px);

src/components/GameBoard/LeducHoldemGameBoard.js

@@ -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>

src/view/DoudizhuGameView.js

@@ -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" />

src/view/LeducHoldemGameView.js

@@ -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" />