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

fix build

This commit is contained in:
adueck 2024-12-06 18:28:08 +05:00
parent a254592fd1
commit 35f29e8048
13 changed files with 1108 additions and 804 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -17,7 +17,7 @@
"@formkit/auto-animate": "^1.0.0-beta.6", "@formkit/auto-animate": "^1.0.0-beta.6",
"@fortawesome/fontawesome-free": "5.15.4", "@fortawesome/fontawesome-free": "5.15.4",
"@lingdocs/lingdocs-main": "^0.3.3", "@lingdocs/lingdocs-main": "^0.3.3",
"@lingdocs/ps-react": "^7.7.3", "@lingdocs/ps-react": "^7.7.4",
"@mdx-js/rollup": "^2.2.1", "@mdx-js/rollup": "^2.2.1",
"@stefanprobst/rehype-extract-toc": "^2.2.0", "@stefanprobst/rehype-extract-toc": "^2.2.0",
"@types/mdx": "^2.0.3", "@types/mdx": "^2.0.3",

7
src/components/BasicVerbShowCase.tsx
View File

@ -49,12 +49,13 @@ function BasicVerbShowCase({
render={(item) => { render={(item) => {
return { return {
title: ( title: (
<InlinePs opts={opts}> <InlinePs
{{ opts={opts}
ps={{
...removeFVarients(item.entry), ...removeFVarients(item.entry),
e: undefined, e: undefined,
}} }}
</InlinePs> />
), ),
body: ( body: (
<BasicVerbChart <BasicVerbChart

4
src/components/GenderTable.jsx
View File

@ -20,10 +20,10 @@ export default function GenderTable({ rows }) {
return <td key={`row-${i}-${gender}`} style={{ background: genderColors[gender === "masc" ? "m" : "f"] }}> return <td key={`row-${i}-${gender}`} style={{ background: genderColors[gender === "masc" ? "m" : "f"] }}>
{item.ending && <div> {item.ending && <div>
{typeof item.ending === "string" ? item.ending {typeof item.ending === "string" ? item.ending
: <InlinePs opts={opts}>{item.ending}</InlinePs>} : <InlinePs opts={opts} ps={item.ending} />}
</div>} </div>}
<div> <div>
{item.ending ? "eg. " : ""}<InlinePs opts={opts}>{item.ex}</InlinePs> {item.ending ? "eg. " : ""}<InlinePs opts={opts} ps={item.ex} />
</div> </div>
</td> </td>
})} })}

106
src/components/InflectionCarousel.tsx
View File

@ -1,51 +1,67 @@
import Carousel from "./Carousel"; import Carousel from "./Carousel";
import { import {
InlinePs, InlinePs,
removeFVarients, removeFVarients,
InflectionsTable, InflectionsTable,
inflectWord, inflectWord,
defaultTextOptions as opts, defaultTextOptions as opts,
getEnglishWord, getEnglishWord,
Types as T, Types as T,
} from "@lingdocs/ps-react"; } from "@lingdocs/ps-react";
function InflectionCarousel({ items }: { items: (T.NounEntry | T.AdjectiveEntry)[] }) { function InflectionCarousel({
if (!items.length) { items,
return "no items for carousel"; }: {
} items: (T.NounEntry | T.AdjectiveEntry)[];
return ( }) {
<div className="mt-3"> if (!items.length) {
<Carousel items={items} render={item => { return "no items for carousel";
const e = getEnglishWord(item); }
const english = e === undefined return (
? item.e <div className="mt-3">
: typeof e === "string" <Carousel
? e items={items}
: e.singular !== undefined render={(item) => {
? e.singular const e = getEnglishWord(item);
: item.e; const english =
const infOut = inflectWord(item); e === undefined
if (!infOut || !infOut.inflections) { ? item.e
return { : typeof e === "string"
title: "Oops! 🤷‍♂️", ? e
// @ts-ignore : e.singular !== undefined
body: <div>Oops! No inflections for <InlinePs opts={opts}>{item}</InlinePs></div>, ? e.singular
}; : item.e;
} const infOut = inflectWord(item);
return { if (!infOut || !infOut.inflections) {
// @ts-ignore return {
title: <InlinePs opts={opts} ps={{ title: "Oops! 🤷‍♂️",
...removeFVarients(item), // @ts-ignore
e: english, body: (
}} />, <div>
body: <InflectionsTable Oops! No inflections for <InlinePs opts={opts} ps={item} />
inf={infOut.inflections} </div>
textOptions={opts} ),
/>, };
}; }
}}/> return {
</div> // @ts-ignore
); title: (
<InlinePs
opts={opts}
ps={{
...removeFVarients(item),
e: english,
}}
/>
),
body: (
<InflectionsTable inf={infOut.inflections} textOptions={opts} />
),
};
}}
/>
</div>
);
} }
export default InflectionCarousel; export default InflectionCarousel;

60
src/components/phrase-diagram/BlockDiagram.tsx
View File

@ -1,33 +1,47 @@
import { import {
renderNPSelection, renderNPSelection,
Types as T, Types as T,
renderAPSelection, renderAPSelection,
NPBlock, NPBlock,
APBlock, APBlock,
getEnglishFromRendered, getEnglishFromRendered,
} from "@lingdocs/ps-react"; } from "@lingdocs/ps-react";
function BlockDiagram({ opts, children }: { function BlockDiagram({
opts: T.TextOptions, opts,
children: T.NPSelection | T.APSelection, children,
}: {
opts: T.TextOptions;
children: T.NPSelection | T.APSelection;
}) { }) {
try { try {
const rendered = children.type === "AP" const rendered =
children.type === "AP"
? renderAPSelection(children, 0) ? renderAPSelection(children, 0)
: renderNPSelection(children, false, false, "subject", "none", false); : renderNPSelection(children, false, false, "subject", "none", false);
const english = getEnglishFromRendered(rendered); const english = getEnglishFromRendered(rendered);
return <div className="mb-3"> return (
<div className="d-flex flex-row justify-content-center text-center" style={{ maxWidth: "100%" }}> <div className="mb-3">
{rendered.type === "NP" <div
? <NPBlock script="f" opts={opts} english={english}>{rendered}</NPBlock> className="d-flex flex-row justify-content-center text-center"
: <APBlock script="f" opts={opts} english={english}>{rendered}</APBlock>} style={{ maxWidth: "100%" }}
>
{rendered.type === "NP" ? (
<NPBlock script="f" opts={opts} english={english}>
{rendered}
</NPBlock>
) : (
<APBlock script="f" opts={opts} english={english}>
{rendered}
</APBlock>
)}
</div> </div>
</div>; </div>
} catch(e) { );
console.log(e); } catch (e) {
return <div>ERROR</div>; console.log(e);
} return <div>ERROR</div>;
}
} }
export default BlockDiagram;
export default BlockDiagram;

157
src/components/phrase-diagram/EditableBlock.tsx
View File

@ -1,88 +1,95 @@
import { import { Types as T, NPPicker, APPicker } from "@lingdocs/ps-react";
Types as T, import { useEffect, useRef } from "react";
NPPicker,
APPicker,
} from "@lingdocs/ps-react";
import {
useEffect,
useRef,
} from "react";
import { useState } from "react"; import { useState } from "react";
import BlockDiagram from "./BlockDiagram"; import BlockDiagram from "./BlockDiagram";
import entryFeeder from "../../lib/entry-feeder"; import entryFeeder from "../../lib/entry-feeder";
import autoAnimate from "@formkit/auto-animate"; import autoAnimate from "@formkit/auto-animate";
export function EditIcon() { export function EditIcon() {
return <i className="fas fa-edit" />; return <i className="fas fa-edit" />;
} }
function selectionToBlock(s: T.NPSelection | T.APSelection): { type: "NP", block: T.NPSelection | undefined } | { type: "AP", block: T.APSelection | undefined } { function selectionToBlock(
return (s.type === "AP") s: T.NPSelection | T.APSelection
? { type: "AP", block: s } ):
: { type: "NP", block: s }; | { type: "NP"; block: T.NPSelection | undefined }
| { type: "AP"; block: T.APSelection | undefined } {
return s.type === "AP" ? { type: "AP", block: s } : { type: "NP", block: s };
} }
function EditableBlock({ opts, children: block }: { function EditableBlock({
opts: T.TextOptions, opts,
children: T.NPSelection | T.APSelection, children: block,
}: {
opts: T.TextOptions;
children: T.NPSelection | T.APSelection;
}) { }) {
const parent = useRef<HTMLDivElement>(null); const parent = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
parent.current && autoAnimate(parent.current) parent.current && autoAnimate(parent.current);
}, [parent]); }, [parent]);
const [editing, setEditing] = useState<boolean>(false); const [editing, setEditing] = useState<boolean>(false);
const [edited, setEdited] = useState<{ const [edited, setEdited] = useState<
type: "NP", | {
block: T.NPSelection | undefined, type: "NP";
} | { block: T.NPSelection | undefined;
type: "AP", }
block: T.APSelection | undefined, | {
}>(selectionToBlock(block)); type: "AP";
function handleNPChange(np: T.NPSelection | undefined) { block: T.APSelection | undefined;
setEdited({ type: "NP", block: np }); }
} >(selectionToBlock(block));
function handleAPChange(ap: T.APSelection | undefined) { function handleNPChange(np: T.NPSelection | undefined) {
setEdited({ type: "AP", block: ap }); setEdited({ type: "NP", block: np });
} }
function handleReset() { function handleAPChange(ap: T.APSelection | undefined) {
setEdited(selectionToBlock(block)); setEdited({ type: "AP", block: ap });
setEditing(false); }
} function handleReset() {
return <div> setEdited(selectionToBlock(block));
<div setEditing(false);
className="text-right clickable" }
onClick={editing ? handleReset : () => setEditing(true)} return (
> <div>
{!editing ? <EditIcon /> : <i className="fas fa-undo" />} <div
</div> className="text-right clickable"
<div ref={parent} className="d-flex flex-column align-items-center"> onClick={editing ? handleReset : () => setEditing(true)}
{editing && <div style={{ maxWidth: "225px", marginBottom: "2rem" }}> >
{edited.type === "NP" {!editing ? <EditIcon /> : <i className="fas fa-undo" />}
? <NPPicker </div>
opts={opts} <div ref={parent} className="d-flex flex-column align-items-center">
np={edited.block} {editing && (
onChange={handleNPChange} <div style={{ maxWidth: "225px", marginBottom: "2rem" }}>
entryFeeder={entryFeeder} {edited.type === "NP" ? (
role="subject" <NPPicker
counterPart={undefined} opts={opts}
phraseIsComplete={false} np={edited.block}
/> onChange={handleNPChange}
: <APPicker entryFeeder={entryFeeder}
opts={opts} role="subject"
AP={edited.block} counterPart={undefined}
onChange={handleAPChange} phraseIsComplete={false}
entryFeeder={entryFeeder} negative={false}
phraseIsComplete={false} />
onRemove={() => null} ) : (
/> <APPicker
} opts={opts}
</div>} AP={edited.block}
{edited.block onChange={handleAPChange}
&& <BlockDiagram opts={opts}> entryFeeder={entryFeeder}
{edited.block} phraseIsComplete={false}
</BlockDiagram>} onRemove={() => null}
</div> negative={false}
</div>; />
)}
</div>
)}
{edited.block && (
<BlockDiagram opts={opts}>{edited.block}</BlockDiagram>
)}
</div>
</div>
);
} }
export default EditableBlock; export default EditableBlock;

