Colorblind mode fixes

src/About.tsx

@@ -2,11 +2,7 @@ import { Clue } from "./clue";
 import { Row, RowState } from "./Row";
 import { maxGuesses } from "./util";
 
-interface aboutProps {
+export function About() {
-  color: boolean;
-}
-
-export function About(props: aboutProps) {
   return (
     <div className="App-about">
       <p>
@@ -32,21 +28,19 @@ export function About(props: aboutProps) {
           { clue: Clue.Correct, letter: "r" },
           { clue: Clue.Elsewhere, letter: "d" },
         ]}
-        color={props.color}
       />
       <p>
         <b>W</b> and <b>O</b> aren't in the target word at all.
       </p>
       <p>
-        <b className={props.color ? "orange-bg" : "green-bg"}>R</b> is correct!
+        <b className={"green-bg"}>R</b> is correct! The third letter is{" "}
-        The third letter is{" "}
+        <b className={"green-bg"}>R</b>
-        <b className={props.color ? "orange-bg" : "green-bg"}>R</b>
         .<br />
         <strong>(There may still be a second R in the word.)</strong>
       </p>
       <p>
-        <b className={props.color ? "blue-bg" : "yellow-bg"}>D</b> occurs{" "}
+        <b className={"yellow-bg"}>D</b> occurs <em>elsewhere</em> in the target
-        <em>elsewhere</em> in the target word.
+        word.
         <br />
         <strong>(Perhaps more than once. 🤔)</strong>
       </p>
@@ -64,7 +58,6 @@ export function About(props: aboutProps) {
           { clue: Clue.Absent, letter: "k" },
         ]}
         annotation={"So close!"}
-        color={props.color}
       />
       <Row
         rowState={RowState.LockedIn}
@@ -76,7 +69,6 @@ export function About(props: aboutProps) {
           { clue: Clue.Correct, letter: "t" },
         ]}
         annotation={"Got it!"}
-        color={props.color}
       />
       <p>
         Report issues{" "}

src/App.css

@@ -121,35 +121,18 @@ table.Game-rows > tbody {
   outline: none;
 }
 
-.Row-letter-color.letter-correct {
-  border: 2px solid rgba(0, 0, 0, 0.3);
-  background-color: #f5793a;
-  color: white !important;
-}
-
 .letter-correct {
   border: 2px solid rgba(0, 0, 0, 0.3);
   background-color: rgb(87, 172, 120);
   color: white !important;
 }
 
-.Row-letter-color.letter-elsewhere {
-  border: 2px dotted rgba(0, 0, 0, 0.3);
-  background-color: #85c0f9;
-  color: white !important;
-}
 .letter-elsewhere {
   border: 2px dotted rgba(0, 0, 0, 0.3);
   background-color: #e9c601;
   color: white !important;
 }
 
-.Row-letter-color.letter-absent {
-  border: 2px solid transparent;
-  background-color: rgb(162, 162, 162);
-  color: white !important;
-}
-
 .letter-absent {
   border: 2px solid transparent;
   background-color: rgb(162, 162, 162);
@@ -210,16 +193,10 @@ a:active {
 .App-about b.green-bg {
   background-color: rgb(87, 172, 120);
 }
-.App-about b.orange-bg {
-  background-color: #f5793a;
-}
 
 .App-about b.yellow-bg {
   background-color: #e9c601;
 }
-.App-about b.blue-bg {
-  background-color: #85c0f9;
-}
 
 .Game-seed-info {
   opacity: 0.5;
@@ -276,3 +253,13 @@ a:active {
 .top-right a + a {
   margin-inline-start: 8px;
 }
+
+.App-container.color-blind .letter-correct,
+.App-container.color-blind .App-about b.green-bg {
+  background-color: #f5793a;
+}
+
+.App-container.color-blind .letter-elsewhere,
+.App-container.color-blind .App-about b.yellow-bg {
+  background-color: #85c0f9;
+}

src/App.tsx

@@ -33,7 +33,7 @@ function App() {
     window.matchMedia &&
     window.matchMedia("(prefers-color-scheme: dark)").matches;
   const [dark, setDark] = useSetting<boolean>("dark", prefersDark);
-  const [color, setColor] = useSetting<boolean>("color", false);
+  const [colorBlind, setColorBlind] = useSetting<boolean>("colorblind", false);
   const [difficulty, setDifficulty] = useSetting<number>("difficulty", 0);
 
   useEffect(() => {
@@ -57,7 +57,7 @@ function App() {
   );
 
   return (
-    <div className="App-container">
+    <div className={"App-container" + (colorBlind ? " color-blind" : "")}>
       <h1>
         <span
           style={{
@@ -99,7 +99,7 @@ function App() {
           {seed ? "Random" : "Today's"}
         </a>
       </div>
-      {page === "about" && <About color={color} />}
+      {page === "about" && <About />}
       {page === "settings" && (
         <div className="Settings">
           <div className="Settings-setting">
@@ -113,15 +113,12 @@ function App() {
           </div>
           <div className="Settings-setting">
             <input
-              id="color-setting"
+              id="colorblind-setting"
               type="checkbox"
-              checked={color}
+              checked={colorBlind}
-              onChange={() => {
+              onChange={() => setColorBlind((x: boolean) => !x)}
-                console.log("set color to ", !color);
-                setColor((x: boolean) => !x);
-              }}
             />
-            <label htmlFor="color-setting">Color Blind Mode</label>
+            <label htmlFor="colorblind-setting">Color blind mode</label>
           </div>
           <div className="Settings-setting">
             <input
@@ -160,7 +157,7 @@ function App() {
         maxGuesses={maxGuesses}
         hidden={page !== "game"}
         difficulty={difficulty}
-        color={color}
+        colorBlind={colorBlind}
       />
     </div>
   );

src/Game.tsx

@@ -25,7 +25,7 @@ interface GameProps {
   maxGuesses: number;
   hidden: boolean;
   difficulty: Difficulty;
-  color: boolean;
+  colorBlind: boolean;
 }
 
 const targets = targetList.slice(0, targetList.indexOf("murky") + 1); // Words no rarer than this one
@@ -220,7 +220,6 @@ function Game(props: GameProps) {
               : RowState.Pending
           }
           cluedLetters={cluedLetters}
-          color={props.color}
         />
       );
     });
@@ -297,13 +296,16 @@ function Game(props: GameProps) {
           </button>{" "}
           <button
             onClick={() => {
+              const emoji = props.colorBlind
+                ? ["⬛", "🟦", "🟧"]
+                : ["⬛", "🟨", "🟩"];
               share(
                 getChallengeUrl(target),
                 "Result copied to clipboard!",
                 guesses
                   .map((guess) =>
                     clue(guess, target)
-                      .map((c) => ["⬛", "🟨", "🟩"][c.clue ?? 0])
+                      .map((c) => emoji[c.clue ?? 0])
                       .join("")
                   )
                   .join("\n")

src/Row.tsx

@@ -11,7 +11,6 @@ interface RowProps {
   wordLength: number;
   cluedLetters: CluedLetter[];
   annotation?: string;
-  color: boolean;
 }
 
 export function Row(props: RowProps) {
@@ -21,7 +20,7 @@ export function Row(props: RowProps) {
     .concat(Array(props.wordLength).fill({ clue: Clue.Absent, letter: "" }))
     .slice(0, props.wordLength)
     .map(({ clue, letter }, i) => {
-      let letterClass = props.color ? "Row-letter-color" : "Row-letter";
+      let letterClass = "Row-letter";
       if (isLockedIn && clue !== undefined) {
         letterClass += " " + clueClass(clue);
       }