No href="#" / redirect ?today to today's game / color-scheme: dark

lynn · Feb 1, 2022 · 135c0a8 · 135c0a8
1 parent 05ff73d
commit 135c0a8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git 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
@@ -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<T>(
   return [current, setSetting];
 }
 
+const todaySeed = new Date().toISOString().replace(/-/g, "").slice(0, 8);
+
 function App() {
   type Page = "game" | "about" | "settings";
   const [page, setPage] = useState<Page>("game");
@@ -43,22 +45,24 @@ 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";
     }, 1);
   }, [dark]);
 
   const link = (emoji: string, label: string, page: Page) => (
-    <a
+    <button
       className="emoji-link"
-      href="#"
       onClick={() => setPage(page)}
       title={label}
       aria-label={label}
     >
       {emoji}
-    </a>
+    </button>
   );
 
   return (
@@ -92,15 +96,7 @@ function App() {
           visibility: page === "game" ? "visible" : "hidden",
         }}
       >
-        <a
-          href="#"
-          onClick={() =>
-            (document.location = seed
-              ? "?"
-              : "?seed=" +
-                new Date().toISOString().replace(/-/g, "").slice(0, 8))
-          }
-        >
+        <a href={seed ? "?random" : "?seed=" + todaySeed}>
           {seed ? "Random" : "Today's"}
         </a>
       </div>