149
src/content/verbs/GoingStems.tsx
View File

@ -1,36 +1,123 @@
import Carousel from "../../components/Carousel"; import Carousel from "../../components/Carousel";
import { import {
defaultTextOptions as opts, defaultTextOptions as opts,
InlinePs, InlinePs,
RootsAndStems, RootsAndStems,
getVerbInfo, getVerbInfo,
getAbilityRootsAndStems, getAbilityRootsAndStems,
removeFVarients, removeFVarients,
ensureNonComboVerbInfo, ensureNonComboVerbInfo,
} from "@lingdocs/ps-react"; } from "@lingdocs/ps-react";
export default function GoingStems() { export default function GoingStems() {
const items = [ const items = [
{"ts":1527815348,"i":3666,"p":"تلل","f":"tlul","g":"tlul","e":"to go","c":"v. intrans. irreg.","psp":"ځ","psf":"dz","ssp":"لاړ ش","ssf":"láaR sh","prp":"لاړ","prf":"láaR","ec":"go,goes,going,went,gone"}, {
{"ts":1527815216,"i":6642,"p":"راتلل","f":"raatlúl","g":"raatlul","e":"to come","c":"v. intrans. irreg.","psp":"راځ","psf":"raadz","ssp":"راش","ssf":"ráash","prp":"راغلل","prf":"ráaghlul","pprtp":"راغلی","pprtf":"raaghúley","tppp":"راغی","tppf":"ráaghey","noOo":true,"separationAtP":2,"separationAtF":3,"ec":"come,comes,coming,came,come"}, ts: 1527815348,
{"ts":1585228551150,"i":6062,"p":"درتلل","f":"dărtlul","g":"dartlul","e":"to come (to you / second person)","c":"v. intrans. irreg.","psp":"درځ","psf":"dărdz","ssp":"درش","ssf":"dársh","prp":"درغلل","prf":"dáraghlul","pprtp":"درغلی","pprtf":"dăraghúley","tppp":"درغی","tppf":"dáraghey","noOo":true,"separationAtP":2,"separationAtF":3,"ec":"come,comes,coming,came,come"}, i: 3666,
{"ts":1585228579997,"i":14282,"p":"ورتلل","f":"wărtlul","g":"wartlul","e":"to come / go over to (third person or place)","c":"v. intrans. irreg.","psp":"ورځ","psf":"wărdz","ssp":"ورش","ssf":"wársh","prp":"ورغلل","prf":"wáraghlul","pprtp":"ورغلی","pprtf":"wăraghúley","tppp":"ورغی","tppf":"wáraghey","noOo":true,"separationAtP":2,"separationAtF":3,"ec":"come,comes,coming,came,come"}, p: "تلل",
].map(entry => ({ entry })); f: "tlul",
return <Carousel stickyTitle items={items} render={(item) => { g: "tlul",
const rs = getAbilityRootsAndStems( e: "to go",
ensureNonComboVerbInfo(getVerbInfo(item.entry)) c: "v. intrans. irreg.",
); psp: "ځ",
return { psf: "dz",
title: <InlinePs opts={opts}> ssp: "لاړ ش",
{{ ssf: "láaR sh",
...removeFVarients(item.entry), prp: "لاړ",
e: undefined, prf: "láaR",
}} ec: "go,goes,going,went,gone",
</InlinePs>, },
body: <RootsAndStems {
textOptions={opts} ts: 1527815216,
info={rs} i: 6642,
/>, p: "راتلل",
}; f: "raatlúl",
}}/> g: "raatlul",
} e: "to come",
c: "v. intrans. irreg.",
psp: "راځ",
psf: "raadz",
ssp: "راش",
ssf: "ráash",
prp: "راغلل",
prf: "ráaghlul",
pprtp: "راغلی",
pprtf: "raaghúley",
tppp: "راغی",
tppf: "ráaghey",
noOo: true,
separationAtP: 2,
separationAtF: 3,
ec: "come,comes,coming,came,come",
},
{
ts: 1585228551150,
i: 6062,
p: "درتلل",
f: "dărtlul",
g: "dartlul",
e: "to come (to you / second person)",
c: "v. intrans. irreg.",
psp: "درځ",
psf: "dărdz",
ssp: "درش",
ssf: "dársh",
prp: "درغلل",
prf: "dáraghlul",
pprtp: "درغلی",
pprtf: "dăraghúley",
tppp: "درغی",
tppf: "dáraghey",
noOo: true,
separationAtP: 2,
separationAtF: 3,
ec: "come,comes,coming,came,come",
},
{
ts: 1585228579997,
i: 14282,
p: "ورتلل",
f: "wărtlul",
g: "wartlul",
e: "to come / go over to (third person or place)",
c: "v. intrans. irreg.",
psp: "ورځ",
psf: "wărdz",
ssp: "ورش",
ssf: "wársh",
prp: "ورغلل",
prf: "wáraghlul",
pprtp: "ورغلی",
pprtf: "wăraghúley",
tppp: "ورغی",
tppf: "wáraghey",
noOo: true,
separationAtP: 2,
separationAtF: 3,
ec: "come,comes,coming,came,come",
},
].map((entry) => ({ entry }));
return (
<Carousel
stickyTitle
items={items}
render={(item) => {
const rs = getAbilityRootsAndStems(
ensureNonComboVerbInfo(getVerbInfo(item.entry))
);
return {
title: (
<InlinePs
opts={opts}
ps={{
...removeFVarients(item.entry),
e: undefined,
}}
/>
),
body: <RootsAndStems textOptions={opts} info={rs} />,
};
}}
/>
);
}

