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

package.json

@@ -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",

src/assets/index.scss

@@ -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 {

src/components/MenuBar.js

@@ -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}>
+            <ListItem button className={classes.nested} onClick={() => {handleGameJump(game.game)}}>
-                <ListItemText primary={game.dispName} className={classes.menuLayer2} />
+                <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}>
+            <ListItem button className={classes.nested} onClick={() => {handleAgentJump(model.model)}}>
-                <ListItemText primary={model.dispName} className={classes.menuLayer2} />
+                <ListItemText primary={model.dispName} className={`${classes.menuLayer2} ${(type === 'agent' && name === model.model) ? classes.active : classes.inactive}`} />
             </ListItem>
         </List>
     });

src/view/GameView/DoudizhuGameView.js

@@ -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

src/view/LeaderBoard.js

@@ -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;