lingdocs
/
pashto-grammar
mirror of https://github.com/lingdocs/pashto-grammar.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

more

This commit is contained in:
adueck 2023-07-11 15:31:29 +04:00
parent 1063d49812
commit 8e2beb0f3e
3 changed files with 284 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/content/verbs/SwitchPlayground.tsx
View File

@ -1,85 +0,0 @@
import { useState } from "react";
import { tenseData } from "./tense-data";
import Media from "react-media";
function SwitchPlayground() {
const [state, setState] = useState<[boolean, boolean, boolean]>([false, false, false]);
const makeToggle = (i: 0|1|2) => () => setState(os => {
const ns = [...os] as [boolean, boolean, boolean];
ns[i] = !ns[i];
return ns;
});
const [form] = tenseData.find(([t, ...switches]) => {
return JSON.stringify(state) === JSON.stringify(switches);
}) as ["string"];
return <div className="text-center mb-4">
<div className="row text-center mb-3" style={{ maxWidth: "600px", margin: "0 auto"}}>
<div className="col">
<Switch
state={state[0]}
toggle={makeToggle(0)}
label={["no ba", "with ba"]}
/>
</div>
<div className="col">
<Switch
state={state[1]}
toggle={makeToggle(1)}
label={["imperfective", "perfective"]}
/>
</div>
<div className="col">
<Switch
state={state[2]}
toggle={makeToggle(2)}
label={["stem", "root"]}
/>
</div>
</div>
<h5>{form}</h5>
</div>;
}
function Switch({ state, toggle, label }: { label: [string, string], state: boolean, toggle: () => void }) {
const borderRadius = "8px";
const border = "solid 2px black";
return <div>
<div>{label[0]}</div>
<Media queries={{
small: "(max-width: 599px)",
}}>
{matches => (
<div className="clickable" onClick={toggle} style={{
border,
height: matches.small ? "6rem" : "9rem",
borderRadius,
position: "relative",
}}>
<div style={{
border,
borderRadius,
height: "50%",
width: "33%",
top: "50%",
transform: "translateY(-50%) translateX(105%)",
position: "absolute",
}}>
<div
style={{
border,
borderRadius,
width: "50%",
top: state ? "75%" : "25%",
transform: "translateY(-50%) translateX(55%)",
position: "absolute",
}}
/>
</div>
</div>
)}
</Media>
<div>{label[1]}</div>
</div>
}
export default SwitchPlayground;

197
src/content/verbs/VerbFormsTruthTable.tsx Normal file
View File

