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 {
   dictionarySet,
@@ -287,6 +288,7 @@ function Game(props: GameProps) {
         letterInfo={letterInfo}
         onKey={onKey}
       />
+      <RandomGuess onKey={onKey} wordLength={wordLength} />
       {gameState !== GameState.Playing && (
         <p>
           <button

src/RandomGuess.tsx

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