screen.js

import store                  from 'data/store'
import browser                from 'browser'
import Intro                  from './Intro'
import LevelEnd               from './LevelEnd'
import Questions              from './Questions'
import TimeoutTransitionGroup from 'vendor/timeout-transition-group'

export default React.createClass({
  _getScreen() {
    const level  = store.getLevel(this.props.level)
    let screen

    if (this.props.level === false) {
      screen = {
        enterTimeout : 0,
        leaveTimeout : 650,
        component    : <Intro key="1" {...this.props} />
      }
    } else if (level.complete) {
      screen = {
        enterTimeout : 4000,
        leaveTimeout : 3500,
        component    : <LevelEnd {...this.props}
                                 key="2"
                                 level={level} />
      }
    } else {
      const firstLevelEnter = level.id === 1 && !level.complete && !store.content.gameStarted
      screen = {
        enterTimeout   : 800,
        leaveTimeout   : (firstLevelEnter) ? 800 : 3500,
        transitionName : (firstLevelEnter) ? '-first-time' : '',
        component      : <Questions {...this.props}
                                    key="3"
                                    level={level} />
      }
    }

    screen.transitionEnter = browser.supportsTransitions()
    screen.transitionLeave = browser.supportsTransitions()
    screen.transitionName  = screen.transitionName || ''

    return screen
  },

  render() {
    const {component, ...screen} = this._getScreen()
    return <TimeoutTransitionGroup {...screen}
                                   id="main"
                                   ref="main"
                                   tabIndex="0"
                                   role="main"
                                   component="div">
      {component}
    </TimeoutTransitionGroup>
  }
})