more

src/components/phrase-builder/PhraseBuilder.tsx

@@ -98,7 +98,10 @@ export function PhraseBuilder() {
             <div>{servantEmoji} = <abbr title="can be shrunken into a mini-pronoun">servant</abbr> of phrase</div>
         </div>
         {verb && (typeof verb.object === "object") && <div className="d-flex flex-row justify-content-around flex-wrap mb-2">
-            <button onClick={handleSubjObjSwap} className="btn btn-sm btn-light">swap subj/obj</button>
+            <button onClick={handleSubjObjSwap} className="btn btn-sm btn-light">
+                <i className="fas fa-exchange-alt mr-2" /> subj/obj
+            </button>
+            <div>{` `}</div>
         </div>}
         <div className="d-flex flex-row justify-content-around flex-wrap">
             <div className="mb-2">

src/components/phrase-builder/VPDisplay.tsx

@@ -3,40 +3,44 @@ import { renderVP, compileVP } from "../../lib/phrase-building";
 import {
     InlinePs,
     defaultTextOptions as opts,
-    ButtonSelect,
     Types as T,
 } from "@lingdocs/pashto-inflector";
+import classNames from "classnames";
 
-function adjustForm(form: FormVersion, servantShrinkable: boolean): FormVersion {
-    if (!servantShrinkable) {
-        return form === "shortest"
-            ? "no king"
-            : form === "mini servant"
-            ? "full"
-            : form;
-    }
-    return form;
+function buttonClass(active: boolean, side: "l" | "r") {
+    return classNames(
+        "btn btn-sm btn-outline-secondary",
+        { active },
+        { "mr-1": side === "l" },
+        { "ml-1": side === "r" },
+    );
 }
 
 function VPDisplay({ VP }: { VP: VPSelection }) {
-    const [form, setForm] = useState<FormVersion>("full");
+    const [form, setForm] = useState<FormVersion>({ removeKing: false, shrinkServant: false });
     // TODO: Possibly put the servant shrinking in here after the render
     const result = compileVP(renderVP(VP), form);
     const servantShrinkable = VP.object && VP.object !== "none";
+    const toggleForm = (f: "removeKing" | "shrinkServant") => () => {
+        setForm(oForm => ({
+            ...oForm,
+            [f]: !oForm[f],
+        }));
+    }
     return <div className="text-center mt-2">
         <div className="my-3">
-            <ButtonSelect
-                small
-                options={[
-                    { value: "full", label: "Full" },
-                    { value: "no king", label: "No King" },
-                    ...servantShrinkable ? [{ value: "mini servant", label: "Mini Servant" }] : [],
-                    ...servantShrinkable ? [{ value: "shortest", label: "Shortest" }] : [],
-                ]}
-                value={adjustForm(form, servantShrinkable)}
-                // @ts-ignore
-                handleChange={setForm}
-            />
+            <button
+                onClick={toggleForm("removeKing")}
+                className={buttonClass(form.removeKing, "l")}
+            >
+                🚫 King
+            </button>
+            {servantShrinkable && <button
+                onClick={toggleForm("shrinkServant")}
+                className={buttonClass(form.shrinkServant, "r")}
+            >
+                👶 Servant
+            </button>}
         </div>
         {"long" in result.ps ?
             <div>

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

@@ -67,9 +67,8 @@ function shrinkEntitiesAndGatherKids(VP: VPRendered, form: FormVersion): { kids:
         subject: VP.subject.ps,
         object: typeof VP.object === "object" ? VP.object.ps : undefined,
     }
-    const removeKing = form === "no king" || form === "shortest";
-    const shrinkServant = form === "mini servant" || form === "shortest";
-    const shrinkCanditate = ((form === "mini servant" || form === "shortest") && VP.servant)
+    const { removeKing, shrinkServant } = form;
+    const shrinkCanditate = (shrinkServant && VP.servant)
         ? VP[VP.servant]
         : undefined;
     const toShrink = (!shrinkCanditate || typeof shrinkCanditate !== "object")

src/types/gen-g.d.ts

@@ -97,7 +97,7 @@ type ParticipleSelection = {
 // If T has key K ("user"), replace it
 type ReplaceKey<T, K extends string, R> = T extends Record<K, unknown> ? (Omit<T, K> & Record<K, R>) : T;
 
-type FormVersion = "full" | "no king" | "mini servant" | "shortest"; // TODO: "all";
+type FormVersion = { removeKing: boolean, shrinkServant: boolean };
 
 type Rendered<T extends NPSelection> = ReplaceKey<
     Omit<T, "changeGender" | "changeNumber" | "changeDistance">,