Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/assets/leducholdem.scss
#	src/components/GameBoard/LeducHoldemGameBoard.js
#	src/view/LeducHoldemGameView.js

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,16 +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: 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;
+            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

@@ -56,6 +56,38 @@ class LeducHoldemGameBoard extends React.Component {
         }
     }
 
+    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>

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