better quiz blur practice

package.json

@@ -17,7 +17,7 @@
     "markdown-to-jsx": "^7.1.3",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.4",
-    "react-countdown-circle-timer": "^2.5.4",
+    "react-countdown-circle-timer": "^3.0.9",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
     "react-media": "^1.10.0",

src/games/GameCore.tsx

@@ -20,14 +20,13 @@ import {
 } from "@lingdocs/pashto-inflector";
 const errorVibration = 200;
 
-function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, id, onStartStop }:{
+function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, id }:{
     id: string,
     studyLink: string,
     Instructions: (props: { opts?: Types.TextOptions }) => JSX.Element,
     questions: () => QuestionGenerator<T>,
     Display: (props: QuestionDisplayProps<T>) => JSX.Element,
     timeLimit: number;
-    onStartStop: (a: "start" | "stop") => void,
 }) {
     // TODO: report pass with id to user info
     const rewardRef = useRef<RewardElement | null>(null);
@@ -68,7 +67,6 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         }).catch(console.error);
     }
     function handleFinish() {
-        onStartStop("stop");
         setFinish("pass");
         rewardRef.current?.rewardMe();
         if (!user) return;
@@ -80,12 +78,10 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         handleResult(result);
     }
     function handleQuit() {
-        onStartStop("stop");
         setFinish(undefined);
         setCurrent(undefined);
     }
     function handleRestart() {
-        onStartStop("start");
         const newQuestionBox = questions();
         const { value } = newQuestionBox.next();
         // just for type safety -- the generator will have at least one question
@@ -96,7 +92,6 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         setTimerKey(prev => prev + 1);
     }
     function handleTimeOut() {
-        onStartStop("stop");
         setFinish("time out");
         navigator.vibrate(errorVibration);
     }
@@ -113,8 +108,8 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         : typeof finish === "object"
         ? "danger"
         : "primary";
-    return <div>
+    return <>
-            <div className="text-center" style={{ minHeight: "200px" }}>
+        <div className="text-center" style={{ minHeight: "200px", zIndex: 10, position: "relative" }}>
             <div className="progress" style={{ height: "5px" }}>
                 <div className={`progress-bar bg-${progressColor}`} role="progressbar" style={{ width: getProgressWidth() }} />
             </div>
@@ -123,10 +118,11 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
                     key={timerKey}
                     isPlaying={!!current && !finish}
                     size={30}
-                    strokeWidth={3}
+                    colors={["#555555", "#F7B801", "#A30000"]}
+                    colorsTime={[timeLimit, timeLimit*0.33, 0]}
+                    strokeWidth={4}
                     strokeLinecap="square"
                     duration={timeLimit}
-                    colors="#555555"
                     onComplete={handleTimeOut}
                 />
                 <button onClick={handleQuit} className="btn btn-outline-secondary btn-sm mr-2">Quit</button>
@@ -160,13 +156,11 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
                             <div>The correct answer was:</div>
                             {finish?.answer}
                         </div>}
-                        <div>
+                        <div className="mt-3">
-                            <button className="btn btn-secondary mt-3" onClick={handleRestart}>Try Again</button>
+                            <button className="btn btn-success mr-2" onClick={handleRestart}>Try Again</button>
+                            <button className="btn btn-danger ml-2" onClick={handleQuit}>Quit</button>
                         </div>
-                        <div>
+                        <div onClick={handleQuit} className="my-3">
-                            <button className="btn btn-secondary mt-3" onClick={handleQuit}>Quit</button>
-                        </div>
-                        <div onClick={() => onStartStop("stop")} className="mt-3">
                             <Link to={studyLink}>
                                 <button className="btn btn-outline-secondary"><span role="img" aria-label="">📚</span> Study more</button>
                             </Link>
@@ -175,7 +169,17 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
                 </div>
             </Reward>
         </div>
