basic sequence selector

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');
@@ -15,6 +16,9 @@ var {
 } = 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({
 
@@ -30,6 +34,9 @@ var SequenceSelectView = React.createClass({
           <View style={styles.headerSpacer} />
           <TerminalCardView>
             <View>
+              {Object.keys(Levels.levelSequences).map(
+                sequenceID => this.renderSelector(sequenceID)
+              )}
               <NavButton
                 text="Level 1"
                 onPress={() => {
@@ -43,11 +50,36 @@ var SequenceSelectView = React.createClass({
         </ScrollView>
       </View>
     );
+  },
+
+  renderSelector: function(sequenceID) {
+    var info = Levels.sequenceInfo[sequenceID];
+    var name = intl.getIntlKey(info, 'displayName');
+    var about = intl.getIntlKey(info, 'about');
+
+    return (
+      <View>
+        <Text style={styles.sequenceName}>
+          {name}
+        </Text>
+        <Text style={styles.sequenceAbout}>
+          {about}
+        </Text>
+      </View>
+    );
   }
 
 });
 
 var styles = StyleSheet.create({
+  sequenceName: assign({}, AppStyles.terminalTextStyle, {
+    fontSize: 20,
+  }),
+  sequenceAbout: assign({}, AppStyles.terminalTextStyle, {
+    fontSize: 10,
+    marginTop: 8,
+    marginBottom: 8,
+  }),
   container: {
     padding: 8,
   },