feature / Changes to make easier levels [44]

src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import { maxGuesses, seed } from "./util";
+import { Difficulty, maxGuesses, seed } from "./util";
 import Game from "./Game";
 import { useEffect, useState } from "react";
 import { About } from "./About";
@@ -33,14 +33,35 @@ function App() {
     window.matchMedia &&
     window.matchMedia("(prefers-color-scheme: dark)").matches;
   const [dark, setDark] = useSetting<boolean>("dark", prefersDark);
+  const [difficulty, setDifficulty] = useSetting<number>("difficulty", 2);
+  const [titleFormat, setTitleFormat] = useState<string>("inherit");
   const [colorBlind, setColorBlind] = useSetting<boolean>("colorblind", false);
-  const [difficulty, setDifficulty] = useSetting<number>("difficulty", 0);
   const [keyboard, setKeyboard] = useSetting<string>(
     "keyboard",
     "qwertyuiop-asdfghjkl-BzxcvbnmE"
   );
   const [enterLeft, setEnterLeft] = useSetting<boolean>("enter-left", false);
 
+  useEffect(() => {
+    switch (difficulty) {
+      case 0:
+        setTitleFormat("#23eb2a");
+        break;
+      case 1:
+        setTitleFormat("#94eb97");
+        break;
+      case 2:
+        setTitleFormat("inherit");
+        break;
+      case 3:
+      case 4:
+        setTitleFormat("#e66");
+        break;
+      default:
+        setTitleFormat("inherit");
+    }
+  }, [difficulty]);
+
   useEffect(() => {
     document.body.className = dark ? "dark" : "";
     setTimeout(() => {
@@ -66,8 +87,9 @@ function App() {
       <h1>
         <span
           style={{
-            color: difficulty > 0 ? "#e66" : "inherit",
-            fontStyle: difficulty > 1 ? "italic" : "inherit",
+            color: titleFormat,
+            fontStyle:
+              difficulty === Difficulty.UltraHard ? "italic" : "inherit",
           }}
         >
           hell
@@ -130,13 +152,16 @@ function App() {
               id="difficulty-setting"
               type="range"
               min="0"
-              max="2"
+              max="4"
               value={difficulty}
               onChange={(e) => setDifficulty(+e.target.value)}
             />
             <div>
               <label htmlFor="difficulty-setting">Difficulty:</label>
-              <strong>{["Normal", "Hard", "Ultra Hard"][difficulty]}</strong>
+              &nbsp;
+              <strong>
+                {["Baby", "Easy", "Normal", "Hard", "Ultra Hard"][difficulty]}
+              </strong>
               <div
                 style={{
                   fontSize: 14,
@@ -147,6 +172,8 @@ function App() {
               >
                 {
                   [
+                    `Guesses don't even need to be real words.`,
+                    `Guesses must be valid dictionary words. Easy mode.`,
                     `Guesses must be valid dictionary words.`,
                     `Wordle's "Hard Mode". Green letters must stay fixed, and yellow letters must be reused.`,
                     `An even stricter Hard Mode. Yellow letters must move away from where they were clued, and gray clues must be obeyed.`,

src/Game.tsx

@@ -29,12 +29,14 @@ interface GameProps {
   keyboardLayout: string;
 }
 
+const easyTargets = targetList.slice(0, targetList.indexOf("revel") + 1); // Slightly more frequent word on the list
 const targets = targetList.slice(0, targetList.indexOf("murky") + 1); // Words no rarer than this one
 const minWordLength = 4;
 const maxWordLength = 11;
 
-function randomTarget(wordLength: number): string {
-  const eligible = targets.filter((word) => word.length === wordLength);
+function randomTarget(wordLength: number, difficulty: number): string {
+  const target = difficulty < Difficulty.Normal ? easyTargets : targets;
+  const eligible = target.filter((word) => word.length === wordLength);
   let candidate: string;
   do {
     candidate = pick(eligible);
@@ -79,7 +81,7 @@ function Game(props: GameProps) {
   );
   const [target, setTarget] = useState(() => {
     resetRng();
-    return challenge || randomTarget(wordLength);
+    return challenge || randomTarget(wordLength, props.difficulty);
   });
   const [gameNumber, setGameNumber] = useState(1);
   const tableRef = useRef<HTMLTableElement>(null);
@@ -92,7 +94,7 @@ function Game(props: GameProps) {
     const newWordLength =
       wordLength < minWordLength || wordLength > maxWordLength ? 5 : wordLength;
     setWordLength(newWordLength);
-    setTarget(randomTarget(newWordLength));
+    setTarget(randomTarget(newWordLength, props.difficulty));
     setGuesses([]);
     setCurrentGuess("");
     setHint("");
@@ -145,7 +147,8 @@ function Game(props: GameProps) {
         setHint("Too short");
         return;
       }
-      if (!dictionary.includes(currentGuess)) {
+
+      if (props.difficulty !== Difficulty.Baby && !dictionary.includes(currentGuess)) {
         setHint("Not a valid word");
         return;
       }
@@ -246,7 +249,7 @@ function Game(props: GameProps) {
             setGameState(GameState.Playing);
             setGuesses([]);
             setCurrentGuess("");
-            setTarget(randomTarget(length));
+            setTarget(randomTarget(length, props.difficulty));
             setWordLength(length);
             setHint(`${length} letters`);
           }}

src/clue.ts

@@ -63,7 +63,7 @@ export function violation(
   clues: CluedLetter[],
   guess: string
 ): string | undefined {
-  if (difficulty === Difficulty.Normal) {
+  if (difficulty <= Difficulty.Normal) {
     return undefined;
   }
   const ultra = difficulty === Difficulty.UltraHard;

src/util.ts

@@ -1,6 +1,8 @@
 import dictionary from "./dictionary.json";
 
 export enum Difficulty {
+  Baby,
+  Easy,
   Normal,
   Hard,
   UltraHard,