adding global layout...

This commit is contained in:
Songyi Huang 2020-06-11 23:52:13 -07:00
parent 8eca9fe80c
commit 67071ff3f5
5 changed files with 36 additions and 9 deletions

Binary file not shown.

View File

@ -1,13 +1,44 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom"; 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 LeaderBoard from './view/LeaderBoard';
import { DoudizhuGameView, LeducHoldemGameView } from './view/GameView'; 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
}
}));
function App() { function App() {
const classes = useStyles();
return ( return (
<Router> <Router>
<Navbar className={classes.navBar} gameName={""}/>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
>
<Toolbar />
</Drawer>
<Route exact path="/"> <Route exact path="/">
<Redirect to="/replay/leduc-holdem" /> <Redirect to="/leaderboard" />
</Route> </Route>
<Route path="/leaderboard" component={LeaderBoard} /> <Route path="/leaderboard" component={LeaderBoard} />
<Route path="/replay/doudizhu" component={DoudizhuGameView} /> <Route path="/replay/doudizhu" component={DoudizhuGameView} />

View File

@ -7,7 +7,7 @@
} }
.header-bar { .header-bar {
width: 1000px; width: calc(100% - 60px);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
height: 65px; height: 65px;
@ -296,4 +296,4 @@
} }
} }
} }
} }

View File

@ -24,7 +24,7 @@ class Navbar extends React.Component {
<AppBar position="static" className={"header-bar-wrapper"}> <AppBar position="static" className={"header-bar-wrapper"}>
<div className={"header-bar"}> <div className={"header-bar"}>
<Link to="/leaderboard"><img src={logo_white} alt={"Logo"} height="65px" /></Link> <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}</span></div></div> <div className={"title unselectable"}><div className={"title-text"}>Showdown<span className={"subtitle"}>{this.props.gameName === '' ? '' : '/ ' + this.props.gameName}</span></div></div>
<div className={"stretch"} /> <div className={"stretch"} />
<div className={"github-info"} onClick={()=>{window.location.href = 'https://github.com/datamllab/rlcard'}}> <div className={"github-info"} onClick={()=>{window.location.href = 'https://github.com/datamllab/rlcard'}}>
<div className={"github-icon"}><GitHubIcon /></div> <div className={"github-icon"}><GitHubIcon /></div>

View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom';
// import axios from 'axios'; // import axios from 'axios';
class LeaderBoard extends React.Component { class LeaderBoard extends React.Component {
@ -9,10 +8,7 @@ class LeaderBoard extends React.Component {
render() { render() {
return ( return (
<ul> <div>wdnmd</div>
<li><Link to="/replay/leduc-holdem">Leduc Holdem</Link></li>
<li><Link to="/replay/doudizhu">Dou Dizhu</Link></li>
</ul>
) )
} }
} }