From 9aa84366e2bf40b0dfd575f10f01605ad9497a52 Mon Sep 17 00:00:00 2001 From: lingdocs <71590811+lingdocs@users.noreply.github.com> Date: Mon, 9 May 2022 17:02:24 -0500 Subject: [PATCH] better quiz blur practice --- package.json | 2 +- src/games/GameCore.tsx | 38 +++++++++++++----------- src/games/GameDisplay.tsx | 40 ++++++-------------------- src/games/GamesBrowser.tsx | 6 ++-- src/games/games.tsx | 24 ++++++++-------- src/games/sub-cores/EquativeGame.tsx | 3 +- src/games/sub-cores/GenderGame.tsx | 18 +++++++----- src/games/sub-cores/UnisexNounGame.tsx | 13 ++++++--- src/types/game-types.d.ts | 2 +- yarn.lock | 15 +++------- 10 files changed, 72 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index 32a149b..44b856c 100644 --- a/package.json +++ b/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", diff --git a/src/games/GameCore.tsx b/src/games/GameCore.tsx index 4a859c0..8c8762f 100644 --- a/src/games/GameCore.tsx +++ b/src/games/GameCore.tsx @@ -20,14 +20,13 @@ import { } from "@lingdocs/pashto-inflector"; const errorVibration = 200; -function GameCore({ questions, Display, timeLimit, Instructions, studyLink, id, onStartStop }:{ +function GameCore({ questions, Display, timeLimit, Instructions, studyLink, id }:{ id: string, studyLink: string, Instructions: (props: { opts?: Types.TextOptions }) => JSX.Element, questions: () => QuestionGenerator, Display: (props: QuestionDisplayProps) => JSX.Element, timeLimit: number; - onStartStop: (a: "start" | "stop") => void, }) { // TODO: report pass with id to user info const rewardRef = useRef(null); @@ -68,7 +67,6 @@ function GameCore({ 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({ 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({ 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({ questions, Display, timeLimit, Instructions, studyLink, i : typeof finish === "object" ? "danger" : "primary"; - return
-
+ return <> +
@@ -123,10 +118,11 @@ function GameCore({ 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} /> @@ -160,13 +156,11 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i
The correct answer was:
{finish?.answer}
} -
- +
+ +
-
- -
-
onStartStop("stop")} className="mt-3"> +
@@ -175,7 +169,17 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i
-
; + {(current && finish === undefined) &&
} + ; } function failMessage(progress: Progress | undefined, finish: "time out" | { msg: "fail", answer: JSX.Element }): string { diff --git a/src/games/GameDisplay.tsx b/src/games/GameDisplay.tsx index 898c717..eeac3c3 100644 --- a/src/games/GameDisplay.tsx +++ b/src/games/GameDisplay.tsx @@ -1,44 +1,22 @@ import { useUser } from "../user-context"; -import { useState } from "react"; function GameDisplay({ record: { title, Game, id } }: { record: GameRecord }) { const { user } = useUser(); - const [running, setRunning] = useState(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") { - if (a === "start" && !running) { - setRunning(true); - } - if (a === "stop") { - setRunning(false); - } - } - return <> - {running &&
} -
-
-
-

🎮 {title}

-
-
-

{completed ? "✅" : ""}

-
+ return
+
+
+

🎮 {title}

+
+
+

{completed ? "✅" : ""}

- {Game(onStartStop)}
- + +
; } export default GameDisplay; \ No newline at end of file diff --git a/src/games/GamesBrowser.tsx b/src/games/GamesBrowser.tsx index 14708fd..1ba5e48 100644 --- a/src/games/GamesBrowser.tsx +++ b/src/games/GamesBrowser.tsx @@ -22,10 +22,10 @@ function GamesBrowser() { return
-
handleTitleClick(id)}> +

handleTitleClick(id)}> {title} {` `} -

+

