games browser page

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 <Link to="/account">logged in</Link>, 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";
+
+<GamesBrowser />

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) => {

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<string | undefined>(undefined);
+    function handleTitleClick(id: string) {
+        setOpened(prev => (
+            prev === id ? undefined : id
+        ));
+    }
+    return <div>
+        {games.map((chapter) => (
+            <>
+                <h3 key={chapter.chapter}>{chapter.chapter}</h3>
+                {chapter.items.map((record) => {
+                    const done = user && user.tests.some(t => t.id === record.id);
+                    const open = opened === record.id;
+                    return <div key={record.title}>
+                        <div className="d-flex flex-row justify-content-between align-items-center">
+                            <div>
+                                <h4 className="my-4 clickable" onClick={() => handleTitleClick(record.id)}>
+                                    {open ? "🞃" : "🞂"} {record.title}
+                                </h4>
+                            </div>
+                            <div>
+                                <h4>{done ? "✅" : ""}</h4>
+                            </div>
+                        </div>
+                        {open && <record.Game />}
+                    </div>
+                })}
+            </>
+        ))}
+    </div>
+}
+
+export default GamesBrowser;

src/games/games.tsx

@@ -26,10 +26,15 @@ export const unisexNounGame = makeGameRecord(
     (id) => () => <UnisexNounGame id={id} />,
 );
 
-const games: GameRecord[] = [
-    nounGenderGame1,
-    nounGenderGame2,
-    unisexNounGame,
+const games: { chapter: string, items: GameRecord[] }[] = [
+    {
+        chapter: "Nouns",
+        items: [
+            nounGenderGame1,
+            nounGenderGame2,
+            unisexNounGame,
+        ],
+    },
 ];
 
 export default games;

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}
     />
 };

src/games/sub-cores/UnisexNounGame.tsx

@@ -122,7 +122,7 @@ export default function({ id }: { id: string }) {
     
     function Instructions() {
         return <div>
-            Change the gender of a given word
+            <h4>Change the gender of a given noun</h4>
         </div>
     }