Color blind mode (#66)

src/About.tsx

@@ -2,7 +2,11 @@ import { Clue } from "./clue";
 import { Row, RowState } from "./Row";
 import { maxGuesses } from "./util";
 
-export function About() {
+interface aboutProps {
+  color: boolean;
+}
+
+export function About(props: aboutProps) {
   return (
     <div className="App-about">
       <p>
@@ -28,19 +32,21 @@ export function About() {
           { 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="green-bg">R</b> is correct! The third letter is{" "}
-        <b className="green-bg">R</b>
+        <b className={props.color ? "orange-bg" : "green-bg"}>R</b> is correct!
+        The third letter is{" "}
+        <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="yellow-bg">D</b> occurs <em>elsewhere</em> in the target
-        word.
+        <b className={props.color ? "blue-bg" : "yellow-bg"}>D</b> occurs{" "}
+        <em>elsewhere</em> in the target word.
         <br />
         <strong>(Perhaps more than once. 🤔)</strong>
       </p>
@@ -58,6 +64,7 @@ export function About() {
           { clue: Clue.Absent, letter: "k" },
         ]}
         annotation={"So close!"}
+        color={props.color}
       />
       <Row
         rowState={RowState.LockedIn}
@@ -69,6 +76,7 @@ export function About() {
           { clue: Clue.Correct, letter: "t" },
         ]}
         annotation={"Got it!"}
+        color={props.color}
       />
       <p>
         Report issues{" "}
@@ -78,7 +86,8 @@ export function About() {
       <p>
         This game will be free and ad-free forever,
         <br />
-        but you can <a href="https://ko-fi.com/chordbug">buy me a coffee</a> if you'd like.
+        but you can <a href="https://ko-fi.com/chordbug">buy me a coffee</a> if
+        you'd like.
       </p>
     </div>
   );

src/App.css

@@ -26,6 +26,19 @@ body {
   text-transform: uppercase;
   font-weight: bold;
 }
+.Row-letter-color {
+  margin: 2px;
+  border: 2px solid rgba(128, 128, 128, 0.8);
+  flex: 1;
+  max-width: 40px;
+  height: 40px;
+  font-size: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  font-weight: bold;
+}
 
 .Row-annotation {
   margin-inline-start: 16px;
@@ -108,18 +121,35 @@ 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);
@@ -180,10 +210,16 @@ 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;
@@ -217,7 +253,7 @@ a:active {
   height: 18px;
 }
 
-.Settings-setting input[type=range] {
+.Settings-setting input[type="range"] {
   width: 50px;
   height: 18px;
 }

src/App.tsx

@@ -33,6 +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 [difficulty, setDifficulty] = useSetting<number>("difficulty", 0);
 
   useEffect(() => {
@@ -98,7 +99,7 @@ function App() {
           {seed ? "Random" : "Today's"}
         </a>
       </div>
-      {page === "about" && <About />}
+      {page === "about" && <About color={color} />}
       {page === "settings" && (
         <div className="Settings">
           <div className="Settings-setting">
@@ -110,6 +111,18 @@ function App() {
             />
             <label htmlFor="dark-setting">Dark theme</label>
           </div>
+          <div className="Settings-setting">
+            <input
+              id="color-setting"
+              type="checkbox"
+              checked={color}
+              onChange={() => {
+                console.log("set color to ", !color);
+                setColor((x: boolean) => !x);
+              }}
+            />
+            <label htmlFor="color-setting">Color Blind Mode</label>
+          </div>
           <div className="Settings-setting">
             <input
               id="difficulty-setting"
@@ -147,6 +160,7 @@ function App() {
         maxGuesses={maxGuesses}
         hidden={page !== "game"}
         difficulty={difficulty}
+        color={color}
       />
     </div>
   );

src/Game.tsx

@@ -25,6 +25,7 @@ interface GameProps {
   maxGuesses: number;
   hidden: boolean;
   difficulty: Difficulty;
+  color: boolean;
 }
 
 const targets = targetList.slice(0, targetList.indexOf("murky") + 1); // Words no rarer than this one
@@ -219,6 +220,7 @@ function Game(props: GameProps) {
               : RowState.Pending
           }
           cluedLetters={cluedLetters}
+          color={props.color}
         />
       );
     });

src/Row.tsx

@@ -11,6 +11,7 @@ interface RowProps {
   wordLength: number;
   cluedLetters: CluedLetter[];
   annotation?: string;
+  color: boolean;
 }
 
 export function Row(props: RowProps) {
@@ -20,7 +21,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 = "Row-letter";
+      let letterClass = props.color ? "Row-letter-color" : "Row-letter";
       if (isLockedIn && clue !== undefined) {
         letterClass += " " + clueClass(clue);
       }