Addition game navigation and redux action

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}

squarenotsquare/src/libs/Random.js

@@ -38,3 +38,20 @@ 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;
+}

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}

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
+      })
+    }
   }
 }
 

squarenotsquare/src/redux/types/UserTypes.js

@@ -1,2 +1,4 @@
 export const SQUARE_START = 'square-start';
 export const SQUARE_FINISHED = 'square-finished';
+export const ADDITION_START = 'addition-start';
+export const ADDITION_FINISHED = 'addition-finished';

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)}

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>