fixed speed

This commit is contained in:
adueck 2023-10-24 23:15:35 +05:00
parent 7561dd5279
commit a9e17553b0
2 changed files with 166 additions and 121 deletions

View File

@ -24,7 +24,8 @@ function Sidebar({ content, navOpen, setNavOpen, pathname }) {
}
return (
<>
<aside className={classNames(
<aside
className={classNames(
"side-nav col-3 col-lg-2 p-0 bg-light",
{ "side-nav-closed": !navOpen }
)}>

View File

@ -1,7 +1,5 @@
import { useState } from "react";
import {
comparePs,
} from "../../lib/game-utils";
import { comparePs } from "../../lib/game-utils";
import genderColors from "../../lib/gender-colors";
import GameCore from "../GameCore";
import {
@ -17,20 +15,34 @@ import { nouns } from "../../words/words";
import { intoPatterns } from "../../lib/categorize";
const unisexNouns = nouns.filter(tp.isUnisexNounEntry);
type NType = "pattern1" | "pattern2" | "pattern3" | "pattern4" | "pattern5" | "other";
type NType =
| "pattern1"
| "pattern2"
| "pattern3"
| "pattern4"
| "pattern5"
| "other";
// TODO: make pattern types as overlay types
const types = intoPatterns(unisexNouns);
const genders: T.Gender[] = ["masc", "fem"];
const amount = 20;
const amount = 14;
type Question = { entry: T.DictionaryEntry, gender: T.Gender };
type Question = { entry: T.DictionaryEntry; gender: T.Gender };
export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boolean, id: string, link: string }) {
export default function UnisexNounGame({
id,
link,
inChapter,
}: {
inChapter: boolean;
id: string;
link: string;
}) {
let pool = { ...types };
function getQuestion(): Question {
const keys = Object.keys(types) as NType[];
let type: NType
let type: NType;
do {
type = randFromArray(keys);
} while (!pool[type].length);
@ -55,15 +67,17 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
if (!inflections) return <div>WORD ERROR</div>;
const givenGender = question.gender === "masc" ? "masculine" : "feminine";
const requiredGender = question.gender === "fem" ? "masculine" : "feminine";
if (!("masc" in inflections ) || !("fem" in inflections)) {
if (!("masc" in inflections) || !("fem" in inflections)) {
return <div>WORD ERROR</div>;
}
if (!inflections.masc || !inflections.fem) {
return <div>WORD ERROR</div>;
}
const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
const handleInput = ({
target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
setAnswer(value);
}
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// @ts-ignore
@ -73,18 +87,40 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
setAnswer("");
}
callback(correct);
}
};
return <div>
<div className="pt-2 pb-1 mb-2" style={{ maxWidth: "300px", margin: "0 auto", backgroundColor: genderColors[question.gender === "masc" ? "m" : "f"]}}>
<Examples opts={opts}>{[
return (
<div>
<div
className="pt-2 pb-1 mb-2"
style={{
maxWidth: "300px",
margin: "0 auto",
backgroundColor:
genderColors[question.gender === "masc" ? "m" : "f"],
}}
>
<Examples opts={opts}>
{[
{
...inflections[question.gender][0][0],
e: firstVariation(question.entry.e),
}
]}</Examples>
},
]}
</Examples>
</div>
<div>
Is {givenGender}. Make it{" "}
<span
style={{
background:
genderColors[requiredGender === "masculine" ? "m" : "f"],
}}
>
{requiredGender}
</span>
.
</div>
<div>Is {givenGender}. Make it <span style={{ background: genderColors[requiredGender === "masculine" ? "m" : "f"]}}>{requiredGender}</span>.</div>
<form onSubmit={handleSubmit}>
<div className="my-3" style={{ maxWidth: "200px", margin: "0 auto" }}>
<input
@ -102,14 +138,16 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
</div>
</div>
</form>
</div>
);
}
function Instructions() {
return <div>
return (
<div>
<h5>Change the gender of a given noun</h5>
</div>
);
}
function DisplayCorrectAnswer({ question }: { question: Question }) {
@ -118,15 +156,20 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
const { inflections } = infOut;
// @ts-ignore
const correctAnswer = inflections[flipGender(question.gender)][0];
return <div>
{correctAnswer.length > 1 && <div className="text-muted">One of the following:</div>}
return (
<div>
{correctAnswer.length > 1 && (
<div className="text-muted">One of the following:</div>
)}
{correctAnswer.map((ps: any) => (
<Examples opts={opts}>{ps}</Examples>
))}
</div>;
</div>
);
}
return <GameCore
return (
<GameCore
inChapter={inChapter}
studyLink={link}
getQuestion={getQuestion}
@ -134,10 +177,11 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
Display={Display}
DisplayCorrectAnswer={DisplayCorrectAnswer}
amount={amount}
timeLimit={130}
timeLimit={175}
Instructions={Instructions}
/>
};
);
}
function flipGender(g: T.Gender): T.Gender {
return g === "masc" ? "fem" : "masc";