@ -0,0 +1,197 @@
import { useState } from "react";
import { tenseData } from "./tense-data";
import Media from "react-media";
import { Camera, Video } from "../../components/terms-links";
import classNames from "classnames";
type State = [boolean, boolean, boolean];
function VerbFormsTruthTable() {
const [state, setState] = useState<State>([false, false, false]);
const [hitSwitch, setHitSwitch] = useState<boolean>(false);
const [form] = tenseData.find(([t, ...switches]) => {
return JSON.stringify(state) === JSON.stringify(switches);
}) as ["string"];
return (
<div className="mb-4">
<div style={{ overflowX: "auto", marginBottom: "1em" }}>
<table
className="table table-bordered table-striped"
style={{ minWidth: "425px" }}
>
<thead>
<tr>
<th>form</th>
<th scope="col">Has 'ba'</th>
<th scope="col">Imperfective / Perfective</th>
<th scope="col">Stem / Root</th>
</tr>
</thead>
<tbody>
{tenseData.map((t) => (
<tr
className={classNames({
"table-primary": hitSwitch && form === t[0],
})}
>
<td>{t[0]}</td>
<td>{t[1] ? "yes" : "no"}</td>
<td>
{t[2] ? (
<div>
<Video />
{` `}imperfective
</div>
) : (
<div>
<Camera />
{` `}perfective
</div>
)}
</td>
<td>{t[3] ? "root" : "stem"}</td>
</tr>
))}
</tbody>
</table>
</div>
<p>Hit the switches to try the combinations yourself!</p>
<SwitchBar
onHitSwitch={() => {
if (!hitSwitch) setHitSwitch(true);
}}
state={state}
setState={setState}
/>
<div className="text-center">
<h5 className="text-center">{form}</h5>
<StateInFormula state={state} />
</div>
</div>
);
}
function StateInFormula({
state: [hasBa, perfective, root],
}: {
state: State;
}) {
return (
<samp className="my-2">
{`${hasBa ? "ba + " : ""}${perfective ? "" : "im"}perfective ${
root ? "root" : "stem"
} + ${root ? "past" : "present"} ending`}
</samp>
);
}
function SwitchBar({
state,
setState,
onHitSwitch,
}: {
state: State;
setState: React.Dispatch<React.SetStateAction<State>>;
onHitSwitch: () => void;
}) {
const makeToggle = (i: 0 | 1 | 2) => () => {
onHitSwitch();
setState((os) => {
const ns = [...os] as [boolean, boolean, boolean];
ns[i] = !ns[i];
return ns;
});
};
return (
<div className="text-center mb-4">
<div
className="row text-center mb-3"
style={{ maxWidth: "600px", margin: "0 auto" }}
>
<div className="col">
<Switch
state={state[0]}
toggle={makeToggle(0)}
label={["no ba", "with ba"]}
/>
</div>
<div className="col">
<Switch
state={state[1]}
toggle={makeToggle(1)}
label={["imperfective", "perfective"]}
/>
</div>
<div className="col">
<Switch
state={state[2]}
toggle={makeToggle(2)}
label={["stem", "root"]}
/>
</div>
</div>
</div>
);
}
function Switch({
state,
toggle,
label,
}: {
label: [string, string];
state: boolean;
toggle: () => void;
}) {
const borderRadius = "8px";
const border = "solid 2px black";
return (
<div>
<div>{label[0]}</div>
<Media
queries={{
small: "(max-width: 599px)",
}}
>
{(matches) => (
<div
className="clickable"
onClick={toggle}
style={{
border,
height: matches.small ? "6rem" : "9rem",
borderRadius,
position: "relative",
}}
>
<div
style={{
border,
borderRadius,
height: "50%",
width: "33%",
top: "50%",
transform: "translateY(-50%) translateX(105%)",
position: "absolute",
}}
>
<div
style={{
border,
borderRadius,
width: "50%",
top: state ? "75%" : "25%",
transform: "translateY(-50%) translateX(55%)",
position: "absolute",
}}
/>
</div>
</div>
)}
</Media>
<div>{label[1]}</div>
</div>
);
}
export default VerbFormsTruthTable;

195
src/content/verbs/master-chart.mdx
View File

