Add Impossible Mode (Issue 84)

src/App.css

@@ -139,6 +139,12 @@ table.Game-rows > tbody {
   color: white !important;
 }
 
+.letter-red {
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  background-color: #ff0000;
+  color: white !important;
+}
+
 body.dark {
   background-color: #404040;
   color: #e0e0e0;

src/App.tsx

@@ -72,6 +72,7 @@ function App() {
           style={{
             color: difficulty > 0 ? "#e66" : "inherit",
             fontStyle: difficulty > 1 ? "italic" : "inherit",
+            fontStyle: difficulty > 2 ? "bold" : "inherit", // I have no idea what this syntax means. I'm just mimicing and hoping for the best
           }}
         >
           hell
@@ -126,13 +127,13 @@ function App() {
               id="difficulty-setting"
               type="range"
               min="0"
-              max="2"
+              max="3"
               value={difficulty}
               onChange={(e) => setDifficulty(+e.target.value)}
             />
             <div>
               <label htmlFor="difficulty-setting">Difficulty:</label>
-              <strong>{["Normal", "Hard", "Ultra Hard"][difficulty]}</strong>
+              <strong>{["Normal", "Hard", "Ultra Hard", "IMPOSSIBLE"][difficulty]}</strong>
               <div
                 style={{
                   fontSize: 14,
@@ -146,6 +147,7 @@ function App() {
                     `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.`,
+                    `By far the hardest mode. You are only given a full row of red if you guess incorrectly, with absolutely no feedback. There's a reason it's called Impossible.`
                   ][difficulty]
                 }
               </div>

src/Game.tsx

@@ -337,8 +337,8 @@ function Game(props: GameProps) {
           <button
             onClick={() => {
               const emoji = props.colorBlind
-                ? ["⬛", "🟦", "🟧"]
-                : ["⬛", "🟨", "🟩"];
+                ? ["⬛", "🟦", "🟧", "🟧"]
+                : ["⬛", "🟨", "🟩", "🟧"];
               share(
                 "Result copied to clipboard!",
                 guesses

src/clue.ts

@@ -1,9 +1,11 @@
 import { Difficulty, englishNumbers, ordinal } from "./util";
 
+const impossible = difficulty === Difficulty.Impossible;
 export enum Clue {
   Absent,
   Elsewhere,
   Correct,
+  Red,
 }
 
 export interface CluedLetter {
@@ -20,6 +22,9 @@ export function clue(word: string, target: string): CluedLetter[] {
   });
   return word.split("").map((letter, i) => {
     let j: number;
+    if (impossible && word !== target) { // Make sure the guess doesn't match the target word before filling with red
+      return { clue: Clue.Red, letter };
+    }
     if (target[i] === letter) {
       return { clue: Clue.Correct, letter };
     } else if ((j = elusive.indexOf(letter)) > -1) {
@@ -37,6 +42,8 @@ export function clueClass(clue: Clue): string {
     return "letter-absent";
   } else if (clue === Clue.Elsewhere) {
     return "letter-elsewhere";
+  } else if (clue === Clue.Red) {
+    return "letter-red";
   } else {
     return "letter-correct";
   }
@@ -58,6 +65,7 @@ export function describeClue(clue: CluedLetter[]): string {
     .join(", ");
 }
 
+// Impossible difficulty has no need for restricting usable guesses
 export function violation(
   difficulty: Difficulty,
   clues: CluedLetter[],

src/util.ts

@@ -4,6 +4,7 @@ export enum Difficulty {
   Normal,
   Hard,
   UltraHard,
+  Impossible,
 }
 
 export const maxGuesses = 6;