diff --git a/src/games/GameCore.tsx b/src/games/GameCore.tsx index 05256c5..ce63a54 100644 --- a/src/games/GameCore.tsx +++ b/src/games/GameCore.tsx @@ -1,4 +1,4 @@ -import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; import { CountdownCircleTimer } from "react-countdown-circle-timer"; import Reward, { RewardElement } from 'react-rewards'; import Link from "../components/Link"; @@ -16,10 +16,12 @@ import { getTimestamp, } from "@lingdocs/lingdocs-main"; import { + randFromArray, Types, } from "@lingdocs/pashto-inflector"; import ReactGA from "react-ga"; import { isProd } from "../lib/isProd"; +import autoAnimate from "@formkit/auto-animate"; const errorVibration = 200; const maxStrikes = 2; @@ -34,6 +36,7 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i }) { // TODO: report pass with id to user info const rewardRef = useRef(null); + const parent = useRef(null); const { user, pullUser, setUser } = useUser(); const [finish, setFinish] = useState(undefined); const [strikes, setStrikes] = useState(0); @@ -41,6 +44,9 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i const [current, setCurrent] = useState | undefined>(undefined); const [questionBox, setQuestionBox] = useState>(questions()); const [timerKey, setTimerKey] = useState(1); + useEffect(() => { + parent.current && autoAnimate(parent.current) + }, [parent]); function logGameEvent(action: string) { if (isProd && !(user?.admin)) { @@ -53,15 +59,17 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i } function handleCallback(correct: true | JSX.Element) { - if (correct === true) handleAdvance(); - else if (strikes < maxStrikes) { - navigator.vibrate(errorVibration); - setStrikes(s => s + 1); - setJustStruck(false); + if (correct === true) { + handleAdvance(); + return; + } + setStrikes(s => s + 1); + navigator.vibrate(errorVibration); + if (strikes < maxStrikes) { + setJustStruck(true); } else { logGameEvent("fail on game"); setFinish({ msg: "fail", answer: correct }); - navigator.vibrate(errorVibration); } } function handleAdvance() { @@ -111,6 +119,8 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i // just for type safety -- the generator will have at least one question if (!value) return; setQuestionBox(newQuestionBox); + setJustStruck(false); + setStrikes(0); setFinish(undefined); setCurrent(value); setTimerKey(prev => prev + 1); @@ -139,22 +149,28 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i
-
Strikes: {strikes}
- {current &&
- - + {current &&
+ +
+ + +
} -
OOPS, NOT QUITE - TRY AGAIN
+
+ {justStruck &&
+ {getStrikeMessage()} +
} +
{finish === undefined && @@ -212,6 +228,22 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i ; } +function StrikesDisplay({ strikes }: { strikes: number }) { + return
+ {[...Array(strikes)].map(_ => )} +
; +} + +function getStrikeMessage() { + return randFromArray([ + "Not quite! Try again.", + "No sorry, try again", + "Umm, no, try again", + "Try again", + "Oooooooo, sorry no...", + ]); +} + function failMessage(progress: Progress | undefined, finish: "time out" | { msg: "fail", answer: JSX.Element }): string { const pDone = progress ? getPercentageDone(progress) : 0; const { message, face } = pDone < 20 diff --git a/src/games/sub-cores/EquativeGame.tsx b/src/games/sub-cores/EquativeGame.tsx index c85f773..e9afd8d 100644 --- a/src/games/sub-cores/EquativeGame.tsx +++ b/src/games/sub-cores/EquativeGame.tsx @@ -168,8 +168,8 @@ const situations: Situation[] = [ }, ]; -const amount = 17; -const timeLimit = 90; +const amount = 15; +const timeLimit = 100; type Question = { EPS: T.EPSelectionComplete,