From f7b4224cb93b21d17e4dbd36dd20fd9ccd2bf083 Mon Sep 17 00:00:00 2001 From: Tim Glasgow Date: Tue, 9 Aug 2022 22:35:00 -0500 Subject: [PATCH] addition game component --- squarenotsquare/src/screens/AdditionGame.js | 162 ++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 squarenotsquare/src/screens/AdditionGame.js diff --git a/squarenotsquare/src/screens/AdditionGame.js b/squarenotsquare/src/screens/AdditionGame.js new file mode 100644 index 0000000..ee9f762 --- /dev/null +++ b/squarenotsquare/src/screens/AdditionGame.js @@ -0,0 +1,162 @@ +import React from "react"; +import { Text, TouchableOpacity, View, SafeAreaView } from "react-native"; +import { useState, useEffect, useRef, useMemo } from "react"; +import { useDispatch } from "react-redux"; +import {generateAdditionChallenge} from '../libs/Random'; +import { styles } from "./styles/AppStyles"; +import NineKey from "../components/NineKey"; +import Autoscroll from "../components/Autoscroll"; +import Fade from "../components/Fade"; +import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'; +import Icons from '../themes/Icons'; +import Colors from "../themes/Colors"; +import Metrics from "../themes/Metrics"; + +function AdditionGame(props){ + + const [addChallenge, setAddChallenge]= useState(() => {return generateAdditionChallenge()}); + const challengeState = useRef(-1); + const squareMemo = useMemo(renderPairs, [challengeState.current]); + const [timerState, setTimerState] = useState(0); + const localTimer = useRef(null); + const startTime = useRef(0); + const answers = 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); + const dispatch = useDispatch(); + + useEffect(() => { + let headerTimeout = null; + + switch(timerState){ + case 0: + headerTimeout = setTimeout(() => { + setHeaderColor(styles.yellow); + setHeaderText('Set'); + setTimerState(1); + }, 1000); + break; + case 1: + headerTimeout = setTimeout(() => { + setHeaderColor(styles.red); + setHeaderTextColor(styles.lightText); + setHeaderText('Go!'); + challengeState.current = 0; + setTimerState(2); + }, 1000); + break; + case 2: + headerTimeout = setTimeout(() => { + setHeaderColor(styles.dark); + startTime.current = (Date.now()); + setHeaderText(0 + ' s'); + setTimerState(3); + }, 1000); + break; + case 3: + headerTimeout = setInterval(() => { + let elapsed = Math.round((Date.now() - startTime.current) / (1000)); + setHeaderText(elapsed + ' s'); + }, 1000); + break; + default: + break; + } + + localTimer.current = headerTimeout; + + return () => { + clearTimeout(localTimer.current); + clearInterval(localTimer.current); + } + }, [timerState]); + + + + function selectAnswer(answer){ + //fix + if (true) { + answers.current = answers.current + 1; + } + + let newOrigin = scrollDestination.current; + let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval; + + scrollDestination.current = newDestination; + challengeState.current = challengeState.current + 1; + setScrollOrigin(newOrigin); + + if (challengeState.current >= 20) { + completeChallenge(); + } + } + + function completeChallenge(){ + let unformatted = (Date.now() - startTime.current) / (1000); + let finalTime = Number.parseFloat(unformatted).toFixed(3); + clearInterval(localTimer.current); + setHeaderColor(styles.darkGreen); + setHeaderText(finalTime + ' s'); + setTimerState(4); + // dispatch(squareFinished(answers.current, finalTime)); + } + + function generateLine(left, right, pairIndex) { + return ( + + + + {left + ' + ' + right + ' = '} + + + + ); + } + + function renderPairs(){ + return addChallenge.map((pair, index) => { + return generateLine(pair.left, pair.right, index); + }); + } + + return ( + + + + {headerText} + + + + + + {squareMemo} + + + + Finish + + + + + + + {answers.current + ' / ' + addChallenge.length} + + + + + ); +} + +export default AdditionGame; \ No newline at end of file