From efec9f91c7ae35f9a13931137a4e77117b4c6b04 Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Tue, 9 Aug 2022 18:49:39 -0500
Subject: [PATCH] Addition game navigation and redux action

---
 .../src/components/ScrollingPicker.js         |  8 ++++----
 squarenotsquare/src/libs/Random.js            | 17 +++++++++++++++++
 squarenotsquare/src/navigation/SquareStack.js |  6 ++++++
 .../src/redux/actions/UserActions.js          | 19 +++++++++++++------
 squarenotsquare/src/redux/types/UserTypes.js  |  4 +++-
 squarenotsquare/src/screens/Game.js           |  4 ++--
 squarenotsquare/src/screens/Home.js           | 12 ++++++++----
 7 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/squarenotsquare/src/components/ScrollingPicker.js b/squarenotsquare/src/components/ScrollingPicker.js
index 95e20eb..8122f33 100644
--- a/squarenotsquare/src/components/ScrollingPicker.js
+++ b/squarenotsquare/src/components/ScrollingPicker.js
@@ -15,9 +15,9 @@ function ScrollingPicker(props) {
 
   function onScroll(event){
     if (event.nativeEvent.contentOffset.x === 0) {
-      props.modeSetter(0);
+      props.modeSetter('square');
     } else if (event.nativeEvent.contentOffset.x === (Metrics.icons.buttonIcon * 2)) {
-      props.modeSetter(1);
+      props.modeSetter('addition');
     }
     Animated.event([
       {
@@ -39,7 +39,7 @@ function ScrollingPicker(props) {
       onScroll={onScroll}
       scrollEventThrottle={0}
     >
-      <Fade faded={props.mode !== 0} duration={250}>
+      <Fade faded={props.mode !== 'square'} duration={250}>
         <MaterialIcon
           name={Icons.squareIcons.square}
           color={Colors.material.dark}
@@ -47,7 +47,7 @@ function ScrollingPicker(props) {
           style={styles.modePickerMargin}
         />
       </Fade>
-      <Fade faded={props.mode !== 1} duration={250}>
+      <Fade faded={props.mode !== 'addition'} duration={250}>
         <MaterialIcon
           name={Icons.squareIcons.plus}
           color={Colors.material.dark}
diff --git a/squarenotsquare/src/libs/Random.js b/squarenotsquare/src/libs/Random.js
index 0123815..fc3717d 100644
--- a/squarenotsquare/src/libs/Random.js
+++ b/squarenotsquare/src/libs/Random.js
@@ -36,5 +36,22 @@ export function genSquareChallenge(){
     });
   }
 
+  return result;
+}
+
+export function generateAdditionChallenge(){
+  let result = [];
+  for (let i = 0; i < 20; ++i) {
+    let left = 0;
+    let right = 0;
+
+    do {
+      left = Math.round(Math.random() * 10);
+      right = Math.round(Math.random() * 10);
+    } while (left + right >= 10);
+
+    result.push({left: left, right: right});
+  }
+
   return result;
 }
\ No newline at end of file
diff --git a/squarenotsquare/src/navigation/SquareStack.js b/squarenotsquare/src/navigation/SquareStack.js
index 5eee0cb..379fa99 100644
--- a/squarenotsquare/src/navigation/SquareStack.js
+++ b/squarenotsquare/src/navigation/SquareStack.js
@@ -9,6 +9,7 @@ import HighScore from '../screens/HighScore';
 import Settings from '../screens/Settings';
 import Splash from '../screens/Splash';
 import Score from '../screens/Score';
+import AdditionGame from '../screens/AdditionGame';
 
 const SquareNav = createStackNavigator();
 
@@ -43,6 +44,11 @@ function SquareStack() {
           component={Game}
           options={noHeader}
         />
+        <SquareNav.Screen
+          name="AdditionGame"
+          component={AdditionGame}
+          options={noHeader}
+        />
         <SquareNav.Screen
           name="Score"
           component={Score}
diff --git a/squarenotsquare/src/redux/actions/UserActions.js b/squarenotsquare/src/redux/actions/UserActions.js
index 66d0c40..cde80a9 100644
--- a/squarenotsquare/src/redux/actions/UserActions.js
+++ b/squarenotsquare/src/redux/actions/UserActions.js
@@ -1,14 +1,21 @@
 import { squareNav } from "../../navigation/SquareNav";
-import { SQUARE_FINISHED, SQUARE_START } from "../types/UserTypes";
+import { ADDITION_START, SQUARE_FINISHED, SQUARE_START } from "../types/UserTypes";
 import { calculateSquareScore } from "../../libs/CalculateScore";
 import DbAPI from "../../realm/DbAPI";
 
-export function squareStartPressed() {
+export function squareStartPressed(mode) {
   return (dispatch) => {
-    squareNav('Game');
-    dispatch({
-      type: SQUARE_START
-    });
+    if (mode === 'square') {
+      squareNav('Game');
+      dispatch({
+        type: SQUARE_START
+      });
+    } else if (mode === 'addition') {
+      squareNav('AdditionGame');
+      dispatch({
+        type: ADDITION_START
+      })
+    }
   }
 }
 
diff --git a/squarenotsquare/src/redux/types/UserTypes.js b/squarenotsquare/src/redux/types/UserTypes.js
index 1f20595..bba52a3 100644
--- a/squarenotsquare/src/redux/types/UserTypes.js
+++ b/squarenotsquare/src/redux/types/UserTypes.js
@@ -1,2 +1,4 @@
 export const SQUARE_START = 'square-start';
-export const SQUARE_FINISHED = 'square-finished';
\ No newline at end of file
+export const SQUARE_FINISHED = 'square-finished';
+export const ADDITION_START = 'addition-start';
+export const ADDITION_FINISHED = 'addition-finished';
\ No newline at end of file
diff --git a/squarenotsquare/src/screens/Game.js b/squarenotsquare/src/screens/Game.js
index a310918..468766c 100644
--- a/squarenotsquare/src/screens/Game.js
+++ b/squarenotsquare/src/screens/Game.js
@@ -139,7 +139,7 @@ function Game(props){
   function generatePair(answer, shapeIndex, pairIndex) {
     if (answer === 0) {
       return (
-        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={500}>
+        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={250}>
           <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
             {generateSquare(pairIndex)}
             {generateShape(shapeIndex, pairIndex)}
@@ -148,7 +148,7 @@ function Game(props){
       );
     } else {
       return (
-        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={500}>
+        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={250}>
           <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
             {generateShape(shapeIndex, pairIndex)}
             {generateSquare(pairIndex)}
diff --git a/squarenotsquare/src/screens/Home.js b/squarenotsquare/src/screens/Home.js
index d9835e0..37c4a98 100644
--- a/squarenotsquare/src/screens/Home.js
+++ b/squarenotsquare/src/screens/Home.js
@@ -13,20 +13,24 @@ import ModePicker from '../components/ScrollingPicker';
 
 function Home(){
   const dispatch = useDispatch();
-  const [mode, setMode] = useState(0);
+  const [mode, setMode] = useState('square');
 
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', () => {return true});
   }, [])
 
   function onPressStart(){
-    dispatch(squareStartPressed());
+    dispatch(squareStartPressed(mode));
   }
 
   function onPressHighScores(){
     dispatch(goToScores());
   }
 
+  function setGameMode(newMode) {
+    setMode(newMode);
+  }
+
   const now = new Date(Date.now());
 
   return (
@@ -51,9 +55,9 @@ function Home(){
           </Text>
         </View>
         <View style={[styles.flex, styles.centeredSelf]}>
-          <ModePicker mode={mode} modeSetter={setMode}/>
+          <ModePicker mode={mode} modeSetter={setGameMode}/>
           <Text style={[styles.largeFont, styles.darkText, styles.centeredText]}>
-            {mode === 0 ? 'Squares' : 'Addition'}
+            {mode === 'square' ? 'Squares' : 'Addition'}
           </Text>
         </View>
       </View>