@@ -37,7 +37,7 @@ function GamesBrowser() {

- {Game(() => null)} +
})} diff --git a/src/games/games.tsx b/src/games/games.tsx index 872ca34..f48aeec 100644 --- a/src/games/games.tsx +++ b/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) => , + (id, link) => () => , ); export const nounGenderGame2 = makeGameRecord( "Identify Noun Genders - Level 2", "gender-nouns-2", "/nouns/nouns-gender#exceptions", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); export const unisexNounGame = makeGameRecord( "Changing genders on unisex nouns", "unisex-nouns-1", "/nouns/nouns-unisex/", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); export const equativeGamePresent = makeGameRecord( "Write the present equative", "equative-present", "/equatives/present-equative/", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); export const equativeGameHabitual = makeGameRecord( "Write the habitual equative", "equative-habitual", "/equatives/habitual-equative/", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); export const equativeGameSubjunctive = makeGameRecord( "Write the subjunctive equative", "equative-subjunctive", "/equatives/other-equatives/#subjunctive-equative", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); export const equativeGameFuture = makeGameRecord( "Write the future equative", "equative-future", "/equatives/other-equatives/#future-equative", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); export const equativeGamePast = makeGameRecord( "Write the past equative", "equative-past", "/equatives/other-equatives/#past-equative", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); 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) => , + (id, link) => () => , ); export const equativeGamePastSubjunctive = makeGameRecord( 'Write the past subjunctive equative', "equative-past-subjunctive", "/equatives/other-equatives/#past-subjunctive", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); export const equativeGameAll = makeGameRecord( 'Write the equative (summary)', "equative-past-summary", "/equatives/other-equatives", - (id, link) => (s: (a: "start" | "stop") => void) => , + (id, link) => () => , ); const games: { chapter: string, items: GameRecord[] }[] = [ diff --git a/src/games/sub-cores/EquativeGame.tsx b/src/games/sub-cores/EquativeGame.tsx index 9f2ecee..b818313 100644 --- a/src/games/sub-cores/EquativeGame.tsx +++ b/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> { let pool = [...pronounTypes]; function makeRandPronoun(): T.PronounSelection { @@ -199,7 +199,6 @@ export default function EquativeGame({ id, link, level, onStartStop }: { id: str } return = { 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) { - function check(gender: "m" | "f") { - const correct = !nounNotIn(gender === "m" ? mascNouns : femNouns)(question); + function check(gender: T.Gender) { + const nounGender: T.Gender = nounNotIn(mascNouns)(question) ? "fem" : "masc"; + const correct = gender === nounGender; callback(!correct - ?
ANSWER HERE
+ ?
+ +
: true); } return
@@ -127,8 +132,8 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 | ]}
- - + +
} @@ -141,7 +146,6 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 | } return void }) { +export default function UnisexNounGame({ id, link }: { id: string, link: string }) { function* questions (): Generator> { 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 - ?
CORRECT ANSWER HERE
+ ?
+ {correctAnswer.length > 1 &&
One of the following:
} + {correctAnswer.map((ps) => ( + {ps} + ))} +
: true); } @@ -127,7 +133,6 @@ export default function UnisexNounGame({ id, link, onStartStop }: { id: string, } return void) => JSX.Element, + Game: () => JSX.Element, }; diff --git a/yarn.lock b/yarn.lock index d5dc09b..25f2c14 100644 --- a/yarn.lock +++ b/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: - version "2.5.4" - resolved "https://registry.yarnpkg.com/react-countdown-circle-timer/-/react-countdown-circle-timer-2.5.4.tgz#95cb58e5e734deffd9087a13279d8924463cc239" - integrity sha512-nKGlpS6UzfWI+k66ZVYAjcZZbZeCJuB1Xkcdci+6De1KghHfs5IwjMCdAAcZP1n1m3+tyuhLF+GVB8FRmh27RQ== - dependencies: - use-elapsed-time "2.1.8" +react-countdown-circle-timer@^3.0.9: + version "3.0.9" + resolved "https://registry.yarnpkg.com/react-countdown-circle-timer/-/react-countdown-circle-timer-3.0.9.tgz#9bdf127c63f9c67dc12bc83cb8029765512b1f5f" + integrity sha512-2rE2NklqgtArbvM9RVR3NctiKQ8+lY8PEjUZ2S1pKowD8CmaXUGqIaCbFBcygYH2aZQs9qPIQA49Z+9Jc2TOiQ== 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"