pronoun picker with subjObj combos

This commit is contained in:
lingdocs 2022-03-02 16:41:47 +04:00
parent 28b4426e8c
commit fa01305393
3 changed files with 100 additions and 18 deletions

View File

@ -20,6 +20,11 @@ const labels = {
["You", "You pl."], ["You", "You pl."],
[{ masc: "He/It", fem: "She/It"}, "They"], [{ masc: "He/It", fem: "She/It"}, "They"],
], ],
eObject: [
["I", "Us"],
["You", "You pl."],
[{ masc: "Him/It", fem: "Her/It"}, "Them"],
],
p: { p: {
far: [ far: [
["زه", "مونږ"], ["زه", "مونږ"],
@ -50,7 +55,11 @@ function pickerStateToPerson(s: PickerState): T.Person {
+ (6 * s.col); + (6 * s.col);
} }
function PronounPicker({ onChange, pronoun }: { pronoun: Pronoun, onChange: (p: Pronoun) => void }) { function PronounPicker({ onChange, pronoun, isObject }: {
pronoun: Pronoun,
onChange: (p: Pronoun) => void,
isObject?: boolean,
}) {
const [display, setDisplay] = useStickyState<"persons" | "p" | "e">("persons", "prounoun-picker-display"); const [display, setDisplay] = useStickyState<"persons" | "p" | "e">("persons", "prounoun-picker-display");
const p = personToPickerState(pronoun.person); const p = personToPickerState(pronoun.person);
@ -87,7 +96,7 @@ function PronounPicker({ onChange, pronoun }: { pronoun: Pronoun, onChange: (p:
: "persons"; : "persons";
setDisplay(newPerson); setDisplay(newPerson);
} }
const prs = labels[display]; const prs = labels[(display === "e" && isObject) ? "eObject" : display];
const pSpec = "near" in prs ? prs[pronoun.pronounType] : prs; const pSpec = "near" in prs ? prs[pronoun.pronounType] : prs;
return <div> return <div>
<div className="d-flex flex-row justify-content-around mb-3"> <div className="d-flex flex-row justify-content-around mb-3">
@ -100,7 +109,7 @@ function PronounPicker({ onChange, pronoun }: { pronoun: Pronoun, onChange: (p:
value={pronoun.pronounType} value={pronoun.pronounType}
handleChange={(g) => handlePronounTypeChange(g as "far" | "near")} handleChange={(g) => handlePronounTypeChange(g as "far" | "near")}
/> />
<button className="btn btn-sm btn-outline" onClick={handleDisplayChange}>{display === "persons" ? "#" : display === "p" ? "PS" : "EN"}</button> <button className="btn btn-sm btn-outline-secondary" onClick={handleDisplayChange}>{display === "persons" ? "#" : display === "p" ? "PS" : "EN"}</button>
</div> </div>
<table className="table table-bordered" style={{ textAlign: "center", minWidth: "200px", tableLayout: "fixed" }}> <table className="table table-bordered" style={{ textAlign: "center", minWidth: "200px", tableLayout: "fixed" }}>
<tbody> <tbody>

View File

@ -6,24 +6,72 @@ import PronounPicker from "../../components/np-picker/PronounPicker";
import { import {
defaultTextOptions as opts, defaultTextOptions as opts,
InlinePs, InlinePs,
ButtonSelect,
} from "@lingdocs/pashto-inflector"; } from "@lingdocs/pashto-inflector";
import { useState } from "react"; import { useState } from "react";
import { import {
randomPerson, randomPerson,
randomSubjObj,
} from "../../lib/np-tools"; } from "../../lib/np-tools";
export function RPicker() { export function RPicker() {
const [pronoun, setPronoun] = useState({ type: "pronoun", pronounType: "far", person: randomPerson() }); const startSubjObj = randomSubjObj();
const [subject, setSubject] = useState({ type: "pronoun", pronounType: "far", person: startSubjObj.subj });
const [object, setObject] = useState({ type: "pronoun", pronounType: "far", person: startSubjObj.obj });
const [mode, setMode] = useState("single");
function setRandomSubjObj() {
const { subj, obj } = randomSubjObj();
setSubject(s => ({
...s,
person: subj,
}));
setObject(s => ({
...s,
person: obj,
}));
}
function handleRandom() { function handleRandom() {
const person = randomPerson(pronoun.person); if (mode === "single") {
setPronoun({ const person = randomPerson(subject.person);
...pronoun, setSubject(s => ({
...s,
person, person,
}); }));
} else {
setRandomSubjObj();
}
}
function handleModeChange(m) {
if (m === "subjObj") {
setRandomSubjObj();
}
setMode(m);
} }
return <div className="text-center"> return <div className="text-center">
<div className="my-4" style={{ maxWidth: "375px", margin: "0 auto" }}> <div className="mb-4">
<PronounPicker pronoun={pronoun} onChange={setPronoun} /> <ButtonSelect
options={[{
label: "Single",
value: "single"
}, {
label: "Subj. / Obj.",
value: "subjObj",
}]}
value={mode}
handleChange={handleModeChange}
/>
</div>
<div className="row">
<div className="col my-2" style={{ maxWidth: "375px", margin: "0 auto" }}>
{mode === "subjObj" && <h5>Subject</h5>}
<PronounPicker pronoun={subject} onChange={setSubject} />
</div>
{mode === "subjObj" &&
<div className="col my-2" style={{ maxWidth: "375px", margin: "0 auto" }}>
<h5>Object</h5>
<PronounPicker pronoun={object} onChange={setObject} isObject />
</div>
}
</div> </div>
<button className="btn btn-lg btn-primary mt-2"> <button className="btn btn-lg btn-primary mt-2">
<i class="fas fa-random" onClick={handleRandom} /> <i class="fas fa-random" onClick={handleRandom} />
@ -36,8 +84,3 @@ Use this pronoun picker to help you drill different sentences. Choose different
<div className="mt-4"> <div className="mt-4">
<RPicker /> <RPicker />
</div> </div>
<details className="mt-4">
<summary>Show Second Picker</summary>
<RPicker />
</details>

View File

@ -11,14 +11,44 @@ import {
psStringFromEntry, psStringFromEntry,
} from "./text-tools"; } from "./text-tools";
function getRandPers(): T.Person {
return Math.floor(Math.random() * 12);
}
export function randomPerson(p?: T.Person) { export function randomPerson(p?: T.Person) {
let newP = 0; let newP = 0;
do { do {
newP = Math.floor(Math.random() * 12); newP = getRandPers();
} while (newP === p); } while (newP === p);
return newP; return newP;
} }
function isInvalidSubjObjCombo(subj: T.Person, obj: T.Person): boolean {
// subject is first person
if ([0, 1, 6, 7].includes(subj)) {
return [0, 1, 6, 7].includes(obj);
}
// subject is second person
if ([2, 3, 8, 9].includes(subj)) {
return [2, 3, 8, 9].includes(obj);
}
return false;
}
export function randomSubjObj(old?: { subj: T.Person, obj: T.Person }): { subj: T.Person, obj: T.Person } {
let subj = 0;
let obj = 0;
do {
subj = getRandPers();
obj = getRandPers();
} while (
(old && ((old.subj === subj) || (old.obj === obj)))
||
isInvalidSubjObjCombo(subj, obj)
);
return { subj, obj };
}
export function personFromNP(np: NounPhrase): T.Person { export function personFromNP(np: NounPhrase): T.Person {
if (np.type === "participle") { if (np.type === "participle") {
return T.Person.ThirdPlurMale; return T.Person.ThirdPlurMale;