369
src/games/sub-cores/EquativeGame.tsx
View File

@ -1,17 +1,15 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import { comparePs } from "../../lib/game-utils";
comparePs,
} from "../../lib/game-utils";
import GameCore from "../GameCore"; import GameCore from "../GameCore";
import { import {
Types as T, Types as T,
Examples, Examples,
defaultTextOptions as opts, defaultTextOptions as opts,
renderEP, renderEP,
compileEP, compileEP,
flattenLengths, flattenLengths,
InlinePs, InlinePs,
grammarUnits, grammarUnits,
} from "@lingdocs/ps-react"; } from "@lingdocs/ps-react";
import { randomEPSPool } from "./makeRandomEPS"; import { randomEPSPool } from "./makeRandomEPS";
@ -21,168 +19,215 @@ const amount = 12;
const timeLimit = 100; const timeLimit = 100;
type Question = { type Question = {
EPS: T.EPSelectionComplete, EPS: T.EPSelectionComplete;
phrase: { ps: T.PsString[], e?: string[] }, phrase: { ps: T.PsString[]; e?: string[] };
equative: T.EquativeRendered, equative: T.EquativeRendered;
}; };
export default function EquativeGame({ inChapter, id, link, level }: { inChapter: boolean, id: string, link: string, level: T.EquativeTense | "allTenses" }) { export default function EquativeGame({
const epsPool = randomEPSPool(level); inChapter,
function getQuestion(): Question { id,
const EPS = epsPool(); link,
const EP = renderEP(EPS); level,
const compiled = compileEP( }: {
EP, inChapter: boolean;
true, id: string;
{ equative: true, kidsSection: true }, link: string;
); level: T.EquativeTense | "allTenses";
const phrase = { }) {
ps: compiled.ps, const epsPool = randomEPSPool(level);
e: compiled.e, function getQuestion(): Question {
}; const EPS = epsPool();
return { const EP = renderEP(EPS);
EPS, const compiled = compileEP(EP, true, { equative: true, kidsSection: true });
phrase, const phrase = {
equative: getEqFromRendered(EP), ps: compiled.ps,
}; e: compiled.e,
}; };
return {
function Display({ question, callback }: QuestionDisplayProps<Question>) { EPS,
const [answer, setAnswer] = useState<string>(""); phrase,
const [withBa, setWithBa] = useState<boolean>(false); equative: getEqFromRendered(EP),
const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => { };
setAnswer(value); }
}
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { function Display({ question, callback }: QuestionDisplayProps<Question>) {
e.preventDefault(); const [answer, setAnswer] = useState<string>("");
const correct = comparePs(answer, question.equative.ps) const [withBa, setWithBa] = useState<boolean>(false);
&& (withBa === question.equative.hasBa); const handleInput = ({
if (correct) { target: { value },
setAnswer(""); }: React.ChangeEvent<HTMLInputElement>) => {
} setAnswer(value);
callback(correct); };
} const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
useEffect(() => { e.preventDefault();
if (level === "allTenses") setWithBa(false); const correct =
}, [question]); comparePs(answer, question.equative.ps) &&
withBa === question.equative.hasBa;
return <div> if (correct) {
<div className="mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}> setAnswer("");
<Examples lineHeight={1} opts={opts}> }
{/* @ts-ignore TODO: REMOVE AS P_INFLE */} callback(correct);
{modExs(question.phrase.ps, withBa)[0]} };
</Examples> useEffect(() => {
{question.phrase.e && question.phrase.e.map((e, i) => ( if (level === "allTenses") setWithBa(false);
<div key={e+i} className="text-muted">{e}</div> }, [question]);
))}
<div>{humanReadableTense(question.EPS.equative.tense)} equative</div> return (
</div> <div>
<form onSubmit={handleSubmit}> <div className="mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
<div className="form-check mt-1"> <Examples lineHeight={1} opts={opts}>
<input {/* @ts-ignore TODO: REMOVE AS P_INFLE */}
id="baCheckbox" {modExs(question.phrase.ps, withBa)[0]}
className="form-check-input" </Examples>
type="checkbox" {question.phrase.e &&
checked={withBa} question.phrase.e.map((e, i) => (
onChange={e => setWithBa(e.target.checked)} <div key={e + i} className="text-muted">
/> {e}
<label className="form-check-label text-muted" htmlFor="baCheckbox"> </div>
with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the <span style={{ color: kidsColor }}>kids' section</span> ))}
</label> <div>{humanReadableTense(question.EPS.equative.tense)} equative</div>
</div> </div>
<div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}> <form onSubmit={handleSubmit}>
<input <div className="form-check mt-1">
type="text" <input
className="form-control" id="baCheckbox"
autoComplete="off" className="form-check-input"
autoCapitalize="off" type="checkbox"
spellCheck="false" checked={withBa}
dir="auto" onChange={(e) => setWithBa(e.target.checked)}
value={answer} />
onChange={handleInput} <label className="form-check-label text-muted" htmlFor="baCheckbox">
/> with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the{" "}
</div> <span style={{ color: kidsColor }}>kids' section</span>
<div className="text-center my-2"> </label>
{/* <div> */} </div>
<button className="btn btn-primary" type="submit">submit ↵</button> <div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
{/* </div> */} <input
{/* <div className="text-muted small text-center mt-2"> type="text"
className="form-control"
autoComplete="off"
autoCapitalize="off"
spellCheck="false"
dir="auto"
value={answer}
onChange={handleInput}
/>
</div>
<div className="text-center my-2">
{/* <div> */}
<button className="btn btn-primary" type="submit">
submit ↵
</button>
{/* </div> */}
{/* <div className="text-muted small text-center mt-2">
Type <kbd>Enter</kbd> to check Type <kbd>Enter</kbd> to check
</div> */} </div> */}
</div> </div>
</form> </form>
</div> </div>
} );
}
function Instructions() {
return <div>
<p className="lead">
Fill in the blank with the correct {level === "allTenses" ? "" : humanReadableTense(level)} equative
</p>
{level === "allTenses" && <div>⚠ All tenses included...</div>}
</div>;
}
return <GameCore function Instructions() {
inChapter={inChapter} return (
studyLink={link} <div>
getQuestion={getQuestion} <p className="lead">
id={id} Fill in the blank with the correct{" "}
Display={Display} {level === "allTenses" ? "" : humanReadableTense(level)} equative
DisplayCorrectAnswer={DisplayCorrectAnswer} </p>
timeLimit={level === "allTenses" ? timeLimit * 1.3 : timeLimit} {level === "allTenses" && <div>⚠ All tenses included...</div>}
amount={amount} </div>
Instructions={Instructions} );
}
return (
<GameCore
inChapter={inChapter}
studyLink={link}
getQuestion={getQuestion}
id={id}
Display={Display}
DisplayCorrectAnswer={DisplayCorrectAnswer}
timeLimit={level === "allTenses" ? timeLimit * 1.3 : timeLimit}
amount={amount}
Instructions={Instructions}
/> />
}; );
function DisplayCorrectAnswer({ question }: { question: Question }): JSX.Element {
return <div>
<div>
{flattenLengths(question.equative.ps).reduce(((accum, curr, i): JSX.Element[] => (
[
...accum,
...i > 0 ? [<span className="text-muted"> or </span>] : [],
<span key={i}>{curr.p}</span>,
]
)), [] as JSX.Element[])}
</div>
<div><strong>{question.equative.hasBa ? "with" : "without"}</strong> a <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids' section.</div>
</div>;
} }
function modExs(exs: T.PsString[], withBa: boolean): { p: JSX.Element, f: JSX.Element }[] {
return exs.map(ps => { function DisplayCorrectAnswer({
if (!ps.p.includes(" ___ ")) { question,
return { }: {
p: <>{ps.p}</>, question: Question;
f: <>{ps.f}</>, }): JSX.Element {
}; return (
} <div>
const splitP = ps.p.split(" ___ "); <div>
const splitF = ps.f.split(" ___ "); {flattenLengths(question.equative.ps).reduce(
return { (accum, curr, i): JSX.Element[] => [
p: <>{splitP[0]} <span style={{ color: kidsColor }}>{withBa ? "به" : "__"}</span> {splitP[1]}</>, ...accum,
f: <>{splitF[0]} <span style={{ color: kidsColor }}>{withBa ? "ba" : "__"}</span> {splitF[1]}</>, ...(i > 0 ? [<span className="text-muted"> or </span>] : []),
}; <span key={i}>{curr.p}</span>,
}); ],
[] as JSX.Element[]
)}
</div>
<div>
<strong>{question.equative.hasBa ? "with" : "without"}</strong> a{" "}
<InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
section.
</div>
</div>
);
}
function modExs(
exs: T.PsString[],
withBa: boolean
): { p: JSX.Element; f: JSX.Element }[] {
return exs.map((ps) => {
if (!ps.p.includes(" ___ ")) {
return {
p: <>{ps.p}</>,
f: <>{ps.f}</>,
};
}
const splitP = ps.p.split(" ___ ");
const splitF = ps.f.split(" ___ ");
return {
p: (
<>
{splitP[0]}{" "}
<span style={{ color: kidsColor }}>{withBa ? "به" : "__"}</span>{" "}
{splitP[1]}
</>
),
f: (
<>
{splitF[0]}{" "}
<span style={{ color: kidsColor }}>{withBa ? "ba" : "__"}</span>{" "}
{splitF[1]}
</>
),
};
});
} }
function humanReadableTense(tense: T.EquativeTense | "allProduce"): string { function humanReadableTense(tense: T.EquativeTense | "allProduce"): string {
return tense === "allProduce" return tense === "allProduce"
? "" ? ""
: tense === "pastSubjunctive" : tense === "pastSubjunctive"
? "past subjunctive" ? "past subjunctive"
: tense === "wouldBe" : tense === "wouldBe"
? `"would be"` ? `"would be"`
: tense === "wouldHaveBeen" : tense === "wouldHaveBeen"
? `"would have been"` ? `"would have been"`
: tense; : tense;
} }
function getEqFromRendered(e: T.EPRendered): T.EquativeRendered { function getEqFromRendered(e: T.EPRendered): T.EquativeRendered {
const eblock = e.blocks[0].find(x => x.block.type === "equative"); const eblock = e.blocks[0].find((x) => x.block.type === "equative");
if (!eblock || eblock.block.type !== "equative") throw new Error("Error getting equative block"); if (!eblock || eblock.block.type !== "equative")
return eblock.block.equative; throw new Error("Error getting equative block");
} return eblock.block.equative;
}

