add leader board table component; add leaderboard page jump functionality; optimize menu bar style
This commit is contained in:
Songyi Huang
parent
ecb4936d64
commit
362da09294
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue