Merge branch 'master' into mzJPTranslate2

reflect original changes

Gruntfile.js

@@ -114,7 +114,8 @@ module.exports = function(grunt) {
       ],
       options: {
         ignores: [
-          'src/js/**/*.ios.js'
+          'src/js/**/*.ios.js',
+          'src/js/native_react_views/*.js'
         ],
         curly: true,
         // sometimes triple equality is just redundant and unnecessary
@@ -217,6 +218,7 @@ module.exports = function(grunt) {
           'src/__tests__/casperjs/*.js',
           'src/js/__tests__/create.js',
           'src/js/__tests__/*.js',
+          'src/js/native_react_views/*.js',
           'src/js/**/*.ios.js'
         ]
       },

src/js/constants/AppStyles.js

@@ -0,0 +1,16 @@
+var AppStyles = {
+  blueBackground: '#5cbcfc',
+  terminalBackground: '#424242',
+  terminalText: 'rgb(238, 238, 238)',
+  terminalHeader: '#EFEDEE',
+  terminalBorder: '#303030',
+  terminalFontFamily: 'Courier',
+};
+
+AppStyles.terminalTextStyle = {
+  color: AppStyles.terminalText,
+  fontFamily: AppStyles.terminalFontFamily,
+  fontWeight: 'bold',
+};
+
+module.exports = AppStyles;

src/js/constants/Routes.js

@@ -0,0 +1,19 @@
+var assign = require('object-assign');
+var keyMirror = require('../util/keyMirror');
+
+module.exports = keyMirror({
+  NUX: null,
+  LOADING: null,
+  SEQUENCE_SELECT: null,
+  LEVEL_SELECT: null,
+});
+
+module.exports.getRouteWithParams = function(id, params) {
+  return assign({id: id}, params);
+};
+
+module.exports.getRouteForID = function(id) {
+  return {
+    id: id,
+  };
+};

src/js/native/index.ios.js

@@ -4,98 +4,52 @@
  */
 'use strict';
 
-var levels = require('../../levels/index.js');
-var LevelStore = require('../stores/LevelStore.js');
-var levelSequences = require('../../levels').levelSequences;
-
 var React = require('react-native');
 var {
   AppRegistry,
-  StyleSheet,
   Image,
+  Navigator,
   ScrollView,
+  StyleSheet,
   Text,
   TouchableHighlight,
   View,
 } = React;
 
+var Routes = require('../constants/Routes');
+var SequenceSelectView = require('../native_react_views/SequenceSelectView');
+var LevelSelectView = require('../native_react_views/LevelSelectView');
+var NUXView = require('../native_react_views/NUXView');
+
 var LearnGitBranching = React.createClass({
+
+  _renderScene: function(route, navigator) {
+    switch (route.id) {
+      case Routes.SEQUENCE_SELECT:
+        return <SequenceSelectView navigator={navigator} />;
+      case Routes.LEVEL_SELECT:
+        return <LevelSelectView navigator={navigator} />;
+      case Routes.NUX:
+        return <NUXView navigator={navigator} />;
+    }
+    throw new Exception('No route found for ' + route.id);
+  },
+
   render: function() {
     return (
-      <ScrollView>
+      <Navigator
-        <View style={styles.headerSpacer} />
+        initialRoute={Routes.getRouteForID(Routes.NUX)}
-        <View style={styles.container}>
+        renderScene={this._renderScene}
-          <Text style={styles.welcome}>
+      />
-            Yo Whatup Peter
-          </Text>
-          {Object.keys(levelSequences).map(function(sequence) {
-            return (
-              <View style={styles.cardContainer}>
-                <TouchableHighlight>
-                  <Image
-                    key={sequence}
-                    source={require('image!test')}
-                    style={styles.logo}>
-                    <View style={styles.levelLabel}>
-                      <Text style={styles.sequenceName}>
-                        {sequence}
-                      </Text>
-                    </View>
-                  </Image>
-                </TouchableHighlight>
-              </View>
     );
-          })}
+  },
-        </View>
+
-      </ScrollView>
-    );
-  }
 });
 
 var styles = StyleSheet.create({
   headerSpacer: {
     height: 40
   },
-  logo: {
-    width: 300,
-    borderRadius: 2,
-    justifyContent: 'center',
-    flexDirection: 'column',
-    alignItems: 'center',
-    height: 100
-  },
-  cardContainer: {
-    shadowColor: '#666',
-    shadowOpacity: 0.7,
-    marginBottom: 16,
-    shadowOffset: {
-      x: 100,
-      y: 100
-    },
-  },
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#FFF',
-  },
-  levelLabel: {
-    flexDirection: 'column',
-    backgroundColor: 'rgba(0, 0, 0, 0)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 10
-  },
-  sequenceName: {
-    color: '#FFF',
-    fontWeight: 'bold',
-    fontSize: 20,
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
 });
 
 AppRegistry.registerComponent('LearnGitBranching', () => LearnGitBranching);

