add link to replay page

This commit is contained in:
Songyi Huang 2020-07-19 18:47:48 -07:00
parent d7daa1da05
commit 42012ba578
4 changed files with 14 additions and 10 deletions

View File

@ -18,7 +18,7 @@ function App() {
<Navbar className={classes.navBar} gameName={""}/>
<div style={{marginTop: '75px'}}>
<Route exact path="/">
<Redirect to="/leaderboard" />
<Redirect to="/leaderboard?type=game&name=leduc-holdem" />
</Route>
<Route path="/leaderboard" component={LeaderBoard} />
<Route path="/replay/doudizhu" component={DoudizhuGameView} />

View File

@ -23,6 +23,7 @@ import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogActions from "@material-ui/core/DialogActions";
import Dialog from "@material-ui/core/Dialog";
import qs from "query-string";
class DoudizhuGameView extends React.Component {
constructor(props) {
@ -174,12 +175,12 @@ class DoudizhuGameView extends React.Component {
}
startReplay() {
// for test use
const replayId = 0;
const { name, agent0, agent1, index } = qs.parse(window.location.search);
const requestUrl = `${apiUrl}/tournament/replay?name=${name}&agent0=${agent0}&agent1=${agent1}&index=${index}`;
// start full screen loading
this.setState({fullScreenLoading: true});
axios.get(`${apiUrl}/replay/doudizhu/${replayId}`)
axios.get(requestUrl)
.then(res => {
res = res.data;
// init replay info

View File

@ -1,5 +1,6 @@
import React from 'react';
import axios from 'axios';
import qs from 'query-string';
import '../../assets/gameview.scss';
import {LeducHoldemGameBoard} from '../../components/GameBoard';
import Navbar from '../../components/Navbar';
@ -32,7 +33,6 @@ class LeducHoldemGameView extends React.Component {
this.initConsiderationTime = 2000;
this.considerationTimeDeduction = 100;
this.gameStateTimeout = null;
this.apiUrl = apiUrl;
this.moveHistory = [];
this.moveHistoryTotalLength = null;
this.gameStateHistory = [[],[]];
@ -195,12 +195,12 @@ class LeducHoldemGameView extends React.Component {
}
startReplay() {
// for test use
const testUrl = '/tournament/replay?name=leduc-holdem&agent0=leduc-holdem-random&agent1=leduc-holdem-cfr&index=1';
const { name, agent0, agent1, index } = qs.parse(window.location.search);
const requestUrl = `${apiUrl}/tournament/replay?name=${name}&agent0=${agent0}&agent1=${agent1}&index=${index}`;
// start full screen loading
this.setState({fullScreenLoading: true});
axios.get(`${this.apiUrl}${testUrl}`)
axios.get(requestUrl)
.then(res => {
res = res.data;
// init replay info

View File

@ -72,7 +72,8 @@ function createData(resData) {
agent0: resData.fields.agent0,
agent1: resData.fields.agent1,
win: resData.fields.win ? 'Win' : 'Lose',
payoff: resData.fields.payoff
payoff: resData.fields.payoff,
replayUrl: `/replay/${resData.fields.name}?name=${resData.fields.name}&agent0=${resData.fields.agent0}&agent1=${resData.fields.agent1}&index=${resData.fields.index}`
};
}
@ -82,7 +83,8 @@ const headCells = [
{ id: 'agent0', numeric: false, disablePadding: false, label: 'Agent 0' },
{ id: 'agent1', numeric: false, disablePadding: false, label: 'Agent 1' },
{ id: 'win', numeric: false, disablePadding: false, label: 'Result' },
{ id: 'payoff', numeric: false, disablePadding: false, label: 'Payoff' }
{ id: 'payoff', numeric: false, disablePadding: false, label: 'Payoff' },
{ id: 'replay', numeric: false, disablePadding: false, label: 'Replay' }
];
const StyledTableCell = withStyles((theme) => ({
@ -261,6 +263,7 @@ const EnhancedTable = (props) => {
<TableCell>{row.agent1}</TableCell>
<TableCell>{row.win}</TableCell>
<TableCell>{row.payoff}</TableCell>
<TableCell><a style={{display: "table-cell"}} href={row.replayUrl} target="_blank">Replay</a></TableCell>
</TableRow>
);
})}