Add files via upload

Chapter11/mern-vrgame/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Shama Hoque
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Chapter11/mern-vrgame/README.md

@@ -0,0 +1,15 @@
+# MERN VR Game
+
+### [Live Demo](http://vrgame.mernbook.com/ "MERN VR Game")
+
+#### What you need to run this code
+1. Node (8.11.1)
+2. NPM (5.8.0)
+3. MongoDB (3.6.3)
+
+####  How to run this code
+1. Clone this repository
+2. Open command line in the cloned folder,
+   - To install dependencies, run ```  npm install  ```
+   - To run the application for development, run ```  npm run development  ```
+4. Open [localhost:3000](http://localhost:3000/) in the browser

Chapter11/mern-vrgame/client/App.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import MainRouter from './MainRouter'
+import {BrowserRouter} from 'react-router-dom'
+import {MuiThemeProvider, createMuiTheme} from 'material-ui/styles'
+import { hot } from 'react-hot-loader'
+
+// Create a theme instance.
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      light: '#484848',
+      main: '#212121',
+      dark: '#000000',
+      contrastText: '#fff',
+    },
+    secondary: {
+      light: '#ffff6e',
+      main: '#cddc39',
+      dark: '#99aa00',
+      contrastText: '#000',
+    },
+    openTitle: '#484848',
+    protectedTitle: '#7da453',
+    type: 'light'
+  }
+})
+
+const App = () => (
+  <BrowserRouter>
+    <MuiThemeProvider theme={theme}>
+      <MainRouter/>
+    </MuiThemeProvider>
+  </BrowserRouter>
+)
+
+export default hot(module)(App)

Chapter11/mern-vrgame/client/MainRouter.js

@@ -0,0 +1,41 @@
+import React, {Component} from 'react'
+import {Route, Switch} from 'react-router-dom'
+import Home from './core/Home'
+import Users from './user/Users'
+import Signup from './user/Signup'
+import Signin from './auth/Signin'
+import EditProfile from './user/EditProfile'
+import Profile from './user/Profile'
+import PrivateRoute from './auth/PrivateRoute'
+import Menu from './core/Menu'
+import NewGame from './game/NewGame'
+import EditGame from './game/EditGame'
+
+class MainRouter extends Component {
+  // Removes the server-side injected CSS when React component mounts
+  componentDidMount() {
+    const jssStyles = document.getElementById('jss-server-side')
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles)
+    }
+  }
+
+  render() {
+    return (<div>
+      <Menu/>
+      <Switch>
+        <Route exact path="/" component={Home}/>
+        <Route path="/users" component={Users}/>
+        <Route path="/signup" component={Signup}/>
+        <Route path="/signin" component={Signin}/>
+        <PrivateRoute path="/user/edit/:userId" component={EditProfile}/>
+        <Route path="/user/:userId" component={Profile}/>
+
+        <PrivateRoute path="/game/new" component={NewGame}/>
+        <PrivateRoute path="/game/edit/:gameId" component={EditGame}/>
+      </Switch>
+    </div>)
+  }
+}
+
+export default MainRouter

Chapter11/mern-vrgame/client/auth/PrivateRoute.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import { Route, Redirect } from 'react-router-dom'
+import auth from './auth-helper'
+
+const PrivateRoute = ({ component: Component, ...rest }) => (
+  <Route {...rest} render={props => (
+    auth.isAuthenticated() ? (
+      <Component {...props}/>
+    ) : (
+      <Redirect to={{
+        pathname: '/signin',
+        state: { from: props.location }
+      }}/>
+    )
+  )}/>
+)
+
+export default PrivateRoute

Chapter11/mern-vrgame/client/auth/Signin.js

