diff --git a/src/content/games.mdx b/src/content/games.mdx new file mode 100644 index 0000000..c6c81d1 --- /dev/null +++ b/src/content/games.mdx @@ -0,0 +1,13 @@ +--- +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. Try to master them all! 🤓🏆 + +There currently just a few games available. Keep checking back as over time there will be lots of games covering all the aspects of grammar. + +import GamesBrowser from "../games/GamesBrowser"; + + \ No newline at end of file diff --git a/src/content/index.ts b/src/content/index.ts index 41a13c4..a8ddb2c 100644 --- a/src/content/index.ts +++ b/src/content/index.ts @@ -69,6 +69,9 @@ import * as theFiveYeys from "!babel-loader!mdx-loader!./writing/the-five-yeys.m // @ts-ignore import * as typingIssues from "!babel-loader!mdx-loader!./writing/typing-issues.mdx"; +// @ts-ignore +import * as games from "!babel-loader!mdx-loader!./games.mdx"; + const contentTree = [ { import: intro, @@ -220,6 +223,10 @@ const contentTree = [ }, ], }, + { + import: games, + slug: "games", + }, ]; export const content = contentTree.map((item) => { diff --git a/src/games/GamesBrowser.tsx b/src/games/GamesBrowser.tsx new file mode 100644 index 0000000..dc651ff --- /dev/null +++ b/src/games/GamesBrowser.tsx @@ -0,0 +1,40 @@ +import React, { useState } from "react"; +import games from "./games"; +import { useUser } from "../user-context"; +import GameDisplay from "./GameDisplay"; + +function GamesBrowser() { + const { user } = useUser(); + const [opened, setOpened] = useState(undefined); + function handleTitleClick(id: string) { + setOpened(prev => ( + prev === id ? undefined : id + )); + } + return
+ {games.map((chapter) => ( + <> +

{chapter.chapter}

+ {chapter.items.map((record) => { + const done = user && user.tests.some(t => t.id === record.id); + const open = opened === record.id; + return
+
+
+

handleTitleClick(record.id)}> + {open ? "🞃" : "🞂"} {record.title} +

+
+
+

{done ? "✅" : ""}

+
+
+ {open && } +
+ })} + + ))} +
+} + +export default GamesBrowser; \ No newline at end of file diff --git a/src/games/games.tsx b/src/games/games.tsx index 6c094c0..8e6aeaa 100644 --- a/src/games/games.tsx +++ b/src/games/games.tsx @@ -26,10 +26,15 @@ export const unisexNounGame = makeGameRecord( (id) => () => , ); -const games: GameRecord[] = [ - nounGenderGame1, - nounGenderGame2, - unisexNounGame, +const games: { chapter: string, items: GameRecord[] }[] = [ + { + chapter: "Nouns", + items: [ + nounGenderGame1, + nounGenderGame2, + unisexNounGame, + ], + }, ]; export default games; diff --git a/src/games/sub-cores/GenderGame.tsx b/src/games/sub-cores/GenderGame.tsx index fe8ff4d..90553d0 100644 --- a/src/games/sub-cores/GenderGame.tsx +++ b/src/games/sub-cores/GenderGame.tsx @@ -105,7 +105,7 @@ export default function({level, id}: { level: 1 | 2, id: string}) { questions={questions} id={id} Display={Display} - timeLimit={level === 1 ? 50 : 70} + timeLimit={level === 1 ? 55 : 70} Instructions={Instructions} /> }; diff --git a/src/games/sub-cores/UnisexNounGame.tsx b/src/games/sub-cores/UnisexNounGame.tsx index 2097771..f7affbd 100644 --- a/src/games/sub-cores/UnisexNounGame.tsx +++ b/src/games/sub-cores/UnisexNounGame.tsx @@ -122,7 +122,7 @@ export default function({ id }: { id: string }) { function Instructions() { return
- Change the gender of a given word +

Change the gender of a given noun

}