306
src/games/sub-cores/NPAdjGame.tsx
View File

@ -1,13 +1,13 @@
import GameCore from "../GameCore"; import GameCore from "../GameCore";
import { import {
Types as T, Types as T,
renderNPSelection, renderNPSelection,
getEnglishFromRendered, getEnglishFromRendered,
getPashtoFromRendered, getPashtoFromRendered,
renderAPSelection, renderAPSelection,
InlinePs, InlinePs,
defaultTextOptions as opts, defaultTextOptions as opts,
concatPsString, concatPsString,
} from "@lingdocs/ps-react"; } from "@lingdocs/ps-react";
import { makeNPAdjGenerator } from "../../lib/block-generators/np-adj-generator"; import { makeNPAdjGenerator } from "../../lib/block-generators/np-adj-generator";
import { useState } from "react"; import { useState } from "react";
@ -19,141 +19,183 @@ const amount = 16;
const timeLimit = 270; const timeLimit = 270;
type Question = { type Question = {
selection: T.NPSelection | T.APSelection, selection: T.NPSelection | T.APSelection;
answer: T.PsString[], answer: T.PsString[];
english: string, english: string;
}; };
type Level = "hints" | "no-hints" | "sandwiches"; type Level = "hints" | "no-hints" | "sandwiches";
const NPAdjWriting: GameSubCore<Level> = ({ inChapter, id, link, level }: { const NPAdjWriting: GameSubCore<Level> = ({
inChapter: boolean, inChapter,
id: string, id,
link: string, link,
level: Level, level,
}: {
inChapter: boolean;
id: string;
link: string;
level: Level;
}) => { }) => {
const npPool = makeNPAdjGenerator(level === "sandwiches" ? "low" : "high"); const npPool = makeNPAdjGenerator(level === "sandwiches" ? "low" : "high");
function getQuestion(): Question { function getQuestion(): Question {
const np = npPool(); const np = npPool();
const selection: T.NPSelection | T.APSelection = level === "sandwiches" const selection: T.NPSelection | T.APSelection =
? makeSandwich(np) : np; level === "sandwiches" ? makeSandwich(np) : np;
const rendered: T.Rendered<T.NPSelection> | T.Rendered<T.APSelection> = selection.type === "AP" const rendered: T.Rendered<T.NPSelection> | T.Rendered<T.APSelection> =
? renderAPSelection(selection, 0) // WOULD BE CLEANER IF THIS WAS JUST A PURE SANDWICH, NOT AT AP selection.type === "AP"
: renderNPSelection(np, false, false, "subject", "none", false); ? renderAPSelection(selection, 0) // WOULD BE CLEANER IF THIS WAS JUST A PURE SANDWICH, NOT AT AP
const answer = getPashtoFromRendered(rendered, false); : renderNPSelection(np, false, false, "subject", "none", false);
return { const answer = getPashtoFromRendered(rendered, false);
selection, return {
answer, selection,
english: getEnglishFromRendered(rendered) || "ERROR", answer,
}; english: getEnglishFromRendered(rendered) || "ERROR",
}; };
}
function Display({ question, callback }: QuestionDisplayProps<Question>) {
const [answer, setAnswer] = useState<string>("");
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const correct = comparePs(answer, question.answer);
if (correct) {
setAnswer("");
}
callback(correct);
}
if (!(
(question.selection.type === "AP" && question.selection.selection.type === "sandwich" && question.selection.selection.inside.selection.type === "noun")
||
(question.selection.type === "NP" && question.selection.selection.type === "noun")
)) {
throw new Error("QUESTION ERROR - BAD SELECTION")
}
const nounSelection: T.NounSelection = question.selection.type === "AP"
? question.selection.selection.inside.selection as T.NounSelection // ts being dumb
: question.selection.selection;
const adjEntry: T.AdjectiveEntry | undefined = nounSelection.adjectives[0]?.entry;
if (!adjEntry) {
throw new Error("QUESTION ERROR - MISSING ADJECTIVE");
}
const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
setAnswer(value);
}
const sandwich = question.selection.type === "AP"
? question.selection.selection
: undefined;
return <div>
<div className="my-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
<div className="d-flex flex-row justify-content-center" style={{ gap: "1rem"}}>
<WordCard
showHint={level === "hints"}
entry={adjEntry}
selection={undefined}
/>
<WordCard
showHint={level === "hints"}
entry={nounSelection.entry}
selection={nounSelection}
/>
</div>
{sandwich && <div className="mt-2">
<InlinePs opts={opts}>
{concatPsString(sandwich.before, " ... ", sandwich.after)}
</InlinePs>
</div>}
<div className="my-3 h5">
{question.english}
</div>
<form onSubmit={handleSubmit}>
<div className="mt-2 mb-1" 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>
<div className="text-center my-3">
<button className="btn btn-primary" type="submit">submit ↵</button>
</div>
</form>
</div>
</div>
}
function Instructions() {
return <div>
<p className="lead">Write the {level === "sandwiches" ? "sandwich including the" : ""} adjective and noun together with the proper inflections.</p>
</div>
}
return <GameCore function Display({ question, callback }: QuestionDisplayProps<Question>) {
inChapter={inChapter} const [answer, setAnswer] = useState<string>("");
studyLink={link} const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
getQuestion={getQuestion} e.preventDefault();
id={id} const correct = comparePs(answer, question.answer);
Display={Display} if (correct) {
DisplayCorrectAnswer={DisplayCorrectAnswer} setAnswer("");
timeLimit={timeLimit} }
amount={amount} callback(correct);
Instructions={Instructions} };
if (
!(
(question.selection.type === "AP" &&
question.selection.selection.type === "sandwich" &&
question.selection.selection.inside.selection.type === "noun") ||
(question.selection.type === "NP" &&
question.selection.selection.type === "noun")
)
) {
throw new Error("QUESTION ERROR - BAD SELECTION");
}
const nounSelection: T.NounSelection =
question.selection.type === "AP"
? (question.selection.selection.inside.selection as T.NounSelection) // ts being dumb
: question.selection.selection;
const adjEntry: T.AdjectiveEntry | undefined =
nounSelection.adjectives[0]?.entry;
if (!adjEntry) {
throw new Error("QUESTION ERROR - MISSING ADJECTIVE");
}
const handleInput = ({
target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
setAnswer(value);
};
const sandwich =
question.selection.type === "AP"
? question.selection.selection
: undefined;
return (
<div>
<div className="my-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
<div
className="d-flex flex-row justify-content-center"
style={{ gap: "1rem" }}
>
<WordCard
showHint={level === "hints"}
entry={adjEntry}
selection={undefined}
/>
<WordCard
showHint={level === "hints"}
entry={nounSelection.entry}
selection={nounSelection}
/>
</div>
{sandwich && (
<div className="mt-2">
<InlinePs
opts={opts}
ps={concatPsString(sandwich.before, " ... ", sandwich.after)}
/>
</div>
)}
<div className="my-3 h5">{question.english}</div>
<form onSubmit={handleSubmit}>
<div
className="mt-2 mb-1"
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>
<div className="text-center my-3">
<button className="btn btn-primary" type="submit">
submit ↵
</button>
</div>
</form>
</div>
</div>
);
}
function Instructions() {
return (
<div>
<p className="lead">
Write the {level === "sandwiches" ? "sandwich including the" : ""}{" "}
adjective and noun together with the proper inflections.
</p>
</div>
);
}
return (
<GameCore
inChapter={inChapter}
studyLink={link}
getQuestion={getQuestion}
id={id}
Display={Display}
DisplayCorrectAnswer={DisplayCorrectAnswer}
timeLimit={timeLimit}
amount={amount}
Instructions={Instructions}
/> />
);
}; };
function DisplayCorrectAnswer({ question }: { question: Question }): JSX.Element { function DisplayCorrectAnswer({
// TODO: extract this reduces for the or, or different variations, used in VerbGame (etc.?) question,
return <div> }: {
<div> question: Question;
{question.answer.reduce(((accum, curr, i): JSX.Element[] => ( }): JSX.Element {
[ // TODO: extract this reduces for the or, or different variations, used in VerbGame (etc.?)
...accum, return (
...i > 0 ? [<span className="text-muted"> or </span>] : [], <div>
<span key={i}>{curr.p} - {curr.f}</span>, <div>
] {question.answer.reduce(
)), [] as JSX.Element[])} (accum, curr, i): JSX.Element[] => [
</div> ...accum,
</div>; ...(i > 0 ? [<span className="text-muted"> or </span>] : []),
<span key={i}>
{curr.p} - {curr.f}
</span>,
],
[] as JSX.Element[]
)}
</div>
</div>
);
} }
export default NPAdjWriting; export default NPAdjWriting;

