diff --git a/squarenotsquare/src/components/Autoscroll.js b/squarenotsquare/src/components/Autoscroll.js
new file mode 100644
index 0000000..7652d02
--- /dev/null
+++ b/squarenotsquare/src/components/Autoscroll.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Animated, Easing} from "react-native";
+import { useEffect, useRef } from "react";
+import Metrics from "../themes/Metrics";
+
+function Autoscroll(props){
+ const yPosition = useRef(new Animated.Value(props.origin));
+
+ useEffect(() => {
+ Animated.timing(yPosition.current, {
+ toValue: props.destination - Metrics.animated.gameScrollInterval,
+ duration: props.duration,
+ useNativeDriver: true
+ }).start();
+ }, [props.origin])
+
+
+ return (
+
+ {props.children}
+
+ )
+}
+
+export default Autoscroll;
\ No newline at end of file
diff --git a/squarenotsquare/src/screens/Game.js b/squarenotsquare/src/screens/Game.js
index 63f9426..ab7f9c2 100644
--- a/squarenotsquare/src/screens/Game.js
+++ b/squarenotsquare/src/screens/Game.js
@@ -5,6 +5,7 @@ import { useState, useEffect, useRef, useMemo } from "react";
import {genSquareChallenge} from '../libs/Random';
import {shapes} from '../libs/ShapeEnum';
import { styles } from "./styles/AppStyles";
+import Autoscroll from "../components/Autoscroll";
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import Icons from '../themes/Icons';
import Colors from "../themes/Colors";
@@ -17,6 +18,8 @@ function Game(props){
const [timerState, setTimerState] = useState(0);
const localTimer = useRef(null);
const startTime = useRef(0);
+ const [scrollOrigin, setScrollOrigin] = useState(0);
+ const scrollDestination = useRef(Metrics.animated.gameScrollInterval);
const [headerText, setHeaderText] = useState('Ready?');
const [headerColor, setHeaderColor] = useState(styles.green);
const [headerTextColor, setHeaderTextColor] = useState(styles.darkText);
@@ -66,9 +69,20 @@ function Game(props){
}
}, [timerState]);
+ function scroll(){
+ let newOrigin = scrollDestination.current;
+ let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval;
+
+ scrollDestination.current = newDestination;
+ setScrollOrigin(newOrigin);
+ }
+
function generateSquare(){
return (
-
+
+
-
-
- {squareMemo}
-
+
+
+
+ {squareMemo}
+
+
);
}
diff --git a/squarenotsquare/src/themes/Metrics.js b/squarenotsquare/src/themes/Metrics.js
index f12b1e1..a5dd8e8 100644
--- a/squarenotsquare/src/themes/Metrics.js
+++ b/squarenotsquare/src/themes/Metrics.js
@@ -61,7 +61,10 @@ class AppMetrics {
}
this.animated = {
- gameScrollInterval: (this.answerButtonHeight + (this.buttonMargin * 2))
+ gameScrollInterval: (
+ this.buttons.answerButton.height +
+ (this.margins.buttonMargin * 2)
+ )
}
this.borders = {