pronoun picker with subjObj combos

src/components/np-picker/PronounPicker.tsx

@@ -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>

src/content/practice-tools/pronoun-picker.mdx

@@ -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);
+        if (mode === "single") {
-        setPronoun({
+            const person = randomPerson(subject.person);
-            ...pronoun,
+            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" }}>
+        <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>
         <button className="btn btn-lg btn-primary mt-2">
             <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">
     <RPicker />
 </div>
-
-<details className="mt-4">
-    <summary>Show Second Picker</summary>
-    <RPicker />
-</details>

src/lib/np-tools.ts

@@ -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;