{bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ""}
- {`Player Id: ${bottomId}\nBet: ${this.props.pot[bottomIdx]}`}
+ {this.computePlayerPortrait(bottomId, bottomIdx)}
+ {`Bet: ${this.props.pot[bottomIdx]}`}
{bottomIdx >= 0 ?
{this.computeHand(this.props.hands[bottomIdx])}
:
Waiting...
}
@@ -80,7 +133,8 @@ class LeducHoldemGameBoard extends React.Component {
- {`Player Id: ${topId}\nBet: ${this.props.pot[topIdx]}`}
+ {this.computePlayerPortrait(topId, topIdx)}
+ {`Bet: ${this.props.pot[topIdx]}`}
{topIdx >= 0 ?
{this.computeHand(this.props.hands[topIdx])}
:
Waiting...
}
diff --git a/src/view/LeducHoldemGameView.js b/src/view/LeducHoldemGameView.js
index 67e70ab..a833640 100644
--- a/src/view/LeducHoldemGameView.js
+++ b/src/view/LeducHoldemGameView.js
@@ -2,9 +2,10 @@ import React from 'react';
import axios from 'axios';
import '../assets/gameview.scss';
import {LeducHoldemGameBoard} from '../components/GameBoard';
+import Navbar from '../components/Navbar';
import {deepCopy} from "../utils";
-import { Layout } from 'element-react';
+import { Layout, Message, Loading } from 'element-react';
import Slider from '@material-ui/core/Slider';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
@@ -46,12 +47,12 @@ class LeducHoldemGameView extends React.Component {
this.state = {
gameInfo: this.initGameState,
gameStateLoop: null,
- gameSpeed: 0
+ gameSpeed: 0,
+ fullScreenLoading: false
}
}
generateNewState(){
- // console.log(this.state.gameInfo.latestAction);
let gameInfo = deepCopy(this.state.gameInfo);
const turn = this.state.gameInfo.turn;
if(turn >= this.moveHistory[this.state.gameInfo.round].length){
@@ -85,7 +86,11 @@ class LeducHoldemGameView extends React.Component {
if(gameInfo.pot[(gameInfo.currentPlayer+2-1)%2] > gameInfo.pot[gameInfo.currentPlayer]){
gameInfo.pot[gameInfo.currentPlayer] = gameInfo.pot[(gameInfo.currentPlayer+2-1)%2];
}else{
- console.log("Current player choose call but has bet more or equal to the upstream player");
+ Message({
+ message: "Current player choose call but has bet more or equal to the upstream player",
+ type: "error",
+ showClose: true
+ });
}
break;
case "Fold":
@@ -101,7 +106,11 @@ class LeducHoldemGameView extends React.Component {
}, 200);
return gameInfo;
default:
- console.log("Error in player's latest action");
+ Message({
+ message: "Error in player's latest action",
+ type: "error",
+ showClose: true
+ });
}
gameInfo.turn++;
if(gameInfo.round !== 0 && gameInfo.turn === this.moveHistory[gameInfo.round].length){
@@ -119,14 +128,22 @@ class LeducHoldemGameView extends React.Component {
gameInfo.gameStatus = "playing";
this.setState({ gameInfo: gameInfo });
}else{
- console.log("Mismatch in current player & move history");
+ Message({
+ message: "Mismatch in current player & move history",
+ type: "error",
+ showClose: true
+ });
}
}
// if current state is new to game state history, push it to the game state history array
if(gameInfo.turn === this.gameStateHistory[gameInfo.round].length){
this.gameStateHistory[gameInfo.round].push(gameInfo);
}else{
- console.log("inconsistent game state history length and turn number");
+ Message({
+ message: "Inconsistent game state history length and turn number",
+ type: "error",
+ showClose: true
+ });
}
return gameInfo;
}
@@ -172,6 +189,8 @@ class LeducHoldemGameView extends React.Component {
// for test use
const replayId = 0;
+ // start full screen loading
+ this.setState({fullScreenLoading: true});
axios.get(`${this.apiUrl}/replay/leduc_holdem/${replayId}`)
.then(res => {
res = res.data;
@@ -187,7 +206,7 @@ class LeducHoldemGameView extends React.Component {
if(this.gameStateHistory.length !== 0 && this.gameStateHistory[0].length === 0){
this.gameStateHistory[gameInfo.round].push(gameInfo);
}
- this.setState({gameInfo: gameInfo}, ()=>{
+ this.setState({gameInfo: gameInfo, fullScreenLoading: false}, ()=>{
if(this.gameStateTimeout){
window.clearTimeout(this.gameStateTimeout);
this.gameStateTimeout = null;
@@ -242,11 +261,14 @@ class LeducHoldemGameView extends React.Component {
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";
+ style["backgroundColor"] = currentMove !== null ? `rgba(130, 151, 255, ${currentMove.probabilities[idx].probability})` : "#bdbdbd";
return (
- {currentMove !== null ? currentMove.probabilities[idx].move :
}
+ {currentMove !== null ?
+
![{currentMove.probabilities[idx].move}]({require('../assets/images/Actions/')
+ :
+
}
{currentMove !== null ?
(
@@ -316,111 +338,116 @@ class LeducHoldemGameView extends React.Component {
];
return (
-
-
-
-
-
-
-
-
- {
- this.state.gameInfo.playerInfo.length > 0 ?
-
Current Player: {this.state.gameInfo.currentPlayer}
- :
-
Waiting...
- }
+
+
+
+
+
+
-
-
-
- {this.computeProbabilityItem(0)}
+
+
+
+
+ {
+ this.state.gameInfo.playerInfo.length > 0 ?
+ Current Player: {this.state.gameInfo.currentPlayer}
+ :
+ Waiting...
+ }
-
- {this.computeProbabilityItem(1)}
-
-
- {this.computeProbabilityItem(2)}
-
-
- {this.computeProbabilityItem(3)}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { this.gameStatusButton(this.state.gameInfo.gameStatus) }
-
-
-
-
-
-
-
- {`Turn: ${this.state.gameInfo.turn}`}
-
-
-
-
-
-
-
-
-
{this.changeGameSpeed(newVal)}}
- aria-labelledby="discrete-slider-custom"
- step={1}
- min={-3}
- max={3}
- track={false}
- valueLabelDisplay="off"
- marks={gameSpeedMarks}
- />
+
+
+
+ {this.computeProbabilityItem(0)}
+
+
+ {this.computeProbabilityItem(1)}
+
+
+ {this.computeProbabilityItem(2)}
+
+
+ {this.computeProbabilityItem(3)}
+
+
+
+
+
+
+
+
+
+ { this.gameStatusButton(this.state.gameInfo.gameStatus) }
+
+
+
+
+
+
+
+ {`Turn: ${this.state.gameInfo.turn}`}
+
+
+
+
+
+
+
+
+ {this.changeGameSpeed(newVal)}}
+ aria-labelledby="discrete-slider-custom"
+ step={1}
+ min={-3}
+ max={3}
+ track={false}
+ valueLabelDisplay="off"
+ marks={gameSpeedMarks}
+ />
+
+
+
+ }
+ }
+
computeHand(card) {
const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
return (
-