6
src/games/sub-cores/PerfectGame.tsx
View File

@ -270,8 +270,8 @@ const VerbGame: GameSubCore<PerfectGameLevel> = ({
className="form-check-label text-muted" className="form-check-label text-muted"
htmlFor="baCheckbox" htmlFor="baCheckbox"
> >
with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs>{" "} with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in
in the <span style={{ color: kidsColor }}>kids' section</span> the <span style={{ color: kidsColor }}>kids' section</span>
</label> </label>
</div> </div>
)} )}
@ -352,7 +352,7 @@ function DisplayCorrectAnswer({
</div> </div>
<div> <div>
<strong>{verbHasBa(question.rendered) ? "with" : "without"}</strong> a{" "} <strong>{verbHasBa(question.rendered) ? "with" : "without"}</strong> a{" "}
<InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids' <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
section. section.
</div> </div>
</div> </div>

732
src/games/sub-cores/VerbFormulas.tsx
View File

@ -1,10 +1,10 @@
import GameCore from "../GameCore"; import GameCore from "../GameCore";
import { import {
humanReadableVerbForm, humanReadableVerbForm,
Types as T, Types as T,
InlinePs, InlinePs,
grammarUnits, grammarUnits,
defaultTextOptions as opts, defaultTextOptions as opts,
} from "@lingdocs/ps-react"; } from "@lingdocs/ps-react";
import { makePool } from "../../lib/pool"; import { makePool } from "../../lib/pool";
import { CSSProperties, useEffect, useState } from "react"; import { CSSProperties, useEffect, useState } from "react";
@ -14,347 +14,439 @@ import { isImperativeTense } from "@lingdocs/ps-react/dist/lib/src/type-predicat
const amount = 12; const amount = 12;
const timeLimit = 125; const timeLimit = 125;
type StemRoot = "imperfective stem" | "perfective stem" | "imperfective root" | "perfective root"; type StemRoot =
type Ending = "present" | "past" | "imperative"; | "imperfective stem"
| "perfective stem"
| "imperfective root"
| "perfective root";
type Ending = "present" | "past" | "imperative";
type Formula = { type Formula = {
ba: boolean, ba: boolean;
mu: boolean, mu: boolean;
stemRoot: StemRoot, stemRoot: StemRoot;
ending: Ending, ending: Ending;
}; };
type Question = { type Question = {
tense: T.VerbTense | T.ImperativeTense | "negative imperative", tense: T.VerbTense | T.ImperativeTense | "negative imperative";
formula: Formula, formula: Formula;
}
const questions: Question[] = [
{
tense: "presentVerb",
formula: {
ba: false,
mu: false,
stemRoot: "imperfective stem",
ending: "present",
},
},
{
tense: "subjunctiveVerb",
formula: {
ba: false,
mu: false,
stemRoot: "perfective stem",
ending: "present",
},
},
{
tense: "imperfectiveFuture",
formula: {
ba: true,
mu: false,
stemRoot: "imperfective stem",
ending: "present",
},
},
{
tense: "perfectiveFuture",
formula: {
ba: true,
mu: false,
stemRoot: "perfective stem",
ending: "present",
},
},
{
tense: "imperfectivePast",
formula: {
ba: false,
mu: false,
stemRoot: "imperfective root",
ending: "past",
},
},
{
tense: "perfectivePast",
formula: {
ba: false,
mu: false,
stemRoot: "perfective root",
ending: "past",
},
},
{
tense: "habitualImperfectivePast",
formula: {
ba: true,
mu: false,
stemRoot: "imperfective root",
ending: "past",
},
},
{
tense: "habitualPerfectivePast",
formula: {
ba: true,
mu: false,
stemRoot: "perfective root",
ending: "past",
},
},
{
tense: "perfectiveImperative",
formula: {
ba: false,
mu: false,
stemRoot: "perfective stem",
ending: "imperative",
},
},
{
tense: "imperfectiveImperative",
formula: {
ba: false,
mu: false,
stemRoot: "imperfective stem",
ending: "imperative",
},
},
{
tense: "negative imperative",
formula: {
ba: false,
mu: true,
stemRoot: "imperfective stem",
ending: "imperative",
},
}
];
export default function VerbFormulas({ inChapter, id, link, level }: { inChapter: boolean, id: string, link: string, level: "all" }) {
const questionsPool = makePool(questions);
function getQuestion() {
return questionsPool();
}
function Instructions() {
return <p className="lead">Pick the formula for each verb tense</p>;
}
return <GameCore
inChapter={inChapter}
studyLink={link}
getQuestion={getQuestion}
id={id}
Display={Display}
DisplayCorrectAnswer={DisplayCorrectAnswer}
timeLimit={timeLimit}
amount={amount}
Instructions={Instructions}
/>
}; };
const questions: Question[] = [
{
tense: "presentVerb",
formula: {
ba: false,
mu: false,
stemRoot: "imperfective stem",
ending: "present",
},
},
{
tense: "subjunctiveVerb",
formula: {
ba: false,
mu: false,
stemRoot: "perfective stem",
ending: "present",
},
},
{
tense: "imperfectiveFuture",
formula: {
ba: true,
mu: false,
stemRoot: "imperfective stem",
ending: "present",
},
},
{
tense: "perfectiveFuture",
formula: {
ba: true,
mu: false,
stemRoot: "perfective stem",
ending: "present",
},
},
{
tense: "imperfectivePast",
formula: {
ba: false,
mu: false,
stemRoot: "imperfective root",
ending: "past",
},
},
{
tense: "perfectivePast",
formula: {
ba: false,
mu: false,
stemRoot: "perfective root",
ending: "past",
},
},
{
tense: "habitualImperfectivePast",
formula: {
ba: true,
mu: false,
stemRoot: "imperfective root",
ending: "past",
},
},
{
tense: "habitualPerfectivePast",
formula: {
ba: true,
mu: false,
stemRoot: "perfective root",
ending: "past",
},
},
{
tense: "perfectiveImperative",
formula: {
ba: false,
mu: false,
stemRoot: "perfective stem",
ending: "imperative",
},
},
{
tense: "imperfectiveImperative",
formula: {
ba: false,
mu: false,
stemRoot: "imperfective stem",
ending: "imperative",
},
},
{
tense: "negative imperative",
formula: {
ba: false,
mu: true,
stemRoot: "imperfective stem",
ending: "imperative",
},
},
];
export default function VerbFormulas({
inChapter,
id,
link,
level,
}: {
inChapter: boolean;
id: string;
link: string;
level: "all";
}) {
const questionsPool = makePool(questions);
function getQuestion() {
return questionsPool();
}
function Instructions() {
return <p className="lead">Pick the formula for each verb tense</p>;
}
return (
<GameCore
inChapter={inChapter}
studyLink={link}
getQuestion={getQuestion}
id={id}
Display={Display}
DisplayCorrectAnswer={DisplayCorrectAnswer}
timeLimit={timeLimit}
amount={amount}
Instructions={Instructions}
/>
);
}
function Display({ question, callback }: QuestionDisplayProps<Question>) { function Display({ question, callback }: QuestionDisplayProps<Question>) {
const [ba, setBa] = useState<boolean>(false); const [ba, setBa] = useState<boolean>(false);
const [mu, setMu] = useState<boolean>(false); const [mu, setMu] = useState<boolean>(false);
const [stemRoot, setStemRoot] = useState<StemRoot | "">(""); const [stemRoot, setStemRoot] = useState<StemRoot | "">("");
const [ending, setEnding] = useState<Ending | "">(""); const [ending, setEnding] = useState<Ending | "">("");
useEffect(() => { useEffect(() => {
setBa(false); setBa(false);
setStemRoot(""); setStemRoot("");
setEnding(""); setEnding("");
setMu(false); setMu(false);
}, [question]); }, [question]);
const canSubmit = !!(stemRoot && ending); const canSubmit = !!(stemRoot && ending);
const showMu = question.tense === "negative imperative" || isImperativeTense(question.tense); const showMu =
function handleSubmit() { question.tense === "negative imperative" ||
const { formula } = question; isImperativeTense(question.tense);
callback( function handleSubmit() {
(ba === formula.ba) const { formula } = question;
&& callback(
(mu === formula.mu) ba === formula.ba &&
&& mu === formula.mu &&
(stemRoot === formula.stemRoot) stemRoot === formula.stemRoot &&
&& ending === formula.ending
(ending === formula.ending) );
); }
} return (
return <div> <div>
<div className="my-4" style={{ maxWidth: "300px", margin: "0 auto" }}> <div className="my-4" style={{ maxWidth: "300px", margin: "0 auto" }}>
<p className="lead"> <p className="lead">{humanReadableT(question.tense)}</p>
{humanReadableT(question.tense)} </div>
</p> <div className="text-center mb-2">
</div> <BaPicker value={ba} onChange={setBa} />
<div className="text-center mb-2"> {showMu && <MuPicker value={mu} onChange={setMu} />}
<BaPicker value={ba} onChange={setBa} /> <RootsAndStemsPicker value={stemRoot} onChange={setStemRoot} />
{showMu && <MuPicker value={mu} onChange={setMu} />} <EndingPicker value={ending} onChange={setEnding} />
<RootsAndStemsPicker value={stemRoot} onChange={setStemRoot} /> <button
<EndingPicker value={ending} onChange={setEnding} /> className="btn btn-primary my-2"
<button disabled={!canSubmit}
className="btn btn-primary my-2" onClick={canSubmit ? handleSubmit : undefined}
disabled={!canSubmit} >
onClick={canSubmit ? handleSubmit : undefined} Submit
> </button>
Submit </div>
</button> <samp>{printFormula({ ba, stemRoot, ending, mu })}</samp>
</div>
<samp>{printFormula({ ba, stemRoot, ending, mu })}</samp>
</div> </div>
);
} }
function humanReadableT(tense: T.VerbTense | T.ImperativeTense | "negative imperative"): string { function humanReadableT(
if (tense === "negative imperative") { tense: T.VerbTense | T.ImperativeTense | "negative imperative"
return tense; ): string {
} if (tense === "negative imperative") {
return humanReadableVerbForm(tense); return tense;
}
return humanReadableVerbForm(tense);
} }
function printFormula({ mu, ba, stemRoot, ending }: { function printFormula({
mu: boolean, mu,
ba: boolean, ba,
stemRoot: StemRoot | "", stemRoot,
ending: Ending | "", ending,
}: {
mu: boolean;
ba: boolean;
stemRoot: StemRoot | "";
ending: Ending | "";
}): string { }): string {
const elements = [ const elements = [
mu ? "mu" : undefined, mu ? "mu" : undefined,
ba ? "ba" : undefined, ba ? "ba" : undefined,
stemRoot, stemRoot,
ending ? `${ending} ending` : undefined, ending ? `${ending} ending` : undefined,
].filter(x => x) as string[]; ].filter((x) => x) as string[];
return elements.join(" + "); return elements.join(" + ");
} }
function DisplayCorrectAnswer({ question }: { question: Question }): JSX.Element { function DisplayCorrectAnswer({
return <div> question,
<samp>{printFormula(question.formula)}</samp> }: {
</div>; question: Question;
} }): JSX.Element {
return (
function EndingPicker({ onChange, value }: { value: Ending | "", onChange: (e: Ending | "") => void }) { <div>
const options: { label: string, value: Ending }[] = [ <samp>{printFormula(question.formula)}</samp>
{ label: "Present", value: "present" },
{ label: "Past", value: "past" },
{ label: "Imperative", value: "imperative" },
];
function handleClick(e: Ending) {
// onChange(ending === e ? "" : e);
onChange(e);
}
return <div className="my-3">
<span className="mr-2">Ending:</span>
<div className="btn-group">
{options.map((option) => (
<button
key={option.value}
type="button"
className={classNames(
"btn",
"btn-outline-secondary",
{ active: value === option.value },
)}
onClick={() => handleClick(option.value)}
>
{option.label}
</button>
))}
</div>
</div>;
}
function BaPicker({ onChange, value }: { value: boolean, onChange: (b: boolean) => void }) {
return <div className="form-check my-3" style={{ fontSize: "larger" }}>
<input
id="baCheckbox"
className="form-check-input"
type="checkbox"
checked={value}
onChange={e => onChange(e.target.checked)}
/>
<label className="form-check-label text-muted" htmlFor="baCheckbox">
with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids' section
</label>
</div> </div>
);
} }
function MuPicker({ onChange, value }: { value: boolean, onChange: (b: boolean) => void }) { function EndingPicker({
return <div className="form-check my-3" style={{ fontSize: "larger" }}> onChange,
<input value,
id="baCheckbox" }: {
className="form-check-input" value: Ending | "";
type="checkbox" onChange: (e: Ending | "") => void;
checked={value} }) {
onChange={e => onChange(e.target.checked)} const options: { label: string; value: Ending }[] = [
/> { label: "Present", value: "present" },
<label className="form-check-label text-muted" htmlFor="baCheckbox"> { label: "Past", value: "past" },
with <InlinePs opts={opts}>{{ p: "مه", f: "mú" }}</InlinePs> { label: "Imperative", value: "imperative" },
</label> ];
function handleClick(e: Ending) {
// onChange(ending === e ? "" : e);
onChange(e);
}
return (
<div className="my-3">
<span className="mr-2">Ending:</span>
<div className="btn-group">
{options.map((option) => (
<button
key={option.value}
type="button"
className={classNames("btn", "btn-outline-secondary", {
active: value === option.value,
})}
onClick={() => handleClick(option.value)}
>
{option.label}
</button>
))}
</div>
</div> </div>
);
} }
function RootsAndStemsPicker({ onChange, value }: { value: StemRoot | "", onChange: (s: StemRoot | "" ) => void }) { function BaPicker({
const colClass = "col col-md-5 px-0 mb-1"; onChange,
const rowClass = "row justify-content-between"; value,
const title: CSSProperties = { }: {
fontWeight: "bolder", value: boolean;
paddingBottom: "1.75rem", onChange: (b: boolean) => void;
paddingTop: "1.75rem", }) {
}; return (
const highlight = { <div className="form-check my-3" style={{ fontSize: "larger" }}>
background: "rgba(255, 227, 10, 0.6)", <input
}; id="baCheckbox"
function handleStemRootClick(s: StemRoot) { className="form-check-input"
onChange(value === s ? "" : s); type="checkbox"
} checked={value}
return <div className="verb-info" style={{ onChange={(e) => onChange(e.target.checked)}
/>
<label className="form-check-label text-muted" htmlFor="baCheckbox">
with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
section
</label>
</div>
);
}
function MuPicker({
onChange,
value,
}: {
value: boolean;
onChange: (b: boolean) => void;
}) {
return (
<div className="form-check my-3" style={{ fontSize: "larger" }}>
<input
id="baCheckbox"
className="form-check-input"
type="checkbox"
checked={value}
onChange={(e) => onChange(e.target.checked)}
/>
<label className="form-check-label text-muted" htmlFor="baCheckbox">
with <InlinePs opts={opts} ps={{ p: "مه", f: "mú" }} />
</label>
</div>
);
}
function RootsAndStemsPicker({
onChange,
value,
}: {
value: StemRoot | "";
onChange: (s: StemRoot | "") => void;
}) {
const colClass = "col col-md-5 px-0 mb-1";
const rowClass = "row justify-content-between";
const title: CSSProperties = {
fontWeight: "bolder",
paddingBottom: "1.75rem",
paddingTop: "1.75rem",
};
const highlight = {
background: "rgba(255, 227, 10, 0.6)",
};
function handleStemRootClick(s: StemRoot) {
onChange(value === s ? "" : s);
}
return (
<div
className="verb-info"
style={{
textAlign: "center", textAlign: "center",
maxWidth: "400px", maxWidth: "400px",
margin: "0 auto", margin: "0 auto",
// backgroundImage: `url(${fadedTree})`, // backgroundImage: `url(${fadedTree})`,
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
backgroundPosition: "50% 45%", backgroundPosition: "50% 45%",
backgroundSize: "50%", backgroundSize: "50%",
}}> }}
<div style={{ >
border: "2px solid black", <div
padding: "1rem", style={{
margin: "0.25rem", border: "2px solid black",
}} className="container"> padding: "1rem",
<div className={rowClass + " align-items-center"}> margin: "0.25rem",
<div className={colClass}> }}
<i className="fas fa-video fa-lg" /> className="container"
</div> >
<div className={colClass}> <div className={rowClass + " align-items-center"}>
<div className="d-flex flex-row justify-content-center align-items-center"> <div className={colClass}>
<div> <i className="fas fa-video fa-lg" />
<i className="fas fa-camera fa-lg mx-3" /> </div>
</div> <div className={colClass}>
</div> <div className="d-flex flex-row justify-content-center align-items-center">
</div> <div>
</div> <i className="fas fa-camera fa-lg mx-3" />
<div className={rowClass}> </div>
<div className={colClass} style={value === "imperfective stem" ? highlight : {}}>
<div className="clickable" style={title} onClick={() => handleStemRootClick("imperfective stem")}>
<div>Imperfective Stem</div>
</div>
</div>
<div className={colClass} style={value === "perfective stem" ? highlight : {}}>
<div className="clickable" style={title} onClick={() => handleStemRootClick("perfective stem")}>
<div>Perfective Stem</div>
</div>
</div>
</div>
<div className={rowClass}>
<div className={colClass} style={value === "imperfective root" ? highlight : {}}>
<div className="clickable" style={title} onClick={() => handleStemRootClick("imperfective root")}>
<div>Imperfective Root</div>
</div>
</div>
<div className={colClass} style={value === "perfective root" ? highlight : {}}>
<div>
<div className="clickable" style={title} onClick={() => handleStemRootClick("perfective root")}>
<div>Perfective Root</div>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>; <div className={rowClass}>
<div
className={colClass}
style={value === "imperfective stem" ? highlight : {}}
>
<div
className="clickable"
style={title}
onClick={() => handleStemRootClick("imperfective stem")}
>
<div>Imperfective Stem</div>
</div>
</div>
<div
className={colClass}
style={value === "perfective stem" ? highlight : {}}
>
<div
className="clickable"
style={title}
onClick={() => handleStemRootClick("perfective stem")}
>
<div>Perfective Stem</div>
</div>
</div>
</div>
<div className={rowClass}>
<div
className={colClass}
style={value === "imperfective root" ? highlight : {}}
>
<div
className="clickable"
style={title}
onClick={() => handleStemRootClick("imperfective root")}
>
<div>Imperfective Root</div>
</div>
</div>
<div
className={colClass}
style={value === "perfective root" ? highlight : {}}
>
<div>
<div
className="clickable"
style={title}
onClick={() => handleStemRootClick("perfective root")}
>
<div>Perfective Root</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
} }

6
src/games/sub-cores/VerbGame.tsx
View File

@ -276,8 +276,8 @@ const VerbGame: GameSubCore<VerbGameLevel> = ({
onChange={(e) => setWithBa(e.target.checked)} onChange={(e) => setWithBa(e.target.checked)}
/> />
<label className="form-check-label text-muted" htmlFor="baCheckbox"> <label className="form-check-label text-muted" htmlFor="baCheckbox">
with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the{" "}
the <span style={{ color: kidsColor }}>kids' section</span> <span style={{ color: kidsColor }}>kids' section</span>
</label> </label>
</div> </div>
<div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}> <div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
@ -400,7 +400,7 @@ function DisplayCorrectAnswer({
</div> </div>
<div> <div>
<strong>{verbHasBa(question.rendered) ? "with" : "without"}</strong> a{" "} <strong>{verbHasBa(question.rendered) ? "with" : "without"}</strong> a{" "}
<InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the kids' <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the kids'
section. section.
</div> </div>
</div> </div>

8
yarn.lock
View File

@ -1597,10 +1597,10 @@
rambda "^6.7.0" rambda "^6.7.0"
react-select "^5.2.2" react-select "^5.2.2"
"@lingdocs/ps-react@^7.7.3": "@lingdocs/ps-react@^7.7.4":
version "7.7.3" version "7.7.4"
resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-7.7.3.tgz#353b6ddabdfabb4eae45a1d8554adb360f7238fc" resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-7.7.4.tgz#6529c1728828cce6d9e550a0323463bd2ae55ffc"
integrity sha512-TSK5kgyCEHTmJRH+9XfchVPUVvsjOfsLlrZlW4PL95LhvBD1dh5CazZDQlPV99CLZGz3jVf9VKpiQP7RdGYTrg== integrity sha512-K7SnvOXITl3DCY9l4ifKKnjC6Uw3AwvjWlV87l+YtboCG7B277iYhdVrb8/6bxzUhGuSAtSGx982bN7gSuKIxA==
dependencies: dependencies:
"@formkit/auto-animate" "^1.0.0-beta.3" "@formkit/auto-animate" "^1.0.0-beta.3"
classnames "^2.5.1" classnames "^2.5.1"