-    </div>;
+        {(current && finish === undefined) && <div style={{
+            position: "absolute",
+            backgroundColor: "rgba(255, 255, 255, 0.3)",
+            backdropFilter: "blur(10px)",
+            top: "0px",
+            left: "0px",
+            width: "100%",
+            height: "100%",
+            zIndex: 6,
+        }}></div>}
+    </>;
 }
 
 function failMessage(progress: Progress | undefined, finish: "time out" | { msg: "fail", answer: JSX.Element }): string {

src/games/GameDisplay.tsx

@@ -1,33 +1,12 @@
 import { useUser } from "../user-context";
-import { useState } from "react";
 
 function GameDisplay({ record: { title, Game, id } }: { record: GameRecord }) {
     const { user } = useUser();
-    const [running, setRunning] = useState<boolean>(false);
     const completed = user?.tests.some((t) => (
         // TODO: Or if it's in the locally stored (unposted test results)
         (t.done === true) && (t.id === id)
     ));
-    function onStartStop(a: "start" | "stop") {
+    return <div>
-        if (a === "start" && !running) {
-            setRunning(true);
-        }
-        if (a === "stop") {
-            setRunning(false);
-        }
-    }
-    return <>
-        {running && <div style={{
-            position: "absolute",
-            backgroundColor: "rgba(255, 255, 255, 0.3)",
-            backdropFilter: "blur(7px)",
-            top: "0px",
-            left: "0px",
-            width: "100%",
-            height: "100%",
-            zIndex: 2,
-        }}></div>}
-        <div style={{ position: "relative", zIndex: 9999 }}>
         <div className="d-flex flex-row justify-content-between align-items-center">
             <div>
                 <h4 className="my-4"><span role="img" aria-label="">🎮</span> {title}</h4>
@@ -36,9 +15,8 @@ function GameDisplay({ record: { title, Game, id } }: { record: GameRecord }) {
                 <h4>{completed ? "✅" : ""}</h4>
             </div>
         </div>
-            {Game(onStartStop)}
+        <Game />
-        </div>
+    </div>;
-    </>
 }
 
 export default GameDisplay;

src/games/GamesBrowser.tsx

@@ -22,10 +22,10 @@ function GamesBrowser() {
                     return <div key={id}>
                         <div className="d-flex flex-row justify-content-between align-items-center">
                             <div>
-                                <h5 className="my-4 clickable" onClick={() => handleTitleClick(id)}>
+                                <h4 className="my-4 clickable" onClick={() => handleTitleClick(id)}>
                                     <i className={`fas fa-caret-${open ? "down" : "right"}`}></i> {title}
                                     {` `}
-                                </h5>
+                                </h4>
                             </div>
                             <div>
                                 <h4>
@@ -37,7 +37,7 @@ function GamesBrowser() {
                             </div>
                         </div>
                         <SmoothCollapse expanded={open}>
-                            {Game(() => null)}
+                            <Game />
                         </SmoothCollapse>
                     </div>
                 })}

src/games/games.tsx

@@ -6,7 +6,7 @@ function makeGameRecord(
     title: string,
     id: string,
     studyLink: string,
-    game: (id: string, link: string) => ((s: (a: "start" | "stop") => void) => JSX.Element),
+    game: (id: string, link: string) => () => JSX.Element,
 ): GameRecord {
     return {
         title,
@@ -20,75 +20,75 @@ export const nounGenderGame1 = makeGameRecord(
     "Identify Noun Genders - Level 1",
     "gender-nouns-1",
     "/nouns/nouns-gender#gender-by-ending",
-    (id, link) => (s: (a: "start" | "stop") => void) => <GenderGame id={id} level={1} link={link} onStartStop={s} />,
+    (id, link) => () => <GenderGame id={id} level={1} link={link} />,
 );
 export const nounGenderGame2 = makeGameRecord(
     "Identify Noun Genders - Level 2",
     "gender-nouns-2",
     "/nouns/nouns-gender#exceptions",
-    (id, link) => (s: (a: "start" | "stop") => void) => <GenderGame id={id} level={2} link={link} onStartStop={s} />,
+    (id, link) => () => <GenderGame id={id} level={2} link={link} />,
 );
 export const unisexNounGame = makeGameRecord(
     "Changing genders on unisex nouns",
     "unisex-nouns-1",
     "/nouns/nouns-unisex/",
-    (id, link) => (s: (a: "start" | "stop") => void) => <UnisexNounGame id={id} link={link} onStartStop={s} />,
+    (id, link) => () => <UnisexNounGame id={id} link={link} />,
 );
 
 export const equativeGamePresent = makeGameRecord(
     "Write the present equative",
     "equative-present",
     "/equatives/present-equative/",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="present" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="present" />,
 );
 
 export const equativeGameHabitual = makeGameRecord(
     "Write the habitual  equative",
     "equative-habitual",
     "/equatives/habitual-equative/",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="habitual" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="habitual" />,
 );
 
 export const equativeGameSubjunctive = makeGameRecord(
     "Write the subjunctive equative",
     "equative-subjunctive",
     "/equatives/other-equatives/#subjunctive-equative",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="subjunctive" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="subjunctive" />,
 );
 
 export const equativeGameFuture = makeGameRecord(
     "Write the future equative",
     "equative-future",
     "/equatives/other-equatives/#future-equative",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="future" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="future" />,
 );
 
 export const equativeGamePast = makeGameRecord(
     "Write the past equative",
     "equative-past",
     "/equatives/other-equatives/#past-equative",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="past" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="past" />,
 );
 
 export const equativeGameWouldBe = makeGameRecord(
     'Write the "would be" equative',
     "equative-would-be",
     "/equatives/other-equatives/#would-be-equative",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="wouldBe" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="wouldBe" />,
 );
 
 export const equativeGamePastSubjunctive = makeGameRecord(
     'Write the past subjunctive equative',
     "equative-past-subjunctive",
     "/equatives/other-equatives/#past-subjunctive",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="pastSubjunctive" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="pastSubjunctive" />,
 );
 
 export const equativeGameAll = makeGameRecord(
     'Write the equative (summary)',
     "equative-past-summary",
     "/equatives/other-equatives",
-    (id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="all" onStartStop={s} />,
+    (id, link) => () => <EquativeGame id={id} link={link} level="all" />,
 );
 
 const games: { chapter: string, items: GameRecord[] }[] = [

src/games/sub-cores/EquativeGame.tsx

@@ -67,7 +67,7 @@ const pronounTypes = [
     [T.Person.ThirdPlurMale, T.Person.ThirdPlurFemale],
 ];
 
-export default function EquativeGame({ id, link, level, onStartStop }: { id: string, link: string, level: T.EquativeTense | "all", onStartStop: (a: "start" | "stop") => void }) {
+export default function EquativeGame({ id, link, level }: { id: string, link: string, level: T.EquativeTense | "all" }) {
     function* questions (): Generator<Current<Question>> {
         let pool = [...pronounTypes];
         function makeRandPronoun(): T.PronounSelection {
@@ -199,7 +199,6 @@ export default function EquativeGame({ id, link, level, onStartStop }: { id: str
     }
 
     return <GameCore
-        onStartStop={onStartStop}
         studyLink={link}
         questions={questions}
         id={id}

src/games/sub-cores/GenderGame.tsx

@@ -86,7 +86,7 @@ const exceptions: Record<string, CategorySet> = {
 
 const amount = 35;
 
-export default function GenderGame({level, id, link, onStartStop }: { level: 1 | 2, id: string, link: string, onStartStop: (a: "start" | "stop") => void }) {
+export default function GenderGame({level, id, link }: { level: 1 | 2, id: string, link: string }) {
     function* questions () {
         const wordPool = {...types};
         const exceptionsPool = {...exceptions};
@@ -110,10 +110,15 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 |
     }
     
     function Display({ question, callback }: QuestionDisplayProps<T.DictionaryEntry>) {
-        function check(gender: "m" | "f") {
+        function check(gender: T.Gender) {
-            const correct = !nounNotIn(gender === "m" ? mascNouns : femNouns)(question);
+            const nounGender: T.Gender = nounNotIn(mascNouns)(question) ? "fem" : "masc";
+            const correct = gender === nounGender;
             callback(!correct
-                ? <div>ANSWER HERE</div>
+                ? <div className="my-4 text-center">
+                    <button style={{ background: genderColors[nounGender === "masc" ? "m" : "f"], color: "black" }} className="btn btn-lg" disabled>
+                       {nounGender === "masc" ? "Masculine" : "Feminine"}
+                    </button>
+                </div>
                 : true);
         }
         return <div>
@@ -127,8 +132,8 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 |
                 ]}</Examples>
             </div>
             <div className="mt-4">
-                <button style={{ background: genderColors.f, color: "black" }} className="btn btn-lg mr-3" onClick={() => check("f")}>Feminine</button>
+                <button style={{ background: genderColors.f, color: "black" }} className="btn btn-lg mr-3" onClick={() => check("fem")}>Feminine</button>
-                <button style={{ background: genderColors.m, color: "black" }} className="btn btn-lg ml-3" onClick={() => check("m")}>Masculine</button>
+                <button style={{ background: genderColors.m, color: "black" }} className="btn btn-lg ml-3" onClick={() => check("masc")}>Masculine</button>
             </div>
         </div>
     }
@@ -141,7 +146,6 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 |
     }
 
     return <GameCore
-        onStartStop={onStartStop}
         studyLink={link}
         questions={questions}
         id={id}

src/games/sub-cores/UnisexNounGame.tsx

@@ -28,7 +28,7 @@ const amount = 20;
 
 type Question = { entry: T.DictionaryEntry, gender: T.Gender };
 
-export default function UnisexNounGame({ id, link, onStartStop }: { id: string, link: string, onStartStop: (a: "start" | "stop") => void }) {
+export default function UnisexNounGame({ id, link }: { id: string, link: string }) {
     function* questions (): Generator<Current<Question>> {
         let pool = { ...types };
         for (let i = 0; i < amount; i++) {
@@ -78,14 +78,20 @@ export default function UnisexNounGame({ id, link, onStartStop }: { id: string,
             e.preventDefault();
             const given = standardizePashto(answer.trim());
             // @ts-ignore
-            const correct = inflections[flipGender(question.gender)][0].some((ps: T.PsString) => (
+            const correctAnswer = inflections[flipGender(question.gender)][0];
+            const correct = correctAnswer.some((ps: T.PsString) => (
                 (given === ps.p) || compareF(given, ps.f)
             ));
             if (correct) {
                 setAnswer("");
             }
             callback(!correct
-                ? <div>CORRECT ANSWER HERE</div>
+                ? <div>
+                    {correctAnswer.length > 1 && <div className="text-muted">One of the following:</div>}
+                    {correctAnswer.map((ps) => (
+                        <Examples opts={opts}>{ps}</Examples>
+                    ))}
+                </div>
                 : true);
         }
         
@@ -127,7 +133,6 @@ export default function UnisexNounGame({ id, link, onStartStop }: { id: string,
     }
 
     return <GameCore
-        onStartStop={onStartStop}
         studyLink={link}
         questions={questions}
         id={id}

src/types/game-types.d.ts

@@ -19,5 +19,5 @@ type GameRecord = {
     title: string,
     id: string,
     studyLink: string,
-    Game: (onStartStop: (a: "start" | "stop") => void) => JSX.Element,
+    Game: () => JSX.Element,
 };

yarn.lock

@@ -10252,12 +10252,10 @@ react-bootstrap@^1.6.4:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
-react-countdown-circle-timer@^2.5.4:
+react-countdown-circle-timer@^3.0.9:
-  version "2.5.4"
+  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/react-countdown-circle-timer/-/react-countdown-circle-timer-2.5.4.tgz#95cb58e5e734deffd9087a13279d8924463cc239"
+  resolved "https://registry.yarnpkg.com/react-countdown-circle-timer/-/react-countdown-circle-timer-3.0.9.tgz#9bdf127c63f9c67dc12bc83cb8029765512b1f5f"
-  integrity sha512-nKGlpS6UzfWI+k66ZVYAjcZZbZeCJuB1Xkcdci+6De1KghHfs5IwjMCdAAcZP1n1m3+tyuhLF+GVB8FRmh27RQ==
+  integrity sha512-2rE2NklqgtArbvM9RVR3NctiKQ8+lY8PEjUZ2S1pKowD8CmaXUGqIaCbFBcygYH2aZQs9qPIQA49Z+9Jc2TOiQ==
-  dependencies:
-    use-elapsed-time "2.1.8"
 
 react-dev-utils@^11.0.3:
   version "11.0.4"
@@ -12759,11 +12757,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-elapsed-time@2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/use-elapsed-time/-/use-elapsed-time-2.1.8.tgz#3c830ae730e2bc204f2294b66be15580f0016ea5"
-  integrity sha512-lNLTDffKHdHWweQNvnch9tFI2eRP3tXccSLrwE7U6xrfyWFNEgNQZWWsGhQvtwKa0kJ6L+7E5wKbi3jg86opjg==
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"