Merge remote-tracking branch 'upstream/master' into mzJPTranslate2

Reflect original changes

src/js/native/index.ios.js

@@ -7,13 +7,7 @@
 var React = require('react-native');
 var {
   AppRegistry,
-  Image,
   Navigator,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
 } = React;
 
 var Routes = require('../constants/Routes');
@@ -21,6 +15,8 @@ var SequenceSelectView = require('../native_react_views/SequenceSelectView');
 var LevelSelectView = require('../native_react_views/LevelSelectView');
 var NUXView = require('../native_react_views/NUXView');
 
+var INITIAL_ROUTE = Routes.NUX;
+
 var LearnGitBranching = React.createClass({
 
   _renderScene: function(route, navigator) {
@@ -38,7 +34,7 @@ var LearnGitBranching = React.createClass({
   render: function() {
     return (
       <Navigator
-        initialRoute={Routes.getRouteForID(Routes.NUX)}
+        initialRoute={Routes.getRouteForID(INITIAL_ROUTE)}
         renderScene={this._renderScene}
       />
     );
@@ -46,10 +42,4 @@ var LearnGitBranching = React.createClass({
 
 });
 
-var styles = StyleSheet.create({
-  headerSpacer: {
-    height: 40
-  },
-});
-
 AppRegistry.registerComponent('LearnGitBranching', () => LearnGitBranching);

src/js/native_react_views/AppViews.js

@@ -0,0 +1,27 @@
+/**
+ * Simple views for the app that dont really change.
+ */
+
+var React = require('react-native');
+var Routes = require('../constants/Routes');
+var {
+  StyleSheet,
+  View,
+} = React;
+
+var HeaderSpacer = React.createClass({
+
+  render: function() {
+    return <View style={styles.headerSpacer} />;
+  }
+  
+});
+
+var styles = StyleSheet.create({
+  headerSpacer: {
+    height: 20,
+    backgroundColor: '#FFF'
+  },
+});
+
+module.exports.HeaderSpacer = HeaderSpacer;

src/js/native_react_views/NUXView.js

@@ -9,6 +9,10 @@ var {
 } = React;
 
 var AppStyles = require('../constants/AppStyles');
+var AppViews = require('../native_react_views/AppViews');
+var {
+  HeaderSpacer,
+} = AppViews;
 var TerminalCardView = require('../native_react_views/TerminalCardView');
 var NavButton = require('../native_react_views/NavButton');
 
@@ -21,33 +25,35 @@ var NUXView = React.createClass({
   render: function() {
     return (
       <View style={styles.background}>
-        <View style={styles.headerSpacer} />
+        <HeaderSpacer />
         <View style={styles.container}>
           <TerminalCardView>
-            <View style={styles.welcomeTextContainer}>
-              <Text style={styles.welcomeText}>
-                Welcome To...
+            <View style={styles.textContainer}>
+              <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.welcomeText}>
-                Learn Git Branching!
+              <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>
             </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)
+                  Routes.getRouteForID(Routes.SEQUENCE_SELECT)
                 );
               }}
             />
@@ -59,6 +65,9 @@ var NUXView = React.createClass({
 });
 
 var styles = StyleSheet.create({
+  textContainer: {
+    padding: 8,
+  },
   buttonContainer: {
     marginTop: 40,
   },
@@ -69,10 +78,6 @@ var styles = StyleSheet.create({
   container: {
     padding: 12,
   },
-  headerSpacer: {
-    height: 20,
-    backgroundColor: '#FFF'
-  },
   welcomeTextContainer: {
     justifyContent: 'center',
     alignItems: 'center',

src/js/native_react_views/NavButton.js

@@ -7,6 +7,7 @@ var {
   View,
 } = React;
 
+// TODO -- style this!
 class NavButton extends React.Component {
   render() {
     return (

src/js/native_react_views/SequenceSelectView.js

@@ -1,3 +1,4 @@
+var assign = require('object-assign');
 var NavButton = require('../native_react_views/NavButton');
 var React = require('react-native');
 var Routes = require('../constants/Routes');
@@ -5,10 +6,20 @@ var {
   ScrollView,
   StyleSheet,
   Text,
+  TouchableHighlight,
   View,
 } = React;
 
 var AppStyles = require('../constants/AppStyles');
+var AppViews = require('../native_react_views/AppViews');
+var {
+  HeaderSpacer,
+} = AppViews;
+var TerminalCardView = require('../native_react_views/TerminalCardView');
+var NavButton = require('../native_react_views/NavButton');
+var Levels = require('../../levels');
+
+var intl = require('../intl');
 
 var SequenceSelectView = React.createClass({
 
@@ -19,34 +30,83 @@ var SequenceSelectView = React.createClass({
   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>
+        <HeaderSpacer />
+        <ScrollView style={styles.container}>
+          <View style={styles.headerSpacer} />
+          <TerminalCardView>
+            <View style={styles.terminalContainer}>
+              {Object.keys(Levels.levelSequences).map(
+                sequenceID => this.renderSelector(sequenceID)
+              )}
+            </View>
+          </TerminalCardView>
         </ScrollView>
       </View>
     );
+  },
+
+  renderSelector: function(sequenceID) {
+    var info = Levels.sequenceInfo[sequenceID];
+    var name = intl.getIntlKey(info, 'displayName');
+    var about = intl.getIntlKey(info, 'about');
+
+    return (
+      <TouchableHighlight
+        onPress={() => {
+          this.props.navigator.push(
+            Routes.getRouteForID(Routes.LEVEL_SELECT)
+          );
+        }}
+        underlayColor="#6E6E6E">
+        <View>
+          <View style={styles.textContainer}>
+            <Text style={styles.sequenceName}>
+              {name}
+            </Text>
+            <Text style={styles.sequenceAbout}>
+              {about}
+            </Text>
+          </View>
+          <View style={styles.divider} />
+        </View>
+      </TouchableHighlight>
+    );
   }
 
 });
 
 var styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    marginBottom: 8,
+    backgroundColor: '#FFF'
+  },
+  terminalContainer: {
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+  textContainer: {
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  sequenceName: assign({}, AppStyles.terminalTextStyle, {
+    fontSize: 20,
+  }),
+  sequenceAbout: assign({}, AppStyles.terminalTextStyle, {
+    fontSize: 10,
+    marginTop: 8,
+    marginBottom: 8,
+  }),
+  container: {
+    padding: 8,
+  },
+  headerSpacer: {
+    height: 24,
+  },
   background: {
     backgroundColor: AppStyles.blueBackground,
     flex: 1
   },
-  headerSpacer: {
-    height: 20,
-    backgroundColor: '#EFEDEE',
-  },
 });
 
 module.exports = SequenceSelectView;

src/js/native_react_views/TerminalCardView.js

@@ -84,7 +84,6 @@ var styles = StyleSheet.create({
   },
 
   terminalTextContainer: {
-    padding: 12,
     borderWidth: 1 / PixelRatio.get(),
     borderColor: AppStyles.terminalBorder,
     borderRadius: BORDER_RADIUS

src/levels/rebase/manyRebases.js

@@ -114,7 +114,6 @@ exports.level = {
               "",
               "Die Führungsetage macht die Sache allerdings etwas trickreicher -- die möchten, dass alle Commits in aufsteigender Reihenfolge geordnet sind. Das heißt unser fertiger Baum sollte `C7` ganz unten haben, darüber `C6` und so weiter und so fort.",
               "",
-              "Upper management is making this a bit trickier though -- they want the commits to all be in sequential order. So this means that our final tree should have `C7'` at the bottom, `C6'` above that, etc etc, etc all in order.",
               "Wenn du irgendwo einen Fehler machst, benutz ruhig `reset` um wieder von vorne anzufangen oder `undo` um einen Schrit zurückzugehen. Schau dir die Lösung an und versuch es in weniger Schritten hinzubekommen, als die."
             ]
           }