diff --git a/src/App.css b/src/App.css index df09300..bae7511 100644 --- a/src/App.css +++ b/src/App.css @@ -209,7 +209,7 @@ a:active { .Settings-setting { margin: 8px; display: flex; - align-items: center; + align-items: top; } .Settings-setting input { @@ -217,6 +217,11 @@ a:active { height: 18px; } +.Settings-setting input[type=range] { + width: 50px; + height: 18px; +} + .Settings-setting label { margin-inline-start: 8px; } diff --git a/src/App.tsx b/src/App.tsx index b65ec78..5d57a38 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,12 +27,13 @@ function useSetting( } function App() { - const [page, setPage] = useState<"game" | "about" | "settings">("game"); + type Page = "game" | "about" | "settings"; + const [page, setPage] = useState("game"); const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; const [dark, setDark] = useSetting("dark", prefersDark); - const [hard, setHard] = useSetting("hard", false); + const [difficulty, setDifficulty] = useSetting("difficulty", 0); useEffect(() => { document.body.className = dark ? "dark" : ""; @@ -41,42 +42,42 @@ function App() { }, 1); }, [dark]); + const link = (emoji: string, label: string, page: Page) => ( + setPage(page)} + title={label} + aria-label={label} + > + {emoji} + + ); + return (

- hello wordl + 0 + ? { + color: "#e66", + textShadow: difficulty > 1 ? "0px 0px 5px #e66" : "none", + } + : {} + } + > + hell + + o wordl

{page !== "game" ? ( - setPage("game")} - title="Close" - aria-label="Close" - > - ❌ - + link("❌", "Close", "game") ) : ( <> - setPage("about")} - title="About" - aria-label="About" - > - ❓ - - setPage("settings")} - title="Settings" - aria-label="Settings" - > - ⚙️ - + {link("❓", "About", "about")} + {link("⚙️", "Settings", "settings")} )}
@@ -114,16 +115,42 @@ function App() {
setHard((x: boolean) => !x)} + id="difficulty-setting" + type="range" + min="0" + max="2" + value={difficulty} + onChange={(e) => setDifficulty(+e.target.value)} /> - +
+ +   + {["Normal", "Hard", "Ultra Hard"][difficulty]} +
+ { + [ + `No restrictions on guesses.`, + `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, and gray letters can't be reused.`, + ][difficulty] + } +
+
)} -