Head directly into a new round after each correct guess

Author: miorel

src/App.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from "react";
 import styles from "./App.module.css";
 import useAppState from "./useAppState";
 import normalizeString from "./util/normalizeString";
+import pluralize from "./util/pluralize";
 
 function App() {
   const [state, dispatch] = useAppState();
@@ -43,21 +44,25 @@ function App() {
               Guess:
               <input
                 type="text"
+                autoFocus
                 value={state.guess}
                 onChange={(ev) =>
                   dispatch({ type: "update-guess", newGuess: ev.target.value })
                 }
               />
             </label>
           </div>
+          <button onClick={() => dispatch({ type: "end-game" })}>
+            End game
+          </button>
         </div>
       );
     }
 
     case "post-game": {
       return (
         <div className={styles.container}>
-          <div>Nice game! You guessed {state.goal}</div>
+          <div>You guessed {pluralize(state.wordsGuessed, "word")}.</div>
           <button onClick={() => dispatch({ type: "start-game" })}>
             Begin new game
           </button>

src/useAppState.ts

@@ -12,11 +12,12 @@ export type State = Readonly<
       phase: "in-game";
       goal: string;
       guess: string;
+      wordsGuessed: number;
       wordPack: readonly string[];
     }
   | {
       phase: "post-game";
-      goal: string;
+      wordsGuessed: number;
       wordPack: readonly string[];
     }
 >;
@@ -28,10 +29,24 @@ export function getInitialState(): State {
 export type Action =
   | { type: "load-data"; wordPack: readonly string[] }
   | { type: "start-game" }
-  | { type: "update-guess"; newGuess: string };
+  | { type: "update-guess"; newGuess: string }
+  | { type: "end-game" };
 
 export function reducer(state: State, action: Action): State {
   switch (action.type) {
+    case "end-game": {
+      // No-op if not in a game.
+      if (state.phase !== "in-game") {
+        return state;
+      }
+
+      return {
+        phase: "post-game",
+        wordsGuessed: state.wordsGuessed,
+        wordPack: state.wordPack,
+      };
+    }
+
     case "load-data": {
       // No-op if not in pre-game phase.
       if (state.phase !== "pre-game") {
@@ -57,6 +72,7 @@ export function reducer(state: State, action: Action): State {
         phase: "in-game",
         goal: getRandomElement(wordPack),
         guess: "",
+        wordsGuessed: 0,
         wordPack,
       };
     }
@@ -69,9 +85,10 @@ export function reducer(state: State, action: Action): State {
 
       if (normalizeString(action.newGuess) === state.goal) {
         return {
-          phase: "post-game",
-          goal: state.goal,
-          wordPack: state.wordPack,
+          ...state,
+          wordsGuessed: state.wordsGuessed + 1,
+          goal: getRandomElement(state.wordPack),
+          guess: "",
         };
       }
 

src/util/pluralize.ts

@@ -0,0 +1,8 @@
+export default function pluralize(
+  count: number,
+  singularNoun: string,
+  pluralNoun?: string,
+): string {
+  const noun = count === 1 ? singularNoun : (pluralNoun ?? singularNoun + "s");
+  return `${count} ${noun}`;
+}