Random guess button

src/App.css

@@ -95,7 +95,8 @@ table.Game-rows > tbody {
   justify-content: stretch;
 }
 
-.Game-keyboard-button {
+.Game-keyboard-button,
+.Game-random-guess {
   margin: 2px;
   background-color: #cdcdcd;
   padding: 2px;

src/Game.tsx

@@ -3,6 +3,7 @@ import { Row, RowState } from "./Row";
 import dictionary from "./dictionary.json";
 import { Clue, clue, describeClue, violation } from "./clue";
 import { Keyboard } from "./Keyboard";
+import { RandomGuess } from "./RandomGuess";
 import targetList from "./targets.json";
 import {
   describeSeed,
@@ -318,6 +319,7 @@ function Game(props: GameProps) {
         letterInfo={letterInfo}
         onKey={onKey}
       />
+      <RandomGuess onKey={onKey} wordLength={wordLength} randomTarget={randomTarget} />
       <div className="Game-seed-info">
         {challenge
           ? "playing a challenge game"

src/RandomGuess.tsx

@@ -0,0 +1,27 @@
+interface GuessProps {
+  onKey: (key: string) => void;
+  wordLength: number;
+  randomTarget: (wordLength: number) => string;
+}
+
+export function RandomGuess(props: GuessProps) {
+  return (
+    <div className="Game-random" aria-hidden="true">
+      <div className="Game-random-guess"
+        tabIndex={-1}
+        role="button"
+        onClick={() => {
+          for (let i = 0; i < props.wordLength; i++) {
+            props.onKey("Backspace");
+          }
+          const guess = props.randomTarget(props.wordLength);
+          for (const letter of guess) {
+            props.onKey(letter);
+          }
+        }}
+      >
+        Random Guess
+      </div>
+    </div>
+  );
+}