Support multiple word packs

Author: miorel

public/cats.txt

@@ -0,0 +1,20 @@
+BOBCAT
+CARACAL
+CHEETAH
+CHESHIRE CAT
+COUGAR
+JAGUAR
+JAGUARUNDI
+KODKOD
+LEOPARD
+LION
+LYNX
+MARGAY
+NYAN CAT
+OCELOT
+ONCILLA
+PAMPAS CAT
+PUSS IN BOOTS
+SERVAL
+SNOW LEOPARD
+TIGER

public/us-states.txt

@@ -0,0 +1,50 @@
+ALABAMA
+ALASKA
+ARIZONA
+ARKANSAS
+CALIFORNIA
+COLORADO
+CONNECTICUT
+DELAWARE
+FLORIDA
+GEORGIA
+HAWAII
+IDAHO
+ILLINOIS
+INDIANA
+IOWA
+KANSAS
+KENTUCKY
+LOUISIANA
+MAINE
+MARYLAND
+MASSACHUSETTS
+MICHIGAN
+MINNESOTA
+MISSISSIPPI
+MISSOURI
+MONTANA
+NEBRASKA
+NEVADA
+NEW HAMPSHIRE
+NEW JERSEY
+NEW MEXICO
+NEW YORK
+NORTH CAROLINA
+NORTH DAKOTA
+OHIO
+OKLAHOMA
+OREGON
+PENNSYLVANIA
+RHODE ISLAND
+SOUTH CAROLINA
+SOUTH DAKOTA
+TENNESSEE
+TEXAS
+UTAH
+VERMONT
+VIRGINIA
+WASHINGTON
+WEST VIRGINIA
+WISCONSIN
+WYOMING

src/App.module.css

@@ -45,3 +45,26 @@
 .buttonRow {
   gap: 1vw;
 }
