basic prototype

morganecf · Apr 17, 2020 · fb0ee20 · fb0ee20
1 parent e275708
commit fb0ee20
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 77 deletions.
diff --git a/app/index.html b/app/index.html
@@ -6,7 +6,6 @@
     <body>
         <title>Jitsi Party</title>
         <div class="container">
-            <h1>Welcome have fun</h1>
             <div class="app"></div>
         </div>
         <script src='https://meet.jit.si/external_api.js'></script>

diff --git a/app/jsx/Navigation.jsx b/app/jsx/Navigation.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUp, faArrowDown, faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
 
@@ -9,28 +8,30 @@ export default class Navigation extends Component {
     }
 
     render() {
+        const onClick = this.props.onClick
+        const { north, south, east, west } = this.props.directions
         return (
             <div className="navigation-container">
                 <div className="top-row">
-                    <button className="north" disabled={!this.props.directions.north}>
+                    <button className="north" disabled={!north} onClick={() => onClick(north)}>
                         <FontAwesomeIcon icon={faArrowUp}/>
-                        <span className="navigation-room-name">{this.props.directions.north}</span>
+                        <span className="navigation-room-name">{north}</span>
                     </button>
                 </div>
                 <div className="middle-row">
-                    <button className="west" disabled={!this.props.directions.west}>
+                    <button className="west" disabled={!west} onClick={() => onClick(west)}>
                         <FontAwesomeIcon icon={faArrowLeft}/>
-                        <span className="navigation-room-name">{this.props.directions.west}</span>
+                        <span className="navigation-room-name">{west}</span>
                     </button>
-                    <button className="east" disabled={!this.props.directions.east}>
+                    <button className="east" disabled={!east} onClick={() => onClick(east)}>
                         <FontAwesomeIcon icon={faArrowRight}/>
-                        <span className="navigation-room-name">{this.props.directions.east}</span>
+                        <span className="navigation-room-name">{east}</span>
                     </button>
                 </div>
                 <div className="bottom-row">
-                    <button className="south" disabled={!this.props.directions.south}>
+                    <button className="south" disabled={!south} onClick={() => onClick(south)}>
                         <FontAwesomeIcon icon={faArrowDown}/>
-                        <span className="navigation-room-name">{this.props.directions.south}</span>
+                        <span className="navigation-room-name">{south}</span>
                     </button>
                 </div>
             </div>

diff --git a/app/jsx/Room.jsx b/app/jsx/Room.jsx
@@ -1,23 +1,40 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import reducers from './reducers.jsx'
 import Navigation from './Navigation.jsx'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import directions from './directions.jsx'
 
-export default class Room extends Component { 
+class Room extends Component { 
     constructor(props) {
         super(props)
         this.state = {
+            room: this.props.currentRoom,
             hasLoaded: false
         }
     }
 
-    async componentDidMount() {
+    componentDidMount() {
+        this.connectToRoom(this.state.room)
+    }
+
+    componentWillUnmount() {
+        if (this.api) {
+            this.api.dispose()
+        }
+    }
+
+    connectToRoom(room) {
+        if (this.api) {
+            this.api.dispose()
+        }
         // TODO need to disable the ability to hang up I think
         try {
             const domain = 'meet.jit.si'
             const options = {
-                roomName: this.props.roomName,
+                roomName: room,
                 height: 800,
                 parentNode: document.getElementById('jitsi-container'),
                 interfaceConfigOverwrite: {
@@ -28,36 +45,44 @@ export default class Room extends Component {
                     disableSimulcast: false
                 }
             }
-            const api = new window.JitsiMeetExternalAPI(domain, options)
+            this.api = new window.JitsiMeetExternalAPI(domain, options)
             this.setState({ hasLoaded: true })
-            api.addEventListener('videoConferenceJoined', () => {
-                api.executeCommand('displayName', this.props.displayName)
+            this.api.addEventListener('videoConferenceJoined', () => {
+                this.api.executeCommand('displayName', this.props.displayName)
             })
         } catch (err) {
             console.log('failed:', err)
         }
     }
 
+    onSwitchRoom(room) {
+        this.setState({ room })
+        this.props.updateCurrentRoom(room)
+        this.connectToRoom(room)
+    }
+
     getLoadingSpinner() {
         if (!this.state.hasLoaded) {
             return <FontAwesomeIcon icon={faSpinner}/>
         }
     }
 
     render() {
-        const directions = {
-            north: 'The Room of Disquiet',
-            east: 'Literally hell',
-            west: 'Bathroom'
-        }
+        console.log(directions[this.state.room])
         return (
             <div className="room">
+                <h2 className="room-name">{this.state.room}</h2>
                 {this.getLoadingSpinner()}
                 <div id="jitsi-container"></div>
-                <span className="room-name">{this.props.roomName}</span>
+                <Navigation directions={directions[this.state.room]} onClick={this.onSwitchRoom.bind(this)}></Navigation>
                 <Link to="/map" activeclassname="active">Map</Link>
-                <Navigation directions={directions}></Navigation>
             </div>
         )
     }
 }
+
+export default connect(
+    state => state, 
+    {
+        updateCurrentRoom: reducers.updateCurrentRoomActionCreator
+     })(Room)
diff --git a/app/jsx/Vestibule.jsx b/app/jsx/Vestibule.jsx
diff --git a/app/jsx/Welcome.jsx b/app/jsx/Welcome.jsx
@@ -0,0 +1,50 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import reducers from './reducers.jsx'
+import { Link, Redirect } from 'react-router-dom'
+
+class Welcome extends Component { 
+    constructor(props) {
+        super(props)
+        this.state = {
+            displayName: this.props.displayName,
+            avatar: this.props.avatar,
+            redirect: null
+        }
+    }
+
+    handleDisplayNameChange(event) {
+        this.setState({ displayName: event.target.value })
+    }
+
+    handleReady() {
+        // TODO make sure don't submit empty name
+        this.props.updateDisplayName(this.state.displayName)
+        this.props.updateCurrentRoom('Vestibule')
+        this.setState({ redirect: '/party' })
+    }
+
+    render() {
+        if (this.state.redirect) {
+            return <Redirect to={this.state.redirect}/>
+        }
+        return (
+            <div className="vestibule">
+                <h1>Welcome have fun</h1>
+                <div className="display-name">
+                    <input type="text" placeholder="name" name="name" minLength="1" onChange={this.handleDisplayNameChange.bind(this)}/>
+                    <input type="button" onClick={this.handleReady.bind(this)} value="Party!"/>
+                </div>
+                <Link to="/about" activeclassname="active">About</Link>
+            </div>
+        )
+    }
+}
+
+export default connect(
+    state => state, 
+    {
+        updateDisplayName: reducers.updateDisplayNameActionCreator,
+        updateCurrentRoom: reducers.updateCurrentRoomActionCreator
+     })(Welcome)
diff --git a/app/jsx/directions.jsx b/app/jsx/directions.jsx
@@ -0,0 +1,20 @@
+export default {
+    'Vestibule': {
+        north: 'Literally Hell',
+        west: 'Bathroom',
+        east: 'Room of Disquiet'
+    },
+    'Literally Hell': {
+        north: 'Sexy Room',
+        south: 'Vestibule'
+    },
+    'Bathroom': {
+        east: 'Vestibule'
+    },
+    'Room of Disquiet': {
+        west: 'Vestibule'
+    },
+    'Sexy Room': {
+        south: 'Literally Hell'
+    }
+}
diff --git a/app/jsx/reducers.jsx b/app/jsx/reducers.jsx
@@ -1,14 +1,20 @@
 import { handleActions } from 'redux-actions'
 
 const UPDATE_DISPLAY_NAME = 'UPDATE_DISPLAY_NAME'
+const UPDATE_CURRENT_ROOM = 'UPDATE_CURRENT_ROOM'
 
 const initialState = {
     displayName: '',
-    avatar: ''
+    avatar: '',
+    currentRoom: ''
 }
 
 function updateDisplayNameAction(state, displayName) {
-    return Object.assign({}, state, { displayName })
+    return Object.assign({}, state, displayName)
+}
+
+function updateCurrentRoomAction(state, currentRoom) {
+    return Object.assign({}, state, currentRoom)
 }
 
 export default {
@@ -17,8 +23,13 @@ export default {
         type: UPDATE_DISPLAY_NAME,
         displayName
     }),
+    updateCurrentRoomActionCreator: currentRoom => ({
+        type: UPDATE_CURRENT_ROOM,
+        currentRoom
+    }),
     /* Reducers */
     reducer: handleActions({
         [UPDATE_DISPLAY_NAME]: updateDisplayNameAction,
+        [UPDATE_CURRENT_ROOM]: updateCurrentRoomAction,
     }, initialState)
 }
diff --git a/app/jsx/routes.jsx b/app/jsx/routes.jsx
@@ -1,15 +1,16 @@
 import React from 'react'
 import { Router, Route } from 'react-router'
 import { createBrowserHistory } from 'history'
-import Vestibule from './Vestibule.jsx'
+import Welcome from './Welcome.jsx'
 import About from './About.jsx'
 import Map from './Map.jsx'
+import Room from './Room.jsx'
 
 export default (
     <Router history={createBrowserHistory()}>
-        <Route exact path="/" component={Vestibule} />
+        <Route exact path="/" component={Welcome} />
         <Route path="/about" component={About}/>
         <Route path="/map" component={Map}/>
-        <Route path="/room" component={Room}/>
+        <Route path="/party" component={Room}/>
     </Router>
 )
diff --git a/app/styles/styles.css b/app/styles/styles.css
@@ -5,6 +5,25 @@ body {
     color: #ea03c3;
     text-align: center;
 }
+.vestibule {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+.vestibule .display-name {
+    margin-top: 50px;
+}
+.vestibule .display-name input[type=text] {
+    width: 30%;
+    height: 30px;
+    font-size: 25px;
+}
+.vestibule .display-name input[type=button] {
+    margin-left: 10px;
+}
+.vestibule a {
+    margin-top: 50px;
+}
 .about {
     color: #fff;
 }