diff --git a/src/content/games.mdx b/src/content/games.mdx index 50a813c..b892f81 100644 --- a/src/content/games.mdx +++ b/src/content/games.mdx @@ -4,9 +4,11 @@ title: Games 🎮 import Link from "../components/Link"; -There are little games/quizzes scattered throughout this book. Here you can see them all listed below. If you are logged in, when you successfully complete a game you will see a ✅ beside it. To study for a game, click on the 📚 on the right. Try to master them all! 🤓🏆 +There are little games/quizzes scattered throughout this book. Here you can see them all listed below. If you are logged in, you can keep track of your progress in the games. -This is just a beginning and there are more games being added each week. +When you pass a test you will see ✅ beside it and this counts towards your mastery for each section Try to master them all! 🤓🏆 + +There are more games being added each week... import GamesBrowser from "../games/GamesBrowser"; diff --git a/src/games/GameCore.tsx b/src/games/GameCore.tsx index 0e0828e..82c5ce3 100644 --- a/src/games/GameCore.tsx +++ b/src/games/GameCore.tsx @@ -38,6 +38,7 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i const rewardRef = useRef(null); const parent = useRef(null); const { user, pullUser, setUser } = useUser(); + const [mode, setMode] = useState<"practice" | "test">("test"); const [finish, setFinish] = useState(undefined); const [strikes, setStrikes] = useState(0); const [justStruck, setJustStruck] = useState(false); @@ -119,8 +120,9 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i setFinish(undefined); setCurrent(undefined); } - function handleRestart() { - logGameEvent("started game"); + function handleRestart(mode: "test" | "practice") { + logGameEvent(`started game ${mode}`); + setMode(mode); const newQuestionBox = questions(); const { value } = newQuestionBox.next(); // just for type safety -- the generator will have at least one question @@ -160,13 +162,13 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i const gameRunning = current && finish === undefined; return <>
-
+ {mode === "test" &&
-
+
} {current &&
- ({ questions, Display, timeLimit, Instructions, studyLink, i strokeLinecap="square" duration={timeLimit} onComplete={handleTimeOut} - /> + />}
} -
+ {mode === "test" &&
{justStruck &&
{getStrikeMessage()}
} -
+
}
{finish === undefined && @@ -198,7 +200,11 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i
- + + + + +
) } @@ -206,10 +212,10 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i

🎉 Finished!

- +
} {(typeof finish === "object" || finish === "time out") &&
-

{failMessage(current?.progress, finish)}

+ {mode === "test" &&

{failMessage(current?.progress, finish)}

} {typeof finish === "object" &&
The correct answer was:
@@ -217,8 +223,9 @@ function GameCore({ questions, Display, timeLimit, Instructions, studyLink, i
}
- - + + +
diff --git a/src/games/GamesBrowser.tsx b/src/games/GamesBrowser.tsx index 290df4e..e19aeb3 100644 --- a/src/games/GamesBrowser.tsx +++ b/src/games/GamesBrowser.tsx @@ -60,12 +60,7 @@ function ChapterDisplay({ chapter, user, handleClick, expanded }: {
-

- {done ? "✅" - : - {"📚"} - } -

+ {done &&

}