fix build
This commit is contained in:
adueck
parent
a254592fd1
commit
35f29e8048
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
})}
|
})}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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} />,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -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 {
|
||||||
|
EPS,
|
||||||
|
phrase,
|
||||||
|
equative: getEqFromRendered(EP),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function Display({ question, callback }: QuestionDisplayProps<Question>) {
|
function Display({ question, callback }: QuestionDisplayProps<Question>) {
|
||||||
const [answer, setAnswer] = useState<string>("");
|
const [answer, setAnswer] = useState<string>("");
|
||||||
const [withBa, setWithBa] = useState<boolean>(false);
|
const [withBa, setWithBa] = useState<boolean>(false);
|
||||||
const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
|
const handleInput = ({
|
||||||
setAnswer(value);
|
target: { value },
|
||||||
}
|
}: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
setAnswer(value);
|
||||||
e.preventDefault();
|
};
|
||||||
const correct = comparePs(answer, question.equative.ps)
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
&& (withBa === question.equative.hasBa);
|
e.preventDefault();
|
||||||
if (correct) {
|
const correct =
|
||||||
setAnswer("");
|
comparePs(answer, question.equative.ps) &&
|
||||||
}
|
withBa === question.equative.hasBa;
|
||||||
callback(correct);
|
if (correct) {
|
||||||
}
|
setAnswer("");
|
||||||
useEffect(() => {
|
}
|
||||||
if (level === "allTenses") setWithBa(false);
|
callback(correct);
|
||||||
}, [question]);
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
if (level === "allTenses") setWithBa(false);
|
||||||
|
}, [question]);
|
||||||
|
|
||||||
return <div>
|
return (
|
||||||
<div className="mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
|
<div>
|
||||||
<Examples lineHeight={1} opts={opts}>
|
<div className="mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
|
||||||
{/* @ts-ignore TODO: REMOVE AS P_INFLE */}
|
<Examples lineHeight={1} opts={opts}>
|
||||||
{modExs(question.phrase.ps, withBa)[0]}
|
{/* @ts-ignore TODO: REMOVE AS P_INFLE */}
|
||||||
</Examples>
|
{modExs(question.phrase.ps, withBa)[0]}
|
||||||
{question.phrase.e && question.phrase.e.map((e, i) => (
|
</Examples>
|
||||||
<div key={e+i} className="text-muted">{e}</div>
|
{question.phrase.e &&
|
||||||
))}
|
question.phrase.e.map((e, i) => (
|
||||||
<div>{humanReadableTense(question.EPS.equative.tense)} equative</div>
|
<div key={e + i} className="text-muted">
|
||||||
</div>
|
{e}
|
||||||
<form onSubmit={handleSubmit}>
|
</div>
|
||||||
<div className="form-check mt-1">
|
))}
|
||||||
<input
|
<div>{humanReadableTense(question.EPS.equative.tense)} equative</div>
|
||||||
id="baCheckbox"
|
</div>
|
||||||
className="form-check-input"
|
<form onSubmit={handleSubmit}>
|
||||||
type="checkbox"
|
<div className="form-check mt-1">
|
||||||
checked={withBa}
|
<input
|
||||||
onChange={e => setWithBa(e.target.checked)}
|
id="baCheckbox"
|
||||||
/>
|
className="form-check-input"
|
||||||
<label className="form-check-label text-muted" htmlFor="baCheckbox">
|
type="checkbox"
|
||||||
with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the <span style={{ color: kidsColor }}>kids' section</span>
|
checked={withBa}
|
||||||
</label>
|
onChange={(e) => setWithBa(e.target.checked)}
|
||||||
</div>
|
/>
|
||||||
<div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
|
<label className="form-check-label text-muted" htmlFor="baCheckbox">
|
||||||
<input
|
with <InlinePs opts={opts} ps={grammarUnits.baParticle} /> in the{" "}
|
||||||
type="text"
|
<span style={{ color: kidsColor }}>kids' section</span>
|
||||||
className="form-control"
|
</label>
|
||||||
autoComplete="off"
|
</div>
|
||||||
autoCapitalize="off"
|
<div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
|
||||||
spellCheck="false"
|
<input
|
||||||
dir="auto"
|
type="text"
|
||||||
value={answer}
|
className="form-control"
|
||||||
onChange={handleInput}
|
autoComplete="off"
|
||||||
/>
|
autoCapitalize="off"
|
||||||
</div>
|
spellCheck="false"
|
||||||
<div className="text-center my-2">
|
dir="auto"
|
||||||
{/* <div> */}
|
value={answer}
|
||||||
<button className="btn btn-primary" type="submit">submit ↵</button>
|
onChange={handleInput}
|
||||||
{/* </div> */}
|
/>
|
||||||
{/* <div className="text-muted small text-center mt-2">
|
</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() {
|
function Instructions() {
|
||||||
return <div>
|
return (
|
||||||
<p className="lead">
|
<div>
|
||||||
Fill in the blank with the correct {level === "allTenses" ? "" : humanReadableTense(level)} equative
|
<p className="lead">
|
||||||
</p>
|
Fill in the blank with the correct{" "}
|
||||||
{level === "allTenses" && <div>⚠ All tenses included...</div>}
|
{level === "allTenses" ? "" : humanReadableTense(level)} equative
|
||||||
</div>;
|
</p>
|
||||||
}
|
{level === "allTenses" && <div>⚠ All tenses included...</div>}
|
||||||
|
</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}
|
||||||
timeLimit={level === "allTenses" ? timeLimit * 1.3 : timeLimit}
|
DisplayCorrectAnswer={DisplayCorrectAnswer}
|
||||||
amount={amount}
|
timeLimit={level === "allTenses" ? timeLimit * 1.3 : timeLimit}
|
||||||
Instructions={Instructions}
|
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;
|
||||||
}
|
}
|
||||||
|
|
@ -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>) {
|
function Display({ question, callback }: QuestionDisplayProps<Question>) {
|
||||||
const [answer, setAnswer] = useState<string>("");
|
const [answer, setAnswer] = useState<string>("");
|
||||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const correct = comparePs(answer, question.answer);
|
const correct = comparePs(answer, question.answer);
|
||||||
if (correct) {
|
if (correct) {
|
||||||
setAnswer("");
|
setAnswer("");
|
||||||
}
|
}
|
||||||
callback(correct);
|
callback(correct);
|
||||||
}
|
};
|
||||||
if (!(
|
if (
|
||||||
(question.selection.type === "AP" && question.selection.selection.type === "sandwich" && question.selection.selection.inside.selection.type === "noun")
|
!(
|
||||||
||
|
(question.selection.type === "AP" &&
|
||||||
(question.selection.type === "NP" && question.selection.selection.type === "noun")
|
question.selection.selection.type === "sandwich" &&
|
||||||
)) {
|
question.selection.selection.inside.selection.type === "noun") ||
|
||||||
throw new Error("QUESTION ERROR - BAD SELECTION")
|
(question.selection.type === "NP" &&
|
||||||
}
|
question.selection.selection.type === "noun")
|
||||||
const nounSelection: T.NounSelection = question.selection.type === "AP"
|
)
|
||||||
? question.selection.selection.inside.selection as T.NounSelection // ts being dumb
|
) {
|
||||||
: question.selection.selection;
|
throw new Error("QUESTION ERROR - BAD SELECTION");
|
||||||
const adjEntry: T.AdjectiveEntry | undefined = nounSelection.adjectives[0]?.entry;
|
}
|
||||||
if (!adjEntry) {
|
const nounSelection: T.NounSelection =
|
||||||
throw new Error("QUESTION ERROR - MISSING ADJECTIVE");
|
question.selection.type === "AP"
|
||||||
}
|
? (question.selection.selection.inside.selection as T.NounSelection) // ts being dumb
|
||||||
const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
|
: question.selection.selection;
|
||||||
setAnswer(value);
|
const adjEntry: T.AdjectiveEntry | undefined =
|
||||||
}
|
nounSelection.adjectives[0]?.entry;
|
||||||
const sandwich = question.selection.type === "AP"
|
if (!adjEntry) {
|
||||||
? question.selection.selection
|
throw new Error("QUESTION ERROR - MISSING ADJECTIVE");
|
||||||
: undefined;
|
}
|
||||||
return <div>
|
const handleInput = ({
|
||||||
<div className="my-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
|
target: { value },
|
||||||
<div className="d-flex flex-row justify-content-center" style={{ gap: "1rem"}}>
|
}: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
<WordCard
|
setAnswer(value);
|
||||||
showHint={level === "hints"}
|
};
|
||||||
entry={adjEntry}
|
const sandwich =
|
||||||
selection={undefined}
|
question.selection.type === "AP"
|
||||||
/>
|
? question.selection.selection
|
||||||
<WordCard
|
: undefined;
|
||||||
showHint={level === "hints"}
|
return (
|
||||||
entry={nounSelection.entry}
|
<div>
|
||||||
selection={nounSelection}
|
<div className="my-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
|
||||||
/>
|
<div
|
||||||
</div>
|
className="d-flex flex-row justify-content-center"
|
||||||
{sandwich && <div className="mt-2">
|
style={{ gap: "1rem" }}
|
||||||
<InlinePs opts={opts}>
|
>
|
||||||
{concatPsString(sandwich.before, " ... ", sandwich.after)}
|
<WordCard
|
||||||
</InlinePs>
|
showHint={level === "hints"}
|
||||||
</div>}
|
entry={adjEntry}
|
||||||
<div className="my-3 h5">
|
selection={undefined}
|
||||||
{question.english}
|
/>
|
||||||
</div>
|
<WordCard
|
||||||
<form onSubmit={handleSubmit}>
|
showHint={level === "hints"}
|
||||||
<div className="mt-2 mb-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
|
entry={nounSelection.entry}
|
||||||
<input
|
selection={nounSelection}
|
||||||
type="text"
|
/>
|
||||||
className="form-control"
|
</div>
|
||||||
autoComplete="off"
|
{sandwich && (
|
||||||
autoCapitalize="off"
|
<div className="mt-2">
|
||||||
spellCheck="false"
|
<InlinePs
|
||||||
dir="auto"
|
opts={opts}
|
||||||
value={answer}
|
ps={concatPsString(sandwich.before, " ... ", sandwich.after)}
|
||||||
onChange={handleInput}
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="text-center my-3">
|
|
||||||
<button className="btn btn-primary" type="submit">submit ↵</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</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>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function Instructions() {
|
function Instructions() {
|
||||||
return <div>
|
return (
|
||||||
<p className="lead">Write the {level === "sandwiches" ? "sandwich including the" : ""} adjective and noun together with the proper inflections.</p>
|
<div>
|
||||||
</div>
|
<p className="lead">
|
||||||
}
|
Write the {level === "sandwiches" ? "sandwich including the" : ""}{" "}
|
||||||
|
adjective and noun together with the proper inflections.
|
||||||
|
</p>
|
||||||
|
</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}
|
||||||
timeLimit={timeLimit}
|
DisplayCorrectAnswer={DisplayCorrectAnswer}
|
||||||
amount={amount}
|
timeLimit={timeLimit}
|
||||||
Instructions={Instructions}
|
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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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,295 +14,355 @@ 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 =
|
||||||
|
| "imperfective stem"
|
||||||
|
| "perfective stem"
|
||||||
|
| "imperfective root"
|
||||||
|
| "perfective root";
|
||||||
type Ending = "present" | "past" | "imperative";
|
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",
|
||||||
|
|
@ -310,51 +370,83 @@ function RootsAndStemsPicker({ onChange, value }: { value: StemRoot | "", onChan
|
||||||
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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue