fixed speed

src/components/Sidebar.jsx

@@ -24,7 +24,8 @@ function Sidebar({ content, navOpen, setNavOpen, pathname }) {
     }
     return (
         <>
-            <aside className={classNames(
+            <aside
+                className={classNames(
                 "side-nav col-3 col-lg-2 p-0 bg-light",
                 { "side-nav-closed": !navOpen }
             )}>

src/games/sub-cores/UnisexNounGame.tsx

@@ -1,7 +1,5 @@
 import { useState } from "react";
-import {
+import { comparePs } from "../../lib/game-utils";
-    comparePs,
-} from "../../lib/game-utils";
 import genderColors from "../../lib/gender-colors";
 import GameCore from "../GameCore";
 import {
@@ -17,20 +15,34 @@ import { nouns } from "../../words/words";
 import { intoPatterns } from "../../lib/categorize";
 
 const unisexNouns = nouns.filter(tp.isUnisexNounEntry);
-type NType = "pattern1" | "pattern2" | "pattern3" | "pattern4" | "pattern5" | "other";
+type NType =
+  | "pattern1"
+  | "pattern2"
+  | "pattern3"
+  | "pattern4"
+  | "pattern5"
+  | "other";
 // TODO: make pattern types as overlay types
 const types = intoPatterns(unisexNouns);
 const genders: T.Gender[] = ["masc", "fem"];
 
-const amount = 20; 
+const amount = 14;
 
-type Question = { entry: T.DictionaryEntry, gender: T.Gender };
+type Question = { entry: T.DictionaryEntry; gender: T.Gender };
 
-export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boolean, id: string, link: string }) {
+export default function UnisexNounGame({
+  id,
+  link,
+  inChapter,
+}: {
+  inChapter: boolean;
+  id: string;
+  link: string;
+}) {
   let pool = { ...types };
   function getQuestion(): Question {
     const keys = Object.keys(types) as NType[];
-        let type: NType
+    let type: NType;
     do {
       type = randFromArray(keys);
     } while (!pool[type].length);
@@ -61,9 +73,11 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
     if (!inflections.masc || !inflections.fem) {
       return <div>WORD ERROR</div>;
     }
-        const handleInput = ({ target: { value }}: React.ChangeEvent<HTMLInputElement>) => {
+    const handleInput = ({
+      target: { value },
+    }: React.ChangeEvent<HTMLInputElement>) => {
       setAnswer(value);
-        }
+    };
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       // @ts-ignore
@@ -73,18 +87,40 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
         setAnswer("");
       }
       callback(correct);
-        }
+    };
 
-        return <div>
+    return (
-            <div className="pt-2 pb-1 mb-2" style={{ maxWidth: "300px", margin: "0 auto", backgroundColor: genderColors[question.gender === "masc" ? "m" : "f"]}}>
+      <div>
-                <Examples opts={opts}>{[
+        <div
+          className="pt-2 pb-1 mb-2"
+          style={{
+            maxWidth: "300px",
+            margin: "0 auto",
+            backgroundColor:
+              genderColors[question.gender === "masc" ? "m" : "f"],
+          }}
+        >
+          <Examples opts={opts}>
+            {[
               {
                 ...inflections[question.gender][0][0],
                 e: firstVariation(question.entry.e),
-                    }
+              },
-                ]}</Examples>
+            ]}
+          </Examples>
+        </div>
+        <div>
+          Is {givenGender}. Make it{" "}
+          <span
+            style={{
+              background:
+                genderColors[requiredGender === "masculine" ? "m" : "f"],
+            }}
+          >
+            {requiredGender}
+          </span>
+          .
         </div>
-            <div>Is {givenGender}. Make it <span style={{ background: genderColors[requiredGender === "masculine" ? "m" : "f"]}}>{requiredGender}</span>.</div>
         <form onSubmit={handleSubmit}>
           <div className="my-3" style={{ maxWidth: "200px", margin: "0 auto" }}>
             <input
@@ -102,14 +138,16 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
             </div>
           </div>
         </form>
-
       </div>
+    );
   }
 
   function Instructions() {
-        return <div>
+    return (
+      <div>
         <h5>Change the gender of a given noun</h5>
       </div>
+    );
   }
 
   function DisplayCorrectAnswer({ question }: { question: Question }) {
@@ -118,15 +156,20 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
     const { inflections } = infOut;
     // @ts-ignore
     const correctAnswer = inflections[flipGender(question.gender)][0];
-        return <div>
+    return (
-            {correctAnswer.length > 1 && <div className="text-muted">One of the following:</div>}
+      <div>
+        {correctAnswer.length > 1 && (
+          <div className="text-muted">One of the following:</div>
+        )}
         {correctAnswer.map((ps: any) => (
           <Examples opts={opts}>{ps}</Examples>
         ))}
-        </div>;
+      </div>
+    );
   }
 
-    return <GameCore
+  return (
+    <GameCore
       inChapter={inChapter}
       studyLink={link}
       getQuestion={getQuestion}
@@ -134,10 +177,11 @@ export default function UnisexNounGame({ id, link, inChapter }: { inChapter: boo
       Display={Display}
       DisplayCorrectAnswer={DisplayCorrectAnswer}
       amount={amount}
-        timeLimit={130}
+      timeLimit={175}
       Instructions={Instructions}
     />
-};
+  );
+}
 
 function flipGender(g: T.Gender): T.Gender {
   return g === "masc" ? "fem" : "masc";