Add an "About" link

src/App.css

@@ -25,14 +25,19 @@ body {
   font-weight: bold;
 }
 
-.App {
+.App-container {
+  position: relative;
+  max-width: 500px;
   display: flex;
   flex-direction: column;
-  max-width: 500px;
   margin: 0 auto;
   justify-content: center;
 }
 
+.App-container h1 {
+  margin-top: 0;
+}
+
 .Game {
   display: flex;
   flex-direction: column;
@@ -152,4 +157,10 @@ a:active {
 .App-footer {
   margin: -1rem 0 2rem 0;
   font-size: 80%;
+  line-height: 1.5;
 }
+
+.App-about {
+  margin-top: -1rem;
+  line-height: 1.4;
+}

src/App.tsx

@@ -4,20 +4,84 @@ import { dictionarySet, pick } from "./util";
 import Game from "./Game";
 import { names } from "./names";
 import { useState } from "react";
+import { Row, RowState } from "./Row";
+import { Clue } from "./clue";
 
 function App() {
+  const [about, setAbout] = useState(false);
+  const maxGuesses = 6;
   return (
-    <>
+    <div className="App-container">
       <h1>hello wordl</h1>
-      <footer className="App-footer">
+      <div style={{ position: "absolute", right: 5, top: 5 }}>
-        by <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
+        <a href="#" onClick={() => setAbout((a) => !a)}>
-        <a href="https://www.powerlanguage.co.uk/wordle/">wordle</a>. report
+          {about ? "Close" : "About"}
-        issues <a href="https://github.com/lynn/hello-wordl/issues">here</a>
+        </a>
-      </footer>
-      <div className="App">
-        <Game maxGuesses={6} />
       </div>
-    </>
+      {about && (
+        <div className="App-about">
+          <p>
+            <i>hello wordl</i> is a remake of the word game{" "}
+            <a href="https://www.powerlanguage.co.uk/wordle/">
+              <i>Wordle</i>
+            </a>
+            , which I think is based on the TV show <i>Lingo</i>.
+          </p>
+          <p>
+            You get {maxGuesses} tries to guess a target word.
+            <br />
+            After each guess, you get Mastermind-style feedback:
+          </p>
+          <p>
+            <Row
+              rowState={RowState.LockedIn}
+              wordLength={4}
+              cluedLetters={[
+                { clue: Clue.Absent, letter: "w" },
+                { clue: Clue.Absent, letter: "o" },
+                { clue: Clue.Correct, letter: "r" },
+                { clue: Clue.Elsewhere, letter: "d" },
+              ]}
+            />
+          </p>
+          <p>
+            <b>W</b> and <b>O</b> aren't in the target word at all.
+            <br />
+            <b>R</b> is correct! The third letter is <b>R</b>
+            .<br />
+            <b>D</b> occurs <em>elsewhere</em> in the target
+            word.
+          </p>
+          <p>
+            Let's move the <b>D</b> in our next guess:
+            <Row
+              rowState={RowState.LockedIn}
+              wordLength={4}
+              cluedLetters={[
+                { clue: Clue.Correct, letter: "d" },
+                { clue: Clue.Correct, letter: "a" },
+                { clue: Clue.Correct, letter: "r" },
+                { clue: Clue.Absent, letter: "k" },
+              ]}
+            />
+            So close!
+            <Row
+              rowState={RowState.LockedIn}
+              wordLength={4}
+              cluedLetters={[
+                { clue: Clue.Correct, letter: "d" },
+                { clue: Clue.Correct, letter: "a" },
+                { clue: Clue.Correct, letter: "r" },
+                { clue: Clue.Correct, letter: "t" },
+              ]}
+            />
+            Got it!
+          </p>
+          Report issues <a href="https://github.com/lynn/hello-wordl/issues">here</a>, or tweet <a href="https://twitter.com/chordbug">@chordbug</a>.
+        </div>
+      )}
+      <Game maxGuesses={maxGuesses} hidden={about} />
+    </div>
   );
 }
 

src/Game.tsx

@@ -15,6 +15,7 @@ enum GameState {
 
 interface GameProps {
   maxGuesses: number;
+  hidden: boolean;
 }
 
 const targets = common
@@ -120,7 +121,7 @@ function Game(props: GameProps) {
     });
 
   return (
-    <div className="Game">
+    <div className="Game" style={{ display: props.hidden ? "none" : "block" }}>
       <div className="Game-options">
         <label htmlFor="wordLength">Letters:</label>
         <input

src/names.ts

@@ -4,6 +4,7 @@ export const names: Set<string> = new Set([
   "carol",
   "costa",
   "dutch",
+  "fossa", // just too hard
   "harry",
   "jimmy",
   "jones",
@@ -13,6 +14,7 @@ export const names: Set<string> = new Set([
   "pedro",
   "roger",
   "sally",
+  "savoy",
   "texas",
   "willy",
 ]);