feat: Add Main menu and game over screen

Author: computationalcore

.gitignore

@@ -1,6 +1,7 @@
 node_modules/**/*
 .expo/*
 npm-debug.*
+.DS_Store
 *.jks
 *.p12
 *.key

App.js

@@ -3,15 +3,15 @@ import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 import ReduxThunk from 'redux-thunk';
 import reducers from './src/reducers';
-import TriviaScreen from './src/components/screens/TriviaScreen';
+import Router from './src/Router';
 
 export default class App extends React.Component {
 
   render() {
     const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
     return (
       <Provider store={store}>
-        <TriviaScreen />
+        <Router />
       </Provider>
     );
   }

assets/fonts/BadaboomBB_Reg.ttf

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Scene, Router } from 'react-native-router-flux';
+import TriviaGame from './components/screens/TriviaGame';
+import GameOver from './components/screens/GameOver';
+import MainMenu from './components/screens/MainMenu';
+
+const RouterComponent = () => {
+  return (
+    <Router>
+      <Scene key="main" hideNavBar={true} initial>
+        <Scene key="mainMenu" component={MainMenu} />
+        <Scene key="triviaGame" component={TriviaGame} />
+        <Scene key="gameOver" component={GameOver} />
+      </Scene>
+    </Router>
+  );
+};
+
+export default RouterComponent;

assets/fonts/GrinchedRegular.otf

@@ -1,5 +1,7 @@
+import { Actions } from 'react-native-router-flux';
 import { AllHtmlEntities as entities } from 'html-entities';
 import {
+  TRIVIA_START_GAME,
   TRIVIA_FETCH_SUCCESS,
   TRIVIA_FETCH_ERROR,
   TRIVIA_NEXT_QUESTION,
@@ -31,9 +33,10 @@ export const triviaFetch = () => {
           }
         }
       );
+      // console.log(formatedQuestions);
       dispatch({ type: TRIVIA_FETCH_SUCCESS, payload: formatedQuestions });
-    }).catch(function () {
-      dispatch({ type: TRIVIA_FETCH_ERROR });
+    }).catch(function (error) {
+      dispatch({ type: TRIVIA_FETCH_ERROR, payload: error });
     });
   }
 };
@@ -56,13 +59,25 @@ export const nextQuestion = (currentAnswer, currentQuestionIndex, questions, tot
       totalScore += 1;
     }
 
-    console.log(`Total Score: ${totalScore}`);
-
     if (nextIndex < totalQuestionsSize) {
       dispatch({ type: TRIVIA_NEXT_QUESTION, payload: { currentQuestionIndex: nextIndex, totalScore } });
     }
     else {
       dispatch({ type: TRIVIA_GAME_OVER, payload: totalScore });
+      // Call game over screen and disable back action
+      Actions.gameOver({ type: 'reset' });
     }
   }
 };
+
+/**
+ * @description Start Trivia Game.
+ */
+export const startGame = () => {
+
+  return (dispatch) => {
+    dispatch({ type: TRIVIA_START_GAME });
+    // Call start game and disable back action
+    Actions.triviaGame({ type: 'reset' });
+  }
+};

assets/fonts/SaucerBB.ttf

@@ -1,3 +1,4 @@
+export const TRIVIA_START_GAME = 'trivia_start_game';
 export const TRIVIA_FETCH_SUCCESS = 'trivia_fetch_success';
 export const TRIVIA_FETCH_ERROR = 'trivia_fetch_error';
 export const TRIVIA_NEXT_QUESTION = 'trivia_next_question';

