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."],
[{ masc: "He/It", fem: "She/It"}, "They"],
],
eObject: [
["I", "Us"],
["You", "You pl."],
[{ masc: "Him/It", fem: "Her/It"}, "Them"],
],
p: {
far: [
["زه", "مونږ"],
@ -50,7 +55,11 @@ function pickerStateToPerson(s: PickerState): T.Person {
+ (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 p = personToPickerState(pronoun.person);
@ -87,7 +96,7 @@ function PronounPicker({ onChange, pronoun }: { pronoun: Pronoun, onChange: (p:
: "persons";
setDisplay(newPerson);
}
const prs = labels[display];
const prs = labels[(display === "e" && isObject) ? "eObject" : display];
const pSpec = "near" in prs ? prs[pronoun.pronounType] : prs;
return <div>
<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}
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>
<table className="table table-bordered" style={{ textAlign: "center", minWidth: "200px", tableLayout: "fixed" }}>
<tbody>

View File

@ -6,24 +6,72 @@ import PronounPicker from "../../components/np-picker/PronounPicker";
import {
defaultTextOptions as opts,
InlinePs,
ButtonSelect,
} from "@lingdocs/pashto-inflector";
import { useState } from "react";
import {
randomPerson,
randomSubjObj,
} from "../../lib/np-tools";
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() {
const person = randomPerson(pronoun.person);
setPronoun({
...pronoun,
if (mode === "single") {
const person = randomPerson(subject.person);
setSubject(s => ({
...s,
person,
});
}));
} else {
setRandomSubjObj();
}
}
function handleModeChange(m) {
if (m === "subjObj") {
setRandomSubjObj();
}
setMode(m);
}
return <div className="text-center">
<div className="my-4" style={{ maxWidth: "375px", margin: "0 auto" }}>
<PronounPicker pronoun={pronoun} onChange={setPronoun} />
<div className="mb-4">
<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>
<button className="btn btn-lg btn-primary mt-2">
<i class="fas fa-random" onClick={handleRandom} />
@ -34,10 +82,5 @@ export function RPicker() {
Use this pronoun picker to help you drill different sentences. Choose different pronouns to drill a friend, or press the <i class="fas fa-random"></i> button to get a random selection.
<div className="mt-4">
<RPicker />
</div>
<details className="mt-4">
<summary>Show Second Picker</summary>
<RPicker />
</details>
</div>

View File

@ -11,14 +11,44 @@ import {
psStringFromEntry,
} from "./text-tools";
function getRandPers(): T.Person {
return Math.floor(Math.random() * 12);
}
export function randomPerson(p?: T.Person) {
let newP = 0;
do {
newP = Math.floor(Math.random() * 12);
newP = getRandPers();
} while (newP === p);
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 {
if (np.type === "participle") {
return T.Person.ThirdPlurMale;