@@ -0,0 +1,107 @@
+import React, {Component} from 'react'
+import Card, {CardActions, CardContent} from 'material-ui/Card'
+import Button from 'material-ui/Button'
+import TextField from 'material-ui/TextField'
+import Typography from 'material-ui/Typography'
+import Icon from 'material-ui/Icon'
+import PropTypes from 'prop-types'
+import {withStyles} from 'material-ui/styles'
+import auth from './../auth/auth-helper'
+import {Redirect} from 'react-router-dom'
+import {signin} from './api-auth.js'
+
+const styles = theme => ({
+  card: {
+    maxWidth: 600,
+    margin: 'auto',
+    textAlign: 'center',
+    marginTop: theme.spacing.unit * 5,
+    paddingBottom: theme.spacing.unit * 2
+  },
+  error: {
+    verticalAlign: 'middle'
+  },
+  title: {
+    marginTop: theme.spacing.unit * 2,
+    color: theme.palette.openTitle
+  },
+  textField: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+    width: 300
+  },
+  submit: {
+    margin: 'auto',
+    marginBottom: theme.spacing.unit * 2
+  }
+})
+
+class Signin extends Component {
+  state = {
+      email: '',
+      password: '',
+      error: '',
+      redirectToReferrer: false
+  }
+
+  clickSubmit = () => {
+    const user = {
+      email: this.state.email || undefined,
+      password: this.state.password || undefined
+    }
+
+    signin(user).then((data) => {
+      if (data.error) {
+        this.setState({error: data.error})
+      } else {
+        auth.authenticate(data, () => {
+          this.setState({redirectToReferrer: true})
+        })
+      }
+    })
+  }
+
+  handleChange = name => event => {
+    this.setState({[name]: event.target.value})
+  }
+
+  render() {
+    const {classes} = this.props
+    const {from} = this.props.location.state || {
+      from: {
+        pathname: '/'
+      }
+    }
+    const {redirectToReferrer} = this.state
+    if (redirectToReferrer) {
+      return (<Redirect to={from}/>)
+    }
+
+    return (
+      <Card className={classes.card}>
+        <CardContent>
+          <Typography type="headline" component="h2" className={classes.title}>
+            Sign In
+          </Typography>
+          <TextField id="email" type="email" label="Email" className={classes.textField} value={this.state.email} onChange={this.handleChange('email')} margin="normal"/><br/>
+          <TextField id="password" type="password" label="Password" className={classes.textField} value={this.state.password} onChange={this.handleChange('password')} margin="normal"/>
+          <br/> {
+            this.state.error && (<Typography component="p" color="error">
+              <Icon color="error" className={classes.error}>error</Icon>
+              {this.state.error}
+            </Typography>)
+          }
+        </CardContent>
+        <CardActions>
+          <Button color="primary" variant="raised" onClick={this.clickSubmit} className={classes.submit}>Submit</Button>
+        </CardActions>
+      </Card>
+    )
+  }
+}
+
+Signin.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(Signin)

Chapter11/mern-vrgame/client/auth/api-auth.js

@@ -0,0 +1,27 @@
+const signin = (user) => {
+  return fetch('/auth/signin/', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(user)
+    })
+    .then((response) => {
+      return response.json()
+    }).catch((err) => console.log(err))
+}
+
+const signout = () => {
+  return fetch('/auth/signout/', {
+    method: 'GET',
+  }).then(response => {
+      return response.json()
+  }).catch((err) => console.log(err))
+}
+
+export {
+  signin,
+  signout
+}

Chapter11/mern-vrgame/client/auth/auth-helper.js

@@ -0,0 +1,29 @@
+import { signout } from './api-auth.js'
+
+const auth = {
+  isAuthenticated() {
+    if (typeof window == "undefined")
+      return false
+
+    if (sessionStorage.getItem('jwt'))
+      return JSON.parse(sessionStorage.getItem('jwt'))
+    else
+      return false
+  },
+  authenticate(jwt, cb) {
+    if (typeof window !== "undefined")
+      sessionStorage.setItem('jwt', JSON.stringify(jwt))
+    cb()
+  },
+  signout(cb) {
+    if (typeof window !== "undefined")
+      sessionStorage.removeItem('jwt')
+    cb()
+    //optional
+    signout().then((data) => {
+      document.cookie = "t=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
+    })
+  }
+}
+
+export default auth

Chapter11/mern-vrgame/client/core/Home.js

@@ -0,0 +1,50 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {withStyles} from 'material-ui/styles'
+import Card, {CardContent, CardMedia} from 'material-ui/Card'
+import {list} from '../game/api-game.js'
+import GameDetail from '../game/GameDetail'
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    margin: '10px 24px',
+  }
+})
+
+class Home extends Component {
+  state={
+    games: []
+  }
+  componentDidMount = () => {
+    list().then((data) => {
+      if (data.error) {
+        console.log(data.error)
+      } else {
+        this.setState({games: data})
+      }
+    })
+  }
+  updateGames = (game) => {
+    const updatedGames = this.state.games
+    const index = updatedGames.indexOf(game)
+    updatedGames.splice(index, 1)
+    this.setState({games: updatedGames})
+  }
+  render() {
+    const {classes} = this.props
+    return (
+      <div className={classes.root}>
+        {this.state.games.map((game, i) => {
+          return <GameDetail key={i} game={game} updateGames={this.updateGames}/>
+        })}
+      </div>
+    )
+  }
+}
+
+Home.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(Home)