lingdocs
/
pashto-grammar
mirror of https://github.com/lingdocs/pashto-grammar.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Sidebar.jsx
View File

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

284
src/games/sub-cores/UnisexNounGame.tsx
View File

@ -1,144 +1,188 @@
import { useState } from "react"; import { useState } from "react";
import { import { comparePs } from "../../lib/game-utils";
comparePs,
} from "../../lib/game-utils";
import genderColors from "../../lib/gender-colors"; import genderColors from "../../lib/gender-colors";
import GameCore from "../GameCore"; import GameCore from "../GameCore";
import { import {
Types as T, Types as T,
Examples, Examples,
defaultTextOptions as opts, defaultTextOptions as opts,
inflectWord, inflectWord,
firstVariation, firstVariation,
typePredicates as tp, typePredicates as tp,
randFromArray, randFromArray,
} from "@lingdocs/ps-react"; } from "@lingdocs/ps-react";
import { nouns } from "../../words/words"; import { nouns } from "../../words/words";
import { intoPatterns } from "../../lib/categorize"; import { intoPatterns } from "../../lib/categorize";
const unisexNouns = nouns.filter(tp.isUnisexNounEntry); 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 // TODO: make pattern types as overlay types
const types = intoPatterns(unisexNouns); const types = intoPatterns(unisexNouns);
const genders: T.Gender[] = ["masc", "fem"]; 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({
let pool = { ...types }; id,
function getQuestion(): Question { link,
const keys = Object.keys(types) as NType[]; inChapter,
let type: NType }: {
do { inChapter: boolean;
type = randFromArray(keys); id: string;
} while (!pool[type].length); link: string;
const entry = randFromArray<T.UnisexNounEntry>( }) {
// @ts-ignore let pool = { ...types };
pool[type] function getQuestion(): Question {
); const keys = Object.keys(types) as NType[];
const gender = randFromArray(genders) as T.Gender; let type: NType;
// @ts-ignore do {
pool[type] = pool[type].filter((x) => x.ts !== entry.ts); type = randFromArray(keys);
return { } while (!pool[type].length);
entry, const entry = randFromArray<T.UnisexNounEntry>(
gender, // @ts-ignore
}; pool[type]
);
const gender = randFromArray(genders) as T.Gender;
// @ts-ignore
pool[type] = pool[type].filter((x) => x.ts !== entry.ts);
return {
entry,
gender,
};
}
function Display({ question, callback }: QuestionDisplayProps<Question>) {
const [answer, setAnswer] = useState<string>("");
const infOut = inflectWord(question.entry);
if (!infOut) return <div>WORD ERROR</div>;
const { inflections } = infOut;
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)) {
return <div>WORD ERROR</div>;
} }
if (!inflections.masc || !inflections.fem) {
function Display({ question, callback }: QuestionDisplayProps<Question>) { return <div>WORD ERROR</div>;
const [answer, setAnswer] = useState<string>(""); }
const infOut = inflectWord(question.entry); const handleInput = ({
if (!infOut) return <div>WORD ERROR</div>; target: { value },
const { inflections } = infOut; }: React.ChangeEvent<HTMLInputElement>) => {
if (!inflections) return <div>WORD ERROR</div>; setAnswer(value);
const givenGender = question.gender === "masc" ? "masculine" : "feminine"; };
const requiredGender = question.gender === "fem" ? "masculine" : "feminine"; const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
if (!("masc" in inflections ) || !("fem" in inflections)) { e.preventDefault();
return <div>WORD ERROR</div>; // @ts-ignore
} const correctAnswer = inflections[flipGender(question.gender)][0];
if (!inflections.masc || !inflections.fem) { const correct = comparePs(answer, correctAnswer);
return <div>WORD ERROR</div>; if (correct) {
} setAnswer("");
const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => { }
setAnswer(value); callback(correct);
} };
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); return (
// @ts-ignore <div>
const correctAnswer = inflections[flipGender(question.gender)][0]; <div
const correct = comparePs(answer, correctAnswer); className="pt-2 pb-1 mb-2"
if (correct) { style={{
setAnswer(""); maxWidth: "300px",
} margin: "0 auto",
callback(correct); backgroundColor:
} genderColors[question.gender === "masc" ? "m" : "f"],
}}
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}>
<Examples opts={opts}>{[ {[
{ {
...inflections[question.gender][0][0], ...inflections[question.gender][0][0],
e: firstVariation(question.entry.e), e: firstVariation(question.entry.e),
} },
]}</Examples> ]}
</Examples>
</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
type="text"
className="form-control"
autoComplete="off"
autoCapitalize="off"
spellCheck="false"
dir="auto"
value={answer}
onChange={handleInput}
/>
<div className="text-muted small mt-3">
Type <kbd>Enter</kbd> to check
</div> </div>
<div>Is {givenGender}. Make it <span style={{ background: genderColors[requiredGender === "masculine" ? "m" : "f"]}}>{requiredGender}</span>.</div> </div>
<form onSubmit={handleSubmit}> </form>
<div className="my-3" style={{ maxWidth: "200px", margin: "0 auto" }}> </div>
<input );
type="text" }
className="form-control"
autoComplete="off"
autoCapitalize="off"
spellCheck="false"
dir="auto"
value={answer}
onChange={handleInput}
/>
<div className="text-muted small mt-3">
Type <kbd>Enter</kbd> to check
</div>
</div>
</form>
</div> function Instructions() {
} return (
<div>
function Instructions() { <h5>Change the gender of a given noun</h5>
return <div> </div>
<h5>Change the gender of a given noun</h5> );
</div> }
}
function DisplayCorrectAnswer({ question }: { question: Question }) { function DisplayCorrectAnswer({ question }: { question: Question }) {
const infOut = inflectWord(question.entry); const infOut = inflectWord(question.entry);
if (!infOut) return <div>WORD ERROR</div>; if (!infOut) return <div>WORD ERROR</div>;
const { inflections } = infOut; const { inflections } = infOut;
// @ts-ignore // @ts-ignore
const correctAnswer = inflections[flipGender(question.gender)][0]; const correctAnswer = inflections[flipGender(question.gender)][0];
return <div> return (
{correctAnswer.length > 1 && <div className="text-muted">One of the following:</div>} <div>
{correctAnswer.map((ps: any) => ( {correctAnswer.length > 1 && (
<Examples opts={opts}>{ps}</Examples> <div className="text-muted">One of the following:</div>
))} )}
</div>; {correctAnswer.map((ps: any) => (
} <Examples opts={opts}>{ps}</Examples>
))}
</div>
);
}
return <GameCore return (
inChapter={inChapter} <GameCore
studyLink={link} inChapter={inChapter}
getQuestion={getQuestion} studyLink={link}
id={id} getQuestion={getQuestion}
Display={Display} id={id}
DisplayCorrectAnswer={DisplayCorrectAnswer} Display={Display}
amount={amount} DisplayCorrectAnswer={DisplayCorrectAnswer}
timeLimit={130} amount={amount}
Instructions={Instructions} timeLimit={175}
Instructions={Instructions}
/> />
}; );
}
function flipGender(g: T.Gender): T.Gender { function flipGender(g: T.Gender): T.Gender {
return g === "masc" ? "fem" : "masc"; return g === "masc" ? "fem" : "masc";
} }