Explain double letters in About

src/About.tsx

@@ -16,8 +16,9 @@ export function About() {
       <p>
         You get {maxGuesses} tries to guess a target word.
         <br />
-        After each guess, you get Mastermind-style feedback:
+        After each guess, you get Mastermind-style feedback.
       </p>
+      <hr />
       <Row
         rowState={RowState.LockedIn}
         wordLength={4}
@@ -30,11 +31,20 @@ export function About() {
       />
       <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>
+        <b className="green-bg">R</b> is correct! The third letter is{" "}
+        <b className="green-bg">R</b>
+        .<br />
+        <strong>(There may still be a second R in the word.)</strong>
+      </p>
+      <p>
+        <b className="yellow-bg">D</b> occurs <em>elsewhere</em> in the target
+        word.
+        <br />
+        <strong>(Perhaps more than once. 🤔)</strong>
+      </p>
+      <hr />
       <p>
         Let's move the <b>D</b> in our next guess:
       </p>
@@ -47,8 +57,8 @@ export function About() {
           { clue: Clue.Correct, letter: "r" },
           { clue: Clue.Absent, letter: "k" },
         ]}
+        annotation={"So close!"}
       />
-      <p>So close!</p>
       <Row
         rowState={RowState.LockedIn}
         wordLength={4}
@@ -58,8 +68,8 @@ export function About() {
           { clue: Clue.Correct, letter: "r" },
           { clue: Clue.Correct, letter: "t" },
         ]}
+        annotation={"Got it!"}
       />
-      <p>Got it!</p>
       <p>
         Report issues{" "}
         <a href="https://github.com/lynn/hello-wordl/issues">here</a>, or tweet{" "}

src/App.css

@@ -9,6 +9,7 @@ body {
 
 .Row {
   display: flex;
+  align-items: center;
   justify-content: center;
 }
 
@@ -26,6 +27,12 @@ body {
   font-weight: bold;
 }
 
+.Row-annotation {
+  margin-inline-start: 16px;
+  width: 5em;
+  text-align: start;
+}
+
 .App-container {
   position: relative;
   max-width: 500px;
@@ -163,6 +170,21 @@ a:active {
   line-height: 1.4;
 }
 
+.App-about b {
+  background-color: #888;
+  color: white;
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+
+.App-about b.green-bg {
+  background-color: rgb(87, 172, 120);
+}
+
+.App-about b.yellow-bg {
+  background-color: #e9c601;
+}
+
 .Game-seed-info {
   opacity: 0.5;
   margin-top: 1em;

src/Row.tsx

@@ -10,6 +10,7 @@ interface RowProps {
   rowState: RowState;
   wordLength: number;
   cluedLetters: CluedLetter[];
+  annotation?: string;
 }
 
 export function Row(props: RowProps) {
@@ -41,5 +42,12 @@ export function Row(props: RowProps) {
     });
   let rowClass = "Row";
   if (isLockedIn) rowClass += " Row-locked-in";
-  return <tr className={rowClass}>{letterDivs}</tr>;
+  return (
+    <tr className={rowClass}>
+      {letterDivs}
+      {props.annotation && (
+        <span className="Row-annotation">{props.annotation}</span>
+      )}
+    </tr>
+  );
 }