solve Cors problem; connect leduc holdem GUI to Django backend

This commit is contained in:
Songyi Huang 2020-05-17 20:48:10 -07:00
parent 1a48af157d
commit 961d085c56
5 changed files with 28 additions and 11 deletions

3
.gitignore vendored
View File

@ -26,3 +26,6 @@ db.sqlite3
__pycache__ __pycache__
*.swp *.swp
uploaded_agents uploaded_agents
# idea
/.idea

View File

@ -1,4 +1,4 @@
window.g = { window.g = {
apiUrl: 'http://localhost:10080', // 配置服务器地址 apiUrl: 'http://127.0.0.1:8000', // 配置服务器地址
// WebSocketUrl: '/api/' // 配置WebSocket地址 // WebSocketUrl: '/api/' // 配置WebSocket地址
}; };

View File

@ -2,3 +2,4 @@ rlcard
Django Django
tqdm tqdm
tensorflow==1.14 tensorflow==1.14
django-cors-headers

View File

@ -27,6 +27,8 @@ DEBUG = True
ALLOWED_HOSTS = [] ALLOWED_HOSTS = []
# Cors config
CORS_ORIGIN_ALLOW_ALL=True
# Application definition # Application definition
@ -37,10 +39,13 @@ INSTALLED_APPS = [
'django.contrib.sessions', 'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.messages',
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'corsheaders',
'tournament', 'tournament',
] ]
MIDDLEWARE = [ MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.security.SecurityMiddleware', 'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware', 'django.middleware.common.CommonMiddleware',

View File

@ -97,7 +97,7 @@ class LeducHoldemGameView extends React.Component {
message: "Current player choose call but has bet more or equal to the upstream player", message: "Current player choose call but has bet more or equal to the upstream player",
type: "error", type: "error",
showClose: true showClose: true
}); });
} }
break; break;
case "Fold": case "Fold":
@ -112,13 +112,13 @@ class LeducHoldemGameView extends React.Component {
const mes = `Player ${foldedId} folded, player ${winnerId} wins!`; const mes = `Player ${foldedId} folded, player ${winnerId} wins!`;
this.setState({ gameEndDialog: true, gameEndDialogText: mes }); this.setState({ gameEndDialog: true, gameEndDialogText: mes });
}, 200); }, 200);
return gameInfo; return gameInfo;
default: default:
Message({ Message({
message: "Error in player's latest action", message: "Error in player's latest action",
type: "error", type: "error",
showClose: true showClose: true
}); });
} }
gameInfo.turn++; gameInfo.turn++;
if(gameInfo.round !== 0 && gameInfo.turn === this.moveHistory[gameInfo.round].length){ if(gameInfo.round !== 0 && gameInfo.turn === this.moveHistory[gameInfo.round].length){
@ -140,7 +140,7 @@ class LeducHoldemGameView extends React.Component {
message: "Mismatch in current player & move history", message: "Mismatch in current player & move history",
type: "error", type: "error",
showClose: true showClose: true
}); });
} }
} }
// if current state is new to game state history, push it to the game state history array // if current state is new to game state history, push it to the game state history array
@ -151,7 +151,7 @@ class LeducHoldemGameView extends React.Component {
message: "Inconsistent game state history length and turn number", message: "Inconsistent game state history length and turn number",
type: "error", type: "error",
showClose: true showClose: true
}); });
} }
return gameInfo; return gameInfo;
} }
@ -195,11 +195,11 @@ class LeducHoldemGameView extends React.Component {
startReplay() { startReplay() {
// for test use // for test use
const replayId = 0; const testUrl = '/tournament/replay?name=leduc-holdem&agent0=leduc-holdem-random&agent1=leduc-holdem-cfr&index=1';
// start full screen loading // start full screen loading
this.setState({fullScreenLoading: true}); this.setState({fullScreenLoading: true});
axios.get(`${this.apiUrl}/replay/leduc_holdem/${replayId}`) axios.get(`${this.apiUrl}${testUrl}`)
.then(res => { .then(res => {
res = res.data; res = res.data;
// init replay info // init replay info
@ -222,8 +222,16 @@ class LeducHoldemGameView extends React.Component {
// loop to update game state // loop to update game state
this.gameStateTimer(); this.gameStateTimer();
}); });
})
.catch(err => {
console.log(err);
Message({
message: `Error in getting replay data: ${err}`,
type: "error",
showClose: true
});
this.setState({fullScreenLoading: false});
}); });
}; };
pauseReplay(){ pauseReplay(){
@ -489,4 +497,4 @@ class LeducHoldemGameView extends React.Component {
} }
} }
export default LeducHoldemGameView; export default LeducHoldemGameView;