add verb switches analogy

src/content/verbs/SwitchPlayground.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { tenseData } from "./tense-data";
+
+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>
+    <div className="clickable" onClick={toggle} style={{
+      border,
+      height: "8rem",
+      borderRadius,
+      position: "relative",
+    }}>
+      <div style={{
+        border,
+        borderRadius,
+        height: "50%",
+        width: "25%",
+        top: "50%",
+        transform: "translateY(-50%) translateX(150%)",
+        position: "absolute",
+      }}>
+        <div
+          style={{
+            border,
+            borderRadius,
+            width: "50%",
+            top: state ? "75%" : "25%",
+            transform: "translateY(-50%) translateX(55%)",
+            position: "absolute",
+          }}
+        />
+      </div>
+    </div>
+    <div>{label[1]}</div>
+  </div>
+}
+      
+export default SwitchPlayground;

src/content/verbs/master-chart.mdx

@@ -2,11 +2,18 @@
 title: Verb Forms Master Chart
 ---
 
+import {
+    defaultTextOptions as opts,
+    InlinePs,
+} from "@lingdocs/ps-react";
 import { Camera, Video } from "../../components/terms-links";
 import Link from "../../components/Link";
-import GameDisplay from "../../games/GameDisplay";
+import Image from "../../components/Image";
+import switches from "./switches.jpg";
+import { tenseData } from "./tense-data";
+import SwitchPlayground from "./SwitchPlayground";
 
-## Basic Verb Tenses
+## Basic Verb Forms
 
 <table class="table table-bordered">
   <thead>
@@ -75,51 +82,50 @@ import GameDisplay from "../../games/GameDisplay";
   </tbody>
 </table>
 
-<details>
+### Verb formulas as three choices:
-    <summary>simplified</summary>
 
-<table class="table table-bordered">
+There's another way to look at the possible verb forms. Whenever we make a verb form we have three choices:
-  <thead>
+
-    <tr>
+1. root (past) or stem (non-past)
-      <th scope="col">For each aspect</th>
+2. imperfective or perfective form
-    </tr>
+3. with <InlinePs opts={opts} ps={{ p: "به", f: "ba" }} /> or without
-  </thead>
+
-  <tbody>
+<Image src={switches} />
-    <tr>
+
-        <td>
+We can use **any possible** combination of these 3 choices, giving us:
-            <div>Present/Subjunctive</div>
+
-            <div>
+<p className="text-center">
-                <samp>stem + present ending</samp>
+    <samp>2 x 2 x 2 = 8 verb forms</samp>
-            </div>
+</p>
-        </td>
+
-    </tr>
+Here's a chart of every possible combination of these choices, giving us all the basic verb forms:
-    <tr>
+
-        <td>
+<div style={{ overflowX: "auto", marginBottom: "1em" }}>
-            <div>Future</div>
+    <table class="table table-bordered table-striped" style={{ minWidth: "500px" }}>
-            <div>
+    <thead>
-                <samp>ba + above</samp>
+        <tr>
-            </div>
+        <th>form</th>
-        </td>
+        <th scope="col">has 'ba'</th>
-    </tr>
+        <th scope="col">Imperfective / Perfective</th>
-    <tr className="table-active">
+        <th scope="col">Stem / Root</th>
-        <td>
+        </tr>
-            <div>Past</div>
+    </thead>
-            <div>
+    <tbody>
-                <samp>root + past ending</samp>
+        {tenseData.map((t) => (
-            </div>
+            <tr>
-        </td>
+                <td>{t[0]}</td>
-    </tr>
+                <td>{t[1] ? "Y" : "N"}</td>
-    <tr className="table-active">
+                <td>{t[2] ? "Imperfective" : "Perfective"}</td>
-        <td>
+                <td>{t[3] ? "Stem" : "Root"}</td>
-            <div>Habitual Past</div>
+            </tr>
-            <div>
+        ))}
-                <samp>ba + above</samp>
+    </tbody>
-            </div>
+    </table>
-        </td>
+</div>
-    </tr>
+
-  </tbody>
+Try the combinations yourself!
-</table>
+
-</details>
+<SwitchPlayground />
 
 ## Imperative Forms
 
@@ -169,8 +175,8 @@ Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equa
 
 ## Ability Verb Forms
 
-Same formulas as <Link to="/verbs/master-chart/#basic-verb-tenses">basic verb tenses</Link> but with the <Link to="/verbs/ability/#making-the-ability-roots-and-stems">ability roots and stems</Link>.
+Same formulas as <Link to="/verbs/master-chart/#basic-verb-forms">basic verb forms</Link> but with the <Link to="/verbs/ability/#making-the-ability-roots-and-stems">ability roots and stems</Link>.
 
 ## Passive Verb Forms
 
-Same formulas as the <Link to="/verbs/master-chart/#basic-verb-tenses">basic verb tenses</Link> and <Link to="/verbs/master-chart/#perfect-verb-forms">perfect verb forms</Link>, but with the <Link to="/verbs/passive-voice/#making-passive-roots-and-stems">passive roots and stems</Link>.
+Same formulas as the <Link to="/verbs/master-chart/#basic-verb-forms">basic verb forms</Link> and <Link to="/verbs/master-chart/#perfect-verb-forms">perfect verb forms</Link>, but with the <Link to="/verbs/passive-voice/#making-passive-roots-and-stems">passive roots and stems</Link>.

src/content/verbs/tense-data.ts

@@ -0,0 +1,10 @@
+export const tenseData = [
+  ["present",                   false,  false,  false],
+  ["imperfective future",       true,   false,  false],
+  ["subjunctive",               false,  true,   false],
+  ["perfective future",         true,   true,   false],
+  ["continuous past",           false,  false,  true],
+  ["habitual continuous past",  true,   false,  true],
+  ["simple past",               false,  true,   true],
+  ["habitual simple past",      true,   true,   true],
+]