kopia lustrzana https://github.com/lynn/hello-wordl
Colorblind mode fixes
rodzic
51453990bf
commit
4a07e05759
|
@ -2,11 +2,7 @@ import { Clue } from "./clue";
|
|||
import { Row, RowState } from "./Row";
|
||||
import { maxGuesses } from "./util";
|
||||
|
||||
interface aboutProps {
|
||||
color: boolean;
|
||||
}
|
||||
|
||||
export function About(props: aboutProps) {
|
||||
export function About() {
|
||||
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!
|
||||
The third letter is{" "}
|
||||
<b className={props.color ? "orange-bg" : "green-bg"}>R</b>
|
||||
<b className={"green-bg"}>R</b> is correct! The third letter is{" "}
|
||||
<b className={"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{" "}
|
||||
<em>elsewhere</em> in the target word.
|
||||
<b className={"yellow-bg"}>D</b> occurs <em>elsewhere</em> in the target
|
||||
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{" "}
|
||||
|
|
33
src/App.css
33
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;
|
||||
}
|
||||
|
|
19
src/App.tsx
19
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}
|
||||
onChange={() => {
|
||||
console.log("set color to ", !color);
|
||||
setColor((x: boolean) => !x);
|
||||
}}
|
||||
checked={colorBlind}
|
||||
onChange={() => setColorBlind((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>
|
||||
);
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue