BOOM removed helper bar view look at those stats brah

src/js/react_views/CommandsHelperBarView.jsx

@@ -0,0 +1,69 @@
+var HelperBarView = require('../react_views/HelperBarView.jsx');
+var Main = require('../app');
+var React = require('react');
+
+var log = require('../log');
+
+var CommandsHelperBarView = React.createClass({
+
+  propTypes: {
+    shown: React.PropTypes.bool.isRequired,
+    onExit: React.PropTypes.func.isRequired
+  },
+
+  render: function() {
+    return (
+      <HelperBarView
+        items={this.getItems()}
+        shown={this.props.shown}
+      />
+    );
+  },
+
+  fireCommand: function(command) {
+    log.viewInteracted('commandHelperBar');
+    Main.getEventBaton().trigger('commandSubmitted', command);
+  },
+
+  getItems: function() {
+    return [{
+      text: 'Levels',
+      onClick: function() {
+        this.fireCommand('levels');
+      }.bind(this),
+    }, {
+      text: 'Solution',
+      onClick: function() {
+        this.fireCommand('show solution');
+      }.bind(this),
+    }, {
+      text: 'Reset',
+      onClick: function() {
+        this.fireCommand('reset');
+      }.bind(this),
+    }, {
+      text: 'Undo',
+      onClick: function() {
+        this.fireCommand('undo');
+      }.bind(this),
+    }, {
+      text: 'Objective',
+      onClick: function() {
+        this.fireCommand('objective');
+      }.bind(this),
+    }, {
+      text: 'Help',
+      onClick: function() {
+        this.fireCommand('help general; git help');
+      }.bind(this)
+    }, {
+      icon: 'signout',
+      onClick: function() {
+        this.props.onExit();
+      }.bind(this)
+    }];
+  }
+
+});
+
+module.exports = CommandsHelperBarView;

src/js/react_views/HelperBarView.jsx

@@ -0,0 +1,64 @@
+var React = require('react');
+
+var reactUtil = require('../util/reactUtil');
+
+var HelperBarView = React.createClass({
+
+  propTypes: {
+    className: React.PropTypes.string,
+    shown: React.PropTypes.bool.isRequired,
+    items: React.PropTypes.array.isRequired
+  },
+
+  render: function() {
+    var topClassName = reactUtil.joinClasses([
+      'helperBar',
+      'transitionAll',
+      this.props.shown ? 'show' : '',
+      this.props.className ? this.props.className : ''
+    ]);
+
+    return (
+      <div className={topClassName}>
+        {this.props.items.map(function(item, index) {
+          return [
+            this.renderItem(item),
+            // ugh -- we need this spacer at the end only
+            // if we are not the last element
+            index === this.props.items.length - 1 ?
+              null :
+              <span key={'helper_bar_' + index}>{' '}</span>
+          ];
+        }.bind(this))}
+      </div>
+    );
+  },
+
+  renderItem: function(item, index) {
+    if (item.newPageLink) {
+      return (
+        <a
+          key={'helper_bar_' + index}
+          onClick={item.onClick}
+          target="_blank"
+          href={item.href}>
+          <i className={'icon-' + item.icon} />
+          {' '}
+        </a>
+      );
+    }
+    return (
+      <a
+        key={'helper_bar_' + index}
+        onClick={item.onClick}>
+        {item.text ? item.text :
+          <i className={'icon-' + item.icon} />
+        }
+        {' '}
+      </a>
+    );
+  }
+
+});
+
+module.exports = HelperBarView;

src/js/react_views/IntlHelperBarView.jsx

@@ -0,0 +1,85 @@
+var HelperBarView = require('../react_views/HelperBarView.jsx');
+var Main = require('../app');
+var React = require('react');
+
+var log = require('../log');
+
+var IntlHelperBarView = React.createClass({
+
+  propTypes: {
+    shown: React.PropTypes.bool.isRequired,
+    onExit: React.PropTypes.func.isRequired
+  },
+
+  render: function() {
+    return (
+      <HelperBarView
+        items={this.getItems()}
+        shown={this.props.shown}
+      />
+    );
+  },
+
+  fireCommand: function(command) {
+    log.viewInteracted('intlSelect');
+    Main.getEventBaton().trigger('commandSubmitted', command);
+    this.props.onExit();
+  },
+
+  getItems: function() {
+    return [{
+      text: 'Git Branching',
+      onClick: function() {
+        this.fireCommand('locale en_US; levels');
+      }.bind(this)
+    }, {
+      text: '日本語版リポジトリ',
+      onClick: function() {
+        this.fireCommand('locale ja; levels');
+      }.bind(this)
+    }, {
+      text: 'Git 브랜치 배우기',
+      onClick: function() {
+        this.fireCommand('locale ko; levels');
+      }.bind(this)
+    }, {
+      text: '学习 Git 分支',
+      onClick: function() {
+        this.fireCommand('locale zh_CN; levels');
+      }.bind(this)
+    }, {
+      text: '學習 Git 分支',
+      onClick: function() {
+        this.fireCommand('locale zh_TW; levels');
+      }.bind(this)
+    }, {
+      text: 'español',
+      onClick: function() {
+        this.fireCommand('locale es_AR; levels');
+      }.bind(this)
+    }, {
+      text: 'português',
+      onClick: function() {
+        this.fireCommand('locale pt_BR; levels');
+      }.bind(this)
+    }, {
+      text: 'français',
+      onClick: function() {
+        this.fireCommand('locale fr_FR; levels');
+      }.bind(this)
+    }, {
+      text: 'Deutsch',
+      onClick: function() {
+        this.fireCommand('locale de_DE; levels');
+      }.bind(this)
+    }, {
+      icon: 'signout',
+      onClick: function() {
+        this.props.onExit();
+      }.bind(this)
+    }];
+  }
+
+});
+
+module.exports = IntlHelperBarView;

src/js/react_views/MainHelperBarView.jsx

@@ -0,0 +1,75 @@
+var HelperBarView = require('../react_views/HelperBarView.jsx');
+var IntlHelperBarView =
+  require('../react_views/IntlHelperBarView.jsx');
+var CommandsHelperBarView =
+  require('../react_views/CommandsHelperBarView.jsx');
+var React = require('react');
+
+var keyMirror = require('../util/keyMirror');
+var log = require('../log');
+
+var BARS = keyMirror({
+  SELF: null,
+  INTL: null,
+  COMMANDS: null
+});
+
+var MainHelperBarView = React.createClass({
+
+  getInitialState: function() {
+    return {
+      shownBar: BARS.SELF
+    };
+  },
+
+  render: function() {
+    return (
+      <div>
+        <HelperBarView
+          className="BaseHelperBar"
+          items={this.getItems()}
+          shown={this.state.shownBar === BARS.SELF}
+        />
+        <CommandsHelperBarView
+          shown={this.state.shownBar === BARS.COMMANDS}
+          onExit={this.showSelf}
+        />
+        <IntlHelperBarView
+          shown={this.state.shownBar === BARS.INTL}
+          onExit={this.showSelf}
+        />
+      </div>
+    );
+  },
+
+  showSelf: function() {
+    this.setState({
+      shownBar: BARS.SELF
+    });
+  },
+
+  getItems: function() {
+    return [{
+      icon: 'question-sign',
+      onClick: function() {
+        this.setState({
+          shownBar: BARS.COMMANDS
+        });
+      }.bind(this)
+    }, {
+      icon: 'globe',
+      onClick: function() {
+        this.setState({
+          shownBar: BARS.INTL
+        });
+      }.bind(this)
+    }, {
+      newPageLink: true,
+      icon: 'facebook',
+      href: 'https://www.facebook.com/LearnGitBranching'
+    }];
+  }
+
+});
+
+module.exports = MainHelperBarView;