grammatically transitive working

src/components/Chapter.js

@@ -36,7 +36,7 @@ const Chapter = ({ children: chapter }) => {
       </div>
       <Footer chapter={chapter} />
     </main>
-    <TableOfContents tableOfContents={chapter.tableOfContents} />
+    {!chapter.frontMatter.fullWidth && <TableOfContents tableOfContents={chapter.tableOfContents} />}
   </>;
 };
 

src/components/VerbPicker.tsx

@@ -34,14 +34,14 @@ function makeVerbSelection(verb: VerbEntry, oldVerbSelection?: VerbSelection): V
         return oldVerbSelection.object;
     }
     // TODO: more complex types and unchangeable dynamic compound objects
-    const verbType: "intrans" | "trans" | "gramm trans" = verb.entry.c?.includes("v. intrans.")
+    const transitivity: "intransitive" | "transitive" | "grammaticallyTransitive" = verb.entry.c?.includes("v. intrans.")
-        ? "intrans"
+        ? "intransitive"
         : verb.entry.c?.includes("v. gramm. trans.")
-        ? "gramm trans"
+        ? "grammaticallyTransitive"
-        : "trans";
+        : "transitive";
-    const object = verbType === "gramm trans"
+    const object = (transitivity === "grammaticallyTransitive")
         ? T.Person.ThirdPlurMale
-        : verbType === "trans"
+        : transitivity === "transitive"
         ? getTransObjFromOldVerbSelection()
         : "none";
     return {
@@ -49,7 +49,17 @@ function makeVerbSelection(verb: VerbEntry, oldVerbSelection?: VerbSelection): V
         verb,
         tense: oldVerbSelection ? oldVerbSelection.tense : "present",
         object,
+        transitivity,
         negative: oldVerbSelection ? oldVerbSelection.negative : false,
+        ...verb.entry.c?.includes("v. trans./gramm. trans") ? {
+            changeTransitivity: function (t) {
+                return {
+                    ...this,
+                    transitivity: t,
+                    object: t === "grammaticallyTransitive" ? T.Person.ThirdPlurMale : undefined,
+                };
+            },
+        } : {},
     };
 }
 
@@ -79,6 +89,14 @@ function VerbPicker({ onChange, verb, verbs }: { verbs: VerbEntry[], verb: VerbS
             });
         }
     }
+    function notInstransitive(t: "transitive" | "intransitive" | "grammaticallyTransitive"): "transitive" | "grammaticallyTransitive" {
+        return t === "intransitive" ? "transitive" : t;
+    }
+    function handleChangeTransitivity(t: "transitive" | "grammaticallyTransitive") {
+        if (verb && verb.changeTransitivity) {
+            onChange(verb.changeTransitivity(t));
+        }
+    } 
     return <div style={{ maxWidth: "225px", minWidth: "125px" }}>
         <div>Verb:</div>
         <Select
@@ -118,6 +136,20 @@ function VerbPicker({ onChange, verb, verbs }: { verbs: VerbEntry[], verb: VerbS
                 handleChange={onPosNegSelect}
             />
         </div>}
+        {verb && verb.changeTransitivity && <div className="text-center">
+            <ButtonSelect
+                small
+                options={[{
+                    label: "gramm. trans.",
+                    value: "grammaticallyTransitive",
+                }, {
+                    label: "trans.",
+                    value: "transitive",
+                }]}
+                value={notInstransitive(verb.transitivity)}
+                handleChange={handleChangeTransitivity}
+            />
+        </div>}
     </div>;
 }
 

src/components/phrase-builder/ObjectDisplay.tsx

@@ -1,9 +1,15 @@
 import NPPicker from "../np-picker/NPPicker";
 
-function ObjectDisplay({ object, onChange, counterPart }: { object: Exclude<VerbObject, "none">, onChange: (o: NPSelection | undefined) => void, counterPart: NPSelection | undefined }) {
+function ObjectDisplay({ object, onChange, counterPart }: {
-    return (typeof object === "number")
+    object: Exclude<VerbObject, "none">,
+    onChange: (o: NPSelection | undefined) => void,
+    counterPart: NPSelection | undefined },
+) {
+    return <div>
+        {(typeof object === "number")
             ? <div className="text-muted">Unspoken 3rd Pers. Masc. Plur.</div>
-        : <NPPicker asObject np={object} counterPart={counterPart} onChange={onChange} />;
+            : <NPPicker asObject np={object} counterPart={counterPart} onChange={onChange} />}
+    </div>;
 }
 
 export default ObjectDisplay;

src/components/phrase-builder/PhraseBuilder.tsx

@@ -92,7 +92,7 @@ export function PhraseBuilder() {
     }
     const verbPhrase: VPSelection | undefined = verbPhraseComplete({ subject, verb });
     const VPRendered = verbPhrase && renderVP(verbPhrase);
-    return <div className="mt-3">
+    return <div className="mt-3" style={{ maxWidth: "950px"}}>
         <div className="mb-3">
             <div>{kingEmoji} = <abbr title="controls the verb conjugation, can be removed">king</abbr> of phrase</div>
             <div>{servantEmoji} = <abbr title="can be shrunken into a mini-pronoun">servant</abbr> of phrase</div>

src/content/practice-tools/phrase-builder.mdx

@@ -1,5 +1,6 @@
 ---
 title: Phrase Builder
+fullWidth: true
 ---
 
 import PhraseBuilder from "../../components/phrase-builder/PhraseBuilder";

src/types/gen-g.d.ts

@@ -32,6 +32,8 @@ type VerbSelection = {
     verb: VerbEntry,
     tense: VerbTense,
     object: VerbObject,
+    transitivity: "transitive" | "intransitive" | "grammaticallyTransitive",
+    changeTransitivity?: (t: "transitive" | "grammaticallyTransitive") => VerbSelection,
     // TODO: add in perfective element here??
     negative: boolean,
 };
@@ -54,7 +56,7 @@ type VerbObject =
     NPSelection |
     // grammatically transitive verb with unspoken 3rd pers masc plur entity
     // or intransitive "none"
-    ObjectNP
+    ObjectNP;
 
 type NPSelection = NounSelection | PronounSelection | ParticipleSelection;