Addition screen implementation

squarenotsquare/src/redux/actions/UserActions.js

@@ -1,5 +1,5 @@
 import { squareNav } from "../../navigation/SquareNav";
-import { ADDITION_START, SQUARE_FINISHED, SQUARE_START } from "../types/UserTypes";
+import { ADDITION_FINISHED, ADDITION_START, SQUARE_FINISHED, SQUARE_START } from "../types/UserTypes";
 import { calculateSquareScore } from "../../libs/CalculateScore";
 import DbAPI from "../../realm/DbAPI";
 
@@ -35,3 +35,20 @@ export function squareFinished(answers, finalTime) {
     });
   }
 }
+
+export function addFinished(answers, finalTime) {
+  return (dispatch, getState) => {
+    setTimeout(() => squareNav('Score'), 3000);
+    const userState = getState().user;
+    let newUser = {...userState};
+    newUser.lastGameTime = finalTime;
+    newUser.lastGameAnswers = answers;
+
+    let finalScore = calculateSquareScore(answers, finalTime);
+    DbAPI.createScore(userState.username, finalScore);
+    dispatch({
+      type: ADDITION_FINISHED,
+      user: newUser
+    });
+  }
+}

squarenotsquare/src/redux/reducers/UserReducer.js

@@ -1,7 +1,8 @@
 import { APP_INIT } from "../types/SystemTypes";
 import {
   SQUARE_START,
-  SQUARE_FINISHED
+  SQUARE_FINISHED,
+  ADDITION_FINISHED
 } from '../types/UserTypes';
 
 const initialUserState = {
@@ -15,6 +16,7 @@ function usr(state = initialUserState, action) {
   switch (action.type) {
     case SQUARE_START:
     case SQUARE_FINISHED:
+    case ADDITION_FINISHED:
       return {...state, ...action.user};
     default:
       return state;

squarenotsquare/src/screens/AdditionGame.js

@@ -11,6 +11,7 @@ import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Icons from '../themes/Icons';
 import Colors from "../themes/Colors";
 import Metrics from "../themes/Metrics";
+import { addFinished } from "../redux/actions/UserActions";
 
 function AdditionGame(props){
 
@@ -77,8 +78,14 @@ function AdditionGame(props){
 
 
   function selectAnswer(answer){
-    //fix
-    if (true) {
+    let currentChallenge = addChallenge[challengeState.current];
+    let outcome = (
+      answer === (
+        currentChallenge.left + currentChallenge.right
+      )
+    );
+
+    if (outcome) {
       answers.current = answers.current + 1;
     }
 
@@ -101,13 +108,13 @@ function AdditionGame(props){
     setHeaderColor(styles.darkGreen);
     setHeaderText(finalTime + ' s');
     setTimerState(4);
-    // dispatch(squareFinished(answers.current, finalTime));
+    dispatch(addFinished(answers.current, finalTime));
   }
 
   function generateLine(left, right, pairIndex) {
       return (
         <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={250}>
-          <View style={[styles.buttonMargin]}>
+          <View style={[styles.buttonMargin, styles.addQuestionHeight]}>
             <Text style={[styles.headerTitleFont, styles.darkText, styles.centeredText]}>
               {left + ' + ' + right + ' = '}
             </Text>
@@ -134,19 +141,21 @@ function AdditionGame(props){
           origin={scrollOrigin}
           destination={scrollDestination.current}
           duration={250}
+          style={{overflow: 'hidden'}}
         >
-          <View style={[styles.gameView]} />
           {squareMemo}
-          <View style={[styles.gameView, styles.flexRow, styles.spaceEvenly, styles.centeredItems]}>
-            <MaterialIcon
-              name={Icons.squareIcons.check}
-              color={Colors.material.green800}
-              size={Metrics.icons.buttonIcon}
-            />
-            <Text style={[styles.headerTitleFont, styles.greyText]}>
-              Finish
-            </Text>
-          </View>
+          <Fade faded={challengeState.current < 20} duration={250}>
+            <View style={[styles.gameView, styles.flexRow, styles.spaceEvenly, styles.centeredItems]}>
+              <MaterialIcon
+                name={Icons.squareIcons.check}
+                color={Colors.material.green800}
+                size={Metrics.icons.buttonIcon}
+              />
+              <Text style={[styles.headerTitleFont, styles.greyText]}>
+                Finish
+              </Text>
+            </View>
+          </Fade>
         </Autoscroll>
       </View>
       <View style={[styles.timerView, styles.dark, styles.centeredJustify]}>

squarenotsquare/src/screens/styles/AppStyles.js

@@ -109,6 +109,10 @@ export const styles = StyleSheet.create({
     height: Metrics.buttons.answerButton.height
   },
 
+  addQuestionHeight: {
+    height: Metrics.screenSections.addQuestionHeight
+  },
+
   nineKeyButton: {
     borderRadius: Metrics.buttons.borderRadius,
     width: Metrics.buttons.nineKeyButton.width,

squarenotsquare/src/themes/Metrics.js

@@ -23,13 +23,6 @@ class AppMetrics {
       radius: 5
     }
   
-    this.screenSections = {
-      headerHeight: this.normalize(20),
-      sectionWidth: this.screenWidth,
-      footerHeight: this.normalize(10),
-      timerHeight: this.normalize(20)
-    }
-  
     this.icons = {
       splashIcon: this.normalize(100),
       buttonIcon: this.normalize(20)
@@ -66,12 +59,20 @@ class AppMetrics {
     }
 
     this.animated = {
-      squareInterval: (
+      gameScrollInterval: (
         this.buttons.answerButton.height +
         (this.margins.buttonMargin * 2)
       )
     }
 
+    this.screenSections = {
+      headerHeight: this.normalize(20),
+      sectionWidth: this.screenWidth,
+      footerHeight: this.normalize(10),
+      timerHeight: this.normalize(20),
+      addQuestionHeight: this.buttons.answerButton.height
+    }
+
     this.borders = {
       width: 1
     }