diff --git a/src/App.css b/src/App.css index 294a05a..676f394 100644 --- a/src/App.css +++ b/src/App.css @@ -142,6 +142,7 @@ table.Game-rows > tbody { body.dark { background-color: #404040; color: #e0e0e0; + color-scheme: dark; } body.dark .Game-keyboard-button { @@ -247,11 +248,15 @@ a:active { } .emoji-link { - font-size: 150%; + font-size: 24px; text-decoration: none; + background: none; + border: none; + padding: 0; + cursor: pointer; } -.top-right a + a { +.top-right > * + * { margin-inline-start: 8px; } diff --git a/src/App.tsx b/src/App.tsx index 2633782..4c8e667 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import "./App.css"; -import { maxGuesses, seed } from "./util"; +import { maxGuesses, seed, urlParam } from "./util"; import Game from "./Game"; import { useEffect, useState } from "react"; import { About } from "./About"; @@ -26,6 +26,8 @@ function useSetting( return [current, setSetting]; } +const todaySeed = new Date().toISOString().replace(/-/g, "").slice(0, 8); + function App() { type Page = "game" | "about" | "settings"; const [page, setPage] = useState("game"); @@ -43,6 +45,9 @@ function App() { useEffect(() => { document.body.className = dark ? "dark" : ""; + if (urlParam("today") !== null || urlParam("todas") !== null) { + document.location = "?seed=" + todaySeed; + } setTimeout(() => { // Avoid transition on page load document.body.style.transition = "0.3s background-color ease-out"; @@ -50,15 +55,14 @@ function App() { }, [dark]); const link = (emoji: string, label: string, page: Page) => ( - setPage(page)} title={label} aria-label={label} > {emoji} - + ); return ( @@ -92,15 +96,7 @@ function App() { visibility: page === "game" ? "visible" : "hidden", }} > - - (document.location = seed - ? "?" - : "?seed=" + - new Date().toISOString().replace(/-/g, "").slice(0, 8)) - } - > +