Nav for settings

src/App.tsx

@@ -74,17 +74,40 @@ function About() {
   );
 }
 
+function Settings() {
+  return <>TODO: dark theme, hard mode, etc.</>;
+}
+
 function App() {
-  const [about, setAbout] = useState(false);
+  const [page, setPage] = useState<"game" | "about" | "settings">("game");
   return (
     <div className="App-container">
       <h1>hello wordl</h1>
       <div style={{ position: "absolute", right: 5, top: 5 }}>
-        <a href="#" onClick={() => setAbout((a) => !a)}>
-          {about ? "Close" : "About"}
-        </a>
+        {page !== "game" ? (
+          <a href="#" onClick={() => setPage("game")}>
+            Close
+          </a>
+        ) : (
+          <>
+            <a href="#" onClick={() => setPage("about")}>
+              Help
+            </a>
+            {" • "}
+            <a href="#" onClick={() => setPage("settings")}>
+              Settings
+            </a>
+          </>
+        )}
       </div>
-      <div style={{ position: "absolute", left: 5, top: 5 }}>
+      <div
+        style={{
+          position: "absolute",
+          left: 5,
+          top: 5,
+          visibility: page === "game" ? "visible" : "hidden",
+        }}
+      >
         <a
           href="#"
           onClick={() =>
@@ -97,8 +120,9 @@ function App() {
           {seed ? "Random" : "Today's"}
         </a>
       </div>
-      {about && <About />}
-      <Game maxGuesses={maxGuesses} hidden={about} />
+      {page === "about" && <About />}
+      {page === "settings" && <Settings />}
+      <Game maxGuesses={maxGuesses} hidden={page !== "game"} />
     </div>
   );
 }

src/Game.tsx

@@ -30,7 +30,6 @@ function Game(props: GameProps) {
   const [currentGuess, setCurrentGuess] = useState<string>("");
   const [wordLength, setWordLength] = useState(5);
   const [hint, setHint] = useState<string>(`Make your first guess!`);
-  const [srStatus, setSrStatus] = useState<string>(``);
   const [target, setTarget] = useState(() => {
     resetRng();
     return randomTarget(wordLength);
@@ -59,7 +58,6 @@ function Game(props: GameProps) {
         (guess + key.toLowerCase()).slice(0, wordLength)
       );
       setHint("");
-      setSrStatus("");
     } else if (key === "Backspace") {
       setCurrentGuess((guess) => guess.slice(0, -1));
       setHint("");
@@ -182,9 +180,6 @@ function Game(props: GameProps) {
         <tbody>{tableRows}</tbody>
       </table>
       <p role="alert">{hint || `\u00a0`}</p>
-      {/* <p role="alert" className="Game-sr-feedback">
-        {srStatus}
-      </p> */}
       <Keyboard letterInfo={letterInfo} onKey={onKey} />
       {seed ? (
         <div className="Game-seed-info">