assets/images/game_background_active.png

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+const Button = ({ onPress, children }) => {
+  const { buttonStyle, textStyle } = styles;
+
+  return (
+    <TouchableOpacity onPress={onPress} style={buttonStyle}>
+      <Text style={textStyle}>
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = {
+  textStyle: {
+    flex: 1,
+    padding: 12,
+    color: '#ffffff',
+    fontSize: 24,
+    fontWeight:'normal',
+    textAlign: 'center',
+    textShadowColor:'#000000',
+    textShadowOffset:{width: 2, height: 2},
+    textShadowRadius:0,
+  },
+  buttonStyle: {
+    height: 60,
+    alignSelf: 'stretch',
+    minHeight: 32,
+    margin: 10,
+    backgroundColor: 'rgba(64, 64, 255, 0.8)',
+    borderRadius: 8
+  }
+};
+
+export default Button;

src/Router.js

@@ -32,7 +32,7 @@ const defaultProps = {
  */
 
 /**
- * @description	Represents a individual Quiz Question.
+ * @description	Individual quiz question with options.
  * @constructor
  * @param {Object} props - The props that were defined by the caller of this component.
  * @param {string} props.category - The id of the book.
@@ -63,7 +63,7 @@ function Question(props) {
           )}
           keyExtractor={(item, index) => `${index}-${item}`}
           onPressItem={props.onItemSelected}
-          scrollEnabled={false}
+          scrollEnabled={true}
         />
     </View>
   );

src/actions/TriviaActions.js

@@ -21,7 +21,7 @@ const propTypes = {
  */
 
 /**
- * @description	Represents a individual Quiz Option.
+ * @description	Individual quiz question option component.
  * @constructor
  * @param {Object} props - The props that were defined by the caller of this component.
  * @param {string} props.optionDescription - The text of the option.
@@ -30,8 +30,6 @@ const propTypes = {
 class QuestionOptionItem extends PureComponent {
 
   _onPress = () => {
-    console.log('QuestionOptionItem Pressed : ');
-    console.log(this.props.optionDescription);
     this.props.onPressItem(this.props.optionDescription);
   };
 

src/actions/types.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  TouchableHighlight
+} from 'react-native';
+import { connect } from 'react-redux';
+import { Font } from 'expo';
+import { startGame } from '../../actions';
+import Button from '../Button';
+
+
+// Game background image
+const BACKGROUND_IMAGE = require('../../../assets/images/game_background.png');
+const GAMEOVER_TITLE_FONT = require('../../../assets/fonts/GrinchedRegular.otf');
+const GAMEOVER_FONT = require('../../../assets/fonts/BadaboomBB_Reg.ttf');
+
+/**
+ * @description	Game Over screen.
+ * @constructor
+ * @param {Object} props - The props that were defined by the caller of this component.
+ * @param {function} props.startGame - Callback executed when user clicks play again button.
+ */
+class GameOver extends React.Component {
+  constructor(props){
+		super(props);
+		/**
+		 * @typedef {Object} ComponentState
+		 * @property {Object[]} fontLoaded - Indicates whether custom fonts already loaded.
+		 */
+
+		/** @type {ComponentState} */
+		this.state = {
+			fontLoaded: false
+		};
+	}
+
+  async componentDidMount() {
+    await Font.loadAsync({
+      'game-over': GAMEOVER_FONT,
+      'game-over-title': GAMEOVER_TITLE_FONT,
+    });
+    this.setState({ fontLoaded: true });
+  }
+
+  render() {
+
+    const { elapsedTime, totalQuestionsNumber, totalScore } = this.props;
+    // Change score color based on value
+    const scorePercent = totalScore / totalQuestionsNumber;
+    const scoreColor = (scorePercent >= 0.8) ? '#14AB00': (scorePercent >= 0.5) ? '#D9E100' : '#FF2020';
+    return (
+      <View style={styles.container}>
+        <ImageBackground
+            style={styles.imageBackground}
+            source={BACKGROUND_IMAGE}
+            resizeMode="cover"
+          >
+          {(this.state.fontLoaded) &&
+            <View style={styles.gameOverData}>
+              <Text style={styles.gameOverTitle}>GAME OVER</Text>
+              <Text style={[styles.gameScoreText, { color: scoreColor }]}
+              >Total Score: {totalScore} of {totalQuestionsNumber}</Text>
+              <Text style={styles.gameTimeText}>Elapsed Time: {elapsedTime} seconds</Text>
+              <Button onPress={() => this.props.startGame()}>
+                Play Again
+              </Button>
+            </View>
+          }
+        </ImageBackground>
+      </View>
+    )
+  }
+}
+
+/**
+ * GameOver component StyleSheet.
+ */
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(64, 64, 64,0.8)',
+    borderRadius: 8,
+    padding: 10,
+    margin: 20
+  },
+  imageBackground: {
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  gameOverData: {
+    padding: 16,
+    marginTop: 32,
+    marginBottom: 32,
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderRadius: 8,
+    borderColor: '#ffffff',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
+  gameOverTitle: {
+    fontFamily: "game-over-title",
+    color: '#000000',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 10,
+    fontSize: 78
+  },
+  gameScoreText: {
+    fontFamily: 'game-over',
+    textShadowColor: 'black',
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 10,
+    fontSize: 36,
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  gameTimeText: {
+    fontFamily: 'game-over',
+    fontSize: 36,
+    textShadowOffset: {width: -1, height: 1},
+    textShadowRadius: 10,
+    color: '#8f61f9',
+    marginTop: 10,
+    marginBottom: 10,
+  },
+});
+
+const mapStateToProps = ({ trivia }) => {
+  const { totalScore, startTime, endTime, questions } = trivia;
+
+  // Elapsed time in seconds
+  const elapsedTime = Math.round((endTime - startTime) / 1000);
+
+  const totalQuestionsNumber = questions.length;
+
+  return { elapsedTime, totalQuestionsNumber, totalScore };
+};
+
+export default connect(mapStateToProps, { startGame })(GameOver);