From 86b5233c8f144719245ae5f654ae09bd1561d93e Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Tue, 9 Aug 2022 23:13:21 -0500
Subject: [PATCH] Addition screen implementation

---
 .../src/redux/actions/UserActions.js          | 19 ++++++++-
 .../src/redux/reducers/UserReducer.js         |  4 +-
 squarenotsquare/src/screens/AdditionGame.js   | 39 ++++++++++++-------
 .../src/screens/styles/AppStyles.js           |  4 ++
 squarenotsquare/src/themes/Metrics.js         | 17 ++++----
 5 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/squarenotsquare/src/redux/actions/UserActions.js b/squarenotsquare/src/redux/actions/UserActions.js
index cde80a9..8533f8c 100644
--- a/squarenotsquare/src/redux/actions/UserActions.js
+++ b/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";
 
@@ -34,4 +34,21 @@ export function squareFinished(answers, finalTime) {
       user: newUser
     });
   }
+}
+
+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
+    });
+  }
 }
\ No newline at end of file
diff --git a/squarenotsquare/src/redux/reducers/UserReducer.js b/squarenotsquare/src/redux/reducers/UserReducer.js
index ae2d033..2c79b00 100644
--- a/squarenotsquare/src/redux/reducers/UserReducer.js
+++ b/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;
diff --git a/squarenotsquare/src/screens/AdditionGame.js b/squarenotsquare/src/screens/AdditionGame.js
index ee9f762..3750184 100644
--- a/squarenotsquare/src/screens/AdditionGame.js
+++ b/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]}>
diff --git a/squarenotsquare/src/screens/styles/AppStyles.js b/squarenotsquare/src/screens/styles/AppStyles.js
index 6094229..d2bf232 100644
--- a/squarenotsquare/src/screens/styles/AppStyles.js
+++ b/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,
diff --git a/squarenotsquare/src/themes/Metrics.js b/squarenotsquare/src/themes/Metrics.js
index 73830ff..3da47d8 100644
--- a/squarenotsquare/src/themes/Metrics.js
+++ b/squarenotsquare/src/themes/Metrics.js
@@ -22,13 +22,6 @@ class AppMetrics {
       opacity: 0.5,
       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),
@@ -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
     }