added verb basic quiz feature

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/App.tsx

@@ -33,6 +33,7 @@ const verbTypes: VerbType[] = [
     "stative compound",
     "dynamic compound",
 ];
+
 const nouns = nounsAdjs.filter(isNounEntry);
 
 const transitivities: T.Transitivity[] = [

src/components/np-picker/NPPicker.tsx

@@ -18,6 +18,7 @@ function NPPicker(props: {
     counterPart: T.NPSelection | T.VerbObject | undefined,
     asObject?: boolean,
     opts: T.TextOptions,
+    cantClear?: boolean,
 } & ({
     nouns: (s: string) => T.NounEntry[],
     verbs: (s: string) => T.VerbEntry[],
@@ -52,7 +53,9 @@ function NPPicker(props: {
         }
     }
     const isDynamicComplement = props.np && props.np.type === "noun" && props.np.dynamicComplement;
-    const clearButton = <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>X</button>;
+    const clearButton = !props.cantClear
+        ? <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>X</button>
+        : <div></div>;
     return <div>
         {!npType && <div className="text-center mt-3">
             {/* <div className="h6 mr-3">

src/components/vp-explorer/TensePicker.tsx

@@ -58,7 +58,7 @@ const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense
 function TensePicker({ onChange, verb, mode }: {
     verb: T.VerbSelection | undefined,
     onChange: (p: T.VerbSelection | undefined) => void,
-    mode: "charts" | "phrases",
+    mode: "charts" | "phrases" | "quiz",
 }) {
     function onTenseSelect(o: { value: T.VerbTense | T.PerfectTense } | null) {
         const value = o?.value ? o.value : undefined; 

src/components/vp-explorer/VPDisplay.tsx

@@ -1,13 +1,13 @@
-import { useState } from "react";
 import { renderVP, compileVP } from "../../lib/phrase-building/index";
 import * as T from "../../types";
 import InlinePs from "../InlinePs";
 import AbbreviationFormSelector from "./AbbreviationFormSelector";
 import { isPastTense } from "../../lib/phrase-building/vp-tools";
+import { useStickyState } from "../../library";
 
 function VPDisplay({ VP, opts }: { VP: T.VPSelection, opts: T.TextOptions }) {
-    const [form, setForm] = useState<T.FormVersion>({ removeKing: false, shrinkServant: false });
+    const [form, setForm] = useStickyState<T.FormVersion>({ removeKing: false, shrinkServant: false }, "abbreviationForm");
-    const [OSV, setOSV] = useState<boolean>(false);
+    const [OSV, setOSV] = useStickyState<boolean>(false, "includeOSV");
     const result = compileVP(renderVP(VP), { ...form, OSV });
     return <div className="text-center mt-2">
         {VP.verb.transitivity === "transitive" && <div className="form-check mb-2">

src/components/vp-explorer/VPExplorer.tsx

@@ -11,7 +11,8 @@ import * as T from "../../types";
 import ChartDisplay from "./ChartDisplay";
 import useStickyState from "../../lib/useStickyState";
 import { makeVerbSelection } from "./verb-selection";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { randomSubjObj } from "../../library";
 
 const kingEmoji = "👑";
 const servantEmoji = "🙇‍♂️";
@@ -41,7 +42,8 @@ export function VPExplorer(props: {
     getVerbByTs: (ts: number) => T.VerbEntry | undefined,
 })) {
     const [subject, setSubject] = useStickyState<T.NPSelection | undefined>(undefined, "subjectNPSelection");
-    const [mode, setMode] = useStickyState<"charts" | "phrases">("phrases", "verbExplorerMode");
+    const [mode, setMode] = useStickyState<"charts" | "phrases" | "quiz">("phrases", "verbExplorerMode");
+    const [showAnswer, setShowAnswer] = useState<boolean>(false);
     const passedVerb = props.verb;
     const [verb, setVerb] = useStickyState<T.VerbSelection | undefined>(
         passedVerb
@@ -57,6 +59,28 @@ export function VPExplorer(props: {
         }
         // eslint-disable-next-line
     }, [passedVerb]);
+    function handleChangeMode(m: "charts" | "phrases" | "quiz") {
+        if (m === "quiz") {
+            handleResetQuiz();
+        }
+        setMode(m);
+    }
+    function handleSetVerb(v: T.VerbSelection | undefined) {
+        if (v?.verb.entry.ts !== verb?.verb.entry.ts) {
+            handleResetQuiz();
+        }
+        setVerb(v);
+    }
+    function handleResetQuiz() {
+        if (!verb) {
+            alert("Choose a verb to quiz");
+            return;
+        }
+        const { S, V } = setRandomQuizState(subject, verb);
+        setShowAnswer(false);
+        setSubject(S);
+        setVerb(V);
+    }
     function handleSubjectChange(subject: T.NPSelection | undefined, skipPronounConflictCheck?: boolean) {
         if (!skipPronounConflictCheck && hasPronounConflict(subject, verb?.object)) {
             alert("That combination of pronouns is not allowed");
@@ -94,17 +118,18 @@ export function VPExplorer(props: {
             verb={verb}
             subject={subject}
             changeSubject={(s) => handleSubjectChange(s, true)}
-            onChange={setVerb}
+            onChange={handleSetVerb}
             opts={props.opts}
         />
-        <div className="mt-2 mb-3">
+        <div className="mt-2 mb-3 text-center">
             <ButtonSelect
                 value={mode}
                 options={[
                     { label: "Charts", value: "charts" },
                     { label: "Phrases", value: "phrases" },
+                    { label: "Quiz", value: "quiz" },
                 ]}
-                handleChange={setMode}
+                handleChange={handleChangeMode}
             />
         </div>
         {(verb && (typeof verb.object === "object") && (verb.isCompound !== "dynamic") && (mode !== "charts")) &&
@@ -131,6 +156,7 @@ export function VPExplorer(props: {
                         counterPart={verb ? verb.object : undefined}
                         onChange={handleSubjectChange}
                         opts={props.opts}
+                        cantClear={mode === "quiz"}
                     />
                 </div>
                 {verb && (verb.object !== "none") && <div className="my-2">
@@ -152,21 +178,32 @@ export function VPExplorer(props: {
                             counterPart={subject}
                             onChange={handleObjectChange}
                             opts={props.opts}
+                            cantClear={mode === "quiz"}
                         />}
                 </div>}
             </>}
             <div className="my-2">
                 <TensePicker
                     verb={verb}
-                    onChange={setVerb}
+                    onChange={handleSetVerb}
                     mode={mode}
                 />
             </div>
         </div>
-        {(verbPhrase && (mode === "phrases")) &&
+        {(verb && (mode === "quiz")) && <div className="text-center my-2">
+            <button
+                className="btn btn-primary"
+                onClick={showAnswer ? handleResetQuiz : () => setShowAnswer(true)}
+            >
+                {showAnswer
+                    ? <>Next <i className="ml-1 fas fa-random"/></>
+                    : <>Show Answer</>}
+            </button>
+        </div>}
+        {(verbPhrase && ((mode === "phrases") || (mode === "quiz" && showAnswer))) &&
             <VPDisplay VP={verbPhrase} opts={props.opts} />
         }
-        {(verb && (mode === "charts")) && <ChartDisplay VS={verb} opts={props.opts} />} 
+        {(verb && (mode === "charts")) && <ChartDisplay VS={verb} opts={props.opts} />}
     </div>
 }
 
@@ -211,4 +248,45 @@ function switchSubjObj({ subject, verb }: SOClump): SOClump {
             object: subject,
         }
     };
+}
+
+function setRandomQuizState(subject: T.NPSelection | undefined, verb: T.VerbSelection): {
+    S: T.NPSelection,
+    V: T.VerbSelection,
+} {
+    const oldSubj = (subject?.type === "pronoun")
+        ? subject.person
+        : undefined;
+    const oldObj = (typeof verb?.object === "object" && verb.object.type === "pronoun")
+        ? verb.object.person
+        : undefined;
+    const { subj, obj } = randomSubjObj(
+        oldSubj !== undefined ? { subj: oldSubj, obj: oldObj } : undefined
+    );
+    const randSubj: T.PronounSelection = subject?.type === "pronoun" ? {
+        ...subject,
+        person: subj,
+    } : {
+        type: "pronoun",
+        distance: "far",
+        person: subj,
+    };
+    const randObj: T.PronounSelection = typeof verb?.object === "object" && verb.object.type === "pronoun" ? {
+        ...verb.object,
+        person: obj,
+    } : {
+        type: "pronoun",
+        distance: "far",
+        person: obj,
+    };
+    return {
+        // TODO: Randomize the near/far ??
+        S: randSubj,
+        V: {
+            ...verb,
+            object: (typeof verb.object === "object" || verb.object === undefined)
+                ? randObj
+                : verb.object,
+        },
+    }
 }

src/lib/dictionary-models.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 'use strict'; // code generated by pbf v3.2.1
 
 // DictionaryInfo ========================================

src/lib/np-tools.ts

@@ -50,7 +50,7 @@ export function isInvalidSubjObjCombo(subj: T.Person, obj: T.Person): boolean {
     );
 }
 
-export function randomSubjObj(old?: { subj: T.Person, obj: T.Person }): { subj: T.Person, obj: T.Person } {
+export function randomSubjObj(old?: { subj: T.Person, obj?: T.Person }): { subj: T.Person, obj: T.Person } {
     let subj = 0;
     let obj = 0;
     do {

src/lib/useStickyState.ts

@@ -8,12 +8,9 @@ import { useEffect, useState } from "react";
  * @param key a key for saving the state in locolStorage
  * @returns 
  */
-export default function useStickyState<T extends string | object | boolean | undefined | null>(
+export default function useStickyState<T extends string | object | boolean | undefined | null>(defaultValue: T | ((old: T | undefined) => T), key: string): [
-  defaultValue: T | ((old: T | undefined) => T),
+  value: T,
-  key: string
+  setValue: React.Dispatch<React.SetStateAction<T>>,
-): [
-    value: T,
-    setValue: React.Dispatch<React.SetStateAction<T>>,
 ] {
   const [value, setValue] = useState<T>(() => {
     const v = window.localStorage.getItem(key);
@@ -30,7 +27,7 @@ export default function useStickyState<T extends string | object | boolean | und
       if (typeof defaultValue === "function") {
         return defaultValue(old);
       }
-      return defaultValue;
+      return old;
     } catch (e) {
       console.error("error parsting saved state from stickState");
       return (typeof defaultValue === "function")