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 ( - - - - - - - - - +
+ + + + + + +
); } 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 + + + + + }); + + const agentMenu = modelList.map(model => { + return + + + + + }); + + return ( + + + + + {open.agent ? : } + + + {gameMenu} + + + + {open.game ? : } + + + {agentMenu} + + + + ) +} + +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 ( - +
{"Logo"}
Showdown{this.props.gameName === '' ? '' : '/ ' + this.props.gameName}
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 ( -
wdnmd
- ) - } +function LeaderBoard () { + return ( +
+ +
+
+ Placeholder +
+
+
+ ) } export default LeaderBoard;