minimal pairs game

src/content/writing/MinimalPairs.tsx

@@ -17,7 +17,7 @@ export default function MinimalPairs({
   return (
     <div>
       <h5 className="my-3" onClick={() => setOpened((x) => !x)}>
-        {opened ? "▼" : "▶"} View Pairs
+        {opened ? "▼" : "▶"} Browse Pairs
       </h5>
       <SmoothCollapse expanded={opened}>
         {section.pairs.map((pairs, i) => (

src/content/writing/minimal-pairs-type.ts

@@ -0,0 +1,11 @@
+const minimalPairsSection = [
+  "t and T",
+  "d and D",
+  "r and R",
+  "n and N",
+  "a and aa",
+  "ay and uy",
+  "ay and e",
+  "ee and e",
+] as const;
+export type MinimalPairsSection = (typeof minimalPairsSection)[number];

src/content/writing/minimal-pairs.mdx

@@ -11,12 +11,23 @@ import psmd from "../../lib/psmd";
 import Link from "../../components/Link";
 import MinimalPairs from "./MinimalPairs.tsx";
 import minimalPairs from "./minimal-pairs.ts";
+import {
+  minimalPairsT,
+  minimalPairsD,
+  minimalPairsR,
+  minimalPairsN,
+  minimalPairsAa,
+  minimalPairsAyUy,
+  minimalPairsAyE,
+  minimalPairsEeE,
+} from "../../games/games";
+import GameDisplay from "../../games/GameDisplay";
 
 There are certain sounds in Pashto that are quite difficult for some learners to distinguish.
 
 For example, English speakers have a very hard time hearing the difference between the dental <InlinePs opts={opts} ps={{ p: "ت", f: "t" }}/> and retroflex <InlinePs opts={opts} ps={{ p: "ټ", f: "T" }}/>. Some of the vowels like <InlinePs opts={opts} ps={{ p: "ي", f: "ee" }}/> and <InlinePs opts={opts} ps={{ p: "ې", f: "e" }}/> can also be very tricky to distinguish.
 
-Here are some examples of words that vary by these different sounds. Listen to them to train your ear to the difference, and then use the games to see if you can hear the difference yourself. (Games coming soon! 🚧)
+Here are some examples of words that vary by these different sounds. Listen to them to train your ear to the difference, and then use the games to see if you can hear the difference yourself.
 
 ## ت - t and ټ - T
 
@@ -25,51 +36,67 @@ Here are some examples of words that vary by these different sounds. Listen to t
   section={minimalPairs.find((x) => x.title === "t and T")}
 />
 
+<GameDisplay record={minimalPairsT} />
+
 ## د - d and ډ - D
 
 <MinimalPairs
   opts={opts}
   section={minimalPairs.find((x) => x.title === "d and D")}
 />
 
+<GameDisplay record={minimalPairsD} />
+
 ## ر - r and ړ - R
 
 <MinimalPairs
   opts={opts}
   section={minimalPairs.find((x) => x.title === "r and R")}
 />
 
+<GameDisplay record={minimalPairsR} />
+
 ## ن - n and ڼ - N
 
 <MinimalPairs
   opts={opts}
   section={minimalPairs.find((x) => x.title === "n and N")}
 />
 
+<GameDisplay record={minimalPairsN} />
+
 ## ه - a and ا - aa
 
 <MinimalPairs
   opts={opts}
   section={minimalPairs.find((x) => x.title === "a and aa")}
 />
 
+<GameDisplay record={minimalPairsAa} />
+
 ## ی - ay and ۍ - uy
 
 <MinimalPairs
   opts={opts}
   section={minimalPairs.find((x) => x.title === "ay and uy")}
 />
 
+<GameDisplay record={minimalPairsAyUy} />
+
 ## ی - ay and ې - e
 
 <MinimalPairs
   opts={opts}
   section={minimalPairs.find((x) => x.title === "ay and e")}
 />
 
+<GameDisplay record={minimalPairsAyE} />
+
 ## ي - ee and ې - e
 
 <MinimalPairs
   opts={opts}
   section={minimalPairs.find((x) => x.title === "ee and e")}
 />
+
+<GameDisplay record={minimalPairsEeE} />