src/js/native_react_views/LevelSelectView.js

@@ -0,0 +1,42 @@
+var NavButton = require('../native_react_views/NavButton');
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+
+var {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var LevelSelectView = React.createClass({
+
+  propTypes: {
+    navigator: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+    return (
+      <ScrollView>
+        <View style={styles.headerSpacer} />
+        <View>
+          <NavButton
+            text="Go to top"
+            onPress={() => {
+              this.props.navigator.popToTop();
+            }}
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+
+});
+
+var styles = StyleSheet.create({
+  headerSpacer: {
+    height: 40
+  },
+});
+
+module.exports = LevelSelectView;

src/js/native_react_views/NUXView.js

@@ -0,0 +1,91 @@
+var assign = require('object-assign');
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+var {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var AppStyles = require('../constants/AppStyles');
+var TerminalCardView = require('../native_react_views/TerminalCardView');
+var NavButton = require('../native_react_views/NavButton');
+
+var NUXView = React.createClass({
+
+  propTypes: {
+    navigator: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+    return (
+      <View style={styles.background}>
+        <View style={styles.headerSpacer} />
+        <View style={styles.container}>
+          <TerminalCardView>
+            <View style={styles.welcomeTextContainer}>
+              <Text style={styles.welcomeText}>
+                Welcome To...
+              </Text>
+              <Text style={styles.welcomeText}>
+                Learn Git Branching!
+              </Text>
+            </View>
+            <Text style={styles.introText}>
+              Learn Git Branching is the most interactive
+              and visual way to master Git. 
+            </Text>
+            <Text style={styles.introText}>
+              With over 30 tutorials and levels, everyone from
+              absolute beginners to experienced Git wizards
+              should find something challenging and new.
+            </Text>
+          </TerminalCardView>
+          <View style={styles.buttonContainer}>
+            <NavButton
+              text="Let's Get Started!"
+              onPress={() => {
+                this.props.navigator.push(
+                  Routes.getRouteForID(Routes.LEVEL_SELECT)
+                );
+              }}
+            />
+          </View>
+        </View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  buttonContainer: {
+    marginTop: 40,
+  },
+  background: {
+    backgroundColor: AppStyles.blueBackground,
+    flex: 1
+  },
+  container: {
+    padding: 12,
+  },
+  headerSpacer: {
+    height: 20,
+    backgroundColor: '#FFF'
+  },
+  welcomeTextContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  welcomeText: assign({}, AppStyles.terminalTextStyle, {
+    fontSize: 24,
+    marginBottom: 8
+  }),
+  introText: assign({}, AppStyles.terminalTextStyle, {
+    marginTop: 8,
+    flex: 1,
+    marginBottom: 8
+  }),
+});
+
+module.exports = NUXView;

src/js/native_react_views/NavButton.js

@@ -0,0 +1,32 @@
+var React = require('react-native');
+var {
+  PixelRatio,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: '#CDCDCD',
+  },
+});
+
+module.exports = NavButton;

src/js/native_react_views/SequenceSelectView.js

@@ -0,0 +1,52 @@
+var NavButton = require('../native_react_views/NavButton');
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+var {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var AppStyles = require('../constants/AppStyles');
+
+var SequenceSelectView = React.createClass({
+
+  propTypes: {
+    navigator: React.PropTypes.object.isRequired,
+  },
+
+  render: function() {
+    return (
+      <View style={styles.background}>
+        <View style={styles.headerSpacer} />
+        <ScrollView>
+          <View>
+            <NavButton
+              text="Level 1"
+              onPress={() => {
+                this.props.navigator.push(
+                  Routes.getRouteForID(Routes.LEVEL_SELECT)
+                );
+              }}
+            />
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+
+});
+
+var styles = StyleSheet.create({
+  background: {
+    backgroundColor: AppStyles.blueBackground,
+    flex: 1
+  },
+  headerSpacer: {
+    height: 20,
+    backgroundColor: '#EFEDEE',
+  },
+});
+
+module.exports = SequenceSelectView;

src/js/native_react_views/TerminalCardView.js

@@ -0,0 +1,102 @@
+var assign = require('object-assign');
+var React = require('react-native');
+var {
+  PixelRatio,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var AppStyles = require('../constants/AppStyles');
+
+var TerminalCardView = React.createClass({
+  propTypes: {
+    text: React.PropTypes.string,
+  },
+
+  render: function() {
+    return (
+      <View style={styles.terminalWindow}>
+        <View style={styles.terminalHeader}>
+          <View style={styles.closeButton} />
+          <View style={styles.minimizeButton} />
+          <View style={styles.maximizeButton} />
+        </View>
+        <View style={styles.terminalTextContainer}>
+          {this.renderInner()}
+        </View>
+      </View>
+    );
+  },
+
+  renderInner: function() {
+    return this.props.text ? 
+      <Text style={styles.terminalText}>
+        {this.props.text}
+      </Text> :
+      this.props.children;
+  }
+
+});
+
+var BORDER_WIDTH = 1 / PixelRatio.get();
+var BORDER_RADIUS = 4;
+var BUTTON_SIZE = 12;
+var BUTTON_BORDER_RADIUS = BUTTON_SIZE - 2;
+var buttonStyle = {
+  height: BUTTON_SIZE,
+  width: BUTTON_SIZE,
+  borderRadius: BUTTON_BORDER_RADIUS,
+};
+
+var styles = StyleSheet.create({
+  terminalHeader: {
+    height: 16,
+    backgroundColor: AppStyles.terminalHeader,
+    borderRadius: BORDER_RADIUS,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingLeft: 4
+  },
+
+  closeButton: assign({}, buttonStyle, {
+    backgroundColor: '#fb625f',
+  }),
+
+  minimizeButton: assign({}, buttonStyle, {
+    backgroundColor: '#f9c57a',
+  }),
+
+  maximizeButton: assign({}, buttonStyle, {
+    backgroundColor: '#8ac872',
+  }),
+
+  terminalWindow: {
+    backgroundColor: AppStyles.terminalBackground,
+    borderRadius: BORDER_RADIUS,
+    shadowOpacity: 0.5,
+    shadowRadius: 4,
+    shadowOffset: {
+      h: 2,
+      w: 2,
+    },
+  },
+
+  terminalTextContainer: {
+    padding: 12,
+    borderWidth: 1 / PixelRatio.get(),
+    borderColor: AppStyles.terminalBorder,
+    borderRadius: BORDER_RADIUS
+  },
+
+  terminalText: {
+    color: AppStyles.terminalText,
+    fontFamily: AppStyles.terminalFontFamily,
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+
+});
+
+module.exports = TerminalCardView;