+
+.wordPackSelector {
+  display: flex;
+  flex-direction: column;
+}
+
+.wordPackSelector button:first-child {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.wordPackSelector button:last-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.wordPackSelector button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.wordPackSelector button:not(:first-child) {
+  border-top: none;
+}

src/App.tsx

@@ -2,7 +2,7 @@ import React, { type ReactNode, useCallback, useEffect, useRef } from "react";
 
 import styles from "./App.module.css";
 import Rounds from "./Rounds";
-import useAppState, { type Round } from "./hooks/useAppState";
+import useAppState, { type Round, type WordPack } from "./hooks/useAppState";
 import useLoadData from "./hooks/useLoadData";
 import countIf from "./util/countIf";
 import pluralize from "./util/pluralize";
@@ -31,6 +31,30 @@ function Container({
   );
 }
 
+function getSortedWordPacks(wordPacks: Record<string, WordPack>): WordPack[] {
+  return Object.values(wordPacks).sort((a, b) =>
+    a.title.localeCompare(b.title),
+  );
+}
+
+function WordPackSelector({
+  wordPacks,
+  onSelect,
+}: {
+  wordPacks: readonly WordPack[];
+  onSelect: (wordPackId: string) => void;
+}) {
+  return (
+    <div className={styles.wordPackSelector}>
+      {wordPacks.map((wordPack) => (
+        <button onClick={() => onSelect(wordPack.id)} key={wordPack.id}>
+          {wordPack.title} ({pluralize(wordPack.words.length, "item")})
+        </button>
+      ))}
+    </div>
+  );
+}
+
 export default function App() {
   const [state, dispatch] = useAppState();
   useLoadData(dispatch);
@@ -60,19 +84,20 @@ export default function App() {
 
   switch (state.phase) {
     case "pre-game": {
-      if (state.wordPack == null) {
+      const wordPacks = getSortedWordPacks(state.wordPacks);
+      if (state.bannedWords == null || wordPacks.length === 0) {
         return <Container>Loading data...</Container>;
       }
 
       return (
         <Container>
-          <div>
-            Word pack (<strong>fruits</strong>) is ready with{" "}
-            {pluralize(state.wordPack.length, "word")}!
-          </div>
-          <button onClick={() => dispatch({ type: "start-game" })} autoFocus>
-            Play
-          </button>
+          <div>What would you like to unscramble?</div>
+          <WordPackSelector
+            wordPacks={wordPacks}
+            onSelect={(selectedWordPackId) =>
+              dispatch({ type: "start-game", selectedWordPackId })
+            }
+          />
         </Container>
       );
     }
@@ -92,7 +117,7 @@ export default function App() {
                 <Word
                   word={
                     state.guess.toUpperCase() ||
-                    // Make sure the container is never empty, so that it takes some vertical space.
+                    // Make sure the container is never empty, so that it takes up some vertical space.
                     " "
                   }
                   highlightInReference
@@ -107,11 +132,11 @@ export default function App() {
                 className={`${styles.guess} word`}
                 value={state.guess}
                 onChange={(ev) =>
-                  dispatch({ type: "update-guess", newGuess: ev.target.value })
+                  dispatch({ type: "change-guess", newGuess: ev.target.value })
                 }
               />
             </div>
-            <div>Unscramble the word!</div>
+            <div>Unscramble the word or phrase!</div>
           </label>
           <div className={`${styles.buttonRow} centered-container flex-row`}>
             <button onClick={skipWord}>Skip</button>
@@ -124,24 +149,29 @@ export default function App() {
     }
 
     case "post-game": {
-      const wordsGuessed = countIf(
+      const itemsGuessed = countIf(
         state.finishedRounds,
         (round) => round.status === "guessed",
       );
-      const wordsSkipped = countIf(
+      const itemsSkipped = countIf(
         state.finishedRounds,
         (round) => round.status === "skipped",
       );
 
       return (
         <Container finishedRounds={state.finishedRounds}>
           <div>
-            You guessed {pluralize(wordsGuessed, "word")} and skipped{" "}
-            {pluralize(wordsSkipped, "word")}.
+            You guessed {pluralize(itemsGuessed, "item")} and skipped{" "}
+            {pluralize(itemsSkipped, "item")}.
           </div>
-          <button onClick={() => dispatch({ type: "start-game" })} autoFocus>
-            Play again
-          </button>
+          <div />
+          <div>Play again?</div>
+          <WordPackSelector
+            wordPacks={getSortedWordPacks(state.wordPacks)}
+            onSelect={(selectedWordPackId) =>
+              dispatch({ type: "start-game", selectedWordPackId })
+            }
+          />
         </Container>
       );
     }

src/hooks/useAppState.ts

@@ -10,6 +10,12 @@ export type Round = Readonly<{
   status?: "guessed" | "skipped";
 }>;
 
+export type WordPack = Readonly<{
+  id: string;
+  title: string;
+  words: readonly string[];
+}>;
+
 function getNewRound(
   getNextWord: () => string,
   bannedWords: readonly string[],
@@ -31,7 +37,7 @@ function getNewRound(
 type PreGameState = Readonly<{
   phase: "pre-game";
   bannedWords: readonly string[] | null;
-  wordPack: readonly string[] | null;
+  wordPacks: Record<string, WordPack>;
 }>;
 
 type InGameState = Readonly<{
@@ -40,15 +46,15 @@ type InGameState = Readonly<{
   finishedRounds: readonly Round[];
   guess: string;
   bannedWords: readonly string[];
-  wordPack: readonly string[];
+  wordPacks: Record<string, WordPack>;
   getNextWord: () => string;
 }>;
 
 type PostGameState = {
   phase: "post-game";
   finishedRounds: readonly Round[];
   bannedWords: readonly string[];
-  wordPack: readonly string[];
+  wordPacks: Record<string, WordPack>;
 };
 
 export type State = PreGameState | InGameState | PostGameState;
@@ -66,19 +72,38 @@ function getNewRoundState(state: InGameState, didGuess: boolean): InGameState {
 }
 
 export function getInitialState(): State {
-  return { phase: "pre-game", bannedWords: null, wordPack: null };
+  return {
+    phase: "pre-game",
+    bannedWords: null,
+    wordPacks: {},
+  };
 }
 
 export type Action =
+  | { type: "change-guess"; newGuess: string }
   | { type: "end-game" }
   | { type: "load-banned-words"; bannedWords: readonly string[] }
-  | { type: "load-word-pack"; wordPack: readonly string[] }
+  | { type: "load-word-pack"; wordPack: WordPack }
   | { type: "skip-word" }
-  | { type: "start-game" }
-  | { type: "update-guess"; newGuess: string };
+  | { type: "start-game"; selectedWordPackId: string };
 
 export function reducer(state: State, action: Action): State {
   switch (action.type) {
+    case "change-guess": {
+      // No-op if not in a game.
+      if (state.phase !== "in-game") {
+        return state;
+      }
+
+      if (
+        normalizeString(action.newGuess) === state.currentRound.wordUnscrambled
+      ) {
+        return getNewRoundState(state, true);
+      }
+
+      return { ...state, guess: action.newGuess };
+    }
+
     case "end-game": {
       // No-op if not in a game.
       if (state.phase !== "in-game") {
@@ -89,7 +114,7 @@ export function reducer(state: State, action: Action): State {
         phase: "post-game",
         finishedRounds: [...state.finishedRounds, state.currentRound],
         bannedWords: state.bannedWords,
-        wordPack: state.wordPack,
+        wordPacks: state.wordPacks,
       };
     }
 
@@ -103,12 +128,18 @@ export function reducer(state: State, action: Action): State {
     }
 
     case "load-word-pack": {
-      // No-op if not in pre-game phase, or if we already have a word pack.
-      if (state.phase !== "pre-game" || state.wordPack) {
+      // No-op if not in pre-game phase.
+      if (state.phase !== "pre-game") {
         return state;
       }
 
-      return { ...state, wordPack: action.wordPack };
+      return {
+        ...state,
+        wordPacks: {
+          ...state.wordPacks,
+          [action.wordPack.id]: action.wordPack,
+        },
+      };
     }
 
     case "skip-word": {
@@ -126,38 +157,25 @@ export function reducer(state: State, action: Action): State {
         return state;
       }
 
-      // No-op if data is not loaded.
-      const { bannedWords, wordPack } = state;
-      if (bannedWords == null || wordPack == null) {
+      const { wordPacks, bannedWords } = state;
+
+      // No-op if word pack or banned words aren't loaded.
+      const wordPack = wordPacks[action.selectedWordPackId];
+      if (wordPack == null || bannedWords == null) {
         return state;
       }
 
-      const getNextWord = shuffleInfinitely(wordPack);
+      const getNextWord = shuffleInfinitely(wordPack.words);
       return {
         phase: "in-game",
         currentRound: getNewRound(getNextWord, bannedWords),
         finishedRounds: [],
         guess: "",
         bannedWords,
-        wordPack,
         getNextWord,
+        wordPacks,
       };
     }
-
-    case "update-guess": {
-      // No-op if not in a game.
-      if (state.phase !== "in-game") {
-        return state;
-      }
-
-      if (
-        normalizeString(action.newGuess) === state.currentRound.wordUnscrambled
-      ) {
-        return getNewRoundState(state, true);
-      }
-
-      return { ...state, guess: action.newGuess };
-    }
   }
 
   // This should never happen!