bug fixes and better disploy

package.json

@@ -12,6 +12,7 @@
     "@types/cron": "^1.7.3",
     "@types/react-router-dom": "^5.3.1",
     "bootstrap": "4.5.3",
+    "classnames": "^2.3.1",
     "cron": "^1.8.2",
     "markdown-to-jsx": "^7.1.3",
     "react": "^17.0.2",

src/components/VerbPicker.tsx

@@ -79,7 +79,7 @@ function VerbPicker({ onChange, verb, verbs }: { verbs: VerbEntry[], verb: VerbS
             });
         }
     }
-    return <div style={{ maxWidth: "225px", minWidth: "10px" }}>
+    return <div style={{ maxWidth: "225px", minWidth: "150px" }}>
         <div>Verb:</div>
         <Select
             value={verb && verb.verb.entry.ts.toString()}

src/components/np-picker/NPPicker.tsx

@@ -34,7 +34,7 @@ function NPPicker({ np, onChange, counterPart }: { onChange: (nps: NPSelection |
             setNpType(ntp);
         }
     }
-    return <div style={{ maxWidth: "300px"}}>
+    return <div>
         {!npType ? <div className="text-center mt-3">
             {npTypes.map((npt) => <div className="mb-2">
                 <button

src/components/np-picker/NPPronounPicker.tsx

@@ -3,6 +3,7 @@ import {
     ButtonSelect,
 } from "@lingdocs/pashto-inflector";
 import useStickyState from "../../useStickyState";
+import classNames from "classnames";
 
 const gColors = {
     masc: "LightSkyBlue",
@@ -84,7 +85,7 @@ function NPPronounPicker({ onChange, pronoun }: { pronoun: PronounSelection, onC
     }
     const prs = labels[display];
     const pSpec = "near" in prs ? prs[pronoun.distance] : prs;
-    return <div style={{ maxWidth: "225px" }}>
+    return <div style={{ maxWidth: "225px", padding: 0 }}>
         <div className="d-flex flex-row justify-content-around mb-3">
             <ButtonSelect
                 xSmall
@@ -97,7 +98,7 @@ function NPPronounPicker({ onChange, pronoun }: { pronoun: PronounSelection, onC
             />
             <button className="btn btn-sm btn-outline" onClick={handleDisplayChange}>{display === "persons" ? "#" : display === "p" ? "PS" : "EN"}</button>
         </div>
-        <table className="table table-bordered" style={{ textAlign: "center", minWidth: "200px", tableLayout: "fixed" }}>
+        <table className="table table-bordered table-sm" style={{ textAlign: "center", minWidth: "200px", tableLayout: "fixed" }}>
             <tbody>
                 {pSpec.map((rw, i) => (
                     <tr>
@@ -105,10 +106,12 @@ function NPPronounPicker({ onChange, pronoun }: { pronoun: PronounSelection, onC
                             const active = (p.row === i && p.col === j)
                             return <td
                                 onClick={() => handleClick(i, j)}
-                                className={active ? "table-active" : ""}
+                                className={classNames({ "table-active": active })}
                                 style={active ? { backgroundColor: gColors[p.gender] } : {}}
                             >
+                                <div className="my-1">
                                     {typeof r === "string" ? r : r[p.gender]}
+                                </div>
                             </td>;
                         })}
                     </tr>
@@ -117,9 +120,10 @@ function NPPronounPicker({ onChange, pronoun }: { pronoun: PronounSelection, onC
         </table>
         <div className="text-center">
             <ButtonSelect
+                small
                 options={[
-                    { label: "Masc.", value: "masc", color: gColors.masc },
+                    { label: <div style={{ margin: "0.15rem"}}>Masc.</div>, value: "masc", color: gColors.masc },
-                    { label: "Fem.", value: "fem", color: gColors.fem },
+                    { label: <div style={{ margin: "0.15rem"}}>Fem.</div>, value: "fem", color: gColors.fem },
                 ]}
                 value={p.gender}
                 handleChange={(g) => handleGenderChange(g as T.Gender)}

src/components/phrase-builder/PhraseBuilder.tsx

@@ -4,6 +4,7 @@ import VerbPicker from "../VerbPicker";
 import VPDisplay from "./VPDisplay";
 import ObjectDisplay from "./ObjectDisplay";
 import { verbs as verbsRaw } from "../../words/words";
+import { renderVP } from "../../lib/phrase-building";
 import {
     isInvalidSubjObjCombo,
 } from "../../lib/np-tools";
@@ -24,6 +25,7 @@ function verbPhraseComplete({ subject, verb }: { subject: NPSelection | undefine
 
 // TODO: BIG ISSUE, IF YOU OPEN THE OBJECT PRONOUN BOX AND IT CONFLICTS WITH THE SUBJECT
 // IT CAN SAY THE COMBO IS NOT ALLOWED AND SHOW SOMETHING BLANK
+// TODO: error handling on error with rendering etc
 export function PhraseBuilder() {
     const [subject, setSubject] = useState<NPSelection | undefined>(undefined);
     const [verb, setVerb] = useState<VerbSelection | undefined>(undefined);
@@ -60,21 +62,22 @@ export function PhraseBuilder() {
         });
     }
     const verbPhrase: VPSelection | undefined = verbPhraseComplete({ subject, verb });
+    const VPRendered = verbPhrase && renderVP(verbPhrase);
     return <div className="mt-3">
-        <div className="row">
+        <div className="d-flex flex-row justify-content-around flex-wrap">
-            <div className="col mb-2">
+            <div className="mb-2">
-                <div className="h4">Subject</div>
+                <div className="h4">Subject {(VPRendered && VPRendered.king === "subject") ? "👑" : ""}</div>
                 <NPPicker
                     np={subject}
                     counterPart={verb ? verb.object : undefined}
                     onChange={handleSubjectChange}
                 />
             </div>
-            {verb && (verb.object !== "none") && <div className="col mb-2">
+            {verb && (verb.object !== "none") && <div className="mb-2">
-                <div className="h4">Object</div>
+                <div className="h4">Object {(VPRendered && VPRendered.king === "object") ? "👑" : ""}</div>
                 <ObjectDisplay object={verb.object} counterPart={subject} onChange={handleObjectChange} />
             </div>}
-            <div className="col mb-2">
+            <div className="mb-2">
                 <div className="h4">Verb</div>
                 <VerbPicker verbs={verbs} verb={verb} onChange={setVerb} />
             </div>

src/lib/phrase-building/compile-vp.ts

@@ -5,7 +5,8 @@ import {
     grammarUnits,
     getVerbBlockPosFromPerson,
 } from "@lingdocs/pashto-inflector";
-import { hasBaParticle, psRemove } from "@lingdocs/pashto-inflector/dist/lib/p-text-helpers";
+import { hasBaParticle } from "@lingdocs/pashto-inflector/dist/lib/p-text-helpers";
+import { removeBa } from "./vp-tools";
 
 type ListOfEntities = (T.PsString & { isVerbPrefix?: boolean, prefixFollowedByParticle?: boolean })[][];
 
@@ -134,7 +135,7 @@ function compileVerbWNegative(head: T.PsString | undefined, restRaw: T.PsString[
 } {
     const hasBa = hasBaParticle(restRaw[0]);
     const rest = hasBa
-        ? restRaw.map(ps => psRemove(ps, concatPsString(grammarUnits.baParticle, " ")))
+        ? restRaw.map(removeBa)
         : restRaw;
     if (!negative) {
         return {

src/lib/phrase-building/render-vp.ts

@@ -15,10 +15,12 @@ import {
     getLong,
 } from "../text-tools";
 import {
-    getPersonFromNP,
+    getPersonFromNP, removeBa,
 } from "./vp-tools";
 import { isPattern4Entry } from "../type-predicates";
 
+// TODO: ISSUE GETTING SPLIT HEAD NOT MATCHING WITH FUTURE VERBS
+
 export function renderVP(VP: VPSelection): VPRendered {
     // Sentence Rules Logic
     const isPast = isPastTense(VP.verb.tense);
@@ -249,8 +251,9 @@ function removeHead(head: T.PsString, rest: T.SingleOrLengthOpts<T.PsString[]>):
             } : {},
         }
     }
-    return rest.map((ps) => {
+    return rest.map((psRaw) => {
-        const pMatches = removeAccents(ps.p.slice(0, head.p.length)) === removeAccents(head.p);
+        const ps = removeBa(psRaw);
+        const pMatches = removeAccents(ps.p.slice(0, head.p.length)) === head.p
         const fMatches = removeAccents(ps.f.slice(0, head.f.length)) === removeAccents(head.f);
         if (!(pMatches && fMatches)) {
             throw new Error(`split head does not match - ${JSON.stringify(ps)} ${JSON.stringify(head)}`);

src/lib/phrase-building/vp-tools.ts

@@ -1,6 +1,9 @@
 import {
     Types as T,
+    concatPsString,
+    grammarUnits,
 } from "@lingdocs/pashto-inflector";
+import { psRemove } from "@lingdocs/pashto-inflector/dist/lib/p-text-helpers";
 
 export function getPersonFromNP(np: NPSelection): T.Person;
 export function getPersonFromNP(np: NPSelection | ObjectNP): T.Person | undefined;
@@ -19,3 +22,7 @@ export function getPersonFromNP(np: NPSelection | ObjectNP): T.Person | undefine
         ? (np.gender === "masc" ? T.Person.ThirdPlurMale : T.Person.ThirdPlurFemale)
         : (np.gender === "masc" ? T.Person.ThirdSingMale : T.Person.ThirdSingFemale);
 }
+
+export function removeBa(ps: T.PsString): T.PsString {
+    return psRemove(ps, concatPsString(grammarUnits.baParticle, " "));
+}