more
This commit is contained in:
adueck
parent
1063d49812
commit
8e2beb0f3e
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -2,24 +2,24 @@
|
||||||
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>
|
||||||
|
|
@ -100,43 +100,22 @@ We can use **any possible** combination of these 3 choices, giving us:
|
||||||
|
|
||||||
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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue