From ead4a4371f99a77daa532b62ed3f941368d70cd1 Mon Sep 17 00:00:00 2001
From: lpan <sophie.leipan@gmail.com>
Date: Tue, 18 Feb 2020 14:40:34 -0800
Subject: [PATCH] added probs

---
 server/sample_data/sample_leduc_holdem.json | 160 +++++++++++++++++++-
 src/assets/gameview.scss                    |   7 +-
 src/view/LeducHoldemGameView.js             |  35 ++++-
 3 files changed, 187 insertions(+), 15 deletions(-)

diff --git a/server/sample_data/sample_leduc_holdem.json b/server/sample_data/sample_leduc_holdem.json
index 490c222..03e14e0 100644
--- a/server/sample_data/sample_leduc_holdem.json
+++ b/server/sample_data/sample_leduc_holdem.json
@@ -18,37 +18,181 @@
     [
       {
         "playerIdx": 0,
-        "move": "Check"
+        "move": "Check",
+        "probabilities": [
+          {
+            "move": "Check",
+            "probability": 0.9
+          },
+          {
+            "move": "Raise",
+            "probability": 0.05
+          },
+          {
+            "move": "Call",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       },
       {
         "playerIdx": 1,
-        "move": "Raise"
+        "move": "Raise",
+        "probabilities": [
+          {
+            "move": "Raise",
+            "probability": 0.9
+          },
+          {
+            "move": "Check",
+            "probability": 0.05
+          },
+          {
+            "move": "Call",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       },
       {
         "playerIdx": 0,
-        "move": "Call"
+        "move": "Call",
+        "probabilities": [
+          {
+            "move": "Call",
+            "probability": 0.9
+          },
+          {
+            "move": "Check",
+            "probability": 0.05
+          },
+          {
+            "move": "Raise",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       },
       {
         "playerIdx": 1,
-        "move": "Check"
+        "move": "Check",
+        "probabilities": [
+          {
+            "move": "Check",
+            "probability": 0.9
+          },
+          {
+            "move": "Raise",
+            "probability": 0.05
+          },
+          {
+            "move": "Call",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       }
     ],
     [
       {
         "playerIdx": 0,
-        "move": "Raise"
+        "move": "Raise",
+        "probabilities": [
+          {
+            "move": "Raise",
+            "probability": 0.9
+          },
+          {
+            "move": "Check",
+            "probability": 0.05
+          },
+          {
+            "move": "Call",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       },
       {
         "playerIdx": 1,
-        "move": "Call"
+        "move": "Call",
+        "probabilities": [
+          {
+            "move": "Call",
+            "probability": 0.9
+          },
+          {
+            "move": "Check",
+            "probability": 0.05
+          },
+          {
+            "move": "Raise",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       },
       {
         "playerIdx": 0,
-        "move": "Raise"
+        "move": "Raise",
+        "probabilities": [
+          {
+            "move": "Raise",
+            "probability": 0.9
+          },
+          {
+            "move": "Check",
+            "probability": 0.05
+          },
+          {
+            "move": "Call",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       },
       {
         "playerIdx": 1,
-        "move": "Call"
+        "move": "Call",
+        "probabilities": [
+          {
+            "move": "Call",
+            "probability": 0.9
+          },
+          {
+            "move": "Check",
+            "probability": 0.05
+          },
+          {
+            "move": "Raise",
+            "probability": 0.02
+          },
+          {
+            "move": "Fold",
+            "probability": 0.01
+          }
+        ]
       }
     ]
   ]
diff --git a/src/assets/gameview.scss b/src/assets/gameview.scss
index 741b43c..4ac58f5 100644
--- a/src/assets/gameview.scss
+++ b/src/assets/gameview.scss
@@ -140,8 +140,9 @@
         .probability-player {
             height: calc(72px - 16px*2);
             padding: 16px;
-
+            display:table;
             span {
+                display: table-cell;
                 vertical-align: middle;
             }
         }
@@ -169,7 +170,6 @@
                     -ms-transition: background-color 0.3s ease;
                     transition: background-color 0.3s ease;
                     display: table-cell;
-                    height: 152px;
                     vertical-align: middle;
 
                     .playingCards ul.hand {
@@ -177,7 +177,8 @@
                     }
 
                     .probability-move {
-                        font-size: 10px;
+                        font-size: 20px;
+                        font-weight: bold;
                         width: 100%;
                         display: flex;
                         justify-content: center;
diff --git a/src/view/LeducHoldemGameView.js b/src/view/LeducHoldemGameView.js
index 8fc33b4..c237d47 100644
--- a/src/view/LeducHoldemGameView.js
+++ b/src/view/LeducHoldemGameView.js
@@ -226,7 +226,31 @@ class LeducHoldemGameView extends React.Component {
                 alert(`undefined game status: ${status}`);
         }
     }
-    
+
+    computeProbabilityItem(idx){
+        if(this.state.gameInfo.gameStatus !== "ready"){
+            let currentMove = null;
+            if(this.state.gameInfo.turn !== this.moveHistory[this.state.gameInfo.round].length){
+                currentMove = this.moveHistory[this.state.gameInfo.round][this.state.gameInfo.turn];
+            }
+            let style = {};
+            style["backgroundColor"] = currentMove !== null ? `rgba(189,183,107,${currentMove.probabilities[idx].probability})` : "#bdbdbd";;
+            return (
+                <div className={"playing"} style={style}>
+                    <div className="probability-move">
+                        {currentMove !== null ? currentMove.probabilities[idx].move : <NotInterestedIcon fontSize="large" />}
+                    </div>
+                    {currentMove !== null ?
+                        (<div className={"non-card"}>
+                            <span>{`Probability: ${(currentMove.probabilities[idx].probability * 100).toFixed(2)}%`}</span>
+                        </div>) : ""}
+                </div>
+            )
+        }else {
+            return <span className={"waiting"}>Waiting...</span>
+        }
+    }
+
     go2PrevGameState() {
         let gameInfo = null;
         if(this.state.gameInfo.turn === 0 && this.state.gameInfo.round !== 0){
@@ -320,13 +344,16 @@ class LeducHoldemGameView extends React.Component {
                             <Divider />
                             <div className={"probability-table"}>
                                 <div className={"probability-item"}>
-                                    {/* {this.computeProbabilityItem(0)} */}
+                                    {this.computeProbabilityItem(0)}
                                 </div>
                                 <div className={"probability-item"}>
-                                    {/* {this.computeProbabilityItem(1)} */}
+                                    {this.computeProbabilityItem(1)}
                                 </div>
                                 <div className={"probability-item"}>
-                                    {/* {this.computeProbabilityItem(2)} */}
+                                    {this.computeProbabilityItem(2)}
+                                </div>
+                                <div className={"probability-item"}>
+                                    {this.computeProbabilityItem(3)}
                                 </div>
                             </div>
                         </Paper>