changed tokens style

src/assets/leducholdem.scss

@@ -11,7 +11,8 @@
 
     .played-card-area {
         font-size: 12px;
-        width: 100%;
+        width: 40%;
+        margin-left: 90%;
         position: relative;
         display: flex;
         justify-content: center;
@@ -76,18 +77,42 @@
             white-space: pre;
             text-align: center;
         }
+        .bet-value {
+            position: relative;
+            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;
+            }
+            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 +132,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;
     }
 

src/components/GameBoard/LeducHoldemGameBoard.js

@@ -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 src={require('../../assets/images/Tokens/Token_' + key + '.png')} height="100%" width="100%" /></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,7 +157,8 @@ 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>}
                     </div>
@@ -134,7 +167,8 @@ class LeducHoldemGameBoard extends React.Component {
                     <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>}
                     </div>