From e9476696f47460c0b466c8cce99763ee70ad9a94 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Tue, 28 Apr 2015 11:20:20 -0700 Subject: [PATCH 1/4] initial app router and some views --- Gruntfile.js | 4 +- src/js/constants/Routes.js | 19 ++++ src/js/native/index.ios.js | 95 +++++-------------- src/js/native_react_views/LevelSelectView.js | 42 ++++++++ src/js/native_react_views/NavButton.js | 32 +++++++ .../native_react_views/SequenceSelectView.js | 44 +++++++++ 6 files changed, 163 insertions(+), 73 deletions(-) create mode 100644 src/js/constants/Routes.js create mode 100644 src/js/native_react_views/LevelSelectView.js create mode 100644 src/js/native_react_views/NavButton.js create mode 100644 src/js/native_react_views/SequenceSelectView.js diff --git a/Gruntfile.js b/Gruntfile.js index dd7a0115..ff91f02f 100644 --- a/Gruntfile.js +++ b/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' ] }, diff --git a/src/js/constants/Routes.js b/src/js/constants/Routes.js new file mode 100644 index 00000000..d9af3475 --- /dev/null +++ b/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, + }; +}; diff --git a/src/js/native/index.ios.js b/src/js/native/index.ios.js index 2ed5543b..73d646a9 100755 --- a/src/js/native/index.ios.js +++ b/src/js/native/index.ios.js @@ -4,98 +4,49 @@ */ '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 LearnGitBranching = React.createClass({ + + _renderScene: function(route, navigator) { + switch (route.id) { + case Routes.SEQUENCE_SELECT: + return ; + case Routes.LEVEL_SELECT: + return ; + } + throw new Exception('No route found for ' + route.id); + }, + render: function() { return ( - - - - - Yo Whatup Peter - - {Object.keys(levelSequences).map(function(sequence) { - return ( - - - - - - {sequence} - - - - - - ); - })} - - + ); - } + }, + }); 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); diff --git a/src/js/native_react_views/LevelSelectView.js b/src/js/native_react_views/LevelSelectView.js new file mode 100644 index 00000000..b19a19f0 --- /dev/null +++ b/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 ( + + + + { + this.props.navigator.popToTop(); + }} + /> + + + ); + } + +}); + +var styles = StyleSheet.create({ + headerSpacer: { + height: 40 + }, +}); + +module.exports = LevelSelectView; diff --git a/src/js/native_react_views/NavButton.js b/src/js/native_react_views/NavButton.js new file mode 100644 index 00000000..7aa1bd90 --- /dev/null +++ b/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 ( + + {this.props.text} + + ); + } +} + +var styles = StyleSheet.create({ + button: { + backgroundColor: 'white', + padding: 15, + borderBottomWidth: 1 / PixelRatio.get(), + borderBottomColor: '#CDCDCD', + }, +}); + +module.exports = NavButton; diff --git a/src/js/native_react_views/SequenceSelectView.js b/src/js/native_react_views/SequenceSelectView.js new file mode 100644 index 00000000..be2fa879 --- /dev/null +++ b/src/js/native_react_views/SequenceSelectView.js @@ -0,0 +1,44 @@ +var NavButton = require('../native_react_views/NavButton'); +var React = require('react-native'); +var Routes = require('../constants/Routes'); +var { + PixelRatio, + ScrollView, + StyleSheet, + Text, + View, +} = React; + +var SequenceSelectView = React.createClass({ + + propTypes: { + navigator: React.PropTypes.object.isRequired, + }, + + render: function() { + return ( + + + + { + this.props.navigator.push( + Routes.getRouteForID(Routes.LEVEL_SELECT) + ); + }} + /> + + + ); + } + +}); + +var styles = StyleSheet.create({ + headerSpacer: { + height: 40 + }, +}); + +module.exports = SequenceSelectView; From ec44f19d3e47dcf035e06520731f630ceeb8fea2 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Tue, 28 Apr 2015 17:54:40 -0700 Subject: [PATCH 2/4] sweet some initial native views --- src/js/constants/Colors.js | 5 ++ src/js/native/index.ios.js | 5 +- src/js/native_react_views/NUXView.js | 50 +++++++++++++++++++ .../native_react_views/SequenceSelectView.js | 36 +++++++------ src/js/native_react_views/TerminalCardView.js | 36 +++++++++++++ 5 files changed, 117 insertions(+), 15 deletions(-) create mode 100644 src/js/constants/Colors.js create mode 100644 src/js/native_react_views/NUXView.js create mode 100644 src/js/native_react_views/TerminalCardView.js diff --git a/src/js/constants/Colors.js b/src/js/constants/Colors.js new file mode 100644 index 00000000..fa0e9392 --- /dev/null +++ b/src/js/constants/Colors.js @@ -0,0 +1,5 @@ +module.exports = { + blueBackground: '#5cbcfc', + terminalBackground: '#424242', + terminalText: 'rgb(238, 238, 238)', +}; diff --git a/src/js/native/index.ios.js b/src/js/native/index.ios.js index 73d646a9..91973aea 100755 --- a/src/js/native/index.ios.js +++ b/src/js/native/index.ios.js @@ -19,6 +19,7 @@ var { 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({ @@ -28,6 +29,8 @@ var LearnGitBranching = React.createClass({ return ; case Routes.LEVEL_SELECT: return ; + case Routes.NUX: + return ; } throw new Exception('No route found for ' + route.id); }, @@ -35,7 +38,7 @@ var LearnGitBranching = React.createClass({ render: function() { return ( ); diff --git a/src/js/native_react_views/NUXView.js b/src/js/native_react_views/NUXView.js new file mode 100644 index 00000000..839d5431 --- /dev/null +++ b/src/js/native_react_views/NUXView.js @@ -0,0 +1,50 @@ +var NavButton = require('../native_react_views/NavButton'); +var React = require('react-native'); +var Routes = require('../constants/Routes'); +var { + ScrollView, + StyleSheet, + Text, + View, +} = React; + +var Colors = require('../constants/Colors'); +var TerminalCardView = require('../native_react_views/TerminalCardView'); + +var NUXView = React.createClass({ + + propTypes: { + navigator: React.PropTypes.object.isRequired, + }, + + render: function() { + return ( + + + + { + this.props.navigator.push( + Routes.getRouteForID(Routes.LEVEL_SELECT) + ); + }} + /> + + ); + } + +}); + +var styles = StyleSheet.create({ + background: { + backgroundColor: Colors.blueBackground, + flex: 1 + }, + headerSpacer: { + height: 20, + backgroundColor: '#EFEDEE', + }, +}); + +module.exports = NUXView; diff --git a/src/js/native_react_views/SequenceSelectView.js b/src/js/native_react_views/SequenceSelectView.js index be2fa879..1a5e8181 100644 --- a/src/js/native_react_views/SequenceSelectView.js +++ b/src/js/native_react_views/SequenceSelectView.js @@ -2,13 +2,14 @@ var NavButton = require('../native_react_views/NavButton'); var React = require('react-native'); var Routes = require('../constants/Routes'); var { - PixelRatio, ScrollView, StyleSheet, Text, View, } = React; +var Colors = require('../constants/Colors'); + var SequenceSelectView = React.createClass({ propTypes: { @@ -17,27 +18,34 @@ var SequenceSelectView = React.createClass({ render: function() { return ( - + - - { - this.props.navigator.push( - Routes.getRouteForID(Routes.LEVEL_SELECT) - ); - }} - /> - - + + + { + this.props.navigator.push( + Routes.getRouteForID(Routes.LEVEL_SELECT) + ); + }} + /> + + + ); } }); var styles = StyleSheet.create({ + background: { + backgroundColor: Colors.blueBackground, + flex: 1 + }, headerSpacer: { - height: 40 + height: 20, + backgroundColor: '#EFEDEE', }, }); diff --git a/src/js/native_react_views/TerminalCardView.js b/src/js/native_react_views/TerminalCardView.js new file mode 100644 index 00000000..d0449597 --- /dev/null +++ b/src/js/native_react_views/TerminalCardView.js @@ -0,0 +1,36 @@ +var React = require('react-native'); +var { + StyleSheet, + Text, + View, +} = React; + +var Colors = require('../constants/Colors'); + +var TerminalCardView = React.createClass({ + render: function() { + return ( + + + Welcome to learn git branching + + + ); + } +}); + +var styles = StyleSheet.create({ + terminalWindow: { + backgroundColor: Colors.terminalBackground, + }, + + terminalText: { + color: Colors.terminalText, + fontFamily: 'Courier', + fontSize: 16, + fontWeight: 'bold' + }, + +}); + +module.exports = TerminalCardView; From c7c97164ee3df724039be5d7e3bc280cc1b2ba02 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Tue, 28 Apr 2015 18:54:58 -0700 Subject: [PATCH 3/4] hawtttt terminal window --- src/js/constants/Colors.js | 3 + src/js/native_react_views/NUXView.js | 71 +++++++++++++++--- src/js/native_react_views/TerminalCardView.js | 74 ++++++++++++++++++- 3 files changed, 133 insertions(+), 15 deletions(-) diff --git a/src/js/constants/Colors.js b/src/js/constants/Colors.js index fa0e9392..2029bfdc 100644 --- a/src/js/constants/Colors.js +++ b/src/js/constants/Colors.js @@ -2,4 +2,7 @@ module.exports = { blueBackground: '#5cbcfc', terminalBackground: '#424242', terminalText: 'rgb(238, 238, 238)', + terminalHeader: '#EFEDEE', + terminalBorder: '#303030', + terminalFontFamily: 'Courier', }; diff --git a/src/js/native_react_views/NUXView.js b/src/js/native_react_views/NUXView.js index 839d5431..d1e18afd 100644 --- a/src/js/native_react_views/NUXView.js +++ b/src/js/native_react_views/NUXView.js @@ -1,4 +1,4 @@ -var NavButton = require('../native_react_views/NavButton'); +var assign = require('object-assign'); var React = require('react-native'); var Routes = require('../constants/Routes'); var { @@ -10,6 +10,7 @@ var { var Colors = require('../constants/Colors'); var TerminalCardView = require('../native_react_views/TerminalCardView'); +var NavButton = require('../native_react_views/NavButton'); var NUXView = React.createClass({ @@ -21,30 +22,78 @@ var NUXView = React.createClass({ return ( - - { - this.props.navigator.push( - Routes.getRouteForID(Routes.LEVEL_SELECT) - ); - }} - /> + + + + + Welcome To... + + + Learn Git Branching! + + + + Learn Git Branching is the most interactive + and visual way to master Git. + + + With over 30 tutorials and levels, everyone from + absolute beginners to experienced Git wizards + should find something challenging and new. + + + + { + this.props.navigator.push( + Routes.getRouteForID(Routes.LEVEL_SELECT) + ); + }} + /> + + ); } }); +// TODO -- refactor this somewhere +var terminalTextStyle = { + color: Colors.terminalText, + fontFamily: Colors.terminalFontFamily, + fontWeight: 'bold', +}; + var styles = StyleSheet.create({ + buttonContainer: { + marginTop: 40, + }, background: { backgroundColor: Colors.blueBackground, flex: 1 }, + container: { + padding: 12, + }, headerSpacer: { height: 20, - backgroundColor: '#EFEDEE', + backgroundColor: '#FFF' }, + welcomeTextContainer: { + justifyContent: 'center', + alignItems: 'center', + }, + welcomeText: assign({}, terminalTextStyle, { + fontSize: 24, + marginBottom: 8 + }), + introText: assign({}, terminalTextStyle, { + marginTop: 8, + flex: 1, + marginBottom: 8 + }), }); module.exports = NUXView; diff --git a/src/js/native_react_views/TerminalCardView.js b/src/js/native_react_views/TerminalCardView.js index d0449597..b70f7c6c 100644 --- a/src/js/native_react_views/TerminalCardView.js +++ b/src/js/native_react_views/TerminalCardView.js @@ -1,5 +1,7 @@ +var assign = require('object-assign'); var React = require('react-native'); var { + PixelRatio, StyleSheet, Text, View, @@ -8,25 +10,89 @@ var { var Colors = require('../constants/Colors'); var TerminalCardView = React.createClass({ + propTypes: { + text: React.PropTypes.string, + }, + render: function() { return ( - - Welcome to learn git branching - + + + + + + + {this.renderInner()} + ); + }, + + renderInner: function() { + return this.props.text ? + + {this.props.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: Colors.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: Colors.terminalBackground, + borderRadius: BORDER_RADIUS, + shadowOpacity: 0.5, + shadowRadius: 4, + shadowOffset: { + h: 2, + w: 2, + }, + }, + + terminalTextContainer: { + padding: 12, + borderWidth: 1 / PixelRatio.get(), + borderColor: Colors.terminalBorder, + borderRadius: BORDER_RADIUS }, terminalText: { color: Colors.terminalText, - fontFamily: 'Courier', + fontFamily: Colors.terminalFontFamily, fontSize: 16, fontWeight: 'bold' }, From ab8e742ce316f2b6be7116eba6ca9b51eac137dd Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Tue, 28 Apr 2015 19:06:17 -0700 Subject: [PATCH 4/4] big rename --- src/js/constants/{Colors.js => AppStyles.js} | 10 +++++++++- src/js/native_react_views/NUXView.js | 16 ++++------------ src/js/native_react_views/SequenceSelectView.js | 4 ++-- src/js/native_react_views/TerminalCardView.js | 12 ++++++------ 4 files changed, 21 insertions(+), 21 deletions(-) rename src/js/constants/{Colors.js => AppStyles.js} (51%) diff --git a/src/js/constants/Colors.js b/src/js/constants/AppStyles.js similarity index 51% rename from src/js/constants/Colors.js rename to src/js/constants/AppStyles.js index 2029bfdc..2d1ef06c 100644 --- a/src/js/constants/Colors.js +++ b/src/js/constants/AppStyles.js @@ -1,4 +1,4 @@ -module.exports = { +var AppStyles = { blueBackground: '#5cbcfc', terminalBackground: '#424242', terminalText: 'rgb(238, 238, 238)', @@ -6,3 +6,11 @@ module.exports = { terminalBorder: '#303030', terminalFontFamily: 'Courier', }; + +AppStyles.terminalTextStyle = { + color: AppStyles.terminalText, + fontFamily: AppStyles.terminalFontFamily, + fontWeight: 'bold', +}; + +module.exports = AppStyles; diff --git a/src/js/native_react_views/NUXView.js b/src/js/native_react_views/NUXView.js index d1e18afd..61942eaf 100644 --- a/src/js/native_react_views/NUXView.js +++ b/src/js/native_react_views/NUXView.js @@ -8,7 +8,7 @@ var { View, } = React; -var Colors = require('../constants/Colors'); +var AppStyles = require('../constants/AppStyles'); var TerminalCardView = require('../native_react_views/TerminalCardView'); var NavButton = require('../native_react_views/NavButton'); @@ -56,22 +56,14 @@ var NUXView = React.createClass({ ); } - }); -// TODO -- refactor this somewhere -var terminalTextStyle = { - color: Colors.terminalText, - fontFamily: Colors.terminalFontFamily, - fontWeight: 'bold', -}; - var styles = StyleSheet.create({ buttonContainer: { marginTop: 40, }, background: { - backgroundColor: Colors.blueBackground, + backgroundColor: AppStyles.blueBackground, flex: 1 }, container: { @@ -85,11 +77,11 @@ var styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, - welcomeText: assign({}, terminalTextStyle, { + welcomeText: assign({}, AppStyles.terminalTextStyle, { fontSize: 24, marginBottom: 8 }), - introText: assign({}, terminalTextStyle, { + introText: assign({}, AppStyles.terminalTextStyle, { marginTop: 8, flex: 1, marginBottom: 8 diff --git a/src/js/native_react_views/SequenceSelectView.js b/src/js/native_react_views/SequenceSelectView.js index 1a5e8181..4b558eae 100644 --- a/src/js/native_react_views/SequenceSelectView.js +++ b/src/js/native_react_views/SequenceSelectView.js @@ -8,7 +8,7 @@ var { View, } = React; -var Colors = require('../constants/Colors'); +var AppStyles = require('../constants/AppStyles'); var SequenceSelectView = React.createClass({ @@ -40,7 +40,7 @@ var SequenceSelectView = React.createClass({ var styles = StyleSheet.create({ background: { - backgroundColor: Colors.blueBackground, + backgroundColor: AppStyles.blueBackground, flex: 1 }, headerSpacer: { diff --git a/src/js/native_react_views/TerminalCardView.js b/src/js/native_react_views/TerminalCardView.js index b70f7c6c..ab5f411c 100644 --- a/src/js/native_react_views/TerminalCardView.js +++ b/src/js/native_react_views/TerminalCardView.js @@ -7,7 +7,7 @@ var { View, } = React; -var Colors = require('../constants/Colors'); +var AppStyles = require('../constants/AppStyles'); var TerminalCardView = React.createClass({ propTypes: { @@ -52,7 +52,7 @@ var buttonStyle = { var styles = StyleSheet.create({ terminalHeader: { height: 16, - backgroundColor: Colors.terminalHeader, + backgroundColor: AppStyles.terminalHeader, borderRadius: BORDER_RADIUS, flexDirection: 'row', justifyContent: 'flex-start', @@ -73,7 +73,7 @@ var styles = StyleSheet.create({ }), terminalWindow: { - backgroundColor: Colors.terminalBackground, + backgroundColor: AppStyles.terminalBackground, borderRadius: BORDER_RADIUS, shadowOpacity: 0.5, shadowRadius: 4, @@ -86,13 +86,13 @@ var styles = StyleSheet.create({ terminalTextContainer: { padding: 12, borderWidth: 1 / PixelRatio.get(), - borderColor: Colors.terminalBorder, + borderColor: AppStyles.terminalBorder, borderRadius: BORDER_RADIUS }, terminalText: { - color: Colors.terminalText, - fontFamily: Colors.terminalFontFamily, + color: AppStyles.terminalText, + fontFamily: AppStyles.terminalFontFamily, fontSize: 16, fontWeight: 'bold' },