games browser page

This commit is contained in:
lingdocs 2021-09-21 16:52:50 -04:00
parent db6ba08c1a
commit 9ab9302147
6 changed files with 71 additions and 6 deletions

13
src/content/games.mdx Normal file
View File

@ -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 />

View File

@ -69,6 +69,9 @@ import * as theFiveYeys from "!babel-loader!mdx-loader!./writing/the-five-yeys.m
// @ts-ignore // @ts-ignore
import * as typingIssues from "!babel-loader!mdx-loader!./writing/typing-issues.mdx"; 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 = [ const contentTree = [
{ {
import: intro, import: intro,
@ -220,6 +223,10 @@ const contentTree = [
}, },
], ],
}, },
{
import: games,
slug: "games",
},
]; ];
export const content = contentTree.map((item) => { export const content = contentTree.map((item) => {

View File

@ -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;

View File

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

View File

@ -105,7 +105,7 @@ export default function({level, id}: { level: 1 | 2, id: string}) {
questions={questions} questions={questions}
id={id} id={id}
Display={Display} Display={Display}
timeLimit={level === 1 ? 50 : 70} timeLimit={level === 1 ? 55 : 70}
Instructions={Instructions} Instructions={Instructions}
/> />
}; };

View File

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