From ecb4936d64baebd09db6a0fea73fec43bb702749 Mon Sep 17 00:00:00 2001
From: Songyi Huang <songyih1996@gmail.com>
Date: Sat, 18 Jul 2020 22:43:02 -0700
Subject: [PATCH] complete global layout, add menu navbar

---
 src/App.js                           |  37 +++------
 src/assets/{index.css => index.scss} |   6 +-
 src/components/MenuBar.js            | 113 +++++++++++++++++++++++++++
 src/components/Navbar.js             |   2 +-
 src/index.js                         |   2 +-
 src/view/LeaderBoard.js              |  22 +++---
 6 files changed, 141 insertions(+), 41 deletions(-)
 rename src/assets/{index.css => index.scss} (85%)
 create mode 100644 src/components/MenuBar.js

diff --git a/src/App.js b/src/App.js
index 4eb7236..42614eb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,13 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
-import Drawer from '@material-ui/core/Drawer';
-import Toolbar from '@material-ui/core/Toolbar';
 import LeaderBoard from './view/LeaderBoard';
 import { DoudizhuGameView, LeducHoldemGameView } from './view/GameView';
 import Navbar from "./components/Navbar";
 import {makeStyles} from "@material-ui/core/styles";
 
-const drawerWidth = 250;
-
 const useStyles = makeStyles(() => ({
     navBar: {
-      zIndex: 1002
-    },
-    drawer: {
-        zIndex: 1001,
-        width: drawerWidth,
-        flexShrink: 0
-    },
-    drawerPaper: {
-        width: drawerWidth
+        zIndex: 1002
     }
 }));
 
@@ -28,21 +16,14 @@ function App() {
     return (
         <Router>
             <Navbar className={classes.navBar} gameName={""}/>
-            <Drawer
-                className={classes.drawer}
-                variant="permanent"
-                classes={{
-                    paper: classes.drawerPaper
-                }}
-            >
-                <Toolbar />
-            </Drawer>
-            <Route exact path="/">
-                <Redirect to="/leaderboard" />
-            </Route>
-            <Route path="/leaderboard" component={LeaderBoard} />
-            <Route path="/replay/doudizhu" component={DoudizhuGameView} />
-            <Route path="/replay/leduc-holdem" component={LeducHoldemGameView} />
+            <div style={{marginTop: '75px'}}>
+                <Route exact path="/">
+                    <Redirect to="/leaderboard" />
+                </Route>
+                <Route path="/leaderboard" component={LeaderBoard} />
+                <Route path="/replay/doudizhu" component={DoudizhuGameView} />
+                <Route path="/replay/leduc-holdem" component={LeducHoldemGameView} />
+            </div>
         </Router>
     );
 }
diff --git a/src/assets/index.css b/src/assets/index.scss
similarity index 85%
rename from src/assets/index.css
rename to src/assets/index.scss
index 7eeaf60..310028e 100644
--- a/src/assets/index.css
+++ b/src/assets/index.scss
@@ -7,6 +7,10 @@ body {
   font-family: 'Arvo', 'Rockwell', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  .MuiTypography-body1 {
+    font-family: 'Arvo', 'Rockwell', monospace;
+  }
 }
 
 code {
@@ -19,4 +23,4 @@ code {
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-}
\ No newline at end of file
+}
diff --git a/src/components/MenuBar.js b/src/components/MenuBar.js
new file mode 100644
index 0000000..6fb485a
--- /dev/null
+++ b/src/components/MenuBar.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+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";
+
+const gameList = [
+    {game: 'leduc-holdem', dispName: 'Leduc Hold\'em'},
+    {game: 'doudizhu', dispName: 'Dou Dizhu'},
+];
+
+const modelList = [
+    {model: 'leduc-holdem-random', dispName: 'Leduc Hold\'em Random'},
+    {model: 'leduc-holdem-cfr', dispName: 'Leduc Hold\'em CFR'},
+    {model: 'leduc-holdem-rule-v1', dispName: 'Leduc Hold\'em Rule V1'},
+    {model: 'doudizhu-random', dispName: 'Dou Dizhu Random'},
+    {model: 'doudizhu-rule-v1', dispName: 'Dou Dizhu Rule V1'}
+];
+
+const drawerWidth = 250;
+
+const useStyles = makeStyles((theme) => ({
+    drawer: {
+        zIndex: 1001,
+        width: drawerWidth,
+        flexShrink: 0
+    },
+    drawerPaper: {
+        zIndex: 1001,
+        width: drawerWidth,
+        top: 75
+    },
+    nested: {
+        paddingLeft: theme.spacing(4)
+    },
+    menuLayer1: {
+        '& span': {
+            fontWeight: 600,
+            fontSize: 14
+        }
+    },
+    menuLayer2: {
+        '& span': {
+            fontWeight: 400,
+            fontSize: 14
+        }
+    }
+}));
+
+function MenuBar () {
+    const classes = useStyles();
+
+    const [open, setOpen] = React.useState({game: true, agent: true});
+    const handleClickGame = () => {
+        setOpen({game: !open.game, agent: open.agent});
+    };
+    const handleClickAgent = () => {
+        setOpen({game: open.game, agent: !open.agent});
+    };
+
+    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>
+        </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>
+        </List>
+    });
+
+    return (
+        <Drawer
+            className={classes.drawer}
+            variant="permanent"
+            classes={{
+                paper: classes.drawerPaper
+            }}
+        >
+            <List
+                component="nav"
+                aria-labelledby="nested-list-subheader"
+                className={classes.root}
+            >
+                <ListItem button onClick={handleClickAgent}>
+                    <ListItemText primary="Game LeaderBoards" className={classes.menuLayer1}/>
+                    {open.agent ? <ExpandLess /> : <ExpandMore />}
+                </ListItem>
+                <Collapse in={open.agent} timeout="auto" unmountOnExit>
+                    {gameMenu}
+                </Collapse>
+                <ListItem button onClick={handleClickGame}>
+                    <ListItemText primary="Agents" className={classes.menuLayer1}/>
+                    {open.game ? <ExpandLess /> : <ExpandMore />}
+                </ListItem>
+                <Collapse in={open.game} timeout="auto" unmountOnExit>
+                    {agentMenu}
+                </Collapse>
+            </List>
+        </Drawer>
+    )
+}
+
+export default MenuBar;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 22f3e31..e4f21aa 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -21,7 +21,7 @@ class Navbar extends React.Component {
 
     render() {
         return (
-            <AppBar position="static" className={"header-bar-wrapper"}>
+            <AppBar position="fixed" className={"header-bar-wrapper"}>
                 <div className={"header-bar"}>
                     <Link to="/leaderboard"><img src={logo_white} alt={"Logo"} height="65px" /></Link>
                     <div className={"title unselectable"}><div className={"title-text"}>Showdown<span className={"subtitle"}>{this.props.gameName === '' ? '' : '/ ' + this.props.gameName}</span></div></div>
diff --git a/src/index.js b/src/index.js
index 24ee011..8f9c359 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './assets/index.css';
+import './assets/index.scss';
 import App from './App';
 
 // import element ui
diff --git a/src/view/LeaderBoard.js b/src/view/LeaderBoard.js
index f7f8c72..0490094 100644
--- a/src/view/LeaderBoard.js
+++ b/src/view/LeaderBoard.js
@@ -1,16 +1,18 @@
 import React from 'react';
+import MenuBar from "../components/MenuBar";
 // import axios from 'axios';
 
-class LeaderBoard extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div>wdnmd</div>
-        )
-    }
+function LeaderBoard () {
+    return (
+        <div>
+            <MenuBar />
+            <div style={{marginLeft: '250px'}}>
+                <div style={{padding: 20}}>
+                    <span>Placeholder</span>
+                </div>
+            </div>
+        </div>
+    )
 }
 
 export default LeaderBoard;