DouZero
/
rlcard-showdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add leader board table component; add leaderboard page jump functionality; optimize menu bar style

This commit is contained in:
Songyi Huang 2020-07-19 16:38:52 -07:00
parent ecb4936d64
commit 362da09294
5 changed files with 209 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -8,6 +8,7 @@
"element-react": "^1.4.34",
"element-theme-default": "^1.4.13",
"node-sass": "^4.13.0",
"query-string": "^6.13.1",
"react": "^16.12.0",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.12.0",

4
src/assets/index.scss
View File

@ -7,10 +7,6 @@ body {
font-family: 'Arvo', 'Rockwell', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.MuiTypography-body1 {
font-family: 'Arvo', 'Rockwell', monospace;
}
}
code {

28
src/components/MenuBar.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
@ -7,6 +8,7 @@ import Collapse from '@material-ui/core/Collapse';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import {makeStyles} from "@material-ui/core/styles";
import qs from 'query-string';
const gameList = [
{game: 'leduc-holdem', dispName: 'Leduc Hold\'em'},
@ -47,8 +49,15 @@ const useStyles = makeStyles((theme) => ({
'& span': {
fontWeight: 400,
fontSize: 14
},
'&$active': {
'& span': {
color: '#3f51b5',
fontWeight: 600
}
}
}
},
active: {}
}));
function MenuBar () {
@ -62,18 +71,27 @@ function MenuBar () {
setOpen({game: open.game, agent: !open.agent});
};
const history = useHistory();
const handleGameJump = (gameName) => {
history.push(`/leaderboard?type=game&name=${gameName}`);
}
const handleAgentJump = (agentName) => {
history.push(`/leaderboard?type=agent&name=${agentName}`);
}
const { type, name } = qs.parse(window.location.search);
const gameMenu = gameList.map(game => {
return <List component="div" disablePadding key={"game-menu-"+game.game}>
<ListItem button className={classes.nested}>
<ListItemText primary={game.dispName} className={classes.menuLayer2} />
<ListItem button className={classes.nested} onClick={() => {handleGameJump(game.game)}}>
<ListItemText primary={game.dispName} className={`${classes.menuLayer2} ${(type === 'game' && name === game.game) ? classes.active : classes.inactive}`} />
</ListItem>
</List>
});
const agentMenu = modelList.map(model => {
return <List component="div" disablePadding key={"game-menu-"+model.model}>
<ListItem button className={classes.nested}>
<ListItemText primary={model.dispName} className={classes.menuLayer2} />
<ListItem button className={classes.nested} onClick={() => {handleAgentJump(model.model)}}>
<ListItemText primary={model.dispName} className={`${classes.menuLayer2} ${(type === 'agent' && name === model.model) ? classes.active : classes.inactive}`} />
</ListItem>
</List>
});

3
src/view/GameView/DoudizhuGameView.js
View File

@ -32,7 +32,6 @@ class DoudizhuGameView extends React.Component {
this.initConsiderationTime = 2000;
this.considerationTimeDeduction = 200;
this.gameStateTimeout = null;
this.apiUrl = apiUrl;
this.moveHistory = [];
this.gameStateHistory = [];
this.initGameState = {
@ -180,7 +179,7 @@ class DoudizhuGameView extends React.Component {
// start full screen loading
this.setState({fullScreenLoading: true});
axios.get(`${this.apiUrl}/replay/doudizhu/${replayId}`)
axios.get(`${apiUrl}/replay/doudizhu/${replayId}`)
.then(res => {
res = res.data;
// init replay info

186
src/view/LeaderBoard.js
View File

@ -1,18 +1,200 @@
import React from 'react';
import MenuBar from "../components/MenuBar";
// import axios from 'axios';
import PropTypes from 'prop-types';
import { lighten, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import { apiUrl } from "../utils/config";
import axios from 'axios';
function LeaderBoard () {
console.log(`${apiUrl}/tournament/query_game?name=doudizhu`);
axios.get(`${apiUrl}/tournament/query_game?name=doudizhu`)
return (
<div>
<MenuBar />
<div style={{marginLeft: '250px'}}>
<div style={{padding: 20}}>
<span>Placeholder</span>
{EnhancedTable()}
</div>
</div>
</div>
)
}
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Donut', 452, 25.0, 51, 4.9),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Gingerbread', 356, 16.0, 49, 3.9),
createData('Honeycomb', 408, 3.2, 87, 6.5),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Jelly Bean', 375, 0.0, 94, 0.0),
createData('KitKat', 518, 26.0, 65, 7.0),
createData('Lollipop', 392, 0.2, 98, 0.0),
createData('Marshmallow', 318, 0, 81, 2.0),
createData('Nougat', 360, 19.0, 9, 37.0),
createData('Oreo1', 437, 18.0, 63, 4.0),
createData('Oreo2', 437, 18.0, 63, 4.0),
createData('Oreo3', 437, 18.0, 63, 4.0),
createData('Oreo4', 437, 18.0, 63, 4.0),
createData('Oreo5', 437, 18.0, 63, 4.0),
createData('Oreo6', 437, 18.0, 63, 4.0),
createData('Oreo7', 437, 18.0, 63, 4.0),
createData('Oreo8', 437, 18.0, 63, 4.0),
createData('Oreo9', 437, 18.0, 63, 4.0),
createData('Oreo10', 437, 18.0, 63, 4.0),
createData('Oreo11', 437, 18.0, 63, 4.0)
];
const headCells = [
{ id: 'name', numeric: false, disablePadding: false, label: 'Dessert (100g serving)' },
{ id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
{ id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' },
{ id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
{ id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
];
function EnhancedTableHead() {
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? 'right' : 'left'}
padding={headCell.disablePadding ? 'none' : 'default'}
>
{headCell.label}
</TableCell>
))}
</TableRow>
</TableHead>
);
}
EnhancedTableHead.propTypes = {
classes: PropTypes.object.isRequired,
rowCount: PropTypes.number.isRequired,
};
const useToolbarStyles = makeStyles((theme) => ({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
},
highlight:
theme.palette.type === 'light'
? {
color: theme.palette.secondary.main,
backgroundColor: lighten(theme.palette.secondary.light, 0.85),
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.secondary.dark,
},
title: {
flex: '1 1 100%',
},
}));
const EnhancedTableToolbar = () => {
const classes = useToolbarStyles();
return (
<Toolbar
className={classes.root}
>
<Typography className={classes.title} variant="h6" id="tableTitle" component="div">
Nutrition
</Typography>
</Toolbar>
);
};
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
paper: {
width: '100%',
marginBottom: theme.spacing(2),
},
table: {
minWidth: 750,
},
visuallyHidden: {
border: 0,
clip: 'rect(0 0 0 0)',
height: 1,
margin: -1,
overflow: 'hidden',
padding: 0,
position: 'absolute',
top: 20,
width: 1,
},
}));
function EnhancedTable() {
const classes = useStyles();
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<EnhancedTableToolbar />
<TableContainer>
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={'medium'}
aria-label="enhanced table"
>
<EnhancedTableHead
classes={classes}
rowCount={rows.length}
/>
<TableBody>
{rows.map((row, index) => {
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.name}
>
<TableCell component="th" id={labelId} scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Paper>
</div>
);
}
export default LeaderBoard;