@ -2,82 +2,82 @@
title: Verb Forms Master Chart title: Verb Forms Master Chart
--- ---
import { import { defaultTextOptions as opts, InlinePs } from "@lingdocs/ps-react";
defaultTextOptions as opts,
InlinePs,
} from "@lingdocs/ps-react";
import { Camera, Video } from "../../components/terms-links"; import { Camera, Video } from "../../components/terms-links";
import Link from "../../components/Link"; import Link from "../../components/Link";
import Image from "../../components/Image"; import Image from "../../components/Image";
import switches from "./switches.jpg"; import switches from "./switches.jpg";
import { tenseData } from "./tense-data"; import VerbFormsTruthTable from "./VerbFormsTruthTable";
import SwitchPlayground from "./SwitchPlayground";
## Basic Verb Forms ## Basic Verb Forms
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th scope="col"><Video /> Imperfective</th> <th scope="col">
<th scope="col"><Camera /> Perfective</th> <Video /> Imperfective
</th>
<th scope="col">
<Camera /> Perfective
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<div>Present</div> <div>Present</div>
<div> <div>
<samp>imperfective stem + present ending</samp> <samp>imperfective stem + present ending</samp>
</div> </div>
</td> </td>
<td> <td>
<div>Subjunctive</div> <div>Subjunctive</div>
<div> <div>
<samp>perfective stem + present ending</samp> <samp>perfective stem + present ending</samp>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<div>Imperfective Future</div> <div>Imperfective Future</div>
<div> <div>
<samp>ba + Present</samp> <samp>ba + Present</samp>
</div> </div>
</td> </td>
<td> <td>
<div>Perfective Future</div> <div>Perfective Future</div>
<div> <div>
<samp>ba + Subjunctive</samp> <samp>ba + Subjunctive</samp>
</div> </div>
</td> </td>
</tr> </tr>
<tr className="table-active"> <tr className="table-active">
<td> <td>
<div>Continuous Past</div> <div>Continuous Past</div>
<div> <div>
<samp>imperfective root + past ending</samp> <samp>imperfective root + past ending</samp>
</div> </div>
</td> </td>
<td> <td>
<div>Simple Past</div> <div>Simple Past</div>
<div> <div>
<samp>perfective root + past ending</samp> <samp>perfective root + past ending</samp>
</div> </div>
</td> </td>
</tr> </tr>
<tr className="table-active"> <tr className="table-active">
<td> <td>
<div>Habitual Continuous Past</div> <div>Habitual Continuous Past</div>
<div> <div>
<samp>ba + Continuous Past</samp> <samp>ba + Continuous Past</samp>
</div> </div>
</td> </td>
<td> <td>
<div>Habitual Simple Past</div> <div>Habitual Simple Past</div>
<div> <div>
<samp>ba + Simple Past</samp> <samp>ba + Simple Past</samp>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -95,74 +95,53 @@ There's another way to look at the possible verb forms. Whenever we make a verb
We can use **any possible** combination of these 3 choices, giving us: We can use **any possible** combination of these 3 choices, giving us:
<p className="text-center"> <p className="text-center">
<samp>2 x 2 x 2 = 8 verb forms</samp> <samp>2 x 2 x 2 = 8 verb forms</samp>
</p> </p>
Here's a chart of every possible combination of these choices, giving us all the basic verb forms: Here's a chart of every possible combination of these choices, giving us all the basic verb forms:
<div style={{ overflowX: "auto", marginBottom: "1em" }}> <VerbFormsTruthTable />
<table class="table table-bordered table-striped" style={{ minWidth: "425px" }}>
<thead>
<tr>
<th>form</th>
<th scope="col">Has 'ba'</th>
<th scope="col">Imperfective / Perfective</th>
<th scope="col">Stem / Root</th>
</tr>
</thead>
<tbody>
{tenseData.map((t) => (
<tr>
<td>{t[0]}</td>
<td>{t[1] ? "yes" : "no"}</td>
<td>{t[2] ? <div><Video />{` `}imperfective</div> : <div><Camera />{` `}perfective</div>}</td>
<td>{t[3] ? "root" : "stem"}</td>
</tr>
))}
</tbody>
</table>
</div>
Hit the switches to try the combinations yourself!
<SwitchPlayground />
## Imperative Forms ## Imperative Forms
Imperative forms are slightly different... Imperative forms are different and use the <Link to="/verbs/verb-endings/#imperative-verb-endings">imperative endings</Link>
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th scope="col"><Video /> Imperfective</th> <th scope="col">
<th scope="col"><Camera /> Perfective</th> <Video /> Imperfective
</th>
<th scope="col">
<Camera /> Perfective
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Pos.</td> <td>Pos.</td>
<td> <td>
<div>Imperfective Imperative</div> <div>Imperfective Imperative</div>
<div> <div>
<samp>imperfective stem + imperative ending</samp> <samp>imperfective stem + imperative ending</samp>
</div> </div>
</td> </td>
<td> <td>
<div>Perfective Imperative</div> <div>Perfective Imperative</div>
<div> <div>
<samp>perfective stem + imperative ending</samp> <samp>perfective stem + imperative ending</samp>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Neg.</td> <td>Neg.</td>
<td colspan="2" className="text-center"> <td colspan="2" className="text-center">
<div>Negative Imperative</div> <div>Negative Imperative</div>
<div> <div>
<samp>مه - mú + imperfective stem + imperative ending</samp> <samp>مه - mú + imperfective stem + imperative ending</samp>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -172,7 +151,7 @@ Imperative forms are slightly different...
Perfect verb forms are built with: Perfect verb forms are built with:
<div className="my-3"> <div className="my-3">
<samp>past participle + equative</samp> <samp>past participle + equative</samp>
</div> </div>
Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equatives</Link> may be used to form 8 different <Link to="/verbs/all-perfect-verbs/">perfect froms</Link>. Equative may be left out with the present perfect form. Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equatives</Link> may be used to form 8 different <Link to="/verbs/all-perfect-verbs/">perfect froms</Link>. Equative